Si vous avez le player 10.3, vous pouvez l'essayer par vous même :

* Compression
o 7-Zip DEFLATE compression
o LZMA compression
o ABC merging
o Constant pool sorting
o DefineBitsLossless2 to DefineBitsJPEG3/4 conversion
o Bytecode merging
o Bytecode replacements
o Flowgraph optimizations
o Sliding-window optimizations
* Code analysis
o UML diagram generation
o Bytecode flowgraph generation
o Static check for [Abstract] methods
o Detailed ABC information
o Code coverage instrumentation
o Typesafe trace() removal keeping side-effects
o ASMify existing code
* Optimization
o Generic peephole optimizations
o InlineExpansion
o MacroExpansion
o InlineAssembler
o Access to Alchemy's fast memory operations
o Special transformations for Alchemy-generated code
o C inspired Structure type

Il faut savoir que les fichiers compilés nativement avec flash / flex (mxmlc) sont très mal retranscrits en bytecode. Et c'est grâce à Apparat que vous pourrez optimiser ce bytecode et accélérer vos applications.

Commençons par Installer Apparat

Télécharger Apparat . Nous utiliserons dans ce tuto, la dernière version parue "apparat-1.0.RC8-bin"

Télécharger ensuite Scala
La version compatible avec Apparat 1 RC8 est scala 2.8.0. Mais si vous avez une autre version d'Apparat, l'application vous donnera au moment de la compilation, la bonne version à télécharger.

Installer Apparat

Commençons par créer un répertoire C:/tools/ par exemple, oû nous rangerons Scala et Apparat.
Dé zippez ensuite scala vers C:/tools/scala/, et apparat vers C:/tools/apparat/
C'est terminer pour cette étape, passons maintenant à la création d'un projet.

Création d'un projet d'exemple.

Téléchargez le projet PerfTest. Dans ce projet nous allons utiliser ANT pour compiler une version AS3 et une version optimisée avec Apparat.

Nous allons utiliser Flex Builder mais vous pouvez également compiler sous FlashDevelop / FDT.

Commencez par créer un nouveau projet Flex, en pointant vers le projet téléchargé.

Le projet perf_test apparait dans vos projets :

Il se compose de deux fichiers .as . le premier mesure le temps d'exécution de plusieurs fonctions de la classe Math native, pour 10 000 000 itérations. Le second fait la même chose, mais utilise la classe FastMath d'apparat. La particularité de cette classe est que les fonctions seront inscrites inline dans votre projet, ce qui rendra son exécution vraiment plus rapide après la compilation avec Apparat.

Il faut maintenant configurer le chemin vers apparat. Ouvrez le fichier build.properties, et renseignez les trois premières variables uniquement, vers votre SDK flex, Scala et Apparat. Si vous ne savez pas ou est votre sdk FLEX, faites un tour dans dans le dossier d'installation de flex builder dans le dossier sdk/. Sinon vous pouvez le télécharger sur le site d'adobe.

Il ne nous reste plus qu'à compiler !
Click-droit sur build.xml => éxecuter => Compilation ANT

Si tout se passe bien, voila ce que vous devriez avoir :

Deux fichiers .swf ont été exporté dans /bin/, la version as3, et la version apparat optimisée. Lancez les pour comparer le temps d'exécution. La version apparat se lance instantanément, tandis que la version AS3 normale, met plusieurs secondes avant de s'ouvrir. Je vous laisse admirer les différences de temps d'exécution des fonctions ! On passe clairement de 900 ms à 90ms !

Un autre exemple est disponible sur le site de Joa ebert, pour comparer les différences de frame rate sur 80.000 particules :

http://blog.joa-ebert.com/2010/05/26/new-apparat-example/

Enjoy

Le seul répertoire qui possède normalement les permissions est " ApplicationStorageDirectory"

Donc parfois lire/écrire dans un répertoire comme "Application Directory" est interdit :

var file:File =  File.applicationDirectory.resolvePath( fileName );
file.moveAsync(); 

retourne une erreur de type SecurityError: fileWriteResource

La solution est d'utiliser new File( path);
exemple :

var file:File = new File( File.applicationDirectory.resolvePath( fileName).nativePath );

Heureusement que cette petite faille est là

1. Autant que possible, ne pas utiliser d'objets dynamiques comme les MovieClip, Object, et autres qui sont beaucoup plus long à parser pour Flash. Si vous utilisez des MovieClip provenant de la librairie, et n'utilisant pas leur timeline, utilisez une fonction qui récupère leur childs et les place dans un nouveau Sprite par exemple.
En ce qui concerne les objets, préférez un type le plus strict possible :

Déconseillé :

for (var i:int=0;i<n;i++)
{
     var v: Object = new Object;
     v.x = 1;
     v.y = 2;
     v.z = 3;
}

Conseillé:

 
class Vector3D
{
     public var x: Number;
     public var y: Number;
     public var z: Number;
}
for (;i<n;i++)
{
     var v: Vector3D = new Vector3D;
     v.x = 1;
     v.y = 2;
     v.z = 3;
}
 

De la même manière, si le type de contenu à stocker est toujours le même, ne pas utiliser Array, mais Vector.<type>()
Cette technique est 10 fois plus rapide.

Déconseillé :

var sum:Number = 0;
var len:int = array.length;
for(var i:int = 0; i < len; i++)
{
     sum += array[i];
};
 

Conseillé :

var sum:Number = 0;
var len:int = vector.length;
for(var i:int = 0; i < len; i++)
{
     sum += vector[i];
};

2. Toujours typer vos objets, même dans les boucles, ainsi le player n'aura pas à chercher quel est le type de contenu avant de l'utiliser :
Déconseillé :

for (;i<n;i++)
array[i].x = 2;

Conseillé :

for (;i<n;i++)
Vector3D(array[i]).x = 2;

3. Réutiliser les instances de classes plutôt que d'en créer de nouvelles. Cette optimisation permet de donner d'une part moins de travail au garbage collector mais également d'économiser beaucoup de temps perdu en créer ces instances. Cette technique est 300 fois plus rapide.

Déconseillé :

for (;i<n;i++)
p = new Point(i, i);

Conseillé :

for (;i<n;i++)
{
p.x = i;
p.y = i;
}

4. Ne pas utiliser de try catch autant que possible. Les calculs qui sont générés à l'intérieur sont très gourmands. Cette technique est 3000 fois plus rapide
Déconseillé :

var o: Sprite;
for (;i<n;i++)
{
try
{
     o.blendMode = BlendMode.ADD;
}
catch ( error: Error ) {}
}
 

Conseillé :

var o: Sprite;
for (;i<n;i++)
if ( o != null )
o.blendMode = BlendMode.ADD;

La suite au prochain post !

Drag’n’Drop sous SwfStudio

La syntaxe swfStudio est assez particulière mais bon il suffit de bien lire la documentation et vous verrez que tous les objets fonctionnent de la même façon. Voici notre vue DragDropView :

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%"
		   creationComplete="init()">
	<fx:Script>
		<![CDATA[
			import controller.ClientEvent;
			protected function init():void
			{
				ssEvents.addEventListener ({listener : this,recurse:"true",event : "App.onDragDrop",callback : 'onDragDrop'});
			}
			public function onDragDrop(ret_obj)
			{
				ssDebug.trace("onDragAndDrop")
				ssDebug.trace(ret_obj.success)
				var files_dropped:Array=new Array();
				if (ret_obj.success)
				{
					var files = ret_obj.result.split("\r");
 
					for (var i=0;i<files.length;i++)
					{
						var file=files[i];
						var tmpExt = file.substr((file.lastIndexOf(".")+1),file.length);
						var tmpName = file.substr((file.lastIndexOf('\\')+1),file.length);
						ssDebug.trace(file+" "+tmpName);
						// test if file type is allowed
						if (tmpExt == "mp3" || tmpExt == "jpg")
						{
							var file_obj:Object={name:tmpName, url:file};
							files_dropped.push(file_obj);
						}else{
							dispatchEvent(new ClientEvent(ClientEvent.ON_APPENED ,tmpName+" n'est pas autorisé "));
							//debugger("\n"+ tmpName+"  n'est pas autorisé ");
						}
					}
					dispatchEvent(new ClientEvent(ClientEvent.ON_FILES_DROPPED ,files_dropped));
				}else{
					//debugger("ERROR ");
				}
			}
 
		]]>
	</fx:Script>
</mx:Canvas>
 

Ligne 12 : nous écoutons les éveênements « App.onDragDrop » qui correspondent au déposé de fichiers. La liste des fichiers récupérée arrive comme une chaîne. On la split, puis on vérifie que chaque fichier est autorisé. Pour l’exemple je n’autorise que les fichiers jpg et mp3. Si le fichier est autorisé on l’ajoute à la liste sinon on envoi une erreur à StatView à l’aide de ON_APPENED. Une fois la liste complète, on dispatch un évênement .ON_FILES_DROPPED récupérée par le médiateur et traité vers le model :

 
package view
{
	import controller.ClientEvent;
 
	import model.*;
 
	import org.robotlegs.mvcs.Mediator;
 
	public class DragDropViewMediator extends Mediator
	{
		[Inject]
		public var dragDropView:DragDropView;
 
		[Inject]
		public var listingModel:ListingModel;
 
		override public function onRegister():void {
 
			eventMap.mapListener(dragDropView, ClientEvent.ON_FILES_DROPPED, onFilesDropped);
			eventMap.mapListener(dragDropView, ClientEvent.ON_APPENED, onAppened);
		}
		public function onFilesDropped(e:ClientEvent) {
			listingModel.addToList(e.retour);
		}
		public function onAppened(e:ClientEvent) {
			dispatch(new ClientEvent(ClientEvent.ON_APPENED,e.retour));
		}
	}
 
}
 

On réutilise ici la fonction listingModel.addToList() vu précédement pour ajouter des éléments à notre ArrayCollection. Cette mise à jour est ensuite dispatchée automatique vers la vue ListingView qui l’utilise comme source de dataprovider.

Voyons à présent notre class FTPService :

 
package service {
	import controller.ClientEvent;
 
	import exoa.server.FTPConnexion;
	import exoa.server.FTPConnexionEvent;
 
	import flash.events.EventDispatcher;
	import flash.utils.setTimeout;
	import model.*;
 
	import org.robotlegs.mvcs.Actor;
 
	public class FTPService extends Actor {
		public var isUploading:Boolean;
		private var connexion:FTPConnexion;
 
		[Inject]
		public var listingModel:ListingModel;
 
		public function FTPService() {
 
			connexion = new FTPConnexion();
			connexion.initialize("exoa.fr", "exoa_ftp_demo", "XXXX");
			connexion.addEventListener(FTPConnexionEvent.CONNECT_FAILED, onConnexionFailed);
			connexion.addEventListener(FTPConnexionEvent.CONNECTED, onConnexionSuccess);
			connexion.addEventListener(FTPConnexionEvent.CONNECTING, onConnexionLoading);
			connexion.addEventListener(FTPConnexionEvent.TRANSFER_ITEM_STARTING, onTransferItemStart);
			connexion.addEventListener(FTPConnexionEvent.TRANSFER_ITEM_PROGRESS, onTransferItemProgress);
			connexion.addEventListener(FTPConnexionEvent.TRANSFER_ITEM_COMPLETED, onTransferItemComplete);
			connexion.addEventListener(FTPConnexionEvent.TRANSFER_ITEM_FAILED, onTransferItemFail);
		}
		public function connect() {
			connexion.connect();
 
			debugger("Connexion en cours...");
		}
		public function upload() {
			if(listingModel._listing.length>0){
				var obj:Object = listingModel._listing.getItemAt(0);
				connexion.uploadFile(obj);
				debugger("Démarrage de l'upload de " + obj.name);
			}else {
				debugger("Tous les uploads sont terminés !");
			}
		}
 
		///////////////////
		// ON CONNEXION
		///////////////////
 
		private function onConnexionLoading(e:FTPConnexionEvent):void
		{
			debugger("Connexion en cours")
		}
 
		private function onConnexionSuccess(e:FTPConnexionEvent):void
		{
			debugger("Connexion FTP réussie")
			connexion.changeDir("/upload");
		}
 
		private function onConnexionFailed(e:FTPConnexionEvent):void
		{
			debugger("La connexion au server FTP a échouée : "+e.retour.description)
		}
 
		///////////////////
		// ON TRANSFER ITEM
		///////////////////
 
		private function onTransferItemStart(e:FTPConnexionEvent):void
		{
			//debugger("Début du transfer.");
		}
		private function onTransferItemProgress(e:FTPConnexionEvent):void
		{
			dispatch(new FTPConnexionEvent(FTPConnexionEvent.TRANSFER_ITEM_PROGRESS,null,e.valeur));
		}
		private function onTransferItemComplete(e:FTPConnexionEvent):void
		{
			debugger("Le transfer est terminé !");
			listingModel._listing.removeItemAt(0);
			var num = setTimeout(upload, 400);
 
		}
		private function onTransferItemFail(e:FTPConnexionEvent):void
		{
			debugger("Le transfer du fichier a échoué :"+e.retour.description);
		}
 
		private function debugger(message:String) {
			dispatch(new ClientEvent(ClientEvent.ON_APPENED, message));
		}
	}
 
}

Cette classe fait office de passerelle avec une classe de connexion FTP, dont la syntaxe est encore bien spécifique à SwfStudio. Vous pouvez remarquer que même les classes de service héritent d’Actor ce qui leur permet d’émettre des évènements vers toute l’application avec dispatch(). Le fonctonnement de cette classe est simple. On injecte le singleton du model de donnée et pour chaque élément se trouvant dans la liste des fichier, on démarre une session d’upload, l’une après l’autre.
Finalement, deux classes dites « commandes » permettent de lancer les fonctionnalités du service. La classe LaunchFTPConnexion :

 
package controller
{
	import service.FTPService;
	import org.robotlegs.mvcs.Command;
 
	public class LaunchFTPConnexionCommand extends Command
	{
		[Inject]
		public var FTP:FTPService;
 
		override public function execute():void
		{
			FTP.connect();
		}
	}
}
 

Et la classe LaunchUpload, sensiblement identique :

 
package controller
{
	import service.FTPService;
	import org.robotlegs.mvcs.Command;
 
	public class LaunchUploadCommand extends Command
	{
		[Inject]
		public var FTP:FTPService;
 
		override public function execute():void
		{
			FTP.upload();
		}
	}
}

Exportez maintenant votre projet swf, et lancez swfStudio. Ouvrez le projet FlexFTPClient.spf se trouvant dans l’archive des sources de ce tutorial, dans le dossier bin-release. Vérifiez que les plugins FTP et filesys sont bien sélectionnés, et cliquez sur BUILD, votre application est créer ! Vous pouvez personnaliser son aspect, ses fonctionnalités.

• Télécharger l’application terminée
• Télécharger les sources

L'application est un client FTP, qui servira simplement à « uploader » des fichiers vers un FTP de manière très rapide. Pourquoi ce projet ? Eh bien tout simplement pour aborder en douceur la conception d’une application robotlegs mais également parceque j’avais besoin d’un petit widget me permettant d’uploader mes fichiers simplement vers un répertoire juste au drag and drop ! Voici un aperçu de l’application :

La partie haute présente la liste des uploads en cours, les fichiers sont ajoutés au glissé-déposé. Au dessus deux boutons permettent de se connecter au ftp et de lancer l’upload. La partie basse présente une zone de texte qui log tout les évênements.
Vous pouvez télécharger le logiciel, et les sources :

• Télécharger l’application terminée
• Télécharger les sources

Pour ce tutorial il vous faut :

• Le Flex SDK 3 minimum
• Un compilateur comme Flex Builder / FDT / Ant
• Les librairies RobotLegs et SwiftSuspenders
• SwfStudio et ses librairies SWC

Création du projet

Commençons par créer un nouveau projet Flex appelé « FlexFTPClient ». Installez SwfStudio et linkez les swc coreAS3Definitions.swc et NorthcodeAS3Lib.swc situé dans le répertoire « SWC » du dossier d’installation de swfStudio. Téléchargez RobotLegs puis linkez le swc lib/swiftSuspenders.swc pour permettre l’utilisation des méta [Inject] dans votre projet, puis ajoutez un library-path vers le répertoire des sources de robotLegs. Nous voilà prêt pour commencer !

Démarrage et bootstrap

Pour ce petit projet, nous allons créer plusieurs vues :

• ListingView : représentera la liste des uploads en cours
• StatView : représente la partie basse de l’application, une zone de texte pour logguer tout ce qui se passe.
• ConnexionView : affiche deux boutons pour se connecter au ftp et lancer l’upload.
• DragDropView : est un carré de 100% x 100% chargé de détecter le déposé de fichiers sur l’application.

Ainsi que leurs « médiateurs » chargés d’interagir avec tout le reste de l’application.
Puis nous auront besoin de la partie « model » pour stocker les données. Il s’agit ici de stocker la liste des uploads.
La partie « controller » contiendra les évênements de l’application ainsi que deux commandes. La commande demandant la connexion FTP et celle demandant le démarrage de l’upload.
Enfin la partie « service » contiendra notre service de connexion FTP chargé de se connecter et d’uploader les éléments contenu dans le model.
Commençons donc par créer les répertoires model, view, controller et service, qui contiendront nos classes. Puis nous commençons par remplir notre fichier FlexFTPClient.mxml, point d’entrée de l’application :

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:view="view.*"
			   creationComplete="init(event)"
			   backgroundColor="0xeeeeee">
 
	<fx:Style source="Plastic.css"/>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
 
			private var context:MainContext;
			protected function init(e:FlexEvent):void
			{
				ssCore.init();
				context = new MainContext(this);
 
			}
 
		]]>
	</fx:Script>
	<view:DragDropView />
	<view:ConnexionView height="24"/>
	<mx:VDividedBox top="24" width="100%" height="100%">
 
	<view:ListingView height="50%"/>
	<view:StatView height="50%" />
	</mx:VDividedBox>
 
</s:Application>
 

Ligne 6 : j’importe toutes mes vues pour les ajouter à l’application lignes 25 à 31. Nous allons voir la création de nos vues juste après.
Ligne 26 : on initialise les composants de swfStudio.
Ligne 27 : on initialise le contexte de l’application. C’est lui qui va servir de jointure entre toutes nos classes pour le MVC.
Jusque ici rien de complexe, voyons maintenant ce fameux contexte :

 
package
{
	import flash.display.DisplayObjectContainer;
	import org.robotlegs.mvcs.Context;
	import view.*;
	import controller.*;
	import model.*;
	import service.*;
 
	public class MainContext extends Context
	{
		public function MainContext(ContextView:DisplayObjectContainer=null, autoStart:Boolean = true ) {
			super(ContextView, autoStart);
		}
		override public function startup():void {
			mediatorMap.mapView(ListingView, ListingViewMediator);
			mediatorMap.mapView(ConnexionView, ConnexionViewMediator);
			mediatorMap.mapView(StatView, StatViewMediator);
			mediatorMap.mapView(DragDropView, DragDropViewMediator);	
 
			injector.mapSingleton(ListingModel);
			injector.mapSingleton(FTPService);
 
			commandMap.mapEvent(ClientEvent.LAUNCH_FTP_CONNEXION, LaunchFTPConnexionCommand);
			commandMap.mapEvent(ClientEvent.LAUNCH_UPLOAD, LaunchUploadCommand);
 
		}
	}
 
}
 

Le contexte d’une application RobotLegs lance le démarrage avec la fonction startup qu’il vous faut donc réécrire.
Ligne 17 à 20 : on « map » chaque vue à son médiateur, chargé d’établir la communication entre elle et le reste de l’application.
Ligne 22 et 23 : on spécifie à l’injecteur que le model de donnée et le service doivent être injectés dans toutes les classes où ils seront appelés, en tant que singleton ! Et ceci est très important. A chaque fois que vous verrez dans une classe [Inject] public var monModel :ListingModel ; c’est l’instance du singleton qui y sera automatiquement placée ! Ceci nous évite bien des efforts. Pas besoin de développer le model en singleton ou même d’appeler monModel.getInstance() . Merci swiftSuspenders !
Ligne 25 et 26 : on MAP deux évênements vers nos commandes de connexion et d’upload. Ainsi quelque soit l’endroit où l’on va dispatcher ses deux évênements, les deux commandes seront éxécutées automatiquement.
C’est tout pour notre contexte, créons à présent nos vues et leur médiateurs.

Création des vues

La vue ConnexionView est très simple, nous y plaçons deux boutons, un pour la connexion et un pour lancer l’upload avec le serveur FTP.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   width="100%" height="100%">
 
	<mx:HBox>
 
	<s:Button id="btConnect" label="Connecter !" width="100" height="25" />
	<s:Button id="btUpload" label="Uploader !" width="100" height="25"  />
	</mx:HBox>
</mx:Canvas>
 

Son médiateur est à placer dans le même package view. L’écriture du médiateur est également très concise :

 
package view
{
	import controller.ClientEvent;
	import flash.events.MouseEvent;
	import org.robotlegs.mvcs.Mediator;
	import service.*;
 
	public class ConnexionViewMediator extends Mediator
	{
		[Inject]
		public var connexionView:ConnexionView;
 
		override public function onRegister():void {
 
			eventMap.mapListener(connexionView.btConnect, MouseEvent.CLICK, connect);
			eventMap.mapListener(connexionView.btUpload, MouseEvent.CLICK, upload);
		}
		private function connect(e:MouseEvent){
			dispatch(new ClientEvent(ClientEvent.LAUNCH_FTP_CONNEXION));
		}
		private function upload(e:MouseEvent){
			dispatch(new ClientEvent(ClientEvent.LAUNCH_UPLOAD));
		}
	}
}
 

Lignes 11 et 12 : Nous récupérons l’instance de notre vue toujours grâce à l’injection de constructeur.
Ligne 17 : on écrase la function onRegister, appelée une fois que la vue est linkée. Dans cette fonction nous écoutons les évênements de click sur nos deux boutons. Qui servent à lancer la connexion ou l’upload au FTP. Puis on dispatch les fameux évênements chargés de lancer les commandes de connexion ou d’upload.

Passons à la vue « ListingView » chargée d’afficher la liste des uploads stockée dans le model en temps réel. Pour se faire, rien de très compliqué il faut « binder » le model de donnée pour que chaque mise à jour des données soit dispatchée vers notre liste. Nous verrons le model juste après.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		   xmlns:exoaFlex="flex.*" width="100%" height="100%">
 
	<fx:Script>
		<![CDATA[
			public function updateItem(value){
				var renderer:Array = liste.renderers[0];
				if(renderer[0] != null)
				{
					if(value==100)
		ListItemRenderer(renderer[0]).progressBar.visible=false;
					else ListItemRenderer(renderer[0]).progressBar.visible=true;
		ListItemRenderer(renderer[0]).setProgress(value);
				} 
 
			}
 
		]]>
	</fx:Script>
	<exoaFlex:ExtendedList id="liste" width="100%" height="100%"
			 itemRenderer="view.ListItemRenderer"
			/>
</mx:Canvas>
 

Vous pouvez remarquer que je n’utilise pas de composant List mais une List étendue permettant d’accèder facilement à ses itemRenderers et de mettre à jour la barre de progression de l’item en cours d’upload.

Son médiateur :

 
package view
{
	import controller.ClientEvent;
	import exoa.server.FTPConnexionEvent;
	import model.*;
	import view.ListItemRenderer;
	import mx.controls.List;
	import mx.controls.listClasses.ListItemRenderer;
	import org.robotlegs.mvcs.Mediator;
	import service.*;
 
	public class ListingViewMediator extends Mediator
	{
		[Inject]
		public var listingView:ListingView;
 
		[Inject]
		public var listingModel:ListingModel;
 
		[Inject]
		public var FTP:FTPService;
 
		override public function onRegister():void {
 
			eventMap.mapListener(eventDispatcher, FTPConnexionEvent.TRANSFER_ITEM_PROGRESS, onTransferItemProgress);
 
			listingView.liste.dataProvider=listingModel._listing;
 
		}
		private function onTransferItemProgress(e:FTPConnexionEvent){
			listingView.updateItem(e.valeur);
		}
	}
}
 

Ligne 26 : on écoute notre service FTP pour récupérer les informations de progression de transfert servant à mettre à jour notre vue.

Ligne 28 : on assigne le model comme source de donnée au dataProvider de notre Liste.

Notre model est constitué comme ceci :

 
package model
{
	import controller.ClientEvent;
	import mx.collections.ArrayCollection;
	import org.robotlegs.mvcs.Actor;
 
	[Bindable]
	public class  ListingModel extends Actor
	{
		[Bindable]
		public var _listing:ArrayCollection;
 
		public function ListingModel() {
			_listing = new ArrayCollection([  ]);
		}
		public function addToList(files:Array) {
			for (var i:int = 0; i < files.length;i++){
				_listing.addItem({name:files[i].name,url:files[i].url});
			}
			_listing.refresh();
		}
	}
 
}

Une classe bindable, et une ArrayCollection également Bindable permettant de stocker et synchroniser les données avec le reste de l’application.
La fonction addToList() permettra d’ajouter des fichiers à la liste au drag and drop depuis DragDropView.

Enfin notre StatView qui sert dont à logguer les évênements dans un textArea :

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
		   xmlns:s="library://ns.adobe.com/flex/spark"
		   xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
 
	<s:TextArea editable="false" width="100%" height="100%" id="textArea" />
 
	<fx:Script>
		<![CDATA[
			public function update(content:String){
				textArea.appendText("\n"+content);
			}
		]]>
	</fx:Script>
</mx:Canvas>
 

La fonction update() servira à y rajouter du texte depuis notre médiateur :

 
package view
{
	import org.robotlegs.mvcs.Mediator;
	import controller.ClientEvent;
 
	public class StatViewMediator extends Mediator
	{
		[Inject]
		public var statView:StatView;
 
		override public function onRegister():void {
 
			eventMap.mapListener(eventDispatcher, ClientEvent.ON_APPENED, onAppend);
 
		}
		public function onAppend(e:ClientEvent) {
			statView.update(e.retour);
		}
	}
 
}

A chaque reception d’un évênement ON_APPENED, provenant de n’importe quelle acteur de notre application, on appelle la function update() de notre StatView.

Cette première partie est déjà bien copieuse, nous verrons la suite au prochain article, à savoir les commandes, le service FTP, et la création du projet SWF Studio !
Lire la suite

Présentation de PureMVC

PureMVC est une implémentation du méta pattern Modèle Vue Contrôleur.
Le MVC permets de séparer votre code en trois parties bien distincts : le Modèle, la Vue et le Contrôleur.
Le Modèle est chargé de contenir les données ou de les décrire. Il ne doit en aucun cas les présenter.
La Vue est quand à elle chargé d'afficher une représentation concrète du Modèle. C'est aussi avec la vue que l'utilisateur interagira. La vue se charge d'afficher les données, sans les traiter.
Pour finir, le Contrôleur, qui est chargé de synchroniser le Modèle et la Vue. Il reçoit les évènements de l'utilisateur et réagit en conséquence.

Ses composantes :

- Les proxys (Modèle) : les proxys sont chargés de gérer les données, ils peuvent communiquer avec vos services distants, par exemple pour récupérer des données d'une base de donnée, ou encore récupérer le contenu d'un fichier xml.

- Les médiateurs (Vue) : les médiateurs représente les composants visuels de votre application, c'est au travers d'eux que vous allez manipulé votre vue. Ils ajouteront les écouteurs d'évènements, seront à l'écoute de notifications et en enverront eux-mêmes.

- Les commandes (Contrôleur) : Les commandes font le lien entre les proxys et les médiateurs, exécutent d'autres commandes, envoient des notifications.

- La façade : la façade est un singleton, qui initialise les acteurs centraux (modèle, vue, contrôleur, en effet avec PureMVC vous n'instancierez jamais directement ces acteurs), leurs permettant ainsi de communiquer entre eux, par le biais de cette façade.

- Les notifications : Un énorme avantage de PureMVC est qu'il a été porté pour de nombreux autres langages en dehors de l'AS3, à savoir pour l'instant : AS2, C#, Objective-C, Ruby, Python, haXe, ColdFusion, Java, Javascript et PHP.
Cela vous permet donc d'utiliser le même framework MVC pour vos différents projets dans d'autres langages. Un des conséquences directes de ces portages est qu'il ne fallait en aucun utiliser le système d'Event propre à Flash, celui-ci n'étant pas forcément existant dans d'autres environnements.
PureMVC a donc son propre mécanisme, les notifications. Concrètement ils fonctionnent un peu de la même manière que le système d'Event de Flash : les médiateurs “s'abonnent” à des notifications et exécutent les traitements voulus à la réception de celle-ci, ou en envoient. Les proxys peuvent envoyer des notifications, par exemple en cas échec ou de réussite de l'appel d'une procédure distante, mais pas en recevoir. Les commandes sont quand à elles directement “mappés” aux noms des notifications et se déclenchent automatiquement lorsque ces dernières sont envoyées.

Un des points qu'il faut retenir est que l'on ne doit pas voir les notifications et les events comme concurrent. Il est tout a fait indiqué d'utiliser les Events pour “créer des composants visuels qui soient facilement réutilisables et qui, lorsqu’ils sont correctement construits, ignorent même le système PureMVC auquel ils sont couplés” (Doc. PureMVC).

Première application avec PureMVC

1. Récupérer le SWC : http://trac.puremvc.org/PureMVC_AS3/wiki/Downloads
et cliquez sur “PureMVC Standard Framework for AS3”.
2. Créez un nouveau projet Flex
3. Ajoutez le SWC de PureMVC

Avant tout chose, nous allons définir l'organisation des différentes classes et composants pour notre projet.
Créer l'arborescence suivante : org/puremvc/app.
Dans le dossier app, créer trois dossiers : model - view - controller.
Votre projet devrait ressembler à quelquechose comme ceci après :

La première chose à faire dans tout projet utilisant PureMVC est de créer la façade concrète de votre application.
Pour cela vous devez créer une nouvelle classe qui étend la classe Facade de PureMVC, dans le dossier app.
Voici le code de cette classe:

 
package org.puremvc.app
{
    import org.puremvc.as3.patterns.facade.Facade;
 
    public class ApplicationFacade extends Facade
    {
        public function ApplicationFacade()
        {
            super();
        }
 
    }
}
 

Dans cette classe nous allons créer 3 méthodes:
- getInstance : qui sera chargé de nous retourner l'instance de notre façade concrète.
- initializeController : qui sera chargé d'initialiser le contrôleur et d'enregistrer toutes nos commandes pour que celles-ci s'exécutent à l'envoi des notifications correspondantes.
- startup : celle-ci envoie une notification qui fera s'exécuter la commande chargée de démarrer l'application, nous verrons ce que fait cette commande plus en détail dans quelques instants.

Voici le code de ces méthodes:

 
public function startup(app:PureMVC):void
{
	sendNotification(STARTUP, app);
}
 
public static function getInstance():ApplicationFacade
{
	if (instance == null)
     		instance = new ApplicationFacade();
     return instance as ApplicationFacade;
}
 
protected function initializeController():void
{
	super.initializeController();
     registerCommand(STARTUP, ApplicationStartupCommand);
	registerCommand(COMMAND_LOAD_MENU, LoadMenuCommand);
}
 

Nous devons créer dans cette façade cinq constantes, en fait le nom de nos notifications.
Le code :

 
public static const STARTUP:String = "startup";
public static const VIEW_MENU:String = "viewContact";
public static const LOADING_MENU_COMPLETE:String = "loadingMenuComplete";
public static const ERROR_LOAD_FILE:String = "Le fichier ne peut pas être chargé";
public static const COMMAND_LOAD_MENU:String = "LoadMenuCommand";
 

Et voilà, pour notre façade, c'est tout pour l'instant mais nous y reviendrons plus tard.
Retournons dans le mxml de notre application.
Nous devons maintenant créer une nouvelle instance de notre façade et envoyer une notification pour signaler à notre application de démarrer.
Nous allons aussi y créer un viewstack, qui contiendra les différentes vues de notre application.
Ajoutez à ce viewstack un canvas contenant un bouton.

Tant que nous sommes dans les composants visuels nous allons en profiter pour créer une vue de notre application.
Un simple canvas contenant une Tile qui contiendra les boutons de notre menu.
Créer un dossier mycomponents dans le dossier view et créez y un nouveau composant MXML. Nommez le MenuView, basé sur Canvas, width et height à 100%.
Voici le code de composant:

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
 
    <mx:Tile id="menuT"
        horizontalCenter="0"
        verticalCenter="0"
        width="100%"
        height="100%">
 
    </mx:Tile> 
 
</mx:Canvas>
 

Ajouter un composant du type de celui que vous venez de créer dans le viewstack de votre application.
Voici le code votre mxml principal.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:mycomponents="org.puremvc.app.view.mycomponents.*"
    layout="absolute"
    creationComplete="facade.startup(this);" >
 
    <mx:Script>
 
        <![CDATA[
            import org.puremvc.app.ApplicationFacade;
 
            private var facade:ApplicationFacade = ApplicationFacade.getInstance();
 
        ]]>
 
    </mx:Script>
 
    <mx:ViewStack id="appVS" width="100%" height="100%">
 
        <mx:Canvas>
            <mx:Button id="btnMenu" label="Menu" horizontalCenter="0" verticalCenter="0"/>
        </mx:Canvas>
 
        <mycomponents:MenuView id="menuView" width="100%" height="100%"/>
 
    </mx:ViewStack>
 
</mx:Application>
 

A ce stade vous devriez normalement avoir deux erreurs, provenant de votre ApplicationFacade, vous indiquant que vous tentez d'accéder à une propriété non définie ApplicationStartupCommand et LoadMenuCommand.
En effet, nous avons mappé nos commandes à une notification mais nous n'avons pas encore créé les commandes correspondante.
Nous allons y remédier dès maintenant.
Créer une nouvelle classe dans le dossier controller, nommé ApplicationStartupCommand. Cette classe doit étendre MacroCommand.
Cette commande est un peu particulière, c'est une MacroCommand, c'est à dire que c'est une commande qui exécute d'autres sous-commandes.
En l'occurrence, deux autres commandes : ModelPrepCommand et ViewPrepCommand, qui comme vous vous en doutiez certainement sont deux commandes dédiées à la préparation du modèle et de la vue.
Dans ModelPrepCommand nous allons enregistrer les proxys qu'utilisera notre application et dans ViewPrepCommand, le médiateur de notre vue principale.
Pour créer ces commandes vous devez créer deux nouvelles classes dans le dossier controller, ModelPrepCommand et ViewPrepCommand, qui étendent SimpleCommand.
Trêve de palabre, voici le code de toutes ces commandes, excepté LoadMenuCommand que nous verrons plus tard.

 
ApplicationStartupCommand.as
 
package org.puremvc.app.controller
{
    import org.puremvc.as3.interfaces.*;
    import org.puremvc.as3.patterns.command.*;
 
    public class ApplicationStartupCommand extends MacroCommand
    {
        override protected function initializeMacroCommand():void
        {
            addSubCommand(ModelPrepCommand);
            addSubCommand(ViewPrepCommand);
        }
    }
}
 
ModelPrepCommand.as
 
package org.puremvc.app.controller
{
 
    import org.puremvc.as3.interfaces.*;
    import org.puremvc.as3.patterns.command.*;
    import org.puremvc.as3.patterns.observer.*;
 
    public class ModelPrepCommand extends SimpleCommand
    {
        override public function execute(note:INotification):void
        {
            facade.registerProxy(new MenuProxy());
        }
    }
}
 
ViewPrepCommand.as
 
package org.puremvc.app.controller
{
    import org.puremvc.as3.interfaces.*;
    import org.puremvc.as3.patterns.command.*;
    import org.puremvc.as3.patterns.observer.*;
 
    public class ViewPrepCommand extends SimpleCommand
    {
        override public function execute(note:INotification):void
        {
            facade.registerMediator(new ApplicationMediator(note.getBody() as PureMVC));
        }
    }
}
 

Vous voyez deux nouveaux éléments apparaître : ApplicationMediator et MenuProxy. Un proxy et un médiateur.
ApplicationMediator est le médiateur de notre vue principale.
Il est chargé d'enregistrer tous les autres médiateurs de notre application.
Il sera à l'écoute d'une notification, VIEW_MENU et lorsqu'il recevra cette notification il changera l'index du viewstack pour afficher la vue contenant notre composant MenuView.
Il dispose aussi d'un getter permettant de récupérer l'instance de notre mxml principal.
Voici le code de cette classe:

 
package org.puremvc.app.view
{
    import org.puremvc.app.ApplicationFacade;
    import org.puremvc.as3.interfaces.*;
    import org.puremvc.as3.patterns.mediator.Mediator;
 
    public class ApplicationMediator extends Mediator implements IMediator
    {
        public static const NAME:String = "ApplicationMediator";
 
        public static const HOME_VIEW:Number = 0;
        public static const MENU_VIEW:Number = 1;
 
        public function ApplicationMediator(viewComponent:PureMVC)
        {
            super(NAME, viewComponent);
            facade.registerMediator(new MenuViewMediator(app.menuView));
        }
 
        override public function listNotificationInterests():Array
        {
            return [ApplicationFacade.VIEW_MENU];
        }
 
        override public function handleNotification(note:INotification):void
        {
            switch (note.getName())
            {
                case ApplicationFacade.VIEW_MENU:
                    app.appVS.selectedIndex = MENU_VIEW;
                    break;
            }
        }
 
        protected function get app():PureMVC
        {
            return viewComponent as PureMVC;
        }
 
    }
}
 

MenuProxy est quand à lui un proxy chargé de lire un fichier xml contenant les éléments de notre menu. Il s'appuie sur une classe permettant de charger le xml.
Créez un nouveau dossier nommé business dans votre dossier model et créez y une nouvelle classe : LoadXMLDelegate.
Voici le code de cette classe:

 
package org.puremvc.app.model.business
{
    import mx.rpc.AsyncToken;
    import mx.rpc.events.ResultEvent;
    import mx.rpc.IResponder;
    import mx.rpc.http.HTTPService;
 
    public class LoadXMLDelegate
    {
        private var responder:IResponder;
        private var service:HTTPService;
 
        public function LoadXMLDelegate(responder:IResponder, url:String)
        {
            this.service = new HTTPService();
            this.service.resultFormat = 'xml';
            this.service.url = url;
 
            this.responder = responder;
        }
 
        public function load() : void
        {
            var token:AsyncToken = service.send();
 
            token.addResponder(this.responder);
        }
    }
}
 

C'est une classe que j'ai repris d'un exemple sur PureMVC.
Suivant le succès ou l'échec le proxy effectue diverses opérations.
Dans le cas d'un succès il envoie une notification disant que le chargement à réussi et contenant le résultat du chargement du xml.
Dans le cas contraire il envoie une notification indiquant que le chargement à échoué et un message s'affiche alors.
Voici le code de ce proxy:

 
package org.puremvc.app.model
{
    import mx.controls.Alert;
    import mx.rpc.IResponder;
    import mx.rpc.events.ResultEvent;
 
    import org.puremvc.app.ApplicationFacade;
    import org.puremvc.app.model.business.LoadXMLDelegate;
    import org.puremvc.as3.interfaces.IProxy;
    import org.puremvc.as3.patterns.proxy.Proxy;
 
    public class MenuProxy extends Proxy implements IProxy, IResponder
    {
        public static const NAME:String = "MenuProxy";
 
        public function MenuProxy()
        {
            super(NAME);
        }
 
        public function load():void
        {
            var delegate:LoadXMLDelegate = new LoadXMLDelegate(this, 'assets/menu.xml');
            delegate.load();
        }
 
        public function result(data:Object) : void
        {
            var menuXml:XML = new XML((data as ResultEvent).result);
 
            sendNotification(ApplicationFacade.LOADING_MENU_COMPLETE, menuXml, "XML");
 
        }
 
        public function fault(info:Object):void
        {
            Alert.show(ApplicationFacade.ERROR_LOAD_FILE);
        }
 
    }
}
 

Nous allons en profiter pour créer notre xml.
Créer un nouveau dossier à la racine de votre projet, assets.
Et créer dedans un nouveau fichier xml, menu.xml dont voici le contenu:

<root>
    <menuitem id="menu1">
        <name value="Menu 1"/>
    </menuitem>
    <menuitem id="menu2">
        <name value="Menu 2"/>
    </menuitem>
    <menuitem id="menu3">
        <name value="Menu 3"/>
    </menuitem>
</root>
 

Il est temps de nous occuper du médiateur de notre composant MenuView.
Créer une nouvelle classe dans le dossier view, nommé MenuViewMediator. Celle-ci doit étendre Mediator et implémenter IMediator.
Ce médiateur est à l'écoute de la notification LOAD_MENU_COMPLETE. Dès que celle-ci est envoyée il en récupère le contenu et créez le menu.
Voici le code du médiateur.

 
package org.puremvc.app.view
{
    import flash.events.MouseEvent;
 
    import mx.controls.Alert;
    import mx.controls.Button;
 
    import org.puremvc.app.ApplicationFacade;
    import org.puremvc.app.view.mycomponents.MenuView;
    import org.puremvc.as3.interfaces.*;
    import org.puremvc.as3.patterns.mediator.Mediator;
 
    public class MenuViewMediator extends Mediator implements IMediator
    {
        public static const NAME:String = "MenuViewMediator";
 
        public function MenuViewMediator(viewComponent:MenuView)
        {
            super(NAME, viewComponent);
        }
 
        protected function get menuView():MenuView
        {
            return viewComponent as MenuView;
        }
 
        override public function listNotificationInterests():Array
        {
            return [ApplicationFacade.LOADING_MENU_COMPLETE];
        }
 
        override public function handleNotification(note:INotification):void
        {
            switch (note.getName())
            {
                case ApplicationFacade.LOADING_MENU_COMPLETE:
                    Alert.show("ok");
                    for each (var menuitem:XML in note.getBody().menuitem)
                    {
                        var button:Button = new Button();
                        button.width = 220;
                        button.height = 120;
                        button.label = menuitem.name.@value;
                        button.addEventListener(MouseEvent.CLICK, menuClickHandler);
                        this.menuView.menuT.addChild(button);
                        trace(menuitem.name.@value + " button created");
                    }
                    break;
            }
        }
 
        private function menuClickHandler(event:MouseEvent):void
        {
            switch (event.currentTarget.label)
            {
                case "Menu 1":
                    Alert.show(event.currentTarget.label);
                    break;
                case "Menu 2":
                    Alert.show(event.currentTarget.label);
                    break;
                case "Menu 3":
                    Alert.show(event.currentTarget.label);
                    break;
            }
        }
    }
}
 

Dernière ligne droite, nous devons faire en sorte que la notification LOAD_MENU_COMMAND soit envoyée quand un utilisateur clique sur le bouton “Menu”.
Pour cela nous devons ajouter un écouteur d'évènement click à notre bouton et y associer une méthode qui enverra la notification.
Rajouter le code suivant dans le constructeur de ApplicationMediator:

 
this.app.btnMenu.addEventListener(MouseEvent.CLICK, clickHandler);
 

et créer la fonction correspondante :

 
public function clickHandler(event:MouseEvent):void
{
	sendNotification(ApplicationFacade.COMMAND_LOAD_MENU);
     sendNotification(ApplicationFacade.VIEW_MENU);
}
 

Occupons-nous maintenant la commande qui fera appel au proxy pour charger le xml.
Créez une nouvelle classe, basé sur SimpleCommand et implémentant ICommand
Voici le code de cette commande:

 
package org.puremvc.app.controller
{
    import org.puremvc.app.model.MenuProxy;
    import org.puremvc.as3.interfaces.ICommand;
    import org.puremvc.as3.interfaces.INotification;
    import org.puremvc.as3.patterns.command.SimpleCommand;
 
    public class LoadMenuCommand extends SimpleCommand implements ICommand
    {
        private var menuProxy:MenuProxy;
 
        override public function execute(notification:INotification):void
        {
            menuProxy = facade.retrieveProxy(MenuProxy.NAME) as MenuProxy;
 
            menuProxy.load();
        }
 
    }
}
 

On récupère l'instance de notre proxy et on fait appel à sa méthode pour charger le xml. Rien de très compliqué. Suivant le résultat de l'opération le proxy agira en conséquence via les méthodes que nous lui avons défini.

Et voilà, c'est fini, peut-être encore quelques imports à faire à droite à gauche.
Pour cela placez vous derrière la classe qui pose problème et et appuyez sur Cmd+Espace ou Ctrl+Espace selon votre plate-forme.

Voilà à quoi devrez ressembler votre arborescence à la fin de ce projet:

1 : Ajouter la librairie flexunit.swc

2 : Ecriture du code de base, pour utiliser le composant TestRunner :

Voyons maintenant ces techniques.
La technique du Self-hunt

C'est une technique plutôt simple ou la classe de test joue le rôle de bouchon :

// L'interface ICarnetDao
package classes
{
	public interface ICarnetDao
	{
		funciton get count():uint;
		function addContact(contact:*):void;
	}
}

// La classe Carnet
package classes
{
	import flash.events.EventDispatcher;
	import classes.events.CarnetEvent;

	public class Carnet extends EventDispatcher
	{
		private var dao:ICarnetDao;

		public function Carnet(dao:ICarnetDao) {
			this.dao = dao;
		}

		public function addContact(contact:*):void {
			dao.addContact(contact);
		}
	}
}

package tests
{
	import flexunit.framework.TestCase;
	import classes.Carnet;
	import classes.events.CarnetEvent;
	import classes.ICarnetDao;

	public class TestCarnet extends TestCase implements ICarnetDao
	{
		private var carnet:Carnet;

		private var numberOfContact:uint;

		public function get count():uint {
			return numberOfContact;
		}

		override public function setUp():void {
			carnet = new Carnet(this);
		}

		public function addContact(contact:*):void {
			numberOfContact++;
		}

		public function testAddTwoListeners():void {
			carnet.addContact({});

			assertEquals(1,count);
		}
	}
}

C'est aussi une technique qui montre vite ses limites, lorsque la classe a testé :

* demande plusieurs instances du bouchon
* détruit sa dépendance, ici le bouchon (càd la classe de test)
* et d'autres classes au besoin du même bouchon de test.

pour résoudre ses limites, l'utilisation de la technique du “Mock object” est plus adaptée.
La technique du Mock object

Le Mock object consiste à écrire une classe pour jouer le rôle du bouchon :

package tests
{
import classes.ICarnetDao;

public class MockCarnetDao implements ICarnetDao
{
private var numberOfContact:uint;

public function get count():uint {
return numberOfContact;
}

public function addContact(contact:*):void
{
numberOfContact++;
}
}
}

package tests
{
import flexunit.framework.TestCase;
import classes.Carnet;
import classes.events.CarnetEvent;
import classes.ICarnetDao;

public class TestCarnet extends TestCase
{
private var carnet:Carnet;
private var mock:ICarnetDao;

override public function setUp():void {
mock = new MockCarnetDao();
carnet = new Carnet(mock);
}

public function testAddTwoListeners():void {
carnet.addContact({});

assertEquals(1,mock.count);
}
}
}

Ces deux techniques permettent de tester plus facilement une classe mais entrainent aussi un surplus de travail. Ce travail en plus est un bénéfice plus grand lorsque l'application devient plus complexe et difficile à mettre à jour.

Par ITERATIF - BUGALOTTO Olivier (2007)

Les developpeurs sont très motivés en début de projet et ils en mettent partout, mais quand la date de livraison approche ces tests diminuent voir même disparaissent pour faire vite… au profit de bien faire.

Le gros inconvenant concernant l'utilisation des traces temporaires sont leurs limites d'utilisation, et ne peuvent empêcher une régression.

Il existe une solution que nous propose l'extreme Programming sous la forme de tests unitaires ou tests de regression.

Cette pratique ou cette philosophie de travail consiste à écrire un test avant même d'écrire le code qui pourra le passer. Cela permet surtout au développeur de travailler par étape parce que je sais très bien que ce dernier aime se lancer corps et âme dans le code en voulant faire tout en même temps.

Cette pratique va l'obliger a découper son travail et ainsi procéder par étape.

Pour résumer, les tests unitaires apportent un feedback beaucoup plus rapidement que l'utilisation des traces temporaires et permet une division du travail à effectuer.

Un point qui m'est important et qui doit l'être pour vous aussi si les tests unitaires vous intéressent : faites le code le plus simple qui soit. Les optimisations se feront après.

Alors attention, la mise en pratique des tests unitaires n'est pas chose facile, puisque la première chose à apprendre c'est l'utilisation d'un framework de tests mais surtout à rendre son code testable.

Nous allons voir à travers l'utilisation du framework ACTUce la mise en place de tests unitaires.

Les tests unitaires sont organisés dans des classes de tests et une classe de test par classe à tester. ASTUce tourne autour de trois classes qui ont pour rôle :

* MiniRunner : le lanceur de tests.
* TestCase : la classe de test qui implémente l'interface ITest
* TestSuite: qui gère une collection de classes de tests (Design pattern Composite) :

Un exemple de test unitaire

Prenons l'exemple de la création d'un carnet d'adresses mais plus précisement l'ajout et le retrait d'un contact (Nom, Prenom, Email, Téléphone) existant du carnet.

- L'ajout d'un contact :

 
var carnet:Carnet = new Carnet();
var contact:Contact = new Contact("Dubreuil","Henry","h.dubreuil@free.fr","01.75.34.24.10");
carnet.addContact(contact);
 
assertEquals(1,carnet.count);
 

ici la classe Contact n'est qu'une structure d'informations, elle n'a pas de comportements, il n'est pas utile de la tester.

La stucture d'un test est toujours la même, déclaration des objets utiles aux tests et une liste d'assertions.

Le test unitaire nous permet implicitement d'obtenir l'interface de nos classes:

 
class AddressBook {
	function AddressBook() {
 
	}
 
	function addContact(c:Contact) {
		// Code ...
	}
}
 
class Contact {
	var last:String;
	var first:String;
	var email:String;
	var phone:String;
 
	function Contact(last:String, first:String, email:String, phone:String) {
		this.last = last;
		this.first = first;
		this.email = email;
		this.phone = phone;
	}
 
	function toString():String {
		return "Fiche contact: " + fisrt + " " + last + "\n" + phone + " <" + email + ">";
	}
}
 

Nous allons maintenant écrire une classe de test qui doit hériter de la classe TestCase :

 
import buRRRn.ACTUce.TestCase;
 
class TestAddressBook extends TestCase {
	function TestAddressBook(name:String) {
		super(name);
	}
 
	function testAddContact() {
		var carnet:Carnet = new Carnet();
		var contact:Contact = new Contact("Dubreuil","Henry","h.dubreuil@free.fr","01.75.34.24.10");
		carnet.addContact(contact);
 
		assertEquals(1,carnet.count);
	}
 
	function testInstancied() {
		var carnet:Carnet = new Carnet();
 
		assertNotNull(carnet);
	}
}
 

Le constructeur doit avoir un parametre de type String que nous passons au constructeur de la classe TestCase. Les tests sont implémentés dans la classe sous la forme de méthodes.

Tout à l'heure nous avons parlé d'une liste d'assertions, des méthodes nous permettant d'effectuer des tests, dans notre cas nous en avons utilisé une seule mais il en existe plusieurs, à savoir :

* assertTrue(condition:Boolean) : verifie si la condition est vraie.
* assertFalse(condition:Boolean) : l'opposé de assertTrue.
* assertNotNull(obj:Object) : verifie si l'objet existe.
* assertNull(obj:Object) : l'opposé de assertNotNull.
* fail(message:String) : permet d'échouer un test et d'afficher un message.

la liste n'est pas complète bien entendu…

A chaque méthode de test correspond à une instance de la classe test, voici un exemple faux mais utile pour comprendre le cycle de vie d'un test :

 
var test1:TestAddressBook = new TestAddressBook();
test1.testAddContact();
 
var test2:TestAddressBook = new TestAddressBook();
test2.testInstancied();
 

Nous sommes amenés dans les tests à vouloir initialiser des variables, objets etc… Il nous suffit pour cela de redéfinir deux méthodes, une qui initialise le test l'autre qui le nettoie : setUp et tearDown. Dans le cas de notre test nous devons instancier à chaque fois une classe Carnet, nous pouvons donc factoriser le tout dans la méthode d'initialisation setUp :

 
import buRRRn.ACTUce.TestCase;
 
class TestAddressBook extends TestCase {
	private var carnet:Carnet;
 
	function TestAddressBook(name:String) {
		super(name);
	}
 
	// Initialise le test
	function setUp() {
		carnet = new Carnet();
	}
 
	function testAddContact() {
		var contact:Contact = new Contact("Dubreuil","Henry","h.dubreuil@free.fr","01.75.34.24.10");
		carnet.addContact(contact);
 
		assertEquals(1,carnet.count);
	}
 
	function testInstancied() {
		assertNotNull(carnet);
	}
}
 

Maintenant que nous disposons d'un test, il suffit de le lancer mais pour cela nous allons créer une classe Application qui s'en chargera. Cette classe n'est qu'un point d'entrée pour lancer les tests dont voici la structure :

 
import buRRRn.ACTUce.TestSuite;
 
class Application {
	public static function suite():TestSuite {
		var suite:TestSuite = new TestSuite();
		suite.addTest( new TestSuite( TestAddressBook ) );
		return suite;
	}
 
	public static function main() {
		buRRRn.ACTUce.Application.run( suite() );
	}
}
 

Cette classe possède une méthode statique suite qui construit une TestSuite contenant les suites de toute les classes tests à executer. Cette suite de tests est passée au framework ACTUce pour les executer.

Pour conclure, les tests unitaires sont des outils puissant permettant une autre approche de la programmation en divisant le travail en petits problèmes qui peut être résolu par étapes. Le fait de poser le probleme avant de coder sa solution permet de mieux réfléchir sur sa résolution.

Ils ont surtout un avantage considérable sur le remaniement de votre application en évitant une régression de votre code si vous y apportez une modification. Les erreurs corrigés ne pourront plus se produire puisqu'elles seront validées par un test.

Les tests unitaires n'empêcheront pas les erreurs puisque nous sommes des êtres humains et non des machines mais ils vous permettront d'avoir des applications ayant très peu d'erreurs.

Pour utiliser ASTUce vous devez d'abord installer Core2 que vous pouvez télécharger ici sous la forme d'une extension pour Flash : Core2.mxp

Vous trouverez ici aussi un gabarit de projet flash incluant ASTUce : Template.zip

Pour en savoir plus sur Core2 voir : La librairie Core2.

Par ITERATIF - BUGALOTTO Olivier (2006)

 
package Displays{
 
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.utils.getTimer;
	import Events.*;
	import Conf.*;
 
	public class Ball extends MovieClip {
 
		//______________________________________________________________ SETTINGS
		private var dragging	:Boolean;
		private var _SPEED		:Object;
		private var _LAST_TIME	:Number;
		private var tmpX		:Number;
		private var tmpY		:Number;
 
		//FORCES
		private var _FRICTION	:Object;
		private var _POIDS		:Object;
		private var _POUSSEE	:Object;
 
		public function Ball()
		{
			initForces();
			initObjects();
			addEventListener(Event.ADDED_TO_STAGE, initListeners);
		}
 
		/**
		 * Get Global force resulting all the forces other the object
		 *
		 * @param forces		all forces as Array of Objects
		 * @return obj 			the resulting force object
		 **/
		private function getGlobalForce(... forces:Array):Object
		{
			var r:Object={x:0, y:0};
			for(var i:int=0; i<forces.length; i++) {
				r.x+=forces[i].x;
				r.y+=forces[i].y;
			}
			return(r);
		}
 
		/**
		 * Get the Acceleration
		 *
		 * @param timeElapsed	time elapsed since last call
		 * @param force 		the resulting force
		 * @param weight 		the object weight
		 * @return obj 			the acceleration object
		 **/
		private function getAceleration(timeElapsed:Number, force:Object, weight:Number):Object
		{
			var velocity:Object = { x:0, y:0 };
			velocity.x = force.x / weight;
			velocity.y = force.y / weight;
 
			velocity.x *= timeElapsed;
			velocity.y *= timeElapsed;
 
			return(velocity);
		}
 
		/***************************
		 * THE RENDER BALL FUNCTION
		 * *************************/
		public function render():void
		{
			//update friction
			_FRICTION = {x:-_SPEED.x*50, y:-_SPEED.y*50};
 
			if(dragging){
				_POUSSEE={x:(stage.mouseX-tmpX)*_POIDS.y ,y:(stage.mouseY-tmpY)*_POIDS.y};
			}else {
				_POUSSEE.x *= 0.9;
				_POUSSEE.y *= 0.9;
			}
 
			var globalForce:Object = getGlobalForce(_POIDS, _FRICTION, _POUSSEE);
 
			var acceleration:Object=getAceleration((getTimer()-_LAST_TIME)/1000, globalForce, Constantes.BALL_WEIGHT);
 
			_LAST_TIME=getTimer();
 
			_SPEED.x += acceleration.x;
			_SPEED.y += acceleration.y;
 
			collision();
 
			if (dragging) { // if dragging, the ball follows the mouse cursor
				this.x = stage.mouseX;
				this.y = stage.mouseY;
			}else{			// else the ball get the acceleration
				this.x += Math.round(_SPEED.x);
				this.y += Math.round(_SPEED.y);
			}
 
			tmpX = stage.mouseX;
			tmpY = stage.mouseY;
 
		}
 
		/***************************
		 * THE COLLISION TESTS
		 * *************************/
		private function collision():void
		{
			if (this.y +this.height / 2 > stage.stageHeight ) {
				this.y = stage.stageHeight - this.height / 2 ;
				_SPEED.y *= -0.8;
 
			}
			if (this.y -this.height / 2 < 0 ) {
				this.y =  this.height / 2 ;
				_SPEED.y *= -0.8;
 
			}
			if (this.x +this.width / 2 > stage.stageWidth ) {
				this.x = stage.stageWidth - this.width / 2 ;
				_SPEED.x *= -0.8;
 
			}
 
			if (this.x -this.width / 2 < 0 ) {
				this.x =  this.width / 2 ;
				_SPEED.x *= -0.8;
 
			}
		}
 
		/***************************
		 * INIT OBJECT AND FORCE
		 * *************************/
		private function initForces():void
		{
			_SPEED 		= { x:0, y:0 };
			_LAST_TIME 	= getTimer();
			_POIDS 		= { x:0, y:Constantes.GRAVITY * Constantes.BALL_WEIGHT };
			_POUSSEE 	= { x:0, y:0 };
		}
		private function initObjects():void {
 
            this.graphics.lineStyle(1, 0);
            this.graphics.beginFill(0xFFFFFF);
            this.graphics.drawCircle(0, 0, 20);
            this.graphics.endFill();
 
		}
 
		/***************************
		 * INIT LISTENERS
		 * *************************/
		private function initListeners(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, initListeners);
			addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
		}
		private function onMouseUp(e:MouseEvent):void
		{
			dragging = false;
		}
 
		private function onMouseDown(e:MouseEvent):void
		{
			dragging = true;
		}
 
	}
 
}
 

Les sources ici

1.  
2. <mx:Panel title="TabNavigator Container Example" height="90%" width="90%"
3. paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
4.  
5. <mx:TabNavigator id="tn" width="100%" height="100%"/>
6.  
7. <mx:Label width="100%" color="blue"
8. text="Programmatically add Tab buttons"/>
9.  
10. <mx:HBox>
11. <mx:Button label="Add A Tab" click="addTab()"/>
12. <mx:Button label="Remove A Tab" click="removeTab()"/>
13. </mx:HBox>
14.  
15. </mx:Panel>
16.  

 
 <mx:Script>
	<![CDATA[
		import mx.controls.Button;
		import mx.controls.Label;
		import mx.containers.VBox;
 
		public var numChild:Number = 0;
 
		public function addTab():void {
			var newVBox:VBox = new VBox();
			var newLabel:Label = new Label();
 
			numChild = tn.numChildren + 1;
 
			newVBox.label = "Panel " + numChild;
 
			newLabel.text = "TabNavigator container panel " +
                                     numChild;
 
			newVBox.addChild(newLabel);
 
			tn.addChild(newVBox);
		}
 
		public function removeTab():void {
			if(tn.numChildren > 0){
				numChild --;
 
				tn.removeChildAt(numChild);
			}
		}
	]]>
 </mx:Script>
 

 
package {
	import flash.net.URLRequest;
	import flash.display.*;
	import flash.events.*;
	import SliderClip;
	public class ImageLoader extends MovieClip
	{
 
		private var clip:SliderClip;
		private var url:String;
		private var loader:Loader;
 
		private var targetX:Number=100;
		private var targetY:Number=100;
		private var speed:Number=2;
		public function ImageLoader(purl,tx,ty,s)
		{
			targetX = tx,
			targetY = ty;
 
			speed = s;
			url=purl
			clip = new SliderClip();
 
			addEventListener(Event.ADDED_TO_STAGE,onAddedToStage)
		}
		private function onAddedToStage(e:Event)
		{
			loader = new Loader();
            configureListeners(loader.contentLoaderInfo);
			var request:URLRequest = new URLRequest(url);
			loader.load(request);
			//addChild(loader);
			stage.addEventListener(Event.RESIZE, onResize);
		}
		private function onResize(e:Event)
		{
			clip.x = stage.stageWidth / 2;
			clip.y = stage.stageHeight / 2;
			loader.x = clip.x - clip.width / 2 + 5;
			loader.y = clip.y - clip.height / 2 + 5;
		}
		private function configureListeners(dispatcher:IEventDispatcher):void {
            dispatcher.addEventListener(Event.COMPLETE, completeHandler);
            dispatcher.addEventListener(Event.INIT, initHandler);
            dispatcher.addEventListener(IOErrorEvent.IO_ERROR, error);
            dispatcher.addEventListener(Event.OPEN, openHandler);
            dispatcher.addEventListener(ProgressEvent.PROGRESS, progressHandler);
 
        }
 
        private function completeHandler(event:Event):void {
            trace("completeHandler: " + event);
        }
        private function initHandler(event:Event):void {
            //trace("initHandler: " + event);
			//trace(event.target.width)
			addChild(clip);
			clip.goTo(targetX,targetY,event.target.width+10,event.target.height+10,speed);
			clip.addEventListener(Event.COMPLETE,loadContent)
        }
		private function loadContent(e:Event)
		{
			addChild(loader)
			loader.x = clip.x - clip.width / 2 + 5;
			loader.y = clip.y - clip.height / 2 + 5;
		}
        private function error(event:*):void {
            trace("Error: " + event);
        }
 
        private function openHandler(event:Event):void {
            trace("openHandler: " + event);
        }
 
        private function progressHandler(event:ProgressEvent):void {
            trace("progressHandler: bytesLoaded=" + event.bytesLoaded + " bytesTotal=" + event.bytesTotal);
        }
 
	}
 
}

La classe qui gère le slider :

 
package {
	import flash.display.*;
	import flash.events.Event;
	import flash.filters.DropShadowFilter;
	public class SliderClip extends MovieClip
	{
		public static const PLACED:String = "PLACED";
		private var targetX:Number=100;
		private var targetY:Number=100;
		private var targetWidth:Number=100;
		private var targetHeight:Number=100;
		private var speed:Number=2;
		public function SliderClip()
		{
 
			//new DropShadowFilter(distance,angle, color,alpha,blurX,blurY,strength,quality,inner,knockout);
			var shadow=new DropShadowFilter(0, 45, 0x000000, 1, 13, 13, 0.7);
			this.filters = [shadow];
			this.alpha = 0.7;
		}
		public function goTo(ptargetX, ptargetY, ptargetWidth, ptargetHeight, pspeed)
		{
			targetX = ptargetX;
			targetY = ptargetY;
			targetWidth = ptargetWidth;
			targetHeight = ptargetHeight;
			trace(targetX,targetY,targetWidth,targetHeight,speed);
			this.addEventListener(Event.ENTER_FRAME,slideClip);
			this.gotoAndPlay(1)
		}
		public function restart()
		{
			this.addEventListener(Event.ENTER_FRAME,slideClip);
			this.gotoAndPlay(1)
		}
		private function slideClip(e:Event) {
			var clip=this;
			if (Math.abs(targetX-clip.x)<1) {
				clip.x=targetX;
				if (Math.abs(targetY-clip.y)<1) {
					clip.y=targetY;
					clip.removeEventListener(Event.ENTER_FRAME,slideClip);
					clip.addEventListener(Event.ENTER_FRAME,resizeClip);
				} else {
					clip.y = clip.y+((targetY-clip.y)/speed);
				}
			} else {
				clip.x = clip.x+((targetX-clip.x)/speed);
			}
 
		}
 
		private function resizeClip(e:Event) {
			var clip=this;
			if ((targetWidth>0) && (targetHeight>0)) {
 
				if (Math.abs(targetWidth-clip.width)<1) {
					clip.width=targetWidth;
					if (Math.abs(targetHeight-clip.height)<1) {
						clip.height=targetHeight;
						trace("OK");
						dispatchEvent(new Event(Event.COMPLETE));
						clip.removeEventListener(Event.ENTER_FRAME,resizeClip);
					} else {
						clip.height = clip.height+((targetHeight-clip.height)/speed);
					}
				} else {
					clip.width = clip.width+((targetWidth-clip.width)/speed);
				}
			} else {
				clip.removeEventListener(Event.ENTER_FRAME,resizeClip);
			}
		}
 
	}
 
}
 

pour lancer le chargement d'une image il suffit alors d'instancier la classe ImageLoader :

 
	var imageLoader=new ImageLoader("http://labs.exoa.fr/upload/imageLoader/image.jpg",targetX,targetY,speed);
 

Les sources sont disponibles ici

 
package {
	import flash.display.Sprite;
	import flash.events.Event;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.*;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.render.BasicRenderEngine; 
 
	public class PaperBase2 extends Sprite { 
 
		public var viewport:Viewport3D;
		public var renderer:BasicRenderEngine;
		public var scene:Scene3D;
		public var camera:Camera3D; 
 
		public function init(Width:Number = 800, Height:Number = 600):void {
			initPapervision(Width, Height);
			init3d();
			init2d();
			initEvents();
		}
 
		protected function initPapervision(vpWidth:Number, vpHeight:Number):void {
			/**
			 * @param viewportWidth 	Width of the viewport
			 * @param viewportHeight 	Height of the viewport
			 * @param autoScaleToStage 	Determines whether the viewport should resize when the stage resizes
			 * @param interactive 		Determines whether the viewport should listen for Mouse events by creating an <code>InteractiveSceneManager</code>
			 * @param autoClipping 		Determines whether DisplayObject3Ds outside the rectangle of the viewport should be rendered
			 * @param autoCulling 		Detemines whether only the objects in front of the camera should be rendered. In other words, if a triangle is hidden by another triangle from the camera, it will not be rendered.
			 */
			viewport = new Viewport3D(vpWidth, vpHeight,true,true,true,true);
 
			addChild(viewport);
			renderer = new BasicRenderEngine();
			scene = new Scene3D();
			/**
			 * Constructor.
			 *
			 * @param	fov		This value is the vertical Field Of View (FOV) in degrees.
			 * @param	near	Distance to the near clipping plane.
			 * @param	far		Distance to the far clipping plane.
			 * @param	useCulling		Boolean indicating whether to use frustum culling. When true all objects outside the view will be culled.
			 * @param	useProjection 	Boolean indicating whether to use a projection matrix for perspective.
			(fov:Number=60, near:Number=10, far:Number=5000, useCulling:Boolean=false, useProjection:Boolean=false)
			 */
			camera = new Camera3D(60,10,5000,false,false);
		}
 
		protected function init3d():void {
 
		}
 
		protected function init2d():void {
 
		}
 
		protected function initEvents():void {
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
 
		protected function processFrame():void {
			// Process any movement or animation here.
		}
 
		protected function onEnterFrame( ThisEvent:Event ):void {
			processFrame();
			renderer.renderScene(scene, camera, viewport);
		}
 
	}
 
}

La classe Main utilisant le shader et une lumière:

 
package
{
	import flash.net.URLRequest;
	import flash.net.URLLoader;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.utils.*;
	import XML;
	import flash.geom.Matrix;
	import flash.geom.Transform;
	import flash.display.GradientType;
	import flash.system.System;
	import XMLList;
	import flash.events.MouseEvent;
	import flash.filters.*;
	import flash.display.*;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.materials.*;
 
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shaders.PhongShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
 
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.objects.primitives.Plane;
 
	public class main extends PaperBase2
	{
 
		private var plane:Plane;
 
		public function main()
		{
			init();
			var request:URLRequest = new URLRequest("image.jpg");
			var bitmap:Loader = new Loader();
			bitmap.contentLoaderInfo.addEventListener(Event.COMPLETE, loadBitmapCompleteHandler);
			bitmap.load(request);
		}
		public function loadBitmapCompleteHandler(e:Event){
 
			var loader:Loader = Loader(e.target.loader);
			var bitmap:Bitmap = Bitmap(loader.content);
 
			var material = new BitmapFileMaterial("image.jpg");
			material.doubleSided = true;
 
			camera.z = -500;
 
			var light:PointLight3D = new PointLight3D();
			var bitmapMaterial:BitmapMaterial = new BitmapMaterial(bitmap.bitmapData, true);
			var shader:PhongShader = new PhongShader(light, 0xffffff, 0x000000, 10);
			var shadedMaterial:ShadedMaterial = new ShadedMaterial(bitmapMaterial, shader);
			shadedMaterial.doubleSided = true;
 
			plane = new Plane(shadedMaterial);
 
			scene.addChild(plane);
 
 		}
 
 		override protected function processFrame():void {
			if(plane)
 			plane.rotationY = viewport.containerSprite.mouseX / 4;
 			//super.onRenderTick(event);
 		}
	}
}