flex.scoutant.org


 

2008/12/30

SharedObject to persist your Flash app state - A Design canvas sample

You need JavaScript enabled!

Move some figures arround, press Save, Close app, Re-open and notice how figure location is persisted... View source code [1]

Shared Object

Une application Flash a accès au file-system de façon très restreinte, via la technique des SharedObjet. A l'image des Cookies pour les applications web.

Dans le cas de l'application Flash, on dispose d'un espace de stockage, in fine, orienté objet : tout objet (ou grappe d'objet) AS3 peut être sérialisé en AMF3 pour être stocké sous forme de SharedObject. Pour que la dé-sérialisation opère correctement il convient d'enregistrer les classes, typiquement avec le meta-tag RemoteClass.

package model {
	[RemoteClass( alias="model.ImageVO")]
	public class ImageVO {
		public var source:String;
		public var x:Number;
		public var y:Number;
        }

Write

Ensuite, comme le monte la doc [2], il convient d'obtenir un SharedObject pour une nom donné, de lui adjoindre des données, et de réaliser l'écriture avec la méthode flush().

var mySO:SharedObject = SharedObject.getLocal("chessboard");
mySO.data['figure'] = new ImageVO('King.gif');
mySO.flush();

Read

Pour la lecture, c'est tout a fait similaire, sauf que l'on opèrere un down-cast pour promouvoir le typage fort.

var mySO:SharedObject = SharedObject.getLocal("chessboard");
var figure:ImageVO = mySO.data['figure'] as ImageVO;

Serializing UIComponents?

Notre exemple d'échiquier, est un simple Canvas qui contient des Images. L'exemple illustre également le déplacement d'image via Drag & Drop, explicité dans le post [3].

L'approche naïve, consiste dans un premier temps à tenter de sérialiser le Canvas ou les images. Cela ne fonctionnera pas. Un UIComponent comporte des centaines de propriétés et en générale on veut juste stocker quelques propriétés : dans notre exemple le positionnement x et y et la source pour une Image...

D'où la classe ImageVO, vue ci-dessus. C'est cette classe qui sera persistée. Il s'agit alors de prévoir l'instantiation d'une mx.controls.Image à partir de notre ImageVO. Plusieurs approches sont possibles ; on peut prévoir une sous-classe de Image qui ajoute simplement les accesseurs à la ValueObject correspondante :

public class ImageUI extends Image {
		public function get vo() : ImageVO {
			return new ImageVO( source, x, y, width, height);
		}
		public function set vo(ref:ImageVO):void {
			source = (ref!=null ? ref.source : null) ;
			width = ( ref!=null ? ref.width : 0);
			height = ( ref!=null ? ref.height : 0);
			x = ( ref!= null ? ref.x : 0);
			y = ( ref!= null ? ref.y : 0);
		}
       }

Pour bien faire, on aimerait bien ajouter un constructeur d'Image sur la base de son VO correspondant. Mais l'AS3 ne permet pas d'avoir plusieurs constructeurs, on peut en alternative opter pour une méthode statique de fabrication. Par exemple :

public static function newImage( vo:ImageVO, mouseDownCallback:Function=null) : ImageUI {
			var ref:ImageUI = new ImageUI();
			ref.vo = vo;
			return ref;
		}

Muni de cette classe l'instantiation d'un UIComponent à partir du SharedObjet correspondant est très simple. Reste simplement à voir comment se présente la persistance pour une collection d'instance.

Array of data

Comme on a affaire à une vrai sérialisation AMF3, on peut aussi sérialiser directement un tableau d'objets. Par exemple :

private function doSave():void {
            	mySO.data['figures'] = board.getChildren().map( function( item:ImageUI, index:int, arr:Array):ImageVO { 
                     return item.so
                 } );
            	mySO.flush();
            }

 

2008/12/13

Adobe MAX 2008 Milan - FlexBuilder 4 Early Access

Adobe Max 2008

L'Adobe MAX Europe 2008, à Milan, à été l'occasion de nombre d'annonces et de démonstrations.

Ci-dessous quelques-unes d'entre-elles. Avec, à la fin, un focus sur les nombreuses nouveautés de l'environnement de développement FlexBuilder 4.

flash_catalyst Flash Catalyst est un outil de design RIA anciennement connu sous le nom de projet Thermo.

Flash Catalyst est pour l'instant uniquement disponible sur Mac avec une version pour Windows à venir prochainement . Le but de Flash Catalyst est de de faire le pont entre les designers (Creative Suite, PhotoShop) et les développeurs (FlexBuilder).

Flash Catalyst va de paire avec la nouvelle version du Sdk Flex. Flex 4, avec sa nouvelle architecture Gumbo, introduit une nouvelle approche pour skinner les composants Flex, via un fichier xml : c'est le format FXG.

Ce design spécifié en FXG peut ainsi être intégré au projet Flex. Et est consolidé en parallèle au traitements plus métier de l'application RIA

adobe_flash_logo.gif FlashPlayer 10. La nouvelle version du runtime est sortie en octobre. Avec son lots d'améliorations [1].

Je ne mentionnerai ici que l'ajout qu'est le nouveau protocole : RTMFP [2]. Ce protocole permet de faire des communications pear-to-pear directement entre deux instances de FleshPlayer10, sans passage par le moindre serveur. Notamment du streaming video avec une grande qualité video comme audio (son HD) et une faible latence.

Pour mémoire, le protocole mis en avant jusqu'ici pour le streaming video (depuis un serveur) est le RTMP, basé sur un transport TCP. Le RTMFP, lui est basé sur un transport UDP, très adapté pour le p2p.

Plus d'informations, à travers les annonces [3], [4]

Open Screen Project [5] L'OpenScreenProject est une initiative visant l'implémentation de FlashPlayer10 sur les petits petits terminaux tels les téléphones mobiles. Malheureusement, il n'y a pas eu de grande annonce lors de cet Adobe MAX à ce sujet. C'est encore une phase projet et il faudra attendre 2010 pour avoir un nombre conséquent de terminaux équiper de FlashPlayer10.

Fx FlexBuilder 4 Early Access apporte de très nombreuses améliorations.

Il est vrai que la version 3 présente beaucoup de manques au vu de ce qu'offre Eclipse pour le dévelopement en langage Java. Ainsi FlexBuilder 4 comble ce décallage.

Heidi williams, [6] et Tim Buntel [7] nous ont présenté les principaux ajouts.

FB-1

FB-3

  • Package explorer

On a maintenant un vrai explorateur de package. Avec la possibilité de n'afficher que les packages présentant des fichiers. Pour chaque classe, on peut voir les propriétés et les méthodes la composants. On peut cliquer sur une méthode pour y positionner le curseur dans l'éditeur de texte...

Comme pour l'explorateur en Java, on une croix rouge qui apparait si un fichier contient une erreur de compilation ; cette croix est également présente dans l'intégralité de la chaîne de packages conteneur.

  • Reference librairies

Pour chaque librairie référencée par le projet, on peut "ouvrir" la librairie et faire apparaître les classes la composants et ensuite ouvrir celles-ci pour faire apparaître les propriétés et les méthodes. Si on a pris soin d'associer à la librairie le chemin d'accès au code source, alors un clic amène au code source... navigation dans les .swc et si source attaché "vie source"

  • File templates

Avec FlexBuilder 4 on peut customiser des modèles pour la création de nouveaux fichiers. Des modèles différent en fonction du type ciblé : Css, .mxml, interface .as, classe .as...

  • Getter and Setter generation

FB-6 FB-8

Très pratique, la possibilité, enfin, de pouvoir générer les accesseurs à partir des propriétés. Le comportement par défaut est de rendre privée une propriété publique et de générer les deux accesseurs correspondants. En mettant en oeuvre les mots clés get et set du langage AS3.

  • Rename refactoring

La fonctionnalité implémentée dans FlexBuilder 3 est plus que minimaliste. Enfin avec la version 4, quand on change de nom ou quand on déplace de package une classe, toutes les références sont correctement mise à jour. C'était le minimum, on aura quand le même attendu longtemps!

  • Debbuging enhencements

- Conditional breakpoint : quand on a un point d'arrêt dans une boucle et on veut voir ce qui se passe à la cinquantième boucle seulement...

- Run to line

- Expression valiation enhanced

  • FlexUnit integration

FB-10 La aussi, vous me direz, c'était pas trop tôt. L'intégration, enfin dans l'IDE, du principal framework de tests unitaires : FlexUnit. Ouvrant la voie au test-driven development application Flex.

On a ainsi, dans un premier temp, un wizard New > FlexUnit > TestCase, qui permet de préciser quelle est la classe ciblée par le test. Ensuite on peut invoquer unitairement de test. Sans avoir à produire explicitement une application Flash mettant en eouvre un TestRunner et une TestSuite...

  • Network Monitor

Si votre application consomme des services web SOAP, Xml/Http, ou AMF3/Http, c'est toujours intéressant de pouvoir consulter de près les requêtes et les réponses.

Avec FlexBuilder 4, plus besoin d'utiliser un Sniffer de requête -tel Charles-, Il suffit d'ouvrir le Network Monitor. Ce dernier sait afficher dans le détail les réponses, y compris pour les réponse en AMF3...

Notes

[1] http://labs.adobe.com/technologies/flashplayer10

[2] Real Time Media Flow Protocol http://en.wikipedia.org/wiki/Real_Time_Media_Flow_Protocol

[3] Adobe Makes P2P Flash Video Available to Developers http://newteevee.com/2008/12/04/adobe-makes-p2p-flash-video-available-to-developers/

[4] Try RTMFP and Client-to-Client Direct Streaming, With FP10 and Cocomo, Today! http://blogs.adobe.com/collabmethods/2008/12/try_rtmfp_and_clienttoclient_d.html

[5] Open Screen Project http://www.openscreenproject.org/

[6] Heidi williams, Flex Builder, project Manager

[7] Tim Buntel , Senior Product Manager http://www.buntel.com/blog/index.cfm/2008/11/21/Max-wrapup-not-really


 

2008/11/22

Closures AS3 a la Groovy with Array.forEach() and Array.map() support

Dans nombre de langage de programmation fonctionnel, il est courant de manipuler des collections et d'appliquer des closures aux membres de la collection.

Un exemple avec Groovy [1] , un langage ciblant la JVM Java :

[ 1, 2, 3, 4, 5 ].each { x -> println x*x }
[ 1, 2, 3, 4, 5 ].collect { x -> x*x }

La dernière ligne produit très naturellement la collection :

[1, 4, 9, 16, 25].

En AS3 on a un support équivalent. Quoi qu'un peut moins elliptique.

Array.forEach() [2]

[1, 2, 3, 4, 5].forEach( traceSquare);
private function traceSquare( x:*, index:int, arr:Array):void {
  trace( "" + x*x);
}

Ceci produit vient la même sortie que la ligne groovy avec each{}.

Array.map() [3]

[1, 2, 3, 4, 5].map( square);
private function square( x:*, index:int, arr:Array): * {
  return x*x;
}

Quand le traitement est court comme ci-dessus, on peut aussi opter pour une définition inline, comme suit :

[1, 2, 3, 4, 5].map( function( x:*, index:int, arr:Array):* { return x*x } );
}

Solution de un-marshalling JSON avec closure Array.map()

Nombre de web services offrent un format Json. Le service de feeds de delicious en est un exemple : http://feeds.delicious.com/v2/json/tags/coutant .

{ "flex": 120, "blazeds": 8, . . .}

Il peut être intéressant de convertir cette réponse Json directement en un array d'objets AS3 représentant un tag (avec son nombre d'occurrence comme propriété). Ceci peut être fait simplement :

tagsAsJson.split(",").map( function( item:*, index:int, arr:Array):Tag { return new Tag(item) } );

 

2008/11/ 8

DeliSphere, a Flash 3D-animation tagcloud for your Delicious bookmarks

Visit the demo page to see the animated tagcloud for your delicious.com [1] account.

You can view the source and if you want to insert the DeliSphere tagcloud in your site, you can download the delisphere distribution.

The Delesphere tagcloud is an adaptation of the famous WordPress [2] Cumulus plugin.

The WordPress Cumulus plugin

WP-Cumulus [3] is a WordPress plugin providing a Flash 3D animation displaying the tags related to the WordPress-powered blog. You can visit Roy Tanck's site at http://www.roytanck.com.

If you are using DotClear-powered blog, you can use the TagFlash [4] adaptation.

WP-Cumulus is a WordPress plugin, hence a PHP script that will request the MySql database for tags hosted by the blog. A click on a tag will then open up the posts related to the tag.

Delisphere architecture - Delicious API

DeliSphere Flash animation uses Delicious web services to get the tag cloud. Consider for example the bookmarks for delicious account : http://delicious.com/coutant.

Delicious provides an API [5]. But to use those web services you need to be authenticated with targeted delicous account.

When you are just reeding public data like bookmarks or tags, the smartest approach is to use the feeds [6] services. Choosing RSS ot Json format. Json is just fine, for example the tag feed for above account is http://feeds.delicious.com/v2/json/tags/coutant .

{ "flex":135, "blazeds":7, "dnd": 8, "jee5":23 ... }
Delisphere architecture - cross-domain policy

FlashPlayer cross domain policy will not enable a Flash application downloaded from domain A to be requesting services from an another domain B. Unless domain B is actually exposing a cross-domain friendly policy file.

Delicious.com is not exposing such a friendly policy file. But since V2, the feeds service does! Here is the file : http://feeds.delicious.com/crossdomain.xml .

<cross-domain-policy>
  <allow-access-from domain="*" />
</cross-domain-policy>

See post crossdomain.xml now on feeds.delicious.com [7]

That way the delisphere app can be downloaded from anywhere onto a brower and from that location be connecting to Delicious feeds web service.

Last step is the randomizing of spherical coordinates [8]

Notes

[1] Social bookmarking delicious.com

[2] WordPress http://wordpress.org

[3] WP-Cumulus : a WordPress plugin to display your site's tags in a flash movie, http://wordpress.org/extend/plugins/wp-cumulus/

[4] tagflash, Dotclear plugin, an adaptation to Dotclear of WP-Cumulus http://plugins.dotaddict.org/dc2/details/tagflash

[5] Delicious API V2 : http://delicious.com/help/api

[6] Delicious data feeds http://delicious.com/help/feeds

[7] crossdomain.xml now onf feeds.delicious.com http://tech.groups.yahoo.com/group/ydn-delicious/message/1999 ,

[8] Distribution points on a sphere, in ActionScript3, randomizing sperical coordinates : http://blog.massivecube.com/?p=9


- page 2 of 3 -