Flex et code behind

Flex, nouveau fer de lance d'Adobe en matière de RIA, il permet de développer des clients web riches lourds. Flex est basé sur MXML et Actionscript et s'apparente d'une certaine manière à Silverlight (et inversement).

L'un des inconvénients de la plate forme, par ailleurs si plaisante, c'est qu'elle ne propose pas de modèle de séparation de la couche XML et de la programmation par défaut à la manière des outils .NET de Microsoft. Aussi, l'on est tenté 'écrire sa programmation directement dans les fichiers MXML et non dans des classes actionscript séparées (fichiers .as) ce qui peut générer des difficultés de lecture du code par la suite (question d'habitude).

La majorité des développeurs ont largement l'habitude de séparer ces couches : la couche XML qui concerne l'affichage (et réservée théoriquement aux graphistes et/ou ergonomes) et la couche Actionscript qui pilotera l'interface. Je parle volontairement de Code Behind car ce modèle s'apparente à celui de Microsoft, et paraît excellent.

Création d'une application flex

Pour illustrer ces propos, nous allons faire une application très simple composé d'un bouton qui affiche une fenêtre modale d'alerte :

Cela donne à peu près ça :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="200" minHeight="200" width="200" height="200">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                Alert.show("Hello world","Alerte");
            }
        ]]>
    </fx:Script>
    <s:Button x="65" y="146" label="Afficher" click="button1_clickHandler(event)"/>
</s:Application>

Fichier code_behind.mxml

Et voici le résultat :

Version avec Code Behind

Dans cette version, nous aurons un fichier CodeBehind.mxml piloté par un fichier CodeBehindFunc.as (il n'existe pas réellement de convention de nommage des fichiers code behind, mais souvent, les développeurs utilisant cette technique ajoutent "Func" à la fin du nom du fichier et de la classe), de la même manière qu'en ASP.NET par exemple, on a un fichier CodeBehind.aspx et un fichier CodeBehind.aspx.cs.

MXML

<?xml version="1.0" encoding="utf-8"?>
<CodeBehindFunc 
                xmlns="*"
                xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="200">

    <s:Button x="65" y="146" label="Afficher" id="button1"/>
</CodeBehindFunc>

Fichier CodeBehind.mxml

Dans le MXML, nous modifions la balise principale <s:Application /> et lui donnons le nom de notre futur contrôleur actionscript <CodeBehindFunc />. Dans l'ouverture de cette balise, nous déclarons un nouveau namespace par défaut xmlns="*", ce qui signifie que la description des balises de ce MXML sont situées dans le package par défaut de notre application.

Nous donnons également un id à notre bouton dans le but de le piloter... et surtout, aucun code actionscript ici.

Actionscript

Nous créons donc une classe Actionscript en étendant la classe qui était utilisée à l'origine (la balise <s:Application />, donc la classe Application du namespace mx.core.Application :

package
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    import mx.controls.Alert;
    import mx.core.Application;
    import mx.events.FlexEvent;
    import spark.components.Button;

    public class CodeBehindFunc extends Application
    {
        public var button1:Button;
        
        public function CodeBehindFunc()
        {
            this.addEventListener(FlexEvent.CREATION_COMPLETE, this.creationCompleteHandler);
            
        }
        public function creationCompleteHandler(e:Event):void
        {
            this.button1.addEventListener(MouseEvent.CLICK, this.button1ClickHandler);
        }
        public function button1ClickHandler(e:Event):void
        {
            Alert.show("Hello world","Alerte");
        }
    }
}

Fichier CodeBehindFunc.as

Nous ajoutons l'attribut bouton button1 (l'id que nous avons précédemment défini dans notre MXML pour notre bouton), notez que cet attribut doit être obligatoirement public.

• Dans le constructeur, nous écoutons l'événement dispatché lorsque l'animation est créée,
• Un fois créée, la fonction creationCompleteHandler pose l'écouteur sur le bouton,
• Au clic sur le bouton, on affiche l'alerte.

Le résultat est le même :

Utilisation et programmation

Vous pourrez par la suite instancier et utiliser vos propres objets CodeBehind :

var cb:CodeBehind = new CodeBehind();

Ainsi qu'avoir accès aux attributs et méthodes de la classe que vous aurez défini dans CodeBehindFunc. C'est très pratique lorsque l'on veut customiser les composants Flex par défaut : étendre les composants comme TitleWindow, Alert, Canvas dans le cas où l'on souhaite créer ces propres composants, cela s'apparente dans ce cas aux ascx d'ASP.NET.

Téléchargement des sources

Conclusion

Il y a effectivement plus de code, et cette technique n'est pas à privilégier dans tous les cas : cependant, dans le cadre d'applications d'envergure, la lisibilité est plus grande que le codage en brut dans un fichier MXML. de plus vous bénéficiez de toutes les fonctionnalités de complétion de votre éditeur préféré (Flashdevelop ou Flash Builder)