Voici enfin le dernier article de cette trilogie, nous allons pouvoir commencer le développement de notre application Flex à l’aide du framework MVC Robotlegs.

Pour rappel, dans le premier article nous avons abordé l’implémentation du modèle MVC par Robotlegs et travaillé sur l’étude de cas de notre annuaire. Dans le second article, nous avons mis en place le service web Zend AMF permettant à l’application Flex de dialoguer avec la base de données MySQL.

Attention : pour simplifier la compréhension, l’ensemble du code source ne sera pas détaillé dans cet article.  Pour plus d’informations, vous pouvez télécharger les sources de l’application.

Nous allons créer un projet d’application web Flex à l’aide de Flash Builder et utiliser la version 4.5 du SDK. Nous ajoutons le binaire de Robotlegs dans le répertoire « libs » de notre projet, rendez-vous sur le site http://www.robotlegs.org/ pour télécharger les sources du framework.

Context

Le contexte est le coeur de l’application, il permet de créer les dépendances entre le contrôleur, le modèle et la vue.  Nous allons créer une classe MainContext qui hérite de org.robotlegs.mvcs.Context. Lors du démarrage d’une application Robotlegs, la classe de contexte doit être la première à être instanciée. Le constructeur de cette classe attend en paramètre « contextView », la vue principale de notre application.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var _context:MainContext;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                _context = new MainContext(this);
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>

</s:Application>

Model

Nous allons commencer par développer la couche la plus basse, le modèle. Il permet le stockage des données au sein de l’application, le chargement sera opéré par l’intermédiaire d’un service. Notre application regroupe 3 types de données : les sites, les tags et les catégories. Pour chaque type de donnée, une classe sera créée permettant le stockage des objets dans une structure de type liste. Le pattern Value Object permettra d’encapsuler les données retournées par le service.

Vous vous rappelez surement lors de la création de notre service PHP, l’implémentation de la méthode getASClassName().

namespace jf\services\directory;

class Site
{
    public function getASClassName()
    {
        return 'SiteVO';
    }
}

La balise de métadonnées [RemoteClass] permet de spécifier le nom de classe distante à utiliser, dans notre cas SiteVO.

package jf.directory.models.vo
{
    [Bindable]
    [RemoteClass(alias="SiteVO")]
    public class SiteVO
    {
        public var id:int;
        public var categoryId:int;
        public var name:String;
        public var url:String;
        public var description:String;
        public var createdAt:String;
    }
}

Le rôle de la classe SiteModel est de stocker une collection de value objects de type SiteVO. Le modèle doit signaler son changement d’état à la vue, un événement SiteModelEvent.SITE_COLLECTION permettra d’informer que la collection a été mise à jour. Pour diffuser des événements, la classe SiteModel étend org.robotlegs.mvcs.Actor et utilise la méthode dispatch().

package jf.directory.models
{
    import jf.directory.models.events.SiteModelEvent;
    import jf.directory.models.vo.SiteVO;

    import org.robotlegs.mvcs.Actor;

    public class SiteModel extends Actor
    {
        private var _sites:Vector.<SiteVO> = new Vector.<SiteVO>;

        public function updateCollection(collection:Array):void
        {
            _sites.splice(0, _sites.length);

            for each (var site:Object in collection)
            {
                _sites.push(site as SiteVO);
            } 

            dispatch(new SiteModelEvent(SiteModelEvent.SITE_COLLECTION, collection));
        }
    }
}

Service

Une bonne pratique de développement consiste à concevoir dans des interfaces.

package jf.directory.models.services
{
    public interface IDirectoryService
    {
        function getSites( categoryID:int, tagsID:Array = null ):void
    }
}

Nous allons créer une classe RemoteService pour encapsuler le comportement permettant d’accéder à des classes sur un serveur d’applications distant.

package jf.directory.models.services
{
    import mx.rpc.remoting.mxml.RemoteObject;

    import org.robotlegs.mvcs.Actor;

    public class RemoteService extends Actor
    {
        private var _remoteObject:RemoteObject;

        public function get remoteObject():RemoteObject
        {
            return _remoteObject;
        }

        public function set remoteObject(value:RemoteObject):void
        {
            _remoteObject = value;
        }

        public function RemoteService()
        {
            _remoteObject = new RemoteObject();
            _remoteObject.showBusyCursor = true;
        }
    }
}

L’implémentation de la classe RemoteDirectoryService peut maintenant commencer. Les propriétés destination, source et endpoint du RemoteObject sont configurées au moment de l’initialisation de l’application à l’aide d’un fichier XML.

L’utilisation d’une propriété publique et du meta-tag [Inject] permet à Robotlegs de réaliser une injection de dépendance, notre service dispose maintenant d’une référence à SiteModel. Le contrôleur appellera les méthodes du service. Lorsque les résultats seront retournés, le service mettra à jour le modèle.

package jf.directory.models.services
{
    import jf.directory.models.SiteModel;

    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;

    public class RemoteDirectoryService extends RemoteService implements IDirectoryService
    {
        [Inject]
        public var siteModel:SiteModel;

        public function RemoteDirectoryService()
        {
            super();

            remoteObject.getSites.addEventListener(ResultEvent.RESULT, getSites_resultHandler); 

            remoteObject.addEventListener(FaultEvent.FAULT, faultHandler);
        }

        public function getSites( categoryId:int, tagsId:Array = null ):void
        {
            remoteObject.getSites( categoryId, tagsId );
        }

        /*
        * Handlers
        */

        protected function getSites_resultHandler(event:ResultEvent):void
        {
            siteModel.updateCollection(event.result as Array);
        }

        protected function faultHandler(event:FaultEvent):void
        {
            trace(event.toString());
        }
    }
}

Controller

La logique de l’application doit être implémentée dans les commandes, classes héritant de org.robotlegs.mvcs.Command. La déclaration d’une commande implique de surcharger la méthode execute(). Les commandes sont appelées lors de la diffusion d’un événement spécifique, toujours à l’aide du modèle événementiel de Flash.

package jf.directory.controllers.events
{
    import flash.events.Event;

    public class LoadSiteEvent extends Event
    {
        public static const LOAD_SITE:String = "loadSite";

        private var _categoryId:int;

        public function get categoryId():int
        {
            return _categoryId;
        }

        private var _tagsId:Array;

        public function get tagsId():Array
        {
            return _tagsId;
        }

        public function LoadSiteEvent(type:String, categoryId:int, tagsId:Array = null, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            _categoryId = categoryId;
            _tagsId = tagsId;

            super(type, bubbles, cancelable);
        }

        public override function clone():Event
        {
            return new LoadSiteEvent( type, categoryId, tagsId);
        }
    }
}

Dans notre cas l’événement LoadSiteEvent.LOAD_SITE appellera la commande LoadTagCommand. L’injection de dépendance utilisée dans la classe de commande permettra de faire appel à la méthode getSite() du service RemoteDirectoryService. L’événement diffusé pour faire appel à la commande peut également être injecté pour accéder à ses informations.

package jf.directory.controllers.commands
{
    import jf.directory.controllers.events.LoadSiteEvent;
    import jf.directory.models.services.IDirectoryService;

    import org.robotlegs.mvcs.Command;

    public class LoadSiteCommand extends Command
    {
        [Inject]
        public var event:LoadSiteEvent;

        [Inject]
        public var service:IDirectoryService;

        override public function execute() : void
        {
            service.getSites(event.categoryId, event.tagsId);
        }
    }
}

View

Les composants visuels ne doivent contenir aucune référence au framework Robotlegs, ils pourront ainsi être réutilisés dans n’importe quelle application. Pour communiquer avec le reste de l’application, les composants utiliseront des médiateurs. Par exemple, la vue principale de notre annuaire s’appellera DirectoryView et son médiateur DirectoryMediator qui hérite de org.robotlegs.mvcs.Mediator. Pour rappel, voici la maquette correspondant à la vue en question.

DirectoryView est composé d’une liste de catégories représentée sous la forme d’un arbre et d’un composant permettant de sélectionner une liste de mots clés. En fonction de la catégorie et des mots clés sélectionnés, une liste de sites est affichée.

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          xmlns:components="jf.directory.views.components.*">

    <fx:Script>
        <![CDATA[
            import jf.directory.models.vo.CategoryVO;
            import jf.directory.views.events.TagSelectionEvent;

            import mx.collections.IList;
            import mx.controls.Alert;

            private var _categoryProvider:IList;

            public function get categoryProvider():IList
            {
                return _categoryProvider;
            }

            [Bindable]
            public function set categoryProvider(value:IList):void
            {
                _categoryProvider = value;
            }

            private var _siteProvider:IList;

            public function get siteProvider():IList
            {
                return _siteProvider;
            }

            [Bindable]
            public function set siteProvider(value:IList):void
            {
                _siteProvider = value;
            }

            public function get selectedCategoryId():int
            {
                return categoryTree.selectedItem == null ? 0 : categoryTree.selectedItem.id;
            }

            public function get selectedTagsId():Array
            {
                var tagsID:Array = new Array();

                for each(var tag:Object in tagSelection.selectedTags)
                {
                    tagsID.push(tag.id);
                }

                return tagsID;
            }

            public function showHelp(message:String):void
            {
                Alert.show(message, "Aide");
            }

        ]]>
    </fx:Script>

    <s:VGroup>
        <mx:Tree id="categoryTree" labelField="name"
                 dataProvider="{categoryProvider}"
                 width="200" height="300" />
        <s:Label text="Mots clés :" fontWeight="bold" />
        <components:TagSelection id="tagSelection" width="200" />
    </s:VGroup>
    <s:List id="siteList" dataProvider="{siteProvider}"
            itemRenderer="jf.directory.views.components.renderers.SiteListItemRenderer"
            width="100%" height="100%" horizontalScrollPolicy="off"/>

</s:HGroup>

Les médiateurs doivent surcharger la méthode onRegister(), elle est appelée automatiquement lorsque la vue liée au médiateur est ajoutée à l’application. Le médiateur va écouter les événements envoyés par les composants visuels et/ou par Robotlegs. La propriété « eventDispatcher » du médiateur permet d’écouter les événements envoyés par le framework.

package jf.directory.views.mediators
{
    import jf.directory.controllers.events.LoadSiteEvent;
    import jf.directory.models.events.CategoryModelEvent;
    import jf.directory.models.events.SiteModelEvent;
    import jf.directory.views.components.DirectoryView;
    import jf.directory.views.events.TagSelectionEvent;

    import mx.collections.ArrayCollection;
    import mx.events.ListEvent;

    import org.robotlegs.mvcs.Mediator;

    public class DirectoryMediator extends Mediator
    {
        [Inject]
        public var view:DirectoryView;

        override public function onRegister():void
        {
            //view
            eventMap.mapListener(view.categoryTree, ListEvent.CHANGE, categoryTree_changeHandler);
            eventMap.mapListener(view.tagSelection, TagSelectionEvent.SELECT_TAG, tagSelection_changeHandler);
            eventMap.mapListener(view.tagSelection, TagSelectionEvent.UNSELECT_TAG, tagSelection_changeHandler);
            //framework
            eventMap.mapListener(eventDispatcher, SiteModelEvent.SITE_COLLECTION, siteCollectionHandler);
        }

        protected function validate():Boolean
        {
            return view.selectedCategoryId == 0 ? false : true;
        }

        protected function load(showHelp:Boolean = true):void
        {
            if(validate())
            {
                dispatch(new LoadSiteEvent(LoadSiteEvent.LOAD_SITE, view.selectedCategoryId, view.selectedTagsId));
            }
            else if(showHelp)
            {
                view.showHelp("Veuillez sélectionner une catégorie de l'annuaire pour lancer une recherche.");
            }
        }

        protected function categoryTree_changeHandler(event:ListEvent):void
        {
            load();
        }

        protected function tagSelection_changeHandler(event:TagSelectionEvent):void
        {
            load(event.type == TagSelectionEvent.SELECT_TAG ? true : false);
        }

        protected function siteCollectionHandler(event:SiteModelEvent):void
        {
            view.siteProvider = new ArrayCollection(event.collection);
        }
    }
}

Le médiateur est informé lorsqu’une nouvelle catégorie est sélectionnée via l’événement ListEvent.CHANGE. Cette action permet de lancer le chargement des sites en diffusant un événement LoadSiteEvent.LOAD_SITE. Une fois le chargement des sites terminé, le modèle est modifié. Le médiateur est à son tour notifié avec un événement SiteModelEvent.SITE_COLLECTION et la vue est mise à jour.

Conclusion

Pour terminer nous allons lier l’ensemble des composants de l’application depuis son contexte. La méthode startup() de la classe MainContext va permettre de configurer l’application, les vues seront liées aux médiateurs, les commandes aux événements, etc.

package
{
    import flash.display.DisplayObjectContainer;

    import org.robotlegs.mvcs.Context;

    public class MainContext extends Context
    {
        public function MainContext(contextView:DisplayObjectContainer=null, autoStartup:Boolean=true)
        {
            super(contextView, autoStartup);
        }

        override public function startup():void
        {
            // Controllers
            commandMap.mapEvent(LoadSiteEvent.LOAD_SITE, LoadSiteCommand, LoadSiteEvent);

            //Services
            injector.mapSingletonOf(IDirectoryService, RemoteDirectoryService);

            //Models
            injector.mapSingleton(SiteModel);

            //Views
            mediatorMap.mapView(DirectoryView, DirectoryMediator);
         }
    }
}

Pour télécharger le code source, dans l’application clique droit « View Source » ou Code source application Directory