[/xml]

L’initialisation MVC

L’application principale (Application.as) est lancée de façon conventionnelle avec main().
Le Model est d’abord instancié. Notre unique vue, une sous-classe MovieClipHelper, s’abonne à l’ écoute du Model. Le controller, un Singleton et sous-classe de FrontController est finalement initialisé. Le controller est le ciment de l’application. C’est lui qui va associer évènements typés et instances de commandes.

[as]
private function _init() : Void
{
var model : Model = new SUSHIExpert();
model.addListener( new SUSHIListUI() );
Controller.getInstance().init();
}
[/as]

I. LES VIEWS

Chargement de la View standalone

GraphicLib et Libstack, du chargement et multichargement intelligent.
Au travers de ces 2 implementations concrètes d’AbstractLib, nos assets sont chargés et stockés avec un identifiant de type String. En l’occurence, ces identifiants sont prédéfinis sous formes de constantes accessibles en static depuis sushi.uis.UIList. Ceci permet une meilleure traçabilité du couplage entre les assets et leurs ‘accesseurs’.

[as]
var gl : GraphicLib = new GraphicLib( this, 20 );
gl.setName( UIList.SUSHI_List );
gl.addEventListener( GraphicLib.onLoadInitEVENT, this, _init );
gl.load( “deploy/views.swf” );
[/as]

ou

[as]
var libs = new LibStack();
libs.enqueue(new GraphicLib(this, 20, false), UIList.SUSHI_List, “deploy/views.swf”);
libs.addEventListener( LibStack.onLoadCompleteEVENT, this, _init );
libs.execute();
[/as]

Les éléments sont ensuite accessibles globalement de plusieurs façons:

- Depuis le Singleton GraphicLibLocator:

[as]
var myView:MovieClip = GraphicLibLocator.getInstance().getGraphicLib( UIList.SUSHI_List ).getView();
[/as]

- Depuis une sous-classe MovieClipHelper:

[as]
// SUSHIListUI.as

class sushi.uis.SUSHIListUI
extends MovieClipHelper
{
public function SUSHIListUI ()
{
super( UIList.SUSHI_List );
}
}
[/as]

- Depuis une sous-classe ViewHelper
[as]
import com.bourre.data.libs.GraphicLib;
import com.bourre.visual.ViewHelper;
import sushi.uis.UIList;

class sushi.uis.SUSHIListUI
extends ViewHelper
{
public function SUSHIListUI ( gl : GraphicLib )
{
super( gl.getView(), UIList.SUSHI_List );

view.app.showDataPreloader();
gl.show();
}
}
[/as]

C’est vraiment très pratique d’avoir un accès global sur les views:
Par exemple, si je souhaite déclencher une action sur une view depuis une Command:

Avec GraphicLibLocator:
[as]
import com.bourre.data.libs.GraphicLibLocator
import sushi.uis.UIList;

class sushi.commands.PlaceOrder
implements Command
{
public function execute( e : IEvent ) : Void
{
var myView:MovieClip = GraphicLibLocator.getInstance().getGraphicLib( UIList.SUSHI_List ).getView();
myView.app.orderProcessed();
}
}
[/as]
avec MovieClipHelper
[as]
import com.bourre.visual.MovieClipHelper
import sushi.uis.UIList;

class sushi.commands.PlaceOrder
implements Command
{
public function execute( e : IEvent ) : Void
{
var myView = MovieClipHelper.getMovieClipHelper(UIList.SUSHI_List);
myView.view.app.showDataPreloader();
myView.traceTest(); // calling a method on SUSHIListUI
}
}
[/as]

Ici, en ce qui nous concerne, Sushi service n’a qu’une seule View de type MovieClipHelper

Sur une instance de MovieClipHelper on va, typiquement:

- définir le comportement des objets (TextField, MovieClips, v2 components…) présents dans la View au moyen de leurs noms d’instances.

Dans le cas de Sushi service, l’UI ActionStep n’est pas qu’une coque vide.

La view externe possède déjà des méthodes:

hideDataPreloader();
showDataPreloader();
orderFormSelect();
viewOrdersFormSelect();

Ensuite, dans chaque “state” ( Navigation, Order, ViewOrders ), les event handlers des boutons sont déjà définis, ex.:

[as]
// NSButton
placeOrderButton = (new NSButton()).initWithFrame(new NSRect(300, 205, 80, 22));
placeOrderButton.setStringValue(“Place order”);
placeOrderButton.setTarget(this);
placeOrderButton.setAction(“placeOrder”);
view.addSubview(placeOrderButton);
[/as]

C’est pas grave du tout ^^. On va piloter et arranger le scope depuis notre sous-classe MovieClipHelper

[as]
class sushi.uis.SUSHIListUI
extends MovieClipHelper
{
private function _initBehaviors() : Void
{
_pbCancelOrder.setTarget(this);
_pbCancelOrder.setAction(“cancelOrder”);

_dSelectViewOrders = new Delegate(view.app, view.app.viewOrdersFormSelect);
_dShowPreloader = new Delegate(view.app, view.app.showDataPreloader);
}

private function _gotoViewOrders() : Void
{
_dSelectViewOrders.execute();
_dShowPreloader.execute();
}

private function cancelOrder() : Void
{
_dShowPreloader.execute();
_fireEvent(new BasicEvent(EventList.cancelOrderEVENT, view.app.viewOrders.getOrder() ));
}
}
[/as]

Une “architecture de legos” où nous avons un contrôle total sur chaque pièce autonome pluggée.

Reprenons un peu le fil.
Sur une instance de MovieClipHelper, on va aussi:

- définir les callbacks du ou des Models.
- diffuser (avec notre EventBroadcaster global) des messages de type BasicEvent ou customs (sous-classe BasicEvent) vers les commandes correspondantes.

N’hésitez pas à étendre BasicEvent afin de créer vos propres event objects. C’est une autre pierre angulaire de Pixlib.

Jetez un oeil à la méthode placeOrder(). Vous verrez qu’elle broadcaste un événement de type OrderEvent.
[as]
private function placeOrder() : Void
{
_gotoViewOrders();
_fireEvent(new OrderEvent(EventList.placeOrderEVENT, view.app.order.orderName, view.app.order.orderTicket));
}
[/as]

Attention, la comparaison est malheureuse, mais c’est juste pour faire capter rapidement l’idée à ceux qui sont d’un background ARP:
Voyez OrderEvent comme un Value Object (VO) passant les informations à la commande.
Voilà , vous pouvez vous lacher et crier hérésie haut et fort ^^.

II. Le FrontController

C’est dans sushi.commands.Controller (sous-classe de FrontController) que sont associés et stockés Events et Commands. A la différence du ControllerTemplate d’ARP, le FrontController n’impose aucune référence directe sur les views. Less coupling!

FrontController:
[as]
public function init() : Void
{
push ( EventList.placeOrderEVENT, new PlaceOrder() );
push ( EventList.getOrdersEVENT, new GetOrders() );
push ( EventList.cancelOrderEVENT, new CancelOrder() );
}
[/as]

ControllerTemplate:
[as]

private function addEventListeners ()
{
app.orderForm.addEventListener ( “orderPizza”, this );
app.viewOrdersForm.addEventListener ( “getOrderList”, this );
app.viewOrdersForm.addEventListener ( “cancelOrder”, this );
}

private function addCommands ()
{
addCommand ( “orderPizzaCommand”, OrderPizzaCommand );
addCommand ( “getOrderListCommand”, GetOrderListCommand );
addCommand ( “cancelOrderCommand”, CancelOrderCommand );
}
[/as]

III. ServiceLocator et Commands

Dans le Singleton ServiceLocator nous définissons et stockons un ou plusieurs services remoting (selon nos besoins). Le nom d’alias de chaque service est défini en static.

- La définition du service remoting:

[as]
// sushi.service.ServiceLocator
public static var SUSHISERVICE:String = “dejavue_net.sushi.sushiService”;

public function init( remotingURL : String ) : Void
{
gatewayURL = “http://www.deja-vue.net/amfphp/gateway.php”;
push( ServiceLocator.SUSHISERVICE, ServiceLocator.SUSHISERVICE );
}
[/as]

- Configuration type d’une commande:

1. Localisation du service remoting et appel et de la remote method

Attention, à l’heure où cet article est écrit, le package remoting est toujours en version alpha et non disponible depuis le svn. Je ne m’ étendrai donc pas sur l’implémentation du responder ni sur l’API.

[as]
// class sushi.commands.PlaceOrder

public function PlaceOrder()
{
_service = ServiceLocator.getInstance().getService( ServiceLocator.SUSHISERVICE );
}

public function execute( e : OrderEvent ) : Void
{
_service.order( new ServiceResponder(this), e.getName(), e.getTicket() );
}

public function onResult( e : BasicResultEvent ) : Void
{

}

public function onFault(e : BasicFaultEvent) : Void
{

}
[/as]

2. Tous les chemins mènent à Rome:

Là , c’est GRANDIOSE. Depuis une commande (pas seulement d’ailleurs) nous pouvons:

- appeler la view de notre choix (rappelez-vous de GraphicLibLocator, MovieClipHelper et ViewHelper).
- broadcaster un event typé et déclencher une nouvelle commande.
[as]
EventBroadcaster.getInstance().broadcastEvent( new BasicEvent(EventList.getOrdersEVENT) );
[/as]
- appeler le model de notre choix.
[as]
SUSHIExpert(Model.getModel( ModelList.SUSHI_EXPERT )).onUpdate( e.getResult() );
[/as]

Epoustouflant d’avoir autant de contrôle

Le mot de la fin (il est temps! ^^):

Il y a 2 jours, j’ étais parti bille en tête avec l’idée de faire un papier sur le package MVC de Pixlib. En même temps, je me disais que c’ était un peu léger comme sujet. C’est en approfondissant les packages events et visual que j’en suis arrivé au FrontController + MovieClipHelper et à approfondir. Pixlib n’avait pas fini de m’ étonner…
Je reste bluffé. Je ne m’attendais vraiment pas ça. Devinez avec quoi je vais boulonner mon prochain projet .

Chapeau bas à Francis.

Liens de Référence:

-MVC et FrontController
http://www.tweenpix.net/blog/index.php?2004/09/22/460-whiteboard-10
Discussion about models in mvc and front controller patterns on Pixlib list

GraphicLib, LibStack et MovieClipHelper
http://www.get-url.net/blog/?47–pixlib-libstack-ou-le-multi-chargement
http://www.get-url.net/blog/?48–pixlib-graphiclib-et-moviecliphelper-vs-movieclip-parti