EKAMELEON - DevBlog ActionScript & ECMAScript

Signals and Receivers

eKameleon — Mon, 01 Mar 2010 19:30:00 +0100

Generality

The "signal engine" include in the package system.signals is a very easy ActionScript 3 messaging tools.

With the Signaler interface we can define objects who communicates by signals and can be use to create a light-weight implementation of the Observer pattern. A signal emit simple values with its own array of receivers (slots). This values can be strongly-typed with an optional internal checking process.

Receivers can be defines with a simple function reference or a custom objects who implements the interface system.signals.Receiver .

Receivers subscribe to real objects, not to string-based channels andEvent string constants are no longer needed like W3C DOM 2/3 event model.

Interfaces

The system.signals package contains two interfaces : Signaler and Receiver.

The Signaler interface is simple but contains all important methods to deploy your signals.

package system.signals
{
    public interface Signaler
    {
        /**
         * Indicates the number of receivers connected.
         */
        function get length():uint ;
 
        /**
         * Connects a Function reference or a Receiver object.
         * @param receiver The receiver to connect : a Function reference or a Receiver object.
         * @param priority Determinates the priority level of the receiver.
         * @param autoDisconnect Apply a disconnect after the first trigger
         * @return true If the receiver is connected with the signal emitter.
         */
        function connect( receiver:* , priority:uint = 0 , autoDisconnect:Boolean = false ):Boolean ;
 
        /**
         * Returns true if one or more receivers are connected.
         * @return true if one or more receivers are connected.
         */
        function connected():Boolean ;
 
        /**
         * Disconnect the specified object or all objects if the parameter is null.
         * @return true if the specified receiver exist and can be unregister.
         */
        function disconnect( receiver:* = null ):Boolean ;
 
        /**
         * Emit the specified values to the receivers.
         * @param ...values All values to emit to the receivers.
         */
        function emit( ...values:Array ):void ;
 
        /**
         * Returns true if specified receiver is connected.
         * @return true if specified receiver is connected.
         */
        function hasReceiver( receiver:* ):Boolean ;
    }
}

The Receiver interface is optional and can be use to defines a basic slot connected with Signaler objects with the connect() method (only the receive method is connected with the signal not the Receiver reference).

package system.signals
{
    /**
     * The Receiver defines a simple method for receiving values from Signaler objects.
     */
    public interface Receiver
    {
        /**
         * This method is called when the receiver is connected with a Signal object.
         * @param ...values All the values emitting by the signals connected with this object.
         */
        function receive( ...values:Array ):void ;
    }
}

Hello World

We begin with a first basic example. In this example we use the system.signals.Signal, this class is a basic but full implementation of the Signaler interface. This script can be compiled as an application with mxmlc or as a document class in Flash Professional or all ActionScript IDE (FDT, etc.)

package examples
{
    import system.signals.Signal;
    import flash.display.Sprite;
 
    [SWF(width="740", height="480", frameRate="24", backgroundColor="#666666")]
 
    public class SignalExample extends Sprite
    {
        public function SignalExample ()
        {
            var signal:Signal = new Signal() ;
 
            signal.connect( write ) ;
 
            signal.emit( "hello world" ) ; // hello world
            signal.emit( "thank you" ) ; // thank you
        }
 
        public function write( message:String ):void
        {
            trace( message ) ;
        }
    }
}

Features

Signals have many features.

Restrict the types and the number of arguments passed-in the emit method.

A signal can be initialized with specific value classes that will validate value objects on dispatch (optional).

The 'types' property is an optional read-write Array attribute who can register Class references to defines a validation when the signal emit. If this property is null the signal not check the emit parameters.

var signal:Signal = new Signal([ String , Number , uint ] ) ;
 
trace( "restricted types : " + signal.types ) ;

If the 'types' property is null the signal not check the types and the number of the passed-in arguments when the emit method is invoked.

Basic example to restrict the emit method with 3 arguments with the types String , Number and uint.

import system.signals.Signal ;
 
var slot:Function = function( ...values:Array ):void
{
    trace("receive : " + values ) ;
}
 
var signal:Signal ;
 
signal = new Signal() ;
signal.types = [ String , Number , uint ] ;
 
signal.connect( slot ) ;
 
signal.emit( "hello" , 2.5, 4 ) ; // receive : hello,2.5,4
 
try
{
    signal.emit( "hello" , 2.5 , 4.5 ) ;
}
catch( e:Error )
{
    trace( e.message ) ;
    // The parameter with the index 2 in the emit method isn't valid,
    // must be an instance of the [class uint] class but is an instance of the Number class.
}
 
try
{
    signal.emit( "hello" ) ;
}
catch( e:Error )
{
    trace( e.message ) ;
    // The number of arguments in the emit method is not valid,
    // must be invoked with 3 argument(s) and you call it with 1 argument(s).
}
 
try
{
    signal.emit() ;
}
catch( e:Error )
{
    trace( e.message ) ;
    // The number of arguments in the emit method is not valid,
    // must be invoked with 3 argument(s) and you call it with 0 argument(s).
}

Disconnect a specific receiver or all receiver

You can disconnect the receivers registered in a Signaler object with the method disconnect(). This method can target a specific receiver (function reference or Receiver instance) but you can disconnect all registered receivers if you don't passed-in value.

Example :

import system.signals.Signal ;
 
var signal:Signal = new Signal() ;
 
signal.connect( slot1 ) ;
signal.connect( slot2 ) ;
signal.connect( slot3 ) ;
 
trace( signal.length ) ; // 3
 
signal.disconnect( slot2 ) ;
 
trace( signal.length ) ; // 2
 
signal.disconnect() ; // disconnect all
 
trace( signal.length ) ; // 0

Note :

You can retrieve the number of receivers with the read-only attribute : signal.length
You can retrieve if the signal contains one or more receivers with the method : signal.connected():Boolean
You can retrieve if a specific receiver is connected with the method : signal.hasReceiver( receiver:* ):Boolean

Auto disconnect feature

Receivers can be added for a one-time call and removed automatically on dispatch

import system.signals.Signal ;
 
var receiver:Function = function( message:String ):void
{
    trace( message ) ;
}
 
var signal:Signal = new Signal() ;
 
signal.connect( receiver , 0 , true ) ;
 
signal.emit( "hello world" ) ; // hello world
signal.emit( "bonjour monde" ) ;

Only the first message is dispatched, the reveiver is automatically disconnected and can't receive the next messages.

Receiver priority

When you connect a receiver with the connect method you can apply a priority over your reference.

The priority is designated by an uint value( an integer > 0 ). The higher the number, the higher the priority. All receivers with priority n are processed before receivers of priority n-1. If two or more receivers share the same priority, they are processed in the order in which they were added. The default priority is 0.

import system.signals.Signal ;
 
var slot1:Function = function( message:String ):void
{
    trace( "slot1: " + message ) ;
}
 
var slot2:Function = function( message:String ):void
{
    trace( "slot2: " + message ) ;
}
 
var slot3:Function = function( message:String ):void
{
    trace( "slot3: " + message ) ;
}
 
var signal:Signal = new Signal() ;
 
signal.connect( slot1 ,  10 ) ;
signal.connect( slot2 , 999 ) ;
signal.connect( slot3 , 400 ) ;
 
signal.emit( "hello world" ) ;
 
// slot2: hello world
// slot3: hello world
// slot1: hello world

Use composition with the system.signals.Signaler interface

package examples.signals
{
    import system.signals.Signal;
    import system.signals.Signaler;
 
    import flash.display.Sprite;
    import flash.events.MouseEvent;
 
    public class SignalButton extends Sprite implements Signaler
    {
        public function SignalButton( width:Number = 160 , height:Number = 20 , color:Number = 0xA2A2A2 ):void
        {
            _signal = new Signal( [ String , SignalButton ] ) ;
            addEventListener( MouseEvent.CLICK , _click ) ;
            graphics.beginFill( color ) ;
            graphics.drawRect( 0 , 0 , width , height ) ;
            buttonMode    = true ;
            mouseEnabled  = true ;
            useHandCursor = true ;
        }
 
        public function get length():uint ;
        {
            return _signal.length ;
        }
 
        public function connect( receiver:* , priority:uint = 0 , autoDisconnect:Boolean = false ):Boolean
        {
            return _signal.connect( receiver , priority , autoDisconnect ) ;
        }
 
        public function connected():Boolean
         {
            return _signal.connected() ;
        }
 
        public function disconnect( receiver:* = null ):Boolean
        {
            return _signal.disconnect( receiver ) ;
        }
 
        public function emit( ...values:Array ):void
        {
            _signal.emit.apply( values ) ;
        }
 
        public function hasReceiver( receiver:* ):Boolean
        {
            return _signal.hasReceiver( receiver )
        }
 
        private var _signal:Signal ;
 
        private function _click( e:MouseEvent ):void
        {
            _signal.emit( "click" , this ) ;
        }
    }
}

Now we can write a little example to use the previous class :

package examples
 {
    import examples.signals.SignalButton;
 
    import flash.display.Sprite;
 
    [SWF(width="760", height="480", frameRate="24", backgroundColor="#666666")]
 
    public class SignalButtonExample extends Sprite
    {
        public function SignalButtonExample()
        {
            var button:SignalButton = new SignalButton( 200 , 24 , 0xCCCCCC ) ;
 
            button.x = 25 ;
            button.y = 24 ;
 
            button.connect( notify ) ;
 
            addChild( button ) ;
        }
 
        public function notify( type:String , target:SignalButton ):void
        {
            trace( "notify : " + type + " in " + target ) ;
        }
    }
 }

Basic example to use the system.signals.Receiver interface

First we defines a little class Messenger who format a specific receiving message with a name and a string pattern.

package examples.signals
{
    import system.Strings;
    import system.console;
    import system.signals.Receiver;
 
    public class Messenger implements Receiver
    {
        public function Messenger( pattern:String = "{0}:{1}" ):void
        {
            this.pattern = pattern ;
        }
 
        public var pattern:String ;
 
        public function receive( ...values:Array ):void
        {
            var name:String    = values[0] as String ;
            var message:String = values[1] as String ;
            console.writeLine( Strings.format( pattern , name , message ) ) ;
        }
    }
}

Now the document class to compile the basic example.

package examples 
{
    import examples.signals.Messenger;
 
    import system.console;
    import system.diagnostics.TextFieldConsole;
    import system.signals.Signal;
 
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.text.TextField;
    import flash.text.TextFormat;
 
    [SWF(width="760", height="480", frameRate="24", backgroundColor="#666666")]
 
    public class MessengerExample extends Sprite
    {
        public function MessengerExample()
        {
            // stage
 
            stage.align     = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
 
            stage.addEventListener( Event.RESIZE , resize ) ;
 
            // console
 
            textfield                   = new TextField() ;
            textfield.defaultTextFormat = new TextFormat( "Courier New" , 14 , 0xFFFFFF ) ;
            textfield.multiline         = true ;
            textfield.selectable        = true ;
            textfield.wordWrap          = true ;
 
            addChild( textfield ) ;
 
            resize() ;
 
            console = new TextFieldConsole( textfield ) ;
 
            // receiver
 
            var messenger:Messenger = new Messenger( "{0} say: {1}" )  ;
 
            // signaler
 
            signal = new Signal([String,String]) ;
 
            signal.connect( messenger ) ;
 
            signal.emit( "john" , "hello world" ) ;
            signal.emit( "jack" , "Hi !" ) ;
            signal.emit( "jack" , "signals are fast" ) ;
        }
 
        public var signal:Signal ;
 
        public var textfield:TextField ;
 
        public function resize( e:Event = null ):void
        {
            if ( stage && textfield )
            {
                textfield.width  = stage.stageWidth ;
                textfield.height = stage.stageHeight ;
            }
        }
    }
}

Note : you can read this article in my google site with the article "Signals and Receivers" (this version is always updated with Google Documents)

More informations about VEGAS the ActionScript/ECMAScript opensource framework in Google code :

Install and download VEGAS

Vacances à New York ... rattrapé par Flash et Adobe :)

eKameleon — Wed, 30 Sep 2009 22:10:00 +0200

Petit message super minimaliste pour vous annoncer mon retour de vacances (premières vraies vacances depuis des années) et forcément bientôt des nouveautés...

En attendant voici deux petites photos qui montrent que même en vacances de l'autre côté de l'atlantique il est vraiment très difficile de ne pas me retrouver proche de la communauté Flash :D

Photos prises sur Times Square au milieu des tas d'écrans publicitaires ... franchement faut le faire

D - Chargement de ressources externes ( Partie 5 - localization )

eKameleon — Thu, 27 Aug 2009 17:45:00 +0200

Les ressources de type "i18n" (localisation)

Généralités

Il est très important de pouvoir "localiser" (ou régionaliser) nos applications. Localiser une application permet de rendre dynamique son contenu (texte, sonore ou autres) en créant une interface utilisateur qui peut changer en fonction d'une langue en particulier. La localisation d'une application permet d'améliorer l'accessibilité pour différents utilisateurs et il est certain qu'avec toutes les difficultés que l'on peut avoir pour communiquer de façon général, il est tout de même sympathique de pouvoir le faire avec le plus grand nombre dans le monde entier.

Une bon moteur de localisation permet de changer à tout moment les traductions et éléments graphiques de l'application en fonction de données traduites dans plusieurs langues. Il est certain que le plus souvent la localisation d'un site passe par une page d'accueil simple qui permet de diriger l'utilisateur vers une version spécifique de l'application avec un contenu régionalisé.

Fonctionnalités importantes du moteur de localisations définies dans AndromedAS :

Externalisation des traductions et documents.
Utilisation de fichiers ou données externes encodées en UTF8.
Moteur dynamique au "runtime". La localisation doit être totalement dynamique et doit intervenir après la compilation (plus léger et plus simple à maintenir)
API simplifiée permettant de centraliser les mises à jours de l'interface utilisateur via un mapping utilisant plusieurs stratégies selon les besoins.
Par défaut, utilisation du format de donnée eden ou JSON (http://www.json.org). Malgré tout il est assez simple de créer un module de parsing basé sur une autre notation comme du XML.

Dans Flash et surtout dans le framework de base ActionScript nous trouvons la propriété flash.system.Capabilites.language qui permet à tout moment de renvoyer le code langue du système dans lequel l'application swf vient d'être lancée. L'ActionScript se base sur des noms des "codes langue" au format ISO 639-1, par exemple la propriété language aura pour valeur "fr" si le système par défaut est un système français.

Implémentation du moteur de localisation de AndromedAS

Dans AndromedAS le moteur de localisation se trouve dans le package andromeda.i18n.

1 - La classe andromeda.i18n.Lang

La première classe que nous allons étudier dans ce package est la classe andromeda.i18n.Lang qui permet d'énumérer les "codes langue" par défaut définis par la norme ISO 639-1 dans le FlashPlayer.

Cette classe donne un outil simple pour valider dans vos applications les langues disponibles.

Il est ainsi possible d'ajouter d'autres langues en cas de besoin dans la liste des langues par défaut du FlashPlayer mais bien entendu elle ne seront pas prises en compte automatiquement par la propriété flash.system.Capabilities.language (AS3) du FlashPlayer.

Voici un exemple d'utilisation de cette classe :

import asgard.i18n.Lang ;
 
trace( "Lang.ES.toString() : " + Lang.ES.toString() ) ; // es
trace( "Lang.ES.valueOf()  : " + Lang.ES.valueOf()  ) ; // es
trace( "Lang.ES.toSource() : " + Lang.ES.toSource() ) ; // new andromeda.i18n.Lang( "es" , "Spanish" )
trace( "Lang.ES.label      : " + Lang.ES.label      ) ; // Spanish
 
trace( "Lang.get('fr') == Lang.FR : " + ( Lang.get("fr") == Lang.FR ) ) ; // true
trace( "Lang.validate('fr') : " + Lang.validate('fr') ) ; // true
trace( "Lang.validate( Lang.FR ) : " + Lang.validate( Lang.FR ) ) ; // true
 
trace( "Lang.LANGS : " + Lang.LANGS ) ;
// {pl:pl,nl:nl,es:es,tr:tr,it:it,da:da,pt:pt,fi:fi,zh-CN:zh-CN,no:no,ja:ja,de:de,ru:ru,fr:fr,zh-TW:zh-TW,xu:xu,ko:ko,en:en,sv:sv,cs:cs,hu:hu}
 
trace( "Lang.LANGS.size() : " + Lang.LANGS.size() ) ; // 21

2 - Fichier externe et nomenclature

Les données externes permettant la création des différentes versions du contenu de l'application localisée doivent être par défaut au format eden. Le format eden permet de créer rapidement des fichiers de configuration simples.

En général, il est possible d'utiliser une nomenclature spécifique pour créer les fichiers textes externes de localisation. Par exemple pour créer un fichier de configuration en français avec un contexte spécifique, il suffira de créer le fichier :

"locale/localize_fr.eden".

Nous isolons donc cette notation en la divisant en 4 éléments distincts : {path}{prefix}{lang}[suffix}

Il existe une interface simple qui permet de créer facilement des objets qui permettent de charger les fichiers de localisation.

Cette interface en AS3 est l'interface andromeda.i18n.ILocalizationLoader est définie avec la signature suivante :

/**
 * Indicates the Localization reference of the loader.
 */
function get localization():Localization ;
function set localization( localization:Localization ):void ;
 
/**
 * The path of the external file.
 */
function get path():String ;
function set path( value:String ):void ;
 
/**
 * Determinates the prefix value of the localization files.
 */
function get prefix():String ;
function set prefix(s:String):void ;
 
/**
 * The suffix of the localization file.
 */
function get suffix():String ;
function set suffix( value:String ):void ;
 
/**
 * Sends and loads data from the specified passed-in lang value (the passed-in argument must be a Lang reference or a valid string).
 * @param lang The localization Lang value
 */
function loadLang( lang:* ):void ;

Ainsi par défaut vous pouvez utiliser la classe andromeda.i18n.EdenLocalizationLoader ou la classe andromeda.i18n.JSONLocalizationLoader pour charger vos fichiers de localisation et mettre à jour automatiquement la ou les moteur de localisation de votre application.

Donc imaginons une application qui doit charger des textes et des contenus en version français et anglais, nous pouvons mettre en place 2 fichiers textes (UTF8) au format eden :

Contenu du fichier localize_fr.eden (français) :

{
 
    lang        : "fr" ,
    namespace   : "http://www.ekameleon.net/2009/andromeda" ,
    version     : "1.0.0.0" ,
    type : "eden" ,
 
    door :
    {
        connectStarted    : "DEBUT CONNEXION" ,
        connectFinished   : "FIN CONNEXION" ,       
        connectInProgress : "CONNEXION EN COURS" ,       
        connectOutOfTime  : "DELAIS DE CONNEXION DEPASSE"
    }
    ,
    info :
    {
        finish_loading   : "Fin du chargement"   ,
        progress_loading : "Chargement en cours" ,
        start_loading    : "Début du chargement"
    }
    ,  
    myField :
    {
        selectable : true ,
        text       : "Bonjour le monde"
    }
}

Contenu du fichier localize_en.eden (anglais) :

{     
    lang        : "en" ,
    namespace   : "http://www.ekameleon.net/2009/andromeda" ,
    version     : "1.0.0.0" ,
    type : "eden" ,
    door :
    {    
         connectStarted    : "START CONNECTION" ,
         connectFinished   : "FINISH CONNECTION" ,       
         connectInProgress : "CONNECTION IN PROGRESS" ,       
         connectOutOfTime  : "THE CONNECTION IS OUT OF TIME"
    }
    ,
    info :
    {
        finish_loading   : "THE LOADING IS FINISHED" ,
        progress_loading : "THE LOADING IS IN PROGRESS" ,
        start_loading    : "THE LOADING IS STARTED"
    }
    ,
    myField :
    {
          selectable : false ,
          text       : "Hello world"
    }
}

3 - La classe Localization

La classe andromeda.i18n.Localization centralise le moteur de localisation de VEGAS avec une gestion globale via multi-singletons des références de type Localization. En effet il est possible de créer plusieurs références distinctes et globales pour gérer de façon séparé plusieurs localisations dans une même application. Malgré cela je vous avoue qu'il est assez rare d'utiliser plusieurs référence de type Localization dans une même application.

La classe Localization contient donc une méthode statique getInstance(id:String) qui renvoie à tout moment un singleton de type Localization dans le code de l'application. Exemple :

var localization:Localization  = Localization.getInstance() ;

Je vous conseille de lire tranquillement la documentation de cette classe avant de lire la suite : http://www.ekameleon.net/vegas/docs/andromeda/i18n/Localization.html

La classe Localization contient une HashMap qui lui permet de stocker simplement des objets de type andromeda.i18n.Locale dynamiques qui contiendront les propriétés chargées dans les fichiers de texte externes en fonction des "code langues" utilisés dans l'application.

La classe Locale est une classe très très simple et surtout "dynamique" qui permet de créer des objets typés compatibles avec le moteur de localisation. Les instances de type Locale servent avant tout à récupérer les données contenus dans les objets externes.

La classe Localization peut diffuser des événements, le plus important de tous est l'événement LocalizationEvent.CHANGE qui notifie la mise à jour du moteur de localisation. L'application utilisateur peut ainsi changer si la langue courante du moteur change. Exemple :

import andromeda.events.LocalizationEvent ;
import andromeda.i18n.Localization ;
 
var change:Function = function( e:LocalizationEvent )
{
    trace( e ) ; // changer les vues de l'application maintenant
}
 
var localization:Localization = Localization.getInstance() ;
 
localization.addEventListener( LocalizationEvent.CHANGE , change ) ;

Voyons maintenant de plus prêt comment fonctionne le moteur de localisation.

La classe Localization possède une gestion des langues basée sur un "buffer", pour toutes les langues utilisées dans l'application un objet de type Locale est créé et permet de récupérer simplement les textes et données. Si pour un identifiant de langue donné l'instance de type Localization ne possède pas encore les données (aucun objet Locale n'existe encore), alors la Localization utilise un objet spécialisé qui va charger automatiquement les données nécessaires dans le fichier externe correspondant à la langue courante sélectionnée.

Pour changer à tout moment de langue courante il suffit donc sur l'objet de type Localization d'utiliser la propriété virtuelle "current" comme ceci :

Localization.getInstance().current = Lang.FR ; // français avec utilisation de l'énumération Lang.

ou directement :

Localization.getInstance().current = "en" ; // anglais utilisation directe d'un identifiant String valide.

Pour charger les données externes, la localisation utilise en interne un chargeur qui implémente l'interface andromeda.i18n.ILocalizationLoader comme défini au début de cet tutoriel. Il est possible à tout moment de récupérer ou modifier la référence interne du loader de la Localization via la propriété "loader" :

import system.events.ActionEvent ;
 
var loader:EdenLocalizationLoader = localization.loader as EdenLocalizationLoader ;
 
loader.addEventListener( ActionEvent.START , debug ) ;
loader.addEventListener( ActionEvent.FINISH , debug ) ;
 
loader.path = "locale/" ;

Dans ce petit bout de code je récupère la référence du chargeur et j'écoute les événements ActionEvent.START et ActionEvent.FINISH qui notifient le début et la fin du chargement opéré par le loader. Je modifie aussi la propriété "path" de l'objet pour définir un chemin différent pour le fichier "localize_ID.eden" que je vais charger quand la propriété "current" sera utilisé pour la première fois pour un identifiant de langue donné

A noter que si pour un identifiant de langue, l'objet de type Locale existe déjà dans la Localization, l'événement LocalizationEvent.CHANGE et directement invoqué étant donné que le moteur n'a pas besoin de charger à nouveau les données. Cette optimisation permet d'éviter certaines lourdeurs dans une application. Il est évidant qu'il est assez rare de devoir modifier plusieurs fois dynamiquement le contenu pour une langue donnée des données externes d'une même application.

En cas de soucis il est tout de même possible à tout moment d'utiliser la méthode "remove( id )" pour vider pour un identifiant de langue spécifique le buffer interne de la Localization. Par la suite si la propriété "current" est réutilisé pour le même identifiant de langue, les données externes seront chargées à nouveau et remplies dans le buffer du moteur de localisation.

Localization.getInstance().remove( Lang.FR ) ; // vider le cache
 
Localization.getInstance().current = Lang.FR ; // recharger et remettre à jour la vue

4 - La méthode Localization.getLocale()

Dans les points précédents nous avons pu voir comment charger les données externes et modifier à tout moment la langue courante du moteur de localisation avec notification de ce changement par un événement.

Maintenant il reste à comprendre comment récupérer les données contenues dans l'objet de type Locale défini pour la langue courante.

Pour récupérer à tout moment l'objet de type Locale il suffit donc d'utiliser la méthode getLocale() comme ceci :

var locale:Locale = Localization.getInstance().getLocale() ;
for (var prop:String in locale)
{
    trace("  * " + prop+ " : " + locale[prop]) ; // énumération des données contenues dans l'objet 
}

Si par exemple je cherche à récupérer dans les exemples définis au début du tutoriel un texte en particulier je peux taper par exemple directement :

var message:String = Localization.getInstance().getLocale().info.start_loading ;
trace( message ) ; // Début du chargement

Maintenant j'ai ajouté une petite fonctionnalité particulière dans cette méthode avec la possibilité d'inclure un paramètre dans la méthode "getLocale" qui permet de localiser plus finement un attribut en particulier dans l'objet Locale, par exemple :

var message:String = Localization.getInstance().getLocale("info.start_loading") ;
trace(message) ; // Début du chargement

Je vais récupérer automatiquement dans l'objet "info" contenu dans l'objet Locale la valeur voulue.

J'utilise beaucoup cette fonctionnalité avec un câblage un peu particulier de mes éléments graphiques. En effet de façon général tous mes éléments graphiques (clips, champs de texte etc... ) sont identifiables et possèdent tous un identifiant unique qui leur permet d'être unique dans l'application. Mais je me sers beaucoup de cette fonctionnalité pour récupérer pour chacun de mes éléments graphiques le contenu localisé qui leur est destiné.

5 - La méthode Localization.init()

Dernière petite méthode particulière du moteur de localisation avec la méthode "init()", cette méthode est définie comme ceci :

function init( o:Object , id:String=null , callback:Function=null ):void

Elle prend en paramètre les arguments suivant :

o : un objet que l'on souhaite mapper avec toutes les valeurs contenues dans la localisation pour un identifiant donné.
id : un identifiant de type String qui permet une recherche dans l'objet Locale pour la langue courante et qui permet de copier membre à membre toutes les propriétés contenus dans l'attribut spécifique dans l'objet spécifié dans la méthode. Si cet argument n'est pas défini, la recherche se fait dans l'objet Locale directement.
callback : une méthode optionnelle que l'on souhaite invoquer une fois que l'opération est terminée.

Exemple complet

Voici un exemple simple des fonctionnalités décrites ci-dessus.

A noter que tous les exemples de ce tutoriel se trouvent dans le repository SVN dans le répertoire AS3/trunk/bin/test/andromeda/i18n .

Vous trouverez dans ce répertoire des exemples utilisant eden ou JSON avec les FLA pour Flash et les fichiers textes encodés en UTF8 (voir définition de ces fichiers plus haut).

import andromeda.events.LocalizationEvent ;
 
import andromeda.i18n.EdenLocalizationLoader ;
import andromeda.i18n.Lang ;
import andromeda.i18n.Locale ;
import andromeda.i18n.Localization ;
 
import asgard.text.CoreTextField ;  
 
import flash.text.TextFormat ; 
 
import system.events.ActionEvent ;
 
var field:CoreTextField = new CoreTextField("myField") ;
 
field.defaultTextFormat = new TextFormat("arial", 12) ;
 
field.width  = 300 ;
field.height = 20  ;
 
field.x = 25  ;
field.y = 25  ;
 
var debug:Function = function( e:Event ):void
{
    trace("------- " + e.type ) ;
}
 
var change:Function = function( e:LocalizationEvent )
{
    var target:Localization = e.target ;
    var current:Lang        = e.current ;
    var locale:Locale       = e.getLocale() ;
    trace("# change current " + current ) ;
    trace("# change locale  " + locale  ) ;
 
    for (var each:String in locale)
    {
        trace("  * " + each + " : " + locale[each]) ;
        for (var prop:String in locale[each])
        {
            trace("    * " + prop + " : " + locale[each][prop]) ;
        }
    }
 
    // map the CoreTextField instance with this id attribute 
 
    Localization.getInstance().init( field , field.id ) ;
 
    // field.id == "myField", see this attribute in the localize_fr.eden file for example
}
 
var localization:Localization  = Localization.getInstance() ;
 
localization.addEventListener( LocalizationEvent.CHANGE , change ) ;
 
var loader:EdenLocalizationLoader = localization.loader as EdenLocalizationLoader ;
 
loader.addEventListener( ActionEvent.START  , debug ) ;
loader.addEventListener( ActionEvent.FINISH , debug ) ;
 
loader.path = "locale/" ;
 
localization.current = Lang.FR ;
 
var keyDown:Function = function( e:KeyboardEvent ):void
{
    var code:int = e.keyCode ;
    switch( code )
    {
        case Keyboard.UP :
        {
            localization.current = Lang.EN ;
            break ;
        }
        case Keyboard.DOWN :
        {
            localization.current = "fr" ;
            break ;
        }
    }
}
 
stage.addEventListener( KeyboardEvent.KEY_DOWN , keyDown ) ;

Dans cet exemple j'utilise à peu prêt toutes les fonctionnalités décrites précédemment. A noter que pour le petit test, j'utilise la classe asgard.text.CoreTextField qui est une superclasse de la classe flash.text.TextField.

Cette classe implémente l'interface system.data.Identifiable comme toutes les implémentations visuelles de ASGard (CoreSprite, CoreMovieClip, CoreBitmap, etc.), ainsi chaque instance possède un identifiant unique "id" dans l'application.

Nous nous servons donc de cet identifiant dans les fichiers de configuration ou de localisation de l'application pour retrouver rapidement dans la structure objet de l'objet Locale l'attribut correspondant à l'élément graphique voulu, exemple :

Localization.getInstance().init( field , field.id ) ; // field.id == "myField", see this attribute in the localize_fr.eden file for example

4 - Initialisation du moteur de localisation avec des ressources de types "i18n"

Les ressources de type "i18n" permettent de charger un ou plusieurs fichier de localisation (par défaut au format eden) qui contiennent des variables qui seront utilisées par la suite dans les définitions d'objet de la fabrique mais aussi directement dans l'application en ciblant un singleton de la classe Localization via la méthode statique Localization.getInstance().

Regardons la signature minimale de l'objet générique qu'il est possible de définir dans l'attribut "imports" pour charger une ressource de type "i18n" :

{ resource : "fr" , type  : "i18n" }

Dans cet objet générique il est possible d'utiliser les attributs suivant :

Attributs obligatoires :

resource : indique la référence de la langue que l'on souhaite charger (obligatoire), cette chaine de caractère est définie en fonction des langues disponibles dans l'application (fr, en, it, etc.)
type : indispensable pour indiquer au chargeur que la ressource est de type "i18n".

Attributs optionnels :

path : indique le chemin du fichier à charger (exemple : path:"locale/" ).
prefix : Indique le préfixe utilisé pour créer le nom du fichier externe (par défaut le préfixe est défini avec la valeur "localize_")
suffix : Représente le nom de l'extension utilisée pour charger le fichier de localisation, par défaut cette extension a pour valeur la chaine de caractère : ".eden".
verbose : Un booléean qui active le mode debug de la ressource pour énumérer son contenu une fois chargée dans les logs de l'applications.
loader : Représente directement une référence vers une classe de type ILocalizationLoader ou une chaine de caractère qui représente le nom complet d'une classe de type ILocalizationLoader.

A noter que l'attribut "loader" permet de remplacer la classe EdenLocalizationLoader utilisée par défaut par la ressource pour chager le fichier de configuration externe. Il sera donc possible en cas de besoin d'utiliser un autre type de chargeur de localisation (JSON, XML, etc...). Il est préférable d'être un utilisateur avancé du framework pour toucher à cet attribut.

Les ressources de type "i18n" permettent d'initialiser des objets de type "andromeda.i18n.LocalResource" au niveau du chargeur de la fabrique IoC.

Exemple d'utilisation :

Le but de notre exemple est simple :

Créer un champ de texte dynamique et l'attacher sur la scène principale.
Afficher dans le champ de texte un message localisé en français ou anglais.
Avoir la possibilité de changer la langue de l'application à tout moment en appuyant sur une touche du clavier.
Enregistrer un événement pour écouter le moteur de localisation de l'application et changer le message du champ de texte en fonction de la langue courante.

Commençons par créer 2 fichiers textes encodés en UTF8 "locale/localize_fr.eden" et "locale/localize_en.eden" permettant respectivement de définir le message que nous voudrons afficher dans le champ de texte dynamique.

Contenu du fichier "localize_fr.eden" (langue française, code "fr") :

field =
{
    text : "Bonjour le monde"
};

Contenu du fichier "localize_en.eden" (langue anglaise, code "en") :

field =
{
    text : "Hello world"
};

Note : Nous pouvons créer autant de fichier de configuration que de langues disponibles dans l'application, il suffira pour chaque langue de standardiser le nom des fichiers textes avec la nomenclature désirée, ici "localize_xx.eden" avec xx le code de la langue définie dans le fichier de configuration au format eden.

Nous pouvons maintenant créer un fichier externe de configuration et de définition de la fabrique IoC de notre application :

imports =
[
    { resource : "fr" , type:"i18n" , prefix : "localize_" , path    :"locale/" , suffix : ".eden" , verbose : true } ,
    { resource : "en" , type:"i18n" , path   : "locale/"   , verbose : true }
] ;
 
objects =
[
    {
        id         : "localization" ,
        type       : "andromeda.i18n.Localization" ,
        singleton  : true ,
        lazyInit   : true ,
        staticFactoryMethod :
        {
            type : "andromeda.i18n.Localization" ,
            name : "getInstance"
        }
    }
    ,
    {
        id         : "field" ,
        type       : "flash.text.TextField" ,
        singleton  : true ,
        lazyInit   : true ,
        properties :
        [
            { name : "autoSize"          , value  : "left"                                           } ,
            { name : "defaultTextFormat" , value  : new flash.text.TextFormat("Arial", 14, 0xEEED2B) } ,
            { name : "text"              , locale : "field.text"                                     } ,
            { name : "x"                 , value  : 25                                               } ,
            { name : "y"                 , value  : 25                                               }
        ]
    }
    ,
    {
        id               : "application" ,
        type             : "examples.Application" ,
        factoryReference : "#root" ,
        singleton        : true ,
        properties       :
        [
            // dependencies
            { name : "field"        , ref : "field"        } ,
            { name : "localization" , ref : "localization" } ,
 
            // childs
             { name : "addChild" , arguments : [ { ref : "field" } ] }
        ]
        ,
        listeners :
        [
            { dispatcher : "localization" , type : "change" , method : "changeLocalization" }
        ]
    }
]

Nous définissons tout d'abord deux ressources de type i18n pour charger directement en mémoire les configurations localisées pour les langues "en" et "fr".

imports =
[
    { resource : "fr" , type:"i18n" , prefix : "localize_" , path    :"locale/" , suffix : ".eden" , verbose : true } ,
    { resource : "en" , type:"i18n" , path   : "locale/"   , verbose : true }
] ;

Il ne faut pas oublier que le chargement des ressources se fait de bas en haut dans l'objet "imports". La dernière langue chargée (ici "fr") sera donc la langue courante par défaut de l'application une fois la fabrique IoC initialisée.

En utilisant un chargeur de type ECMAObjectLoader par défaut c'est le singleton de la classe andromeda.i18n.Localization défini avec la méthode statique Localization.getInstance() qui est initialisé. Il est bien entendu tout à fait possible de modifier l'objet de localisation utilisé dans le loader de la fabrique.

Nous avons vu que la fabrique IoC contient par défaut une référence magique #locale mais aussi un attribut dans les définitions d'objet "locale" qui permet de cibler à tout moment l'objet courant de type andromeda.i18n.Locale de la localisation si une langue courante est définie et initialisée avec un fichier externe de configuration.

{
    id         : "field" ,
    type       : "flash.text.TextField" ,
    singleton  : true ,
    lazyInit   : true ,
    properties :
    [
        { name : "autoSize"          , value  : "left"                                           } ,
        { name : "defaultTextFormat" , value  : new flash.text.TextFormat("Arial", 14, 0xEEED2B) } ,
        { name : "text"              , locale : "field.text"                                     } ,
        { name : "x"                 , value  : 25                                               } ,
        { name : "y"                 , value  : 25                                               }
    ]
}

Nous voyons dans la définition d'objet précédente l'utilisation très simple de l'attribut "locale" qui permet de récupérer dans la localisation courante la valeur de la chaine de caractère field.text défini dans nos fichiers eden localisés au début de cet exemple.

Nous pouvons donc définir facilement la valeur d'un champ de texte ou l'url d'une image ou d'un swf externe en ciblant l'objet de localisation courant. Nous trouvons donc ici une réponse à la problématique d'injection de dépendance entre un objet défini dans l'application et un objet ou une valeur définie dans la localisation courante.

A noter que le context IoC externe ci-dessus est chargé avec le code ActionScript suivant :

package examples
    {
        import andromeda.events.LocalizationEvent;
        import andromeda.i18n.Lang;
        import andromeda.i18n.Localization;
 
        import asgard.net.ECMAObjectLoader;
 
        import flash.display.MovieClip;
        import flash.events.KeyboardEvent;
        import flash.text.TextField;
        import flash.ui.Keyboard;
 
        public class Application extends MovieClip
        {
            public function Application()
            {
                var loader:ECMAObjectLoader = new ECMAObjectLoader( "application_i18n_resource.eden" , "context/" ) ;
 
                loader.root = this ;
 
                loader.run() ;
 
                stage.addEventListener( KeyboardEvent.KEY_DOWN , keyDown ) ;
            }
 
            /**
             * The TextField reference.
             */
            public var field:TextField ;
 
            /**
             * The Localization reference of the application to change the current lang.
             */
            public var localization:Localization ;
 
            /**
             * Invoked when the localization of the application is changed.
             */
            public function changeLocalization( e:LocalizationEvent ):void
            {
                trace( e ) ;
                if( field != null )
                {
                    field.text = e.getLocale("field.text") ;
                }
            }
 
            /**
             * Invoked to change the current lang with the Keyboard.UP and Keyboard.DOWN keys.
             */
            public function keyDown( e:KeyboardEvent ):void
            {
                var code:uint = e.keyCode ;
                switch( code )
                {
                    case Keyboard.UP :
                    {
                        localization.current = Lang.EN ;
                        break ;
                    }
                    case Keyboard.DOWN :
                    {
                        localization.current = "fr" ;
                        break ;
                    }
                }
            }
        }
    }

Nous avons donc défini la classe "main" de notre application avec la classe examples.Application qui hérite de la classe flash.display.MovieClip.

{
    id               : "application" ,
    type             : "examples.Application" ,
    factoryReference : "#root" ,
    singleton        : true ,
    properties       :
    [
        // dependencies
        { name : "field"        , ref : "field"        } ,
        { name : "localization" , ref : "localization" } ,
 
        // childs
        { name : "addChild" , arguments : [ { ref : "field" } ] }
    ]
    ,
    listeners :
    [
        { dispatcher : "localization" , type : "change" , method : "changeLocalization" }
    ]
}

Nous noterons donc 2 dépendances sur cette définition d'objet avec les propriétés :

field : permet de créer une référence vers le champ de texte "field" défini dans la fabrique IoC avec la définition d'objet du même nom.
localization : permet de créer une référence vers la localisation de l'application et ainsi de pouvoir à tout moment changer la langue courante.

La localisation de l'application peut être définie dans le conteneur IoC et référencée très simplement en utilisant une définition d'objet utilisant une stratégie de type staticFactoryMethod :

{
    id         : "localization" ,
    type       : "andromeda.i18n.Localization" ,
    singleton  : true ,
    lazyInit   : true ,
    staticFactoryMethod :
    {
        type : "andromeda.i18n.Localization" ,
        name : "getInstance"
    }
}

A noter que nous utilisons un attribut "listeners" pour écouter la localisation de l'application et être notifié à tout moment du changement de langue courante avec la méthode changeLocalization définie dans la classe examples.Application.

listeners :
[
    { dispatcher : "localization" , type : "change" , method : "changeLocalization" }
]

Notes

Voici donc après quelques mois de retard cette nouvelle partie du chapitre sur les ressources externes de type "i18n" dans le moteur de ressources du chargeur de context IoC de VEGAS.

Pour cet article je ne vais pas dupliquer les liens vers les articles se trouvant sur mon blog mais je préfère vous rediriger vers Google Documents et vers les pages de mon e-book (toujours en pleine évolution) qui regroupe l'ensemble des chapitres concernant le design pattern d'injection de dépendance et de son utilisation avec VEGAS.

A noter qu'il est préférable de consulter les articles sur google code car ils sont sans arrêt mis à jour en cas de problème (faute d'orthographe, changement dans le code source des exemples ou dans l'API du framework).

Pour toute question comme toujours sur VEGAS je vous conseille de vous inscrire sur le Google Groups du projet : http://groups.google.com/group/vegasos

En cas de soucis dans cette documentation ou dans le code source de VEGAS je vous conseille d'utiliser les "issues" des différents projets et différentes extensions du framework :

VEGAS : http://code.google.com/p/vegas/issues/list
AndromedAS (IoC) : http://code.google.com/p/andromed-as/issues/list
Maashaack : http://code.google.com/p/maashaack/issues/list

A suivre avec un prochain article sur les ressources de type "shader" et l'utilisation des effets PixelBender dans les ressources du moteur IoC de VEGAS

Problème d'utilisation du type * dans les propriétés virtuelles dans Flash CS3 et CS4 en mode "avertissement"

eKameleon — Fri, 31 Jul 2009 22:00:00 +0200

Flash CS3 et Flash CS4 proposent par défaut d'améliorer le débogage AS3 avec un "Mode avertissement". Même si à la base ce mode doit aider le flasheur dans son développement, j'avoue que personnellement je considère les "Warning" notifiés dans le panneau de sortie de Flash pas forcément très bien venus la plupart du temps.

On pourra noter d'ailleurs un bon petit feedback sur le sujet sur le site de ByteArray.org : Warnings mode, the dangerous friend

Je vais donc moi aussi vivement vous conseiller de désactiver dans vos paramètres de publication le "Mode avertissement" de votre document.

D'ailleurs il suffit de coder dans FDT quotidiennement et de compiler normalement avec le compiler FCSH et de revenir de temps en temps dans Flash pour se rendre compte que ce retour est parfois bien 'étonnant'

Voyons un exemple simple de classe pour isoler un warning qui pour moi ne peut vraiment pas être considéré comme une erreur :

package
{
    import flash.display.Sprite ;
 
    public class Main extends Sprite
    {
        public function Main()
        {
                _func = function():void
                {
                    trace("hello world") ;
                }           
                function1() ;
                function2() ;
            }
 
            public function get function1():Function
            {
                return _func ;
            }
 
            public function get function2():*
            {
                return _func ;
            }
 
            private var _func:Function ;
        }
    }

Il suffit d'ajouter la classe ci-dessus dans le panneau de propriété d'un nouveau document AS3 et de lancer la compilation.

Résultat nous obtenons dans le panneau de sortie les deux invocations de la fonction (en gros nous attendions ce résultat) mais très étrangement une notification de type "warning" dans le panneau "Erreurs de compilations" de Flash : "Warning: 3553: Valeur de fonction utilisée alors qu'une valeur de type * est attendue. Il semble que des parenthèses () sont absentes après cette référence à une fonction."

En gros dans la propriété virtuelle "function2" Flash considère qu'il n'est pas possible de renvoyer un objet de type Function dans une fonction qui doit renvoyer un objet de type * ??? Alors que le type * reste un type dynamique qui permet de faire sortir n'importe quel type d'objet ? Très étrange donc ce genre d'alerte ?

Il est vrai que le code ci-dessus n'est pas vraiment très "standard" mais imaginons que dans une classe nous ayons besoin de stocker en mémoire une fonction pour le réutiliser plus tard.. si si ! cela peut arriver ! Par exemple avec une adaptation de la classe Tween bien connue de tous et la nécessité d'utiliser une fonction de "easing" pour changer l'effet appliqué sur l'interpolation.

Imaginons donc un bout du code de cette classe Tween avec le script ci-dessous :

package
{
    import flash.events.EventDispatcher ;
 
    public class Tween extends EventDispatcher
    {
 
        public function Tween()
        {
                // code
        }
 
        public function get easing():*
        {
            return _easing ;
        }
 
        public function set easing( easing:* ):void
        {
            if ( easing is Function )
            {
                _easing = easing as Function ;
            }
                else if ( easing is Easing )
            {
                _easing = (easing as Easing).ease ;
            }
            else
            {
                _easing = function(t:Number, b:Number, c:Number, d:Number):Number
                {
                    return ( ( c * t ) / d ) + b ; // linear easing
                }
            }
        }
 
        private var _easing:Function ;
 
        // ... reste du code de la classe
    }
}

Avec Easing une interface simple permettant d'implémenter des classes simples pour chaque type de transition : Bounce, Back, etc. Cette interface doit juste définir une méthode ease() personnalisable.

package
{
    interface Easing
    {
        function ease ( t:Number , b:Number , c:Number , d:Number ):Number ;
    }
}

Dans la classe Tween définie plus haut, j'ai envie de définir une propriété virtuelle r/w "easing" qui peut prendre des objets de type Easing mais aussi des objets de type Function simples... Je suis obligé de typer les 2 fonctions get et set de ma propriété virtuelle avec le type * (impossible de typer différemment les 2 fonctions).

Dans Flash le problème du "warning" indésirable apparait sur cette classe au niveau de la fonction "get" de la propriété virtuelle "easing". Il est clair que le code ci-dessus même si il est "discutable" n'est pas mauvais en soit et que dans tous les cas l'application malgré ce warning l'application fonctionne sans soucis.

A noter que pour éviter ce warning dans Flash sur une fonction qui retourne un objet de type *, il suffit de forcer le type de l'objet de retour de la fonction avec le type "Object" :

public function get easing():*
{
    return _easing as Object ;
}

Plus de message d'alerte après ce petit hack, mais cela reste tout de même à mon sens une solution tirée par les cheveux.

Je code très peu dans l'environnement auteur de Flash en privilégiant son utilisation uniquement pour la création des assets graphiques et des animations et je préfère largement ensuite charger mes swfs d'assets dynamiquement dans mon application principale codée dans FDT et ensuite il suffit de prendre la main sur les éléments graphiques via leurs simple noms d'occurrences.

Ce process de travaille laisse beaucoup plus de souplesse au graphiste, qui n'a plus d'excuse pour trouver l'ActionScript "compliqué" vu que le seul code qui lui ai demandé c'est un stop() de temps en temps sur une image clé, quelques étiquettes sur des images clés et surtout d'indiquer les noms d'occurrences sur les clips importants de l'application.

Bon finalement plus de "peur" que de mal .. mais franchement ils ont à mon sens simplifié à mort le code dans Flash CS3/4 en permettant au développeur débutant de coder sans se prendre trop la tête (pas besoin d'importer les classes natives, etc.) mais avec ce genre de "warning" sans queue ni tête.. pas facile pour un débutant de comprendre les rouages de l'ActionScript vous ne pensez pas ?

AS3 - prototype et overriding

eKameleon — Fri, 05 Jun 2009 20:30:00 +0200

En ActionScript 3 beaucoup de développeurs ignorent ou oublient l'existence de l'objet prototype.

L'objet prototype reste un élément incontournable du langage et même si en AS3 Adobe a fait évoluer le concept pour optimiser les capacités de nos classes via une implémentation basée sur les "traits" il ne faut jamais oublier que l'ActionScript est basé sur les normes ECMAScript est reste avant tout un langage "Prototype Based".

Il est donc toujours possible d'utiliser à tout moment une objet prototype pour déclarer des méthodes sur une classe et profiter du dynamisme de ce standard.

En AS3 nous avons donc 2 manières pour créer des classes et implémenter leurs méthodes et propriétés avec des traits ou/et des prototypes.

Les traits

Toutes les propriétés définies dans les namespaces public, private, protected, internal ou custom dans une classe sont déclarées dans un trait.

Les traits sont des objets implémentés par Adobe pour augmenter les performances des classes dans l'AVM2 (virtual machine) du FlashPlayer et pour diminuer le temps utilisé pour appeler les propriétés d'un objet par rapport à l'utilisation classique basée sur une chaine de prototype.

A la base les traits permettent de copier les méthodes d'une super-classe vers sa classe enfant (de façon très optimisée) pour que l'appel de ces méthodes par la suite soit beaucoup plus rapide.

Les traits ne sont pas directement accessibles au niveau du code AS3 et fonctionnent en tache de fond dans nos applications. Dans la documentation AS3 nous pouvons lire un bon article sur le sujet dans la documentation AS3 officielle The traits object.

Il faut tout de même remarquer la note importante dans cet article qui indique que cette implémentation n'est pas garantie et peut changer ou même disparaitre dans les versions futures de l'ActionScript.

Nous pouvons tout de même rester tranquille à ce niveau là, l'AS3 est bien implémenté maintenant et il n'est pas prêt de disparaitre et dans tous les cas Adobe s'efforce toujours de garder une forte compatibilité d'un FlashPlayer à un autre.

Les traits sont donc très puissants mais en contre-partie limitent grandement certains comportements ECMAScript liés au dynamisme du langage.

En effet si l'on prend le temps de regarder de plus prêt l'implémentation des classes en AS3 certaines spécificités qui faisaient la force du langage ActionScript sont bridées comme par exemple la manipulation du scope des méthodes déclarées dans une classe basée sur les traits ou le fait qu'il est impossible de cibler la fonction constructeur d'une classe et donc il est impossible d'appliquer un apply() ou un call() dessus, etc.

Les prototypes

L'ActionScript depuis sa première version basée sur le standard ECMAScript (à partir de Flash 5) se base sur la norme ECMAScript 262 edition 3 et donc utilise des prototypes.

Chaque classe ActionScript possède un objet appelé "prototype", cette référence est un simple objet générique (donc dynamique) dans lequel il est possible de stoker des méthodes et des attributs qui seront communs à toutes les instances d'une même classe.

En AS1 et AS2 (mais aussi en Javascript) les classes ne sont pas définies comme les classes en AS3, Il n'existe pas dans la norme ECMA 262 d'objets de type "Class". A la place la norme prévoit une solution de remplacement très simple en basant les classes sur des fonctions constructeurs, c'est à dire des objets de type Function, exemple :

var MyClass:Function = function():void
{
};
 
MyClass.prototype.myMethod = function():void
{
    trace("hello world") ;
} ;

Dans l'exemple ci-dessus, nous avons déclaré une fonction constructeur "MyClass", et il sera possible d'utiliser à tout moment le mot clé "new" pour instancier cette classe :

var instance:* = new MyClass() ;
 
instance.myMethod() ; // hello world

L'idée d'utiliser une fonction comme classe est très logique finalement vu que dans 99% des cas nous déclarons nos classes avec une fonction constructeur qui aura le même nom que la classe. Alors pourquoi finalement ne pas fusionner la classe et sa fonction constructeur en un seul et même objet ?

Dans des langages dynamiques utilisés pour créer des applications légères et rapides (adaptées au web) cette implémentation semble parfaitement adaptée.

Il est clair que malgré tout cette implémentation dynamique possède ses bons côtés mais également ses limites. Adobe a donc essayé en AS3 de garder cette fonctionnalité et d'en ajouter une plus performante en parallèle (utilisée par défaut en mode strict lors de la compilation).

Vous remarquerez que les 2 exemples ci-dessus sont écris en AS3, tout simplement pour vous montrer que le prototype en AS3 n'est pas mort et qu'il est donc toujours possible de déclarer des classes et des objets basés sur lui.

J'utilise le type * pour typer l'instance de la classe car la classe MyClass ci-dessus n'est pas une classe basée sur les traits et une instance de type Class et du coup n'est pas considérée en AS3 comme un type fort que l'on peut associer à une variable typée.

Il faut donc utiliser une notation dynamique au maximum si l'on souhaite créer des instances d'une classe basée sur les fonctions constructeurs.

A noter que dans toutes les classes natives AS3 (String, Number, Array, MovieClip, etc...) contenues dans le FlashPlayer, l'objet prototype est présent et contient la plupart du temps des méthodes, il suffit de taper rapidement le code suivant pour s'en assurer :

trace( "Array.prototype     : " + Array.prototype ) ;
trace( "Number.prototype    : " + Number.prototype ) ;
trace( "String.prototype    : " + String.prototype ) ;
trace( "MovieClip.prototype : " + MovieClip.prototype ) ;

Nous pouvons compiler ce code et nous obtiendrons à chaque fois une valeur et non un simple undefined.

Attention toute fois au résultat de l'exemple ci-dessus. Il ne faut jamais oublier que la méthode toString() de l'objet prototype renvoie dans les traces un String qui dépend de l'implémentation prévue à cet effet dans la classe.

Par exemple la méthode toString() définie dans le prototype de la classe Array renvoie par défaut une chaine de caractère contenant les valeurs stockées dans le Array séparé par des virgules, dans l'exemple précédent nous obtiendrons donc une chaine vide !

Pour aller un peu plus loin dans cette notion de classe native et de prototype, il faut savoir par exemple que beaucoup de méthodes dans la classe Array sont déclarées dans les traits mais d'autres également dans le prototype de la classe.

Je vais revenir rapidement sur la méthode toString() qui est présente dans tous les objets du langage :

var ar:Array = [] ;
 
trace( "ar : " + ar ) ; // ar :
 
ar = [2, 3, 4, [5,6,7] ] ;
 
trace( "ar : " + ar ) ; // 2,3,4,5,6,7

Nous essayons de tracer le contenu d'un Array vide et le résultat n'est pas très explicite.

De même si nous remplissons le Array avec des valeurs numériques mais également avec d'autres Array contenant eux même des valeurs numériques le résultat n'est pas plus brillant avec une chaine simple de valeurs séparées par des virgules, difficile ici de déterminer quelles sont les valeurs du Array principal et celles du Array défini à la position 3 ?

Nous allons voir que pour améliorer le résultat du code précédent il suffira de se pencher sur le prototype de la classe Array, en reprendant le code précédent et en ajustant rapidement son contenu :

Array.prototype.toString = function():String
{
    return "[" + this.join(",") + "]" ;
};
 
var ar:Array = [] ;
 
trace( "ar : " + ar ) ; // ar : []
 
ar = [2, 3, 4, [5,6,7] ] ;
 
trace( "ar : " + ar ) ; // [2,3,4,[5,6,7]]

Le résultat de la méthode toString() est maintenant beaucoup plus explicite et la manipulation s'applique automatiquement à toutes les instances de la classe.

Finalement même si en AS3 pas mal de choses ont changées, il ne faut jamais perdre oublier la présence du prototype dans le langage. Dans nos classes personnalisées il sera donc possible de continuer à utiliser les prototypes soit directement dans le corps des classes, soit en déclarant une fonction constructeur dans un package.

Je vais rapidement vous montrer comment déclarer une classe basée sur une fonction constructeur en AS3, il suffit simplement de déclarer dans un package une constante de type Function et le tour est joué :

package
{
    public const User:Function = function( name:String ):void
    {
        this.name = name ;
    };
 
    User.prototype.speak = function( message:String ):void
    {
        trace( this.name + " : " + message ) ;
    };
}

Vous pouvez noter l'utilisation indispensable du mot clé this pour cibler les propriétés de la classe.

Pour utiliser cette fonction constructeur il suffit d'utiliser l'opérateur new, en gros voici un code AS3 comme en AS1.

var i:* = new User("name") ;
 
i.speak("hello world") ;

Il est clair que l'utilisation d'une classe dynamique définie avec une fonction constructeur peut paraitre à l'heure actuelle inutile dans le cadre d'un développement OOP avancé en AS3. Mais il ne faut jamais oublié que l'utilisation d'une classe basée uniquement sur les traits bride certains comportements et certaines implémentations et vaut mieux bien connaitre les outils disponibles dans un langage pour pouvoir s'en servir le moment voulu que de vouloir absolument faire comme si ces outils n'existaient pas sous prétexte qu'ils ne correspondent pas à une utilisation classique du langage.

Voyons maintenant comment utiliser les prototypes dans une classe AS3 classique :

package
{
    public dynamic class User 
    {
        public function User( name:String = null )
        {
            this.name = name ;
            this["speak"]("I'm alive") ;
        }
 
        public var name:String ;
 
        prototype.speak = function( message:String ):void
        {
            trace( this.name + " say : " + message ) ;
        };
 
        public function sleep():void
        {
            trace(this + " sleep : " + name ) ;
        };
    }
}

La classe ci-dessus contient 2 méthodes speak et sleep.

La méthode "speak" par contre est déclarée dans le prototype de la classe. Il est donc possible dans le corps d'une classe de cibler à tout moment l'objet prototype et d'y ajouter (ou d'y modifier) une propriété.

La méthode "sleep" est classique, elle est déclarée dans le namespace "public" de la classe.

Nous observons dans cette implémentation certaines contraintes :

La classe doit être dynamique pour accéder aux éléments contenus dans le prototype.
Dans une méthode définie dans le prototype, il est indispensable d'utiliser le mot clé "this" pour cibler les propriétés de la classe (défini ou non dans le prototype).
Dans les autres méthodes basées sur les traits de la classe il faut utiliser la notation entre crochet ["propertyName"] pour appeler ou redéfinir une valeur définie dans le prototype.

Voyons maintenant comment réagi cette classe dans un petit bout de code permettant de la tester :

var user:User = new User() ;
 
user.speak( "my test" ) ;
user.sleep() ;

Rien de bien compliqué finalement pour tous ceux qui ont déjà l'habitude de travailler avec les prototypes. La puissance de l'ActionScript 3 réside dans la possibilité de cohabiter habilement entre une implémentation OOP sécurisée basée sur les traits et une implémentation totalement dynamique basée sur les prototypes et suivant parfaitement les spécifications ECMAScript. Une fois ces 2 éléments maitrisés (feu et glace) tout devient possible.

Une fonctionnalité intéressante d'une méthode définie dans le prototype de la classe est la possibilité de surcharger directement la méthode au niveau d'une instance sans avoir à toucher à la classe :

var user:User = new User() ;
 
user.speak = function( message:String , face:String ):void
{
    trace( this.name + " is " + face + " and say '" + message + "'" ) ;
}
 
user.speak( "I love ActionScript !" , "happy" ) ;

Il est impossible de réaliser cette manipulation avec une méthode public de la classe définie dans les traits. Si vous essayez de reproduire cet exemple avec une fonction classique le compilateur refusera d'aller plus loin et notifiera une erreur.

Nous utilisons donc l'aspect dynamique de l'objet en ActionScript en ajouter sur l'instance directement une méthode "speak", lorsque nous invoquons la méthode par la suite l'instance trouve la méthode directement et n'a pas besoin d'aller chercher dans le prototype de sa classe.

La méthode définie dans le prototype est donc ignorée même si elle existe toujours en mémoire. D'ailleurs d'autres instances de la classe User sur le même appel de méthode invoqueront la méthode définie dans le prototype de la classe faute de trouver une méthode avec le même nom défini dynamiquement et localement.

Ce comportement est un comportement totalement lié au standard ECMAScript utilisé en Javascript, AS1 et AS2, il est normal de pouvoir le retrouver en AS3.

A noter que pour l'exemple précédent si nous souhaitons dans le code retransformer l'instance pour qu'elle utilise à nouveau sa méthode définie dans le prototype de sa classe il suffit de supprimer la méthode locale :

var user:User = new User() ;
 
user.speak = function( message:String , face:String ):void
{
    trace( this.name + " is " + face + " and say '" + message + "'" ) ;
}
 
user.speak( "I love ActionScript !" , "happy" ) ;
 
delete user.speak ;
 
user.speak( "I love Prototype !" ) ;

Ce comportement apporte une souplesse importante dans le développement d'une application.

Imaginons pour finir d'illustrer ce concept un jeux vidéo avec un personnage classique dans le monde proposé au joueur, ce personnage possède par défaut certaines méthodes simples "manger", "courir", "marcher", etc. Si à un moment donné dans l'application le personnage trouve un bonus et que ce bonus lui permet de marcher plus vite pendant 15 minutes, il sera très facile avec ce comportement dynamique de modifier en local sur l'objet la méthode "marcher" et au bout de 15 minutes de revenir à une stratégie classique en utilisant à nouveau la méthode définie par défaut dans le prototype de la classe du personnage.

Cette fonctionnalité en AS3 n'est pas possible directement sur des méthodes déclarées en public. Il est certain qu'il est possible d'utiliser les "namespaces" pour définir différentes stratégies mais leur utilisation est tout de même beaucoup plus complexe que l'utilisation basique des prototype.

Héritage et surcharge d'une méthode définie dans le prototype.

En AS2 l'héritage d'une classe par une autre est simplifié avec l'utilisation du mot clé extends, il est toujours possible de modifier la chaine d'héritage en changeant la référence de l'objet __proto__ d'un prototype en particulier mais en général l'utilisation de base sera toujours préférée.

En AS3 les classes peuvent toujours hériter d'une autre classe avec le mot clé extends mais l'évolution de certains des membres de la classe sont soumis à de nouvelles contraintes.

Une des contrainte de l'héritage en AS3 réside dans l'utilisation obligatoire du mot clé "override" qui donne droit à la nouvelle classe de surcharger (écraser ou étendre) une méthode déjà existante dans son héritage direct ou indirect, sous réserve de ne pas modifier la signature de la méthode (overloading impossible)

Exemple :

package
{
    public class Student extends User
    {
        public function Student( name:String = null )
        {
            super( name ) ;
        }
 
        public override function sleep():void
        {
            trace(this + " sleep good : " + name ) ;
        };
 
        public function toString():String
        {
            return "Student" ;
        };
    }
}

Dans cet exemple la classe Student hérite de la classe User et la méthode sleep est surchargée. Dans une méthode classique AS3 il est impossible d'opérer une surcharge autrement, l'oubli du mot clé override est sanctionné automatiquement par le compilateur.

Maintenant nous allons observer quelque chose d'un peu particulier dans la classe définie ci-dessus. Vous savez surement qu'il est possible dans n'importe quelle nouvelle classe de définir une méthode toString() personnalisée.

Dans notre exemple si nous n'avions pas déclarée de méthode toString() nous savons que cette méthode existe déjà malgré tout par défaut dans la classe vu qu'il est tout à fait possible de l'invoquer sur n'importe quel objet (natif ou custom) défini dans l'application.

Ici nous supposons donc que la méthode toString() existe déjà hors je n'ai pas eu à utiliser le mot clé "override" pour écraser la méthode définie par défaut dans la classe Object (vu que non définie dans la classe User).

Nous avons vu précédement que pour écraser une méthode définie dans les traits il faut absolument utiliser le mot clé "override", ici ce n'est pas le cas. De plus dans l'exemple précédent j'ai défini une méthode toString() avec une signature très classique mais j'aurai pu imaginer ajouter un paramètre optionel dans la fonction sans que le compilateur ne me dise quoi que ce soit durant la compilation.

Ce comportement nous indique donc que la méthode toString() qui existe dans tous les objets n'est donc pas définie dans les traits mais ailleurs. Finalement nous pouvons considérer que cette méthode est définie dans le prototype de la classe Object par défaut. Ce qui laisse une grande liberté pour ensuite la redéfinir dans une classe custom.

Bien entendu si nous continuons notre héritage avec une nouvelle classe Teacher par exemple qui hérite de la classe Student et que nous essayons d'écraser la méthode toString() définie dans Student dans les traits il faudra alors penser à utiliser une méthode avec le mot clé "override" pour aller plus loin, exemple :

package
{
    public class Teacher extends Student
    {
        public function Teacher( name:String = null )
        {
            super( name ) ;
        }
 
        public override function toString():String
        {
            return "Teacher" ;
        };
    }
}

Ce coup ci, pas possible de modifier la signature de la méthode toString() définie dans Student.

Nous voyons ici une particularité du langage AS3, avec sa double identité basée sur les traits et les prototypes. Les méthodes définies dans les traits seront toujours dominantes sur les méthodes définies dans le prototype de la classe. Mais déclarer une méthode dans le prototype peut être fort utile si nous souhaitons par exemple dans l'héritage par la suite modifier la signature d'une méthode (changer le type ou le nombre des arguments ou le type de retour de la fonction).

Reprenons maintenant l'exemple précédent en le complétant pour réaliser une surcharge d'une méthode custom définie dans le prototype de la super-classe en transformant cette méthode en méthode plus classique.

package
{
    public class Student extends User
    {
        public function Student( name:String = null )
        {
            super( name ) ;
        }
 
        public function speak( message:String , face:String ):void
        {
            trace( this.name + " is " + face + " and say '" + message + "'" ) ;
        };
 
        public override function sleep():void
        {
            trace(this + " sleep good : " + name ) ;
        };
    }
}

Je n'ai pas cherché dans l'exemple précédent à écraser la méthode au niveau du prototype de la classe directement et je déclare simplement une nouvelle méthode public "speak" qui sera définie dans le trait de la classe.

Dans ce cas de figure la méthode "speak" dans le prototype est ignorée et toute instance de la classe Student utilisera maintenant la nouvelle méthode définie dans la classe. Comme nous l'avons vu un peu plus haut les méthodes classiques d'une classe AS3 sont toujours dominantes sur une méthode définie dans le prototype de la classe.

Nous n'avons pas eu à utiliser le mot clé override. L'implémentation de la méthode est directe et peut avoir une signature totalement différente de la méthode définie dans le prototype (nom, type et nombre des arguments, type de retour de la fonction).

Bien entendu nous perdons dans la classe Student les caractéristiques dynamiques de la classe User et même si nous ajoutons le mot clé dynamic pour déclarer la classe il ne sera plus possible d'écraser au niveau de l'instance directement la méthode speak. Les méthodes définies dans les traits sont plus rapides mais suppriment toute notion de dynamisme sur les instances.

Personnellement j'utilise souvent le prototype dans mes application selon les besoins rencontrés, par exemple pour reproduire le comportement des méthodes callbacks sur mes clips et boutons comme en AS1/AS2 avec des fonctions simples définies rapidement au niveau de l'instance.

Je vais finir cet article avec un exemple d'implémentation d'un bouton basé sur un Sprite qui fonctionnera très simplement avec des méthodes callbacks définies directement sur l'instance.

package
{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
 
    public dynamic class MyButton extends Sprite
    {
        public function MyButton( width:Number = 150 , height:Number = 20 )
        {
            graphics.beginFill(0xFF0000) ;
            graphics.drawRect(0, 0, width, height) ;
            buttonMode    = true ;
            mouseEnabled  = true ;
            useHandCursor = true ;
            addEventListener( MouseEvent.MOUSE_DOWN  , _mouseDown ) ;
        }
 
        prototype.press = function():void
        {
            // nothing, overrides now this method.
        };
 
        private function _mouseDown( e:MouseEvent = null ):void
        {
            this["press"]() ;
        }
    }
}

Voyons maintenant comment utiliser cette classe MyButton :

package 
{
    import flash.display.Sprite;
 
    public class Main extends Sprite
    {
        public function Main()
        {
            var button:MyButton = new MyButton(120,18) ;
 
            button.press = function():void
            {
                trace(this + " press") ;
            };
 
            button.x = 400 ;
            button.y = 130 ;
 
            addChild( button ) ;
        }
    }
}

Voilà pour cet article très "militant" En voyant de plus en plus de développeur minimiser les possibilités des prototypes, j'avais envie de mettre en avant une implémentation particulière en AS3 basée sur cet objet.

Pour finir je voulais vous indiquer un petit lien vers un nouveau site que j'ouvre en parallèle de mon site officiel et blog :

http://sites.google.com/site/ekameleon/Home/articles/actionscript/prototype-et-overriding-en-as3

J'écris maintenant tous mes articles sur Google Documents avant de les porter sur mon blog. Google Documents répond vraiment à mes besoins pour rédiger mes articles et e-books et je trouve génial tout ce qu'il est possible de faire. Dernière fonctionnalité en date, la possibilité d'injecter dans un Google Sites mes documents.

Je viens tout juste de me lancer dans mon Google Sites et j'espère pouvoir l'alimenter régulièrement en reprenant mes anciens articles mais aussi des tas de nouveaux dans les prochains mois.

Comme toujours pour vos questions vous pouvez utiliser les commentaires de cet article ou pourquoi pas pousser la discussion sur mon Google Groups

Enumération type-safe AS3 (mise à jour)

eKameleon — Fri, 22 May 2009 22:17:00 +0200

Voici une petite mise à jour de mon vieux article sur les énumérations type-safe (qui date tout de même de septembre 2006 !!) avec un petit nettoyage avec du code tout en AS3 et quelques explications supplémentaires sur la fin de l'article.

Tous mes articles sont maintenant disponibles en double sur mon blog mais aussi sur des documents publiques sur Google Document :

http://docs.google.com/View?id=dfd9s8cg_76cmv6cdcr

Google Documents me permet de mettre à jour facilement mes articles et au final de préparer quelques surprises pour les prochains mois

Généralités.

Les énumérations sont utilisées pour réduire les redondances de leur code et garantir le maximum de sécurité.

En ActionScript il n'existe pas de vraie implémentation précise à ce sujet. Il existe donc plusieurs recettes de cuisines pour les utiliser et je vais essayer de vous montre ma façon d'utiliser les énumérations.

Exemple simple d'énumération en utilisant des types primitifs :

package  
{
    public class ApplicationColor
    { 
        public static function getColor( color:uint ):uint
        {
            switch (color)
            {
                case 0xD97F00 : // abricot
                case 0xFFFFFF : // blanc
                case 0xD70079 : // bonbon
                case 0xAE293B : // cerise
                case 0xFF6633 : // corail 
                {
                    return color ;
                }
                default :
                {
                    return 0x000000 ; // black
                }
            }
        }
    }
}

Dans la méthode getColor() ci-dessus nous pouvons constater tout d'abord que la lecture des couleurs n'est pas forcément des plus simples (à moins d'avoir un panneau mélangeur câblé en permanence dans votre esprit), il est assez difficile de définir précisément les couleurs représentées dans la condition switch..case.

De plus si l'on doit réutiliser ces couleurs plus loin dans le code, il va falloir reprendre à chaque fois toutes les primitives. Si au cours de votre développement une couleur change il va falloir mettre en place un refactoring plus ou moins long pour remettre à jour l'ensemble de l'application. En gros il va devenir très rapidement assez compliqué de maintenir le code avec cette sorte d'implémentation.

A noter que j'ai tout de même mi en place quelques petits commentaires pour rendre un peu plus facile la lecture du code mais la lisibilité s'arrête là, il va devenir très lourd de commenter à chaque fois le code.

2 - Exemple un peu plus évolué avec des constantes

package
{
    public class ApplicationColor
    {
        public static const ABRICOT :uint = 0xD97F00 ;
        public static const BLANC   :uint = 0xFFFFFF ;
        public static const BONBON  :uint = 0xD70079 ;
        public static const CERISE  :uint = 0xAE293B ;
        public static const CORAIL  :uint = 0xFF6633 ;
        public static const NOIR    :uint = 0x000000 ;
 
        public static function getColor( color:uint ):uint
        {
              switch (color)
              {
                  case ABRICOT :
                  case BLANC   :
                  case BONBON  :
                  case CERISE  :
                  case CORAIL  :
                  {
                      return color ;
                  }
                  default :
                  {
                      return NOIR ;
                  }
              }    
          }
    }
}

Le code au dessus est déjà bien plus clair. Il n'est plus nécessaire de commenter celui ci car le nom des énumérations est bien assez explicite.

De plus il est assez simple de modifier une couleur sans avoir à retoucher par la suite l'intégralité du code, il suffit d'utiliser ces constantes dans tout le code de l'application et si il faut modifier une couleur il suffit de redéfinir la valeur d'une des constantes. Cette solution est bien plus élégante que la précédente et reste simple.

Remarque : A noter que la plupart des éditeurs de code un peu évolués (FDT, FlashBuilder) permettent l'auto complétion et ainsi permettent de retrouver rapidement le contenu une énumération de constantes.

3 - "Typesafe" Enumeration.

Nous allons maintenant pousser l'exemple précédent en intégrant des énumérations typées avec une classe spécifique pour nos couleurs.

package
{
 
    public class ApplicationColor
     {
            public function ApplicationColor( value:uint )
            {
                this.value = value ;
            }
 
            public var value:uint ;
 
            public function valueOf():uint
            {
                return value ;
            }
 
            public static const ABRICOT :ApplicationColor = new ApplicationColor( 0xD97F00 ) ;
            public static const BLANC   :ApplicationColor = new ApplicationColor( 0xFFFFFF ) ;
            public static const BONBON  :ApplicationColor = new ApplicationColor( 0xD70079 ) ;
            public static const CERISE  :ApplicationColor = new ApplicationColor( 0xAE293B ) ;
            public static const CORAIL  :ApplicationColor = new ApplicationColor( 0xFF6633 ) ;
            public static const NOIR    :ApplicationColor = new ApplicationColor( 0x000000 ) ;
        }
}

L'exemple au dessus est un peu plus complexe car il nécessite de définir dans la classe le constructeur et une propriété pour stocker la valeur de l'énumération. Cet exemple reste tout de même assez simple à mettre en place et permet cette fois ci une meilleure sécurité des objets utilisés dans l'application.

Remarque : En AS2 la classe ApplicationColor aurait pu hériter de la classe Number, en AS3 la classe Number est déclarée en "final" et il est donc impossible de l'étendre. Malgré tout, il est possible d'en revenir à peut prêt au même en utilisant la méthode valueOf() (présente dans tous les objets en ActionScript), cette méthode renvoie la valeur primitive d'un objet et dans notre exemple, elle renvoie la valeur numérique (uint) de l'objet.

Cette implémentation illustre le design pattern : "Type-safe Enum".

De plus en utilisant une classe pour typer les énumérations il est possible d'ajouter sur les constantes des fonctionnalités avancées via quelques méthodes plus facilement que sur un type primitif. Voyons de plus prêt une version finalisée de notre classe ApplicationColor avec un exemple un peu plus complet :

package
{
    public class ApplicationColor
    {
        public function ApplicationColor( value:uint , name:String )
        {
            _name  = name  ;
            _value = value ;
        }
 
        private var _name:String ;
 
        private var _value:uint ;
 
        public function valueOf():uint
        {
            return _value ;
        }
 
        public function toString():String
        {
            return _name ;
        }
 
        public static const ABRICOT :ApplicationColor = new ApplicationColor( 0xD97F00 , "abricot" ) ;
        public static const BLANC   :ApplicationColor = new ApplicationColor( 0xFFFFFF , "blanc"   ) ;
        public static const BONBON  :ApplicationColor = new ApplicationColor( 0xD70079 , "bonbon"  ) ;
        public static const CERISE  :ApplicationColor = new ApplicationColor( 0xAE293B , "cerise"  ) ;
        public static const CORAIL  :ApplicationColor = new ApplicationColor( 0xFF6633 , "corail"  ) ;
        public static const NOIR    :ApplicationColor = new ApplicationColor( 0x000000 , "noir"    ) ;
    }
}

Nous avons ajouté dans notre classe une propriété name qui permet de donner un nom spécifique à l'objet.

Points positifs de ce pattern.

Le constructeur est public et il est possible d'étendre la classe et de créer de nouvelles énumérations en dehors de la classe.

L'utilisation du mot clé const permet de fixer dans l'application certaines constantes typées.

J'écrase ( override ) la méthode toString() de la classe pour renvoyer le nom de l'instance et la méthode valueOf() renvoi la valeur numérique de l'instance ce qui permet de combiner à la fois des manipulations classiques avec les opérateurs sur ces énumérations mais également de renvoyer dans un panneau de sortie des messages plus explicites (pour ma part je préfère lire dans mon panneau de sortie le mot "abricot" que la valeur 14253824 qui lui correspond en base 10).

Points négatifs de ce pattern :

Le point qui peut sembler négatif est à mon avis que cette technique alourdie un peu le poids de vos applications et prend un peu plus de temps pour être mise en place qu'une simple variable primitive.

Il est certain que lorsque l'on commence à utiliser ce genre de technique nous pouvons perdre un peu en "vitesse", mais attention quand je parle de temps et de vitesse il faut rester très relatif sur ces 2 dernières remarques... Un bon développeur utilisera cette technique le moment voulu et il est parfois indispensable de pouvoir utiliser l'une ou l'autre des techniques selon les besoins.

Ces techniques s'utilisent dans des cadres précis et impliquent une bonne réflexion sur l'architecture de son code.

Remarques :

L'utilisation des constantes écrites comme ci-dessus uniquement avec des lettres en majuscules restent une nomenclature très utilisée dans la communauté des développeurs ActionScript, ECMAScript ou même JAVA etc.

En AS3, il n'est pas possible d'utiliser de constructeur privé (il existe beaucoup de discussion à ce sujet d'ailleurs avec la notion de pattern Singleton par exemple) mais il est possible d'utiliser des exceptions pour sécuriser le constructeur de la classe. Dans tous les cas je me suis rendu compte que l'utilisation d'un constructeur privé est pas une si bonne chose que cela finalement, surtout lorsque l'on souhaite tester efficacement une classe avec un minimum d'unit tests.

4 - Petite manipulation sur la valeur primitive ou la représentation sous forme de chaine de caractères d'une énumération type-safe utilisant les méthodes valueOf() et toString().

Nous avons vu plus haut dans l'exemple de la classe ApplicationColor qu'il est possible de jouer sur les méthods toString() et valueOf() d'une classe ou d'un objet pour lui donner des fonctionnalités plus fines.

Voyons comment utiliser ces 2 méthodes :

trace( "color        : " + ApplicationColor.ABRICOT ) ; // abricot
trace( "color        : " + ApplicationColor.ABRICOT.toString() ) ; // abricot
trace( "color number : " + ApplicationColor.ABRICOT.valueOf()  ) ; // 14253824

Pour obtenir la valeur numérique de la classe il est nécessaire d'invoquer la méthode valueOf(). Alors que la méthode toString() sera utilisée pour récupérer la représentation en chaine de caractère de l'objet.

J'utilisais énormément la méthode valueOf() pour m'assurer de récupérer la valeur primitive d'un objet comme dans le code ci-dessus dans mes classes et au final je me suis rendu compte il y a peu de temps (alors que j'aurai pu utiliser cette technique depuis un petit moment maintenant) qu'il est beaucoup plus simple et pratique d'utiliser la capacité de transformation des fonctions constructeurs (type casting avec fonction constructeur) :

trace( ApplicationColor.ABRICOT ) ; // abricot
trace( uint( ApplicationColor.ABRICOT ) ) ; // 14253824
 
trace( String(ApplicationColor.ABRICOT) + 1 ) ; // abricot1
trace( ApplicationColor.ABRICOT + 1 ) ; // 14253825

Selon si nous voulons jouer sur la valeur primitive "uint" ou "string" de l'objet nous pouvons utiliser les fonctions String() ou uint() pour encapsuler la valeur de la constante et extraire ainsi la bonne valeur. Je trouve cette technique beaucoup plus élégante que l'utilisation directe des méthodes toString() ou valueOf().

5 - Evaluation et comparaison entres valeurs d'une énumération type-safe.

Il peut arriver parfois qu'il soit nécessaire de comparer les valeurs de certaines énumérations dans une application, exemple si la valeur est renvoyée par un serveur via du class-mapping (dans ce cas d'ailleurs il sera indispensable que la classe de l'énumération soit "public" et puisse s'instancier sans soucis lors du passage de données entre le serveur et le client).

Maintenant si nous souhaitons comparer 2 objets de même type mais définis dans une énumération type-safe en particulier, il ne faudra pas forcément tester qu'ils représentent une même référence en mémoire mais surtout qu'ils soient identiques en comparant certaines valeurs importantes.

Du coup l'opérateur == ne sera pas forcément la meilleure solution dans ce cas de figure et il sera beaucoup plus intéressant d'implémenter une méthode "equals(o:*):Boolean" via une petite interface Equatable par exemple dans la classe ApplicationColor :

package
{
    import system.Equatable;
 
    public class ApplicationColor implements Equatable
    {
        public function ApplicationColor( value:uint , name:String )
        {
            _name  = name  ;
            _value = value ;
        }
 
        public static const ABRICOT :ApplicationColor = new ApplicationColor( 0xD97F00 , "abricot" ) ;
        public static const BLANC   :ApplicationColor = new ApplicationColor( 0xFFFFFF , "blanc"   ) ;
        public static const BONBON  :ApplicationColor = new ApplicationColor( 0xD70079 , "bonbon"  ) ;
        public static const CERISE  :ApplicationColor = new ApplicationColor( 0xAE293B , "cerise"  ) ;
        public static const CORAIL  :ApplicationColor = new ApplicationColor( 0xFF6633 , "corail"  ) ;
        public static const NOIR    :ApplicationColor = new ApplicationColor( 0x000000 , "noir"    ) ;
 
        public function equals( o:* ):Boolean
        {
            if ( o is ApplicationColor )
            {
                return (o as ApplicationColor).valueOf() == _value && (o as ApplicationColor).toString() == _name ;
            }
            else
            {
                return false ;
            }
        }
 
        public function valueOf():uint
        {
            return _value ;
        }
 
        public function toString():String
        {
            return _name ;
        }
 
        private var _name:String ;
        private var _value:uint ;
    }
}

Pour comparer une valeur définie dans l'énumération et un objet (quel qu'il soit) il suffira d'utiliser la méthode equals() :

var color:ApplicationColor = new ApplicationColor( 0xFFFFFF , "blanc" ) ) ;
 
trace( ApplicationColor.BLANC.equals( color ) ) ; // true

Plus de problème maintenant pour comparer une valeur provenant d'un script serveur ou autre et une valeur typée énumérée dans la classe ApplicationColor définie ci-dessus.

La classe asgard.display.Background

eKameleon — Thu, 30 Apr 2009 20:00:00 +0200

Description

La classe Background est une classe simple mais très efficace que j'utilise dans pratiquement tous mes projets AS3. Cette classe hérite de la classe flash.display.Sprite et permet de générer des zones graphiques rectangulaires. Ces zones peuvent aussi bien remplir l'intégralité de la zone visible du FlashPlayer ou plus simplement servir de fond pour divers éléments graphiques d'une application (menus, listes, lecteur vidéo, etc.)

Cette classe utilise les API dynamiques de dessins pour générer très simplement un rectangle coloré (uni ou dégradé) ou texturé en utilisant les outils de dessins disponibles dans PEGAS.

Note : Je ne vais pas rentrer trop dans le détail ici sur le moteur de dessin de PEGAS car cette implémentation nécessite une série de tutoriels précis et complets. Je ne vais donc pas trop parler dans les exemples qui suivent des classes spécifiques de PEGAS mais n'hésitez pas en cas de problème à me poser des questions sur le sujet en attendant que je trouve le temps d'écrire les articles manquants sur le sujet.

Les bases

Pour commencer voyons tout simplement comment créer via quelques lignes de codes une zone rectangulaire avec la classe Background :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
area.x = 25 ;
area.y = 25 ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.w    = 400 ;
area.h    = 300 ;
 
addChild( area ) ;

Le code ci-dessus permet de générer une zone rectangulaire de 400 pixels de large (w) par 300 pixels de hauteur (h) avec une couleur de remplissage 0xD97BD0 et une transparence de 80% (alpha).

Dans la classe Background nous utilisons les propriétés virtuelles "w" et "h" pour définir la largeur et la hauteur absolues que nous voulons attribuer à notre zone rectangulaire. Je parle ici de taille "absolue" car finalement même si nous attribuons les valeurs 400 et 300, le rectangle n'aura peut être pas au final cette taille si l'on regarde les propriétés classiques "width" et "height" du display, surtout si nous appliquons à notre zone rectangulaire un contour.

Je reprends l'exemple précédent en ajoutant un contour avec la propriété "line" de la classe Background :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
import pegas.draw.LineStyle ;
 
var area:Background = new Background() ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.line = new LineStyle( 2, 0xD97BD0, 0.6 ) ;
area.w    = 400 ;
area.h    = 300 ;
 
addChild( area ) ;

Dans l'exemple ci-dessus j'applique sur la zone rectangulaire un contour avec une épaisseur de 2 pixels avec la propriété "line" qui prend pour valeur un objet de type LineStyle. Avec un petit test très simple nous pouvons isoler la différence entre les propriétés w/h et width/height :

trace( area.w + " : " + area.width  ) ; // 400 : 402
trace( area.h + " : " + area.height ) ; // 300 : 302

Remarque : Les propriétés "line" et "fill" de la classe Background permettent de définir respectivement les styles du contour et du remplissage de la zone rectangulaire.

La propriété line prend pour valeur tout objet de type pegas.draw.ILineStyle (LineStyle, LineGradientStyle)
La propriété fill prend pour valeur tout objet de type pegas.draw.FillStyle (FillStyle, FillGradientStyle, FillBitmapStyle)

Je vous invite à consulter la documentation de VEGAS et à tester ces classes en regardant tranquillement les exemples du package pegas.draw.

Il est possible de limiter la taille minimale et maximale des propriétés w et h de la classe Background avec les propriétés virtuelles :

maxHeight : permet de définir la taille maximale de la propriété h
maxWidth : permet de définir la taille maximale de la propriété w
minHeight : permet de définir la taille minimale de la propriété h
minWidth : permet de définir la taille minimale de la propriété w

Ces propriétés sont de type Number, si l'une de ces propriétés est définie avec la valeur NaN alors aucune limite n'est appliquée sur la forme.

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.maxWidth  = 200 ;
area.maxHeight = 200 ;
 
area.w = 400 ;
area.h = 300 ;
 
addChild( area ) ;
 
trace( area.w + " : " + area.h ) ; // 200 : 200

Chaque appel des propriétés w ou h invoque en interne la méthode update() de la classe Background. La méthode update() sert de moteur principal et permet de rafraichir à tout moment l'aspect graphique du display. Pour optimiser le redimensionnement d'une instance de type Background vous pourrez utiliser également la méthode setSize(w,h) :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.setSize( 400 , 300 ) ;
 
addChild( area ) ;

La méthode setSize(w,h) invoque qu'une seul fois la méthode "update()" contre 2 appels si nous utilisons dans le code au même moment les 2 propriétés w et h. Il faudra donc faire attention selon les besoins d'utiliser les propriétés virtuelles ou la méthode setSize().

A noter que tout changement de taille sur un Background diffuse un événement de type Event.RESIZE.

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
import flash.events.Event ;
 
var resize:Function = function( e:Event ):void
{
    trace( "resize w:" + area.w + " h:" + area.h ) ; 
}
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.addEventListener( Event.RESIZE , resize ) ;
 
area.setSize( 400 , 300 ) ;

Les options de la classe Background

Arrondir les angles

Première option sympatique dans la classe Background avec les propriétés numériques : bottomLeftRadius, bottomRightRadius, topLeftRadius et topRightRadius.

Ces 4 propriétés permettent de définir pour chaque coin de la zone rectangulaire la taille du rayon que l'on souhaite appliquer (par défaut 0 et donc pas d'arrondi).

Attention malgré tout car ces propriétés ne sont pas virtuelles et pour tout changement visuel sur la zone rectangulaire il faudra invoquer manuellement la méthode update() de l'instance :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.setSize( 400 , 300 ) ;
 
area.topLeftRadius     = 12 ;
area.bottomRightRadius = 12 ;
 
area.update() ;

Remarque : Toute propriété ou méthode qui invoque indirectement la méthode update() suffit pour mettre à jour la vue, par exemple l'utilisation de la méthode setSize() juste après les propriétés définies ci-dessus suffira pour rafraichir la vue :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.topLeftRadius     = 12 ;
area.bottomRightRadius = 12 ;
 
area.setSize( 400 , 300 ) ; // update

Choisir l'alignement de la zone rectangulaire

La propriété virtuelle numérique "align" permet de modifier l'alignement de la zone rectangulaire. Pour définir simplement la propriété "align" il suffit d'utiliser l'énumération pegas.draw.Align avec les constantes :

Align.CENTER
Align.LEFT, Align.RIGHT
Align.BOTTOM, Align.BOTTOM_LEFT, Align.BOTTOM_RIGHT
Align.TOP, Align.TOP_LEFT, Align.TOP_RIGHT

Exemple :

import asgard.display.Background ;
 
import pegas.draw.Align ;
import pegas.draw.FillStyle ;
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.x = 100 ;
area.y = 100 ;
 
area.align = Align.CENTER ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
 
area.setSize( 400 , 300 ) ;

Je vous conseille d'essayer les diverses constantes de la classe Align pour voir les différents comportements de dessin de la zone rectangulaire.

Mode plein écran et direction

Par défaut les propriétés w et h de la classe Background renvoies les valeurs numériques définies par l'utilisateur dans le code.

Il est toute fois possible de changer le comportement des propriétés w et h en utilisant les propriétés "isFull", "direction" et "autoSize" de la classe Background.

La propriété isFull est une propriété virtuelle booléenne qui change la stratégie en lecture des propriétés w et h.

Quand la propriété isFull vaut "true" alors les propriétés w et h ne renvoies non plus les valeurs définies par l'utilisateur mais la largeur et la hauteur définies par les propriétés stage.stageWidth et stage.stageHeight (à condition que le background soit attaché dans la display list de l'application).

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
stage.align     = "tl" ;
stage.scaleMode = "noScale" ;
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.fill = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.isFull  = true ;
 
trace( area.w == stage.stageWidth ) ; // true
trace( area.h == stage.stageHeight ) ; // true

Dans l'exemple ci-dessus la scène est définir avec un alignement en haut à gauche et une propriété scaleMode avec la valeur "noScale". Il est important de modifier la nature par défaut de la scène pour profiter au mieux des fonctionnalités avancées de la classe Background.

Ainsi, le code précédent redimensionne automatiquement la zone rectangulaire avec la taille courante de la scène principale dans le FlashPlayer.

Petit problème maintenant car si nous changeons la taille du FlashPlayer, la zone rectangulaire gardera sa taille définir préalablement au moment de l'activation du mode "isFull". Si nous souhaitons garder à tout moment un fond avec une largeur et hauteur identique à celle de l'animation il faudra combiner le code ci-dessus avec la propriété virtuelle "autoSize" :

import asgard.display.Background ;
 
import pegas.draw.FillStyle ;
 
stage.align     = "tl" ;
stage.scaleMode = "noScale" ;
 
var area:Background = new Background() ;
 
addChild( area ) ;
 
area.fill     = new FillStyle( 0xD97BD0 , 0.8 ) ;
area.isFull   = true ;
area.autoSize = true ;

Le code ci-dessus permet très simplement de créer un fond qui prendra la taille de toute votre animation. Très pratique pour créer des fond d'écrans mais aussi des "shadow box" (zone rectangulaire qui couvre toute l'application permettant d'afficher des informations ou des messages d'alertes) ou "protector" (zone couvrant toute la scène et permettant de protéger l'application de tout click de souris)

A noter qu'il est possible d'aller encore plus loin en créant une classe "custom" qui héritera de la classe Background car dans ce cas il sera possible de définir des comportements avancés pendant le redimensionnement de la zone rectangulaire, exemple :

package example.display
{
    import asgard.display.Background;
 
    import flash.display.Bitmap;    
 
    /**
     * The wallpaper of the application.
     */
    public class Wallpaper extends Background
    {
 
        /**
         * Creates a new Wallpaper instance.
         */
        public function Wallpaper()
        {
            isFull   = true ;
            autoSize = true ;
        }
 
        /**
         * The picture of the wallpaper.
         */
        public var picture:Bitmap ;
 
        /**
         * Invoked after the draw() method in the update() method.
         */
        public override function viewChanged():void
        {
            if ( picture != null )
            {
                picture.x = ( w - picture.width ) / 2 ;
                picture.y = ( h - picture.height ) / 2 ;
            }
        }        
 
    }
}

La classe Wallpaper définie ci-dessus hérite de la classe Background. Je vous ai déjà parlé de la méthode update() de la classe Background, il faut savoir également que cette méthode invoque en interne une méthode "viewChanged" qui peut être écrasée (override) par l'utilisateur dans une classe custom et il est donc possible de gérer en fonction des besoins le positionnement d'autres sous objets par exemple dans cette méthode.

Je fini l'exemple ci-dessus avec un petit bout de code simple :

import example.display.Wallpaper ;
 
import flash.display.Bitmap ;
 
import pegas.draw.FillStyle ;
 
stage.align     = "tl" ;
stage.scaleMode = "noScale" ;
 
var wallpaper:Wallpaper = new Wallpaper() ;
 
wallpaper.picture = new Bitmap( new MyPicture(0,0) ) ; // MyPicture a BitmapData in the library of the swf
wallpaper.fill    = new FillStyle( 0x000000 ) ;
 
wallpaper.addChild( picture ) ;
addChild( wallpaper ) ;

Le Bitmap "picture" est passé par référence dans l'instance "wallpaper". Visuellement l'image est toujours centrée dans le font de l'écran (voir contenu de la méthode viewChanged de la classe Wallpaper définie plus haut).

Les possibilités de la classe Background sont vastes et peuvent évoluées selon les besoins.

A noter qu'il est possible pour finir d'utiliser la propriété virtuelle "direction" avec les valeurs Direction.HORIZONTAL ou Direction.VERTICAL (voir la classe pegas.draw.Direction).

La propriété "direction" permet de modifier encore un peu la stratégie des propriétés w et h si la propriété "isFull" est active (true) :

Si la propriété "direction" a pour valeur "null" et isFull = true, les propriétés w et h prennent la taille de la scène (comportement décrit plus haut).

Si la propriété "direction" a pour valeur la chaine de caractère "horizontal" (ou Direction.HORIZONTAL) : seule la propriété w prend la largeur de la scène, la propriété h garde sa taille définie dans le code. Il est donc possible de créer facilement des bandeaux horizontaux dans une application avec cette propriété en mode "horizontal".

Si la propriété "direction" a pour valeur la chaine de caractère "vertical" (ou Direction.VERTICAL) : seule la propriété h prend la hauteur de la scène, la propriété w garde sa taille définie dans le code. Il est donc possible de créer facilement des bandeaux verticaux dans une application avec cette propriété en mode "vertical".

Pour finir ce tutoriel je vais ajouter un dernier exemple beaucoup plus complet que vous pourrez trouver sur le SVN de ASGard avec la classe TestBackground.

Voici le code de la classe pour ceux qui auront pas le courage de cliquer sur le lien ci-dessus :

package examples 
{
    import asgard.display.Background;
 
    import pegas.draw.Direction;
    import pegas.draw.FillGradientStyle;
    import pegas.draw.FillStyle;
 
    import flash.display.GradientType;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;    
 
    /**
     * Example with the asgard.display.Background class.
     */
    public class TestBackground extends Sprite 
    {
 
        public function TestBackground()
        {
 
            stage.align     = StageAlign.TOP_LEFT ;
            stage.scaleMode = StageScaleMode.NO_SCALE ;
 
            stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown) ;
 
            background         = new Background() ;
            background.fill    = new FillStyle(0xD97BD0, 1) ;
            background.w       = 400 ;
            background.h       = 300 ;
 
            addChild( background ) ;
 
            // little tests
            // background.minWidth = 600 ;
            // background.maxWidth = 250 ;
            // background.line = new LineStyle(2, 0xFFFFFF, 1) ;
 
        }
 
        protected var background:Background ;        
 
        protected function keyDown( e:KeyboardEvent ):void
        {
            var code:uint = e.keyCode ;
            switch( code )
            {
                case Keyboard.SPACE :
                {
                    if( background.isFull )
                    {
                        background.autoSize  = false ;
                        background.direction = null ;
                        background.isFull    = false ;
                        background.fill      = new FillStyle(0xD97BD0) ;
                    }
                    else
                    {
                        background.autoSize         = true ;
                        background.isFull           = true ;
                        background.direction        = null ;
                        background.gradientRotation = 90 ;
                        background.useGradientBox   = true ;
                        background.fill             = new FillGradientStyle
                        (
                            GradientType.LINEAR , // type 
                            [0x071E2C,0x81C2ED] , // colors
                            [1,1]               , // alphas
                            [0,0xFF]              // ratios
                        ) ;
                    }
                    break ;
                }
                case Keyboard.UP :
                {
                    background.autoSize  = true ;
                    background.fill      = new FillStyle(0x000000) ;
                    background.isFull    = true ;
                    background.direction = Direction.HORIZONTAL ;
                    break ;
                }
                case Keyboard.DOWN :
                {
                    background.autoSize  = true ;
                    background.fill      = new FillStyle(0xFFFFFF) ;
                    background.isFull    = true ;
                    background.direction = Direction.VERTICAL ;         
                    break ;
                }
            }
        }
    }
}

J'espère que ce tutoriel vous a permis de découvrir au mieux la classe asgard.display.Background est très pratique et à la fois très simple d'utilisation.

Je vous invite donc à vous amuser avec le plus possible

A noter qu'avec un peu d'IoC pour définir rapidement vos zones graphiques dans votre application cela devient encore plus sympa d'utiliser cette classe des petits exemples dans AST'r sont à votre disposition pour les plus curieux !

Remarque :

Vous pouvez consulter ce document sur Google Document à tout moment sans passer par mon blog à l'adresse publique suivante : http://docs.google.com/Doc?id=dfd9s8cg_70fc5t36f3

Contrôler la timeline de vos animations.

eKameleon — Sun, 29 Mar 2009 22:37:00 +0200

1 - Généralité

Pour contrôler la timeline d'une animation Flash ou d'un MovieClip nous avons l'habitude depuis les toutes premières versions de l'ActionScript d'utiliser les méthodes play(), stop(), gotoAndStop(), etc. de la classe MovieClip.

En AS3 de nouvelles propriétés et méthodes sont apparues pour rendre encore plus souple notre maitrise de la timeline et de nos animations. Nous pouvons noter l'apparition de la classe flash.display.FrameLabel qui permet d'obtenir à n'importe quel moment via un objet typé toutes les informations d'une imagé clé portant une étiquette d'image spécifique. Ou encore la possibilité d'utiliser une méthode non documenté addFrameScript() qui permet d'injecter dans les images clés d'un MovieClip des fonctions selon les besoin au runtime.

Malgré ces outils de base, j'ai eu très vite besoin d'aller un peu plus loin et de standardiser dans l'extension ASGard de VEGAS avec 3 classes bien pratiques pour manipuler le scénario d'un MovieClip.

Ces classes sont :

Pour utiliser ces classes je vous invite à récupérer les sources de VEGAS (pour ceux qui ne l'ont pas encore récupéré les sources AS3 ;)) :

http://code.google.com/p/vegas/wiki/InstallVEGASwithSVN?tm=4

Pour toute question sur VEGAS et ses extensions vous pouvez vous inscrire sur le Google Groups du projet : VEGASOS .

2 - La classe asgard.display.TimelineInspector

Cette classe diffuse des événements de type asgard.events.FrameLabelEvent avec le type défini dans la constante FrameLabelEvent.FRAME_LABEL.

Elle prend la main par composition sur un MovieClip et injecte via la méthode addFrameScript des fonctionnalités dans le MovieClip pour diffuser des événements pendant la lecture du clip lorsque la tête de lecture rencontre un clip contenant une image clé portant une étiquette d'image.

Cette classe permet en gros comme pour des vidéos d'injecter au runtime des "cue points" et permet de très rapidement prendre la main avec des fonctionnalités avancées ActionScript sur une animation simple générée par un graphiste ou animateur qui n'a pas trop l'habitude de manipuler l'ActionScript (si si cela existe encore malheureusement). Il faudra juste qu'il mette des étiquettes sur les images clés importantes de son animation.

Exemple d'utilisation :

package examples
{
    import asgard.display.TimelineInspector;
    import asgard.events.FrameLabelEvent;
 
    import flash.display.FrameLabel;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.utils.setTimeout;    
 
    /**
     * Example with the asgard.display.TestTimelineInspector class.
     */
    public dynamic class TestTimelineInspector extends Sprite
    {
 
        public function TestTimelineInspector()
        {
 
            // stage
 
            stage.align      = StageAlign.TOP_LEFT ;
            stage.scaleMode  = StageScaleMode.NO_SCALE ;
 
            // target
 
            // "mc" a MovieClip in the stage of the application
            mc = getChildByName("mc") as MovieClip ;
 
            mc.useHandCursor = true ;
            mc.buttonMode    = true ;
 
            mc.addEventListener( MouseEvent.CLICK , click ) ;
 
            trace("Click the movieclip to start the example.");
 
            // timeline inspector
 
            var inspector:TimelineInspector = new TimelineInspector( mc , true ) ;
 
            inspector.addEventListener( FrameLabelEvent.FRAME_LABEL, frameLabel ) ;
        }
 
        public var mc:MovieClip ;
 
        /**
          * Run the test.
          */
        public function click( e:MouseEvent ):void
        {
            mc.play() ;
        }
 
        /**
         * Invoked when a new frame label notify a FrameLabelEvent.
         */
        public function frameLabel( e:FrameLabelEvent ):void
        {
            var frame:FrameLabel = e.frameLabel ;
            trace( "frameLabel :: " + frame.frame + " : " + frame.name ) ;
            switch( frame.name )
            {
                case "finish" :
                {
                    mc.stop() ;
                    break ;
                }
                case "middle" :
                {
                    mc.stop() ;
                    setTimeout(mc.play, 5000) ; // pause 5 seconds
                    break ;
                }
            }
        }
    }
}

Le code précédent est très simple, il suffit donc de prendre la main sur un MovieClip en tapant simplement :

var inspector:TimelineInspector = new TimelineInspector( mc , true ) ;

A noter que le second paramètre du constructeur de la classe TimelineInspector permet de lancer automatiquement la fonction stop() du MovieClip ciblé pour arrêter tout de suite sa lecture (par exemple si le graphiste n'a pas mi de code sur la première image clé de l'animation pour stopper celle ci).

Il suffit donc ensuite d'écouter l'événement de type FrameLabelEvent.FRAME_LABEL pour recevoir les notifications pendant la lecture de l'animation. Dans l'exemple ci-dessus il faut cliquer sur le MovieClip pour lancer son animation.

A noter que vous pouvez retrouver cet exemple et ceux des autres classes de cet article dans le SVN de ASGard dans le répertoire AS3/trunk/examples (ou de VEGAS en external dans le répertoire AS3/trunk/bin/tests).

3 - La classe asgard.display.TimelineIterator

Permet en se basant sur le design pattern Iterator implémenté via une interface dans le package system.data de parcourir facilement dans les 2 sens l'animation d'un MovieClip. Comme si un MovieClip était une collection d'image clé.

La classe TimelineIterator prend la main par composition sur un MovieClip et permet via les méthodes hasNext(), hasPrevious(), next() et previous() de naviguer facilement d'une image clé vers une autre.

Exemple :

package examples
{
    import asgard.display.TimelineIterator;
 
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;    
 
    /**
      * Example with the asgard.display.TimelineIterator class.
      */
    public dynamic class TestTimelineIterator extends Sprite
    {
        public function TestTimelineIterator()
        {
            stage.align      = StageAlign.TOP_LEFT ;
            stage.scaleMode  = StageScaleMode.NO_SCALE ;
 
            var mc:MovieClip = getChildByName("mc") as MovieClip ;
 
            it = new TimelineIterator( mc , 2 ) ;
 
            trace( "timeline current frame : " + it.currentFrame ) ;
            trace( "timeline total frames  : " + it.totalFrames ) ;
 
            stage.addEventListener( KeyboardEvent.KEY_DOWN , keyDown ) ;
        }
 
        public var it:TimelineIterator ;
 
        /**
         * Invoked when key is down.
         */
        public function keyDown( e:KeyboardEvent ):void
        {
            var code:uint = e.keyCode ;
            switch(code)
            {
                case Keyboard.LEFT :
                {
                    if ( it.hasPrevious() )
                    {
                        it.previous() ;
                    }
                    else
                    {
                        it.last() ;
                    }
                    break ;
                }
                case Keyboard.RIGHT :
                {
                    if ( it.hasNext() )
                    {
                        it.next() ;
                    }
                    else
                    {
                        it.reset() ;
                    }
                    break ;
                }
            }
            trace( "timeline : " + it.currentFrame + " | " + it.totalFrames + " | frame label : " + it.currentLabel ) ;
        }
    }
}

Pour contrôler le MovieClip il suffit de créer une instance de type TimelineIterator avec un constructeur défini avec les arguments suivants :

new TimelineIterator( target:MovieClip , framePosition:Number=NaN, stepSize:uint=1 )

Le premier argument "target" permet de cibler le MovieClip

Le second argument "framePosition" optionel permet de définir l'image clé sur laquelle on souhaite débuter l'itération. A noter que le TimelineIterator se sert de la méthode gotoAndStop() pour se déplacer dans l'animation d'un clip et en définissant un numéro d'image clé dans le constructeur de la classe permet donc de positionner tout de suite l'animation à l'image clé voulu et d'arrêter l'animation.

Le troisième et dernier argument "stepSize" optionel permet de changer la valeur des "sauts" entre une itération et une autre. Par défaut le saut est simplement d'une seule image clé mais dans certains cas il est possible d'augmenter cette valeur.

Je vous invite à regarder de plus prêt la classe TimelineIterator pour en découvrir toutes les propriétés et méthodes. Cette classe implémente l'interface system.data.OrderedIterator.

4 - La classe asgard.display.TimelineScript

Permet d'injecter dans une image clé d'un MovieClip une fonction en ciblant son numéro ou son nom d'étiquette.

Cette classe ressemble beaucoup à la classe TimelineInspector mais permet de maitriser toutes les images clés d'un MovieClip. La classe TimelineInspector diffuse uniquement des événements pendant la lecture des images clés possédant une étiquette.

Exemple :

package examples
{
    import asgard.display.TimelineScript;
 
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.utils.setTimeout;    
 
    /**
     * Example with the asgard.display.TimelineScript class.
     */
    public dynamic class TestTimelineScript extends Sprite
    {
 
        public function TestTimelineScript()
        {
 
            // stage
 
            stage.align      = StageAlign.TOP_LEFT ;
            stage.scaleMode  = StageScaleMode.NO_SCALE ;
 
            // target
 
            mc               = getChildByName("mc") as MovieClip ;
            mc.useHandCursor = true ;
            mc.buttonMode    = true ;
 
            mc.addEventListener( MouseEvent.CLICK , click ) ;
 
            trace("Click the movieclip to start the example.");
 
            // timeline script
 
            var ts:TimelineScript = new TimelineScript( mc , true ) ;
 
            ts.put( "begin"   , start ) ;
            ts.put( "middle"  , pause ) ;
            ts.put( "finish"  , finish ) ;
 
        }
 
        public var mc:MovieClip ;
 
        public function click( e:MouseEvent ):void
        {
            mc.play() ;
        }
 
        public function start():void
        {
            trace("start") ;
        }
 
        public function pause():void
        {
            trace("pause") ;
            mc.stop() ;
            setTimeout( mc.play , 4000 ) ; // pause 4 s
        }
 
        public function finish():void
        {
            trace("finish") ;
            mc.stop() ;
        }
    }
}

Comme la classe TimelineInspector la déclaration d'une instance de type TimelineScript est facile, il suffit de cibler un MovieClip en tapant simplement :

var script:TimelineScript = new TimelineScript( mc , true ) ;

Le second argument optionel permet de lancer automatiquement la fonction stop() du clip sélectionné pour le mettre en pause. Ce paramètre est très pratique quand le graphiste n'a pas pris le temps de mettre de stop() sur la première image clé d'un clip posé sur la scène principale par exemple. Il sera alors très simple de prendre la main sur un ou plusieurs clips et ainsi d'orchestrer leurs contenus correctement.

A noter que les classes TimelineScript et TimelineInspector utilisent en internent la méthode addFrameScript et qu'il est préférable de ne mettre aucun script dans les images clés du clip ciblé et bien entendu d'éviter d'utiliser la méthode addFrameScript sur le clip, ce qui pourrait écraser les fonctionnalités injectées dans les "helper" définis dans l'application.

J'espère que ces 3 petites classes vous aideront dans vos applications et n'hésitez pas à me faire savoir quelles fonctionnalités vous aimeriez voir apparaitre par la suite dans ces classes ou dans le package asgard.display.

Font case sensitive in MAC OSX

eKameleon — Sat, 07 Feb 2009 23:20:00 +0100

Petite remarque à propos des polices de caractères sur MACOS X dans Flash.

J'ai la chance depuis une petite semaine de travailler sous MAC OSX avec un tout nouveau MacBook Pro, c'est mon premier MAC donc je suis un peu comme un gosse qui découvre un nouveau joujou... Il m'a fallu tout se temps pour me mettre sur MAC et franchement là je peux dire qu'il n'y a rien à regretter. Quelques habitudes sur de longues années sur Windows sont encore à perdre mais le bilan reste à l'heure actuelle vraiment largement positif (bien plus que je ne l'espérais).

Reste que le passage d'un Windows XP vers un MAC OSX est une grosse claque au niveau ergonomie, souplesse de l'OS et des applications, et des possibilités (terminal en ligne de commande intégré, SVN, ANT, etc.. déjà installé, etc..).. Maintenant des choses sont vraiment différentes et il est clair qu'à l'heure actuelle pour intégrer convenablement une application Flash (que cela soit pour le FlashPlayer mais aussi pour AIR) il faut absolument avoir un système permettant de tester son code, et le rendu d'un projet sous plusieurs OS sous peine de réaliser après tout ce temps que l'on traine derrière soit des dommages collatéraux assez énormes !

Bon donc pour en revenir au sujet de ce ticket, je me suis rendu compte (super rapidement) que le nom des polices de caractères utilisées dans Flash (ou Flex, c'est pareil..) définies dans les feuilles de style ou dans les objets de type flash.text.TextFormat doivent absolument respecter la sensibilité de la casse des caractères.

Exemple simple de code dans Flash pour illustrer le petit problème rencontré :

var field:TextField = new TextField() ;
 
field.defaultTextFormat = new TextFormat("arial", 14) ;
 
field.x    = 10 ;
field.y    = 10 ;
field.text = "hello world" ;
 
addChild( field ) ;

Si l'on compile l'exemple précédent et que nous utilisons un FlashPlayer sous Windows, pas de soucis la police est bien prise en compte. Alors que si l'on utilise un swf généré avec le code ci-dessus par exemple dans le FlashPlayer 10 MAC OSX, la police n'est pas prise en compte et c'est la police système par défaut (Times je crois) qui est utilisée.

Donc pour corriger le tire il faut regarder par exemple dans Flash le panneau de propriété des champs de texte et bien noter le nom exacte (à la majuscule et minuscule près de la font utilisée :

var field:TextField = new TextField() ;
 
field.defaultTextFormat = new TextFormat("Arial", 14) ;
 
field.x    = 10 ;
field.y    = 10 ;
field.text = "hello world" ;
 
addChild( field ) ;

Remarque : j'ai trouvé sur Google un lien vers le JIRA de Adobe qui concerne ce "bug" (je ne sais pas si c'est un bug sur MAC ou plutöt sur Windows du coup... à mon sens c'est bien que les fonts soit case sensitive

Font names are case sensitive on Macintosh

Maintenant le swf peut être consulté correctement aussi bien sur OSX que sur Windows. Me reste à installer ce week-end une virtual machine pour tester cela sur Linux Cette virtual machine se servira à coup sûr pour installer Flash Media Interactive Server et devenir totalement indépendant de mon ancien PC qui tire vraiment la tronche mais il m'a fait subir ces derniers mois des crise de colère tellement intense qu'il est vraiment temps que je passe à autre chose. Notre séparation est vraiment indispensable et je ne pense vraiment pas que Windows 7 me refera venir vers Windows de si tôt

Je reste persuadé que les ingénieurs et développeurs de Windows chez Microsoft devraient discuter un peu avec les développeurs qui travaillent sur la XBOX 360 .. lol Mais bon je veux pas non plus cracher sur mes années DOS et Windows... j'ai passé des bons moment sur cet OS (si si ...) mais pour le travail et nos besoins actuels (profession qui nécessite de plus en plus de technicité) les MAC deviennent le produit indispensable pour bosser. Un peu comme à l'époque quand je rêvais d'avoir une Sillycon Graphics.. à l'heure actuelle les MAC proposent un environnement de travail de rêve pour tout développeur qui se respecte... Travailler avec 9 écrans virtuels (space) sur 2 écran en simultané (donc 18 écrans) .. Cela change une vie lol

Bref... j'ai pas envie de rentrer ici dans le débat bien connu qui tourne autour de la guerre MAC/PC mais je voulais juste vous donner un peu mon impression face à ce système d'exploitation et ce matériel qui reste cher mais au combien bien pensé !

D - Chargement de ressources externes ( Partie 4 - config )

eKameleon — Thu, 01 Jan 2009 12:12:00 +0100

Très bonne année 2009 et surtout bonne santé !!

Je commence donc cette année avec l'avant dernier article du chapitre D sur les ressources externes des fichiers de configuration d'une fabrique IoC

J'aurai pu faire un simple petit article classique mais je préfère faire d'une pierre deux coups

J'espère que cette année 2009 me laissera le temps de continuer mon travail sur la version 2 de VEGAS avec la fusion dans Maashaack de la plupart des packages system.events, system.process et system.ioc !

Sinon la bonne résolution pour 2009 c'est de débuter le projet de GUI AIR pour créer des RIA facilement basé sur eden et IoC + un petit projet qui me tiens à coeur avec Zwetan ... un projet de flibustier et qui sent bon le bateau en pleine mer ou dans l'espace ??... enfin je me comprends lol

Je tiens à remercier tous ceux qui m'ont aidés pendant 2008 et qui ont encore le courage de le faire cette nouvelle année pour faire avancer le projet

PS : Pour ma part j'attends en 2009 des news importantes sur le futur de l'ActionScript avec AS4 !

Je peux maintenant vous laisser le temps pour lire ce nouvel article sur les ressources de type "config". Bonne lecture à tous

7 - Les ressources de type "config" (configuration)

7-1 . La classe andromeda.config.Config

Nous avons vu un peu plus haut dans le chapitre C-1.1 qu'il est possible de définir dans la configuration d'une fabrique IoC un objet "config" de configuration simple qui permet ensuite de récupérer les valeurs de certaines variables dans les différentes définitions d'objet d'un conteneur IoC.

Dans le cadre d'un chargement d'une configuration externe (context IoC) l'objet de configuration de la fabrique cible un singleton dynamique de type andromeda.config.Config qui servira à la fois d'objet de configuration dans les définitions d'objet du conteneur IoC mais aussi de configuration globale dans l'application en ciblant à tout moment cet objet avec l'instruction suivante :

import andromeda.config.Config ;
 
var config:Config = Config.getInstance() ;

La classe andromeda.config.Config est dynamique et il est donc possible de définir sur une de ses instances tous les attributs nécessaires pour configurer l'application.

Voici un exemple simple d'utilisation de cette classe et de son singleton :

import flash.text.* ;
 
import andromeda.config.Config ;
 
var init:Object = 
{
    header :
    {
        name    : "CONFIG TEST" , 
        version : "1.0.0.0"
    }
    ,
    views :
    {
        field :
        {
            autoSize          : "left" ,
            defaultTextFormat : new TextFormat("Arial", 14) ,
            text              : "hello world" ,
            textColor         : 0x3C4DDD ,
            x                 : 10 ,
            y                 : 10
        }
    }
}
 
var conf:Config = Config.getInstance() ;
 
// Initialize the dynamic configuration with a dynamic object.
 
conf.map( init ) ;
 
// target valuers with the dot notation or the get() method.
 
trace( "conf.header.name           : " + conf.header.name ) ;
trace( "conf.get('header.version') : " + conf.get('header.version') ) ;
 
// initialize an object in the application with the init() method
 
var field:TextField = new TextField() ;
addChild( field ) ;
 
conf.init( field , "views.field" ) ;

Nous noterons dans l'exemple précédent l'utilisation des méthodes :

get() : Cette méthode utilise en interne un objet de type system.evaluators.PropertyEvaluator pour évaluer le paramètre envoyé et pour récupérer dans la config la valeur désirée. Si l'identifiant est null ou qu'il ne correspond à aucune propriété définie dans la config alors la méthode renvoie "null".
init() : Cette méthode permet d'initialiser un objet en lui attribuant membre à membre les propriétés définies dans la config ou dans une propriété en particulier définie dans la config. Comme pour la méthode get(id:String), il est possible de passer dans le second paramètre de la fonction un identifiant (String) qui sera évalué et qui permet de localiser précisément un sous objet défini dans la config.
map() : Cette méthode permet d'initialiser la config avec un objet générique dynamique simple.

7-2 . L'interface andromeda.config.IConfigLoader

La classe andromeda.config.Config et son singleton sont donc très pratique surtout si on les combine avec une classe qui implémente l'interface andromeda.config.IConfigLoader . Cette interface permet de définir des chargeurs de configurations externes (au format eden, JSON, etc..)

Nous pouvons retrouver dans le package andromeda.config.* les 2 classes qui implémentent pour le moment cette interface : EdenConfigLoader et JSONConfigLoader. Il est ensuite tout à fait possible d'implémenter d'autres types de chargeur de configuration basé sur le format XML ou autres en se basant sur l'implémentation de ces 2 classes.

Exemple d'utilisation :

Création d'un fichier texte UTF8 externe "config.eden" qui contient la chaine de caractère suivante :

header = 
{
    name      : "CONFIG EDEN TEST" , 
    namespace : "andromeda.config" ,
    version   : "1.0.0.0"
} ; 
 
security = 
[ 
    "http://code.google.com/p/vegas/" ,
    "http://www.ekameleon.net/" , 
    "http://groups.google.com/group/vegasos" 
] ; 
 
default_lang = "fr" ;

Utilisation simple de la classe EdenConfigLoader dans un script AS3 classique :

import andromeda.config.Config ;
import andromeda.config.EdenConfigLoader;
 
import andromeda.events.ActionEvent ;
 
import flash.events.Event ;
 
var debug:Function = function ( e:Event ):void
{
 
    trace( e ) ;
 
    var data:Config = Config.getInstance() ;
 
    for (var prop:String in data)
    {
       trace("# " + prop + " : " + data[prop]) ;
       if ( data[prop] as Object )
       {
           for (var key:String in data[prop]) 
           {
               trace("  - " + key + " : " + data[prop][key]) ;
           }
       }
   }
}
 
var loader:EdenConfigLoader = new EdenConfigLoader() ;
 
loader.addEventListener( ActionEvent.FINISH , debug) ;
 
loader.run() ;

7-3 . Contenu de l'objet générique qui permet de définir la ressource de type "config".

Les ressources de type "config" permettent donc de charger un ou plusieurs fichier de configuration (par défaut au format eden) qui contiennent des variables qui seront utilisées par la suite dans les définitions d'objet de la fabrique mais aussi directement dans l'application en ciblant le singleton Config.getInstance().

Regardons la signature minimale de l'objet générique qu'il est possible de définir dans l'attribut "imports" pour charger une ressource de type "config" :

{ 
    resource : "config"  , 
    type     : "config"  , 
    verbose  : true 
}

Dans cet objet générique il est possible de d'utiliser les attributs suivant :

Attributs obligatoires :

resource : indique le nom (sans l'extension) du fichier que l'on souhaite charger (obligatoire)
type : indispensable pour indiquer au chargeur que la ressource est de type "config".

Attributs optionnels :

loader : Représente directement une référence vers une classe de type IConfigLoader ou une chaine de caractère qui représente le nom complet d'une classe de type IConfigLoader.
path : indique le chemin du fichier à charger (exemple : path:"config/" ).
suffix : Représente le nom de l'extension utilisée pour charger le fichier de configuration, par défaut cette extension a pour valeur la chaine de caractère : ".eden".
verbose : un booléean qui active le mode debug de la ressource en cas de problème.

A noter que l'attribut "loader" permet de remplacer la classe EdenConfigLoader utilisée par défaut par la ressource pour chager le fichier de configuration externe. Il sera donc possible en cas de besoin d'utiliser un autre type de chargeur de configuration (JSON, XML, etc...)

7-4 . Exemple d'utilisation d'une ressource de type "config"

Il faut tout d'abord créer un fichier texte UTF8 de configuration "config.eden" que l'on place dans un répertoire config/ qui contient les variables suivantes :

display =
{
 
   filters : 
   [ 
        new flash.filters.DropShadowFilter(4,75,0x000000,0.8,12,12,1,3) 
   ] 
 
};
 
field =
{
    autoSize          : "left" ,
    defaultTextFormat : new flash.text.TextFormat("Arial", 14, 0xEEED2B) ,
    text              : "hello world" ,
    x                 : 25 ,
    y                 : 25
};

Ensuite il suffit de créer un fichier de configuration "context/application_config_resource.eden" au format eden avec les définitions d'objet et la ressource de type "config" indispensable pour charger le fichier ci-dessus et créer le contenu de l'application :

imports =
[
    { resource : "config" , type : "config" , path : "config/" }
] ;
 
objects =
[
    {
        id   : "field" ,
        type : "flash.text.TextField" ,
        properties :
        [
            { name : "autoSize"          , config : "field.autoSize"          } ,
            { name : "defaultTextFormat" , config : "field.defaultTextFormat" } ,
            { name : "filters"           , config : "display.filters"         } ,
            { name : "text"              , config : "field.text"              } ,
            { name : "x"                 , config : "field.x"                 } ,
            { name : "y"                 , config : "field.y"                 } 
        ]
    }
    ,
    {
        id               : "application" ,
        type             : "flash.display.MovieClip" ,
        factoryReference : "#root" ,
        singleton        : true ,
        properties       :
        [
            { name : "addChild" , arguments : [ { ref : "field" } ] } 
        ]
    }
]

Pour finir il suffit de taper le code AS3 suivant :

import asgard.net.ECMAObjectLoader ;
import system.eden ;
 
// Authorizes the TextFormat class in the white list of eden
 
eden.addAuthorized("flash.filters.*") ;
eden.addAuthorized("flash.text.TextFormat") ;
 
// Initialize and launch the IoC factory loader.
 
var loader:ECMAObjectLoader = new ECMAObjectLoader( "application_config_resource.eden" , "context/" ) ;
 
loader.root = this ;
 
loader.run() ;

Remarque : Il est possible de charger plusieurs fichiers de configurations externe dans un même objet générique "imports" :

imports =
[
    { resource : "config2" , type : "config" , path : "config/" } ,
    { resource : "config1" , type : "config" , path : "config/" }
] ;

Cette technique permet de diviser le contenu d'une configuration un peu trop grosse mais aussi de gérer plus finement le remplissage de la configuration selon les besoins. A noter qu'une propriété définie avec le même nom dans plusieurs fichiers de configuration externes sera écrasé et prendra la valeur du dernier fichier chargé.

Le moteur de chargement des ressources externes est basé sur un système de stack LIFO (Last in First Out) qui impose dans l'exemple ci-dessus que les fichiers "config/config1.eden" et "config/config2.eden" soient chargés dans le sens inverse de l'ordre naturel de remplissage de la liste "imports" de type Array. Il faudra donc faire attention à bien déclarer dans le bon ordre les différentes ressources de type "config".

Liens

Pour ceux qui découvrent dans cet article le design pattern d'Inversion de contrôle avec VEGAS et qui n'ont pas eu encore le temps de consulter les articles précédents, voici une liste rapide des derniers articles à lire avant d'entamer celui-ci :

Article Précédent

D - Chargement de ressources externes ( Partie 3 )

Article Suivant :

Les ressources de type "i18n" (très bientôt)