Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Best Practices – MVC (Model View Controller) par l'exemple

Dans le petit monde de Flex, on entend très souvent parler du modèle MVC alias Model View Controller. Plutôt que de rester dans la théorie, le blog unitedmindset propose de montrer MVC par l'exemple, en voici une traduction. Au départ, on a un code qui est écrit "en vrac" et on va le transformer pour qu'il soit cohérent avec le modèle MVC.

MVC en quelques mots…

D'autres articles en parlent mieux, mais en quelque mots, le modèle MVC est une "best practice" (bonne pratique) permettant de coder plus facilement, de ne pas dupliquer son code et de le rendre facilement réutilisable. MVC est un concept simple pour simplifier le développement. Le concept et de séparer dans son application le model (la donnée), la view (ce que l'on voit) et le controller (les méthodes et les fonctions qui font la liaison entre la vue et le model, et inversement).

Code d'exemple non-MVC (Worst practice)

Voici un exemple de code (Flex 4) qui est mauvais car totalement rigide. Si vous codez de cette manière, prenez bien le temps de lire cet article:

<?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/halo"
    creationComplete="application1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable]
            private var searchList:ArrayCollection = new ArrayCollection();

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                runSearch();
            }

            private function runSearch(event:MouseEvent=null):void
            {
                httpService.send({searchTerm:searchInput.text});
            }

            protected function httpService_resultHandler(event:ResultEvent):void
            {
                searchList = new ArrayCollection( event.result as Array);
            }

            protected function httpService_faultHandler(event:FaultEvent):void
            {
                searchList = new ArrayCollection();
                Alert.show("fault");
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:HTTPService id="httpService"
            result="httpService_resultHandler(event)"
            fault="httpService_faultHandler(event)"
            resultFormat="e4x"
            url="http://www.someUrl.com/yourMethod"/>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout gap="20" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"/>
    </s:layout>
    <s:HGroup width="100%">
        <mx:Label text="Search Term"/>
        <s:TextInput width="100%" id="searchInput"/>
        <s:Button label="Do It!" click="runSearch(event)"/>
    </s:HGroup>
    <s:List width="100%" height="100%"/>
</s:Application>

Cet exemple est extrêmement simple et si c'est tout ce que votre application doit faire, alors vous pouvez laisser ce code comme tel. Si votre application est plus complexe (ou va le devenir), vous allez vite comprendre que cette manière de coder va vous poser problème. Vous aurez ainsi du mal à créer des tests unitaires, réutiliser le code ou bien implémenter les designs patterns OO tels que la Factory ou même les interfaces. Notre application MVC finale pourra faire ces choses là.

Comprendre le Model

Les Model sont les données de votre application et sont extrêmement simples. En ActionScript, lorsque vous créez des model, vous allez devoir utiliser des getters et des setters pour vos propriétés. Pourquoi? Parce que le Model contient la donnée et que le Model change, il propage des évènements pour alerter tout écouteur que le model à changé.

Model : Best Practices

Toutes les propriétés de votre model devraient avoir des getters et des setters. Votre classe Model doit aussi hériter de EventDispatcher pour pouvoir envoyer des évènements (Event) quand votre modèle est modifié. Vous verrez comment cela se passe plus loin dans l'exemple. Vous pouvez aussi utiliser des évènements personnalisés pour indiquer les changements à votre application. Dans cet exemple, on va utiliser simplement la classe Event. Il est aussi "Best practice" de vérifier que la propriété a bien changé avant de propager l'évènement et de mettre à jour la valeur. C'est très simple avec des String ou des Number mais c'est plus compliqué avec des objets complexes.

Création du Model (exemple)

Pour notre exemple, le model est extrêmement simple puisque l'on a une seule propriété, mais vous pouvez remarquer la simplicité du Model et la manière par laquelle il sépare et simplifie l'application. En effet, vous pourrez réutiliser ce model dans de multiple controllers.

package com.unitedmindset.models
{
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IEventDispatcher;

    [Event(name="searchListChanged",type="flash.events.Event")]

    public class SampleModel extends EventDispatcher
    {
        public static const SEARCH_LIST_CHANGED:String = "searchListChanged";

        public function SampleModel(target:IEventDispatcher=null)
        {
            super(target);
        }

        private var _searchList:Array;

        public function get searchList():Array
        {
            return _searchList;
        }

        public function set searchList(v:Array):void
        {
            _searchList = v;
            dispatchEvent(new Event(SEARCH_LIST_CHANGED));
        }

    }
}

Comprendre le Controller

Un Controller n'est ni plus ni moins qu'une classe qui va contenir des méthodes pour gérer la data, mettre à jour et gérer la vue (View). En séparant votre code et en créant  des classes spécifiques, vous pourrez avoir des interfaces, des sous-classes, des tests unitaires sur chaque méthode et enfin utiliser la vue "Outline" d'Eclipse pour aller direct sur une méthode spécifique.