This installation guide step by step is based on my needs: I am user of Java and Maven technologies, and Tomcat and JBoss servers. This installation allows you to get all the tools necessary for these types of developments, starting from a “from scratch” Eclipse IDE or a standalone FlashBuilder.

Start !

Need an IDE ! 2 ways : Eclipse and FlashBuilder plug-in, or the standalone distribution of FlashBuilder.

• Link for Eclipse (take the Eclipse Classic distribution)
• Link for FlashBuilder

I use in this guide FlashBuilder, standalone distribution.

FlashBuilder Softwares Updates

Ganymede Softwares Updates Remote site management with “Manages Sites” : you just need to provide the url. The selection of required plug-ins is automatic (be sure you have select all you need in “Manages Sites”)

Subclipse : subversion for Eclipse

Subclipse is an eclipse plug-in which provides support for Subversion (SVN).

To install subclipse :

• open “Help > Softawre Updates > Find and install…” dialog box.
• Choose “Search for new features to Install” and click on “Finish”.
• In the next box, click on “new remote site”. The dialog box for enter an update site appear.
• Type “subclipse” in Name input, and “http://subclipse.tigris.org/update_1.6.x” in the url update address input.
  
• Click on “Ok”.
  Verify in the list of includes sites that subclipse is selected. Select also “Ganymede Discovery Site” (Europa if your are on a Eclipse 3.3 IDE).
  
• Click on “Finish”.
• In the search results box, open the Sublclipse folder, en select “Subclipse”. An error appears. Don’t panic! Some additional plug-in are necessary. Click on “Select Required” button: Eclipse check the list of not found plug-in, and select automatically all required plug-in in Ganymede Discovery Site.
• Click on “Next”. Some validation, and other dialog box appear. Validate all boxes.
• you can also take a coffee… But attention ! A lot of coffee can be taken during this installation.

For PHP developer : PDT !

You know : with eclipse you can make coffee ! Some cool tool exist for Eclipse. If you are a PHP developer, you can use PDT - PHP Development Tool.
PDT, like WTP - See further- add to your Eclipse some tools for developing PHP application.
For more information about PDT, visit the PDT homepage.

To Install PDT, follow these steps :

• In “Help > Softawre Updates > Find and install…” , choose “Search for new features to Install” and click on “Finish”.
• Next, you need to add 2 Remote Site : PDT, and DLTK - Dynamic Language ToolKit.
  Click on “new remote site” :
  • Adding PDT : in Name input, type “PDT”, and for url : “http://download.eclipse.org/tools/pdt/updates/2.0/”
  • Adding DLTK : in Name input, type “DLTK”, and for url : “http://download.eclipse.org/technology/dltk/updates-dev/1.0M4-PDT-2.0/”

  Verify in the list of includes sites that PDT and DLTK are selected. Select also “Ganymede Discovery Site”, and click on “Finish”.

• In the list, select “PDT > PDT SDK 2.0.x > PDT SDK Feature”. An error appear : click on “Select required”. Then, “Next”.
  
• Another coffee?

If your needs is just PHP : Stop ! The following is just for Java developers.

Web Tools Platform : a tribute to Java

Web Tools Platform (WTP) is a package of some tools for your eclipse IDE, which provides you to develop web and J2EE application. WTP add to your IDE the J2EE perspective (a very good view of your code), Some other stuff is added with the WTP. I invite you to discover all this !
For more information about WTP, visit the Webtools homepage.

Installing WTP is like the installation of subclise. More simple.

• Open “Help > Softawre Updates > Find and install…”.
• Choose “Search for new features to Install” and click on “Finish”.
• Select “Ganymede Discovery Site” and click on “Finish”.
• Open “Ganymede Discovery Site”, select “Web and Java EE Development”, and click on “Select Required”.
  
• Click on “Finish”. Like subclipse, some validation and other dialog box appear. Validate all.
• Coffee Time

Your IDE is now ready for good coding !

Maven : manager of project

Based on the concept of a project object model (POM), Maven can manage a project’s build, reporting and documentation from a central piece of information.
Maven is the perfect tool for continuous integration and version tracking of your jar, swc, war, …
For more information about Maven, visit the maven homepage.
m2Eclipse is the Maven2 plugin for Eclipse. This plug-in ads all you need to integrate Maven into your projects.

For the installation of m2Eclipse, you need to add another remote update site.

• Go to “Help > Softawre Updates > Find and install…”.
• Choose “Search for new features to Install” and click on “Finish”.
• Click on “new remote site”.
• Type “m2Eclipse” in Name input, and “http://m2eclipse.sonatype.org/update/“ in the url update address input.
  
• Click on “Ok”.
• Verify in the list of includes sites that m2eclipse is selected. Click on “Finish”.
• Now You need to select the list of Maven plug-in to install. The minimum required is to select all in the folder “Maven Integration” except POM XML Editor (for me, I have selected this feature), and POM Editor.
  
For a better integration with WTP and Subclipse, I select also the “Maven integration for WTP” (in Maven Project Configurators”) and “Maven Central repository index”, “Maven SCM handler for Subclipse” (in Maven Optional Components”).
  
• Click on “Next”.
• After passing all validations, …. Another coffee time !

Finish !

Now : restart your IDE…. And let’s gamble ! With all these coffees you can’t sleep anyway … it can be time to start your project?

Autres articles sur le même sujet

• Import de framework via SVN et le plug-in Subclipse
• Installer son environnement de développement : Tomcat - Eclipse - WTP - Flex Builder
• Maven 2 - Flex 2 - une synergie possible ?
• Flex Builder 3 et le PHP ( PDT ) : installation

Alors le multitouch remplaçant de nos bons vieux claviers / souris ? Pas si sûr ! Pour certains acteurs cela ne fait pas de doute. Pour d’autres en revanche, ces interfaces ne sont que des périphériques supplémentaires, un moyen différent de « consommer ».

Imaginez manipuler un fichier Excel en multitouch… Ça risque d’être assez pénible ! Pour peu que l’on soit un accro des macros ! (bon moi je m’en fou je fais pas d’Excel). Et puis pour l’instant ça fait mal aux doigts ! A force de gesticuler autour de sa table 50 pouces, on prend des crampes…

D’accord mais c’est bien le multitouch ! LA solution ? Les pseudo claviers / souris comme périphériques physiques de la table. Imaginez un clavier souple ou une souris transparente en plexiglas : pas d’électronique dedans, et tout de même repérés par la table. Un peu comme les tables tangibles, reconnaissant des périphériques électroniques (appareils photos…), ou des périphériques de soirée (un verre…) ou n’importe quoi qui possède un tag RFID. RFID ou bien par une forme particulière : on peut imaginer des objets de formes différentes, qu’une analyse d’image peu détecter.

slap widgets demo

Plusieurs groupes travaillent sur ce type d’interfaces tangibles : le MIT avec le groupe Tangible Media Group, le Media Computing Group, un groupement de recherche des universités allemandes, avec le projet SLAP : Silicone Illuminated Active Peripherals.

Et ce n’est qu’un début ! Le monde de la musique dispose déjà d’interfaces tangibles.

[update] Do you want more ?
Pattie Maes, du Fluid Interface Group - MIT, à présenter en février dernier leur dernier jouet : « the SixthSense » : Minority Report en vrai. Pourquoi avoir un périphérique alors que ses doigts c’est si bien ?!

Ils sont aussi à l’origine du projet fou Siftables

Je vous invite vivement à découvrir l’ensemble des projets de ce groupe : il y a là de quoi rêver sur l’avenir des interfaces !
[/update]

Et là oui ! J’imagine mieux Excel en multitouch !
A suivre de près donc… A quand un docteur maboul virtuel tangible ?
Et vous, des idées ?Autres articles sur le même sujet

• Un curseur… des curseurs ???
• Multi-Touchscreen, multi-users et plus si imagination…
• Si j’étais une imprimante…
• Utiliser le DragManager de Flex ( 1ère partie )

Bien le bonsoir,
on avait imaginé une cinquième édition des Serious Drink complétement serious pour le coup… annoncée plusieurs semaines à l’avance… avec un videoproj, des beaux thèmes PowerPoint, des chips, des olives, et quelques rythmes neojazzy en interlude entre chaque présentations… la sseuclaaa !
mais bon le temps a passé, tout était bien parti… sauf les “invitations”… toujours pas parties elles… tanpis , on a quand même soif !!!
Du coup on a une petite salle réservée, mais trève de sérieux, on garde le thème classique :

Soirée Bière et fleeex donc au 1er étage du Café Cousu Jeudi le 23 d’avril à partir de 19h30 !!!
Viendez y !!!

Passage Thiaffait
19,rue René Leynaud
69001 Lyon
Tel: 04 72 98 83 38

Voir où que c’est sur une carteAutres articles sur le même sujet

• Climatus et lafabrick sur le petit écran….
• 3 minutes pour sauver vos futurs présentations…
• L’université Lyon1 cherche (aussi) 2 stagiaires
• Serious Drink 0.09.01.08…

Vous venez de créer votre douzième workspace Eclipse/Flex Builder ??? Et vous en avez marre de recréer vos perspectives, et autres vues… à chaque fois ???

Mais pourquoi diable n’utilisez vous pas les “fameux” ‘working sets’ ?

Et puisque quelques pixels valent pleins de mots…

Les working sets ( prononcez ’setss’ )… tout simplement la solution moderne aux problèmes de congestion de projets dans Eclipse & Flex Builder !Autres articles sur le même sujet

• WTP - Flex Buider : résoudre les problèmes de mémoire
• L’erreur est humaine… debuguer un projet Flex distant via Flex Builder
• Flex Builder 3 et le PHP ( PDT ) : installation
• Flex et les warnings inutiles…

Autres articles sur le même sujet

• Introducing r.CØ … First “Cocomo ready” Air Wiibot…
• retour sur Lafabrick @ max
• wiiFlash et 3d à l’université
• wiiFlash à l’université : acte 2

(Translated from French tutorial on FlashXPress )

In this first application example, we will build, or rather “assemble”, a videoconferencing application including a chat tool, shared notes and a file sharing manager. For this we’ll use some “pods” , the highest level components of the Cocomo AFCS framework.

One of the most important component in a Cocomo AFCS application is the session manager. It will be in charge of communicating with Cocomo AFCS server, user authentication, connection management, data synchronization, and even more…

Two components in the framework can do this job: ConnectSessionContainer and ConnectSession (both implement com.adobe.rtc.session.IConnectSession).

Hello AFCS ( bye Cocomo )

For starting :

- create a new Flex project,
- copy Cocomo AFCS SWC file (from CocomoSDK_0.9/lib/player 9 or 10/afcs.swc) and paste it in your /libs/ folder

Let’s start with ConnectSessionContainer :
It’s a Canvas based component, which includes all features needed to communicate with Cocomo AFCS servers.

This container, and all of its children, will not be visible as long as the room connection is not established. This is the reason why we will integrate our pods (Webcamera, SimpleChat, Notes and FileShare) inside it. As long as our application isn’t connected to our room, collaborative components will remain hidden.

To start a session, we’ll need to define two attributes in the ConnectSessionContainer tag :

- roomURL( ex : http://connectnow.acrobat.com/yourAccount/roomName)
- authenticator : your user credentials

User credential’s transmission is done by using the AdobeHSAuthenticator class. It will encapsulate authentication data (userName and password). Several authentication modes are possible, we’ll probably focus on them in a future tutorial.

In this first step, we will hard-code our credentials in our application… Only for the first example.

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:rtc="AfcsNameSpace"
 >
<rtc:ConnectSessionContainer id="sessionManager" width="500" height="400"
 roomURL="http://connectnow.acrobat.com/yourAccount/roomName"
 authenticator="{identificator}"
 backgroundColor="#FFFFFF"
/>
<rtc:AdobeHSAuthenticator id="identificator"
 userName="votreLogin" password="VotreMotDePasse"
/>
</mx:Application>

In this step, your application can already connect to the server. By default, connectSessionContainer had a autoLogin property set to true. This means that it will try to communicate with the server as soon as it’s created. In this example, I set a background color for the container, so we can see when connection is established.

If you publish your project in debug mode, you’ll be able to see server / client communication logs.

To be notified about the login result, we can watch for AuthenticationEvent.AUTHENTICATION_FAILURE and AuthenticationEvent.AUTHENTICATION_SUCCESS on the AdobeHSAuthenticator.

To know if application is fully connected and synchronized, we must add a listenner to the SessionEvent.SYNCHRONIZATION_CHANGE event of sessionContainer and watch for its isSynchronized property. We will talk about differents aspects of this synchronisation in future tutorials.

<?xml version="1.0" encoding="utf-8" ?>
<mx:Application layout="absolute"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:rtc="AfcsNameSpace"
>
     <mx:Script>
         <![CDATA[
             import mx.controls.Alert;
             import com.adobe.rtc.events.SessionEvent;

             // session's state
             private var isConnected:Boolean = false;

			// when a "server synchronization" event is dispatched
             public function onSynchro( e:SessionEvent ):void
             {
                 if ( sessionManager.isSynchronized &&  ! isConnected )
                 {
                     Alert.show("Application connectée");
                     isConnected = true ;
                 }
             }
     ]]>
 </mx:Script>
<rtc:ConnectSessionContainer id="sessionManager"
    width="100%" height="100%" backgroundColor="#FFFFFF"
    authenticator="{identificator}"
    roomURL="http://connectnow.acrobat.com/regartdemo/meetingzone"
    synchronizationChange="onSynchro( event )"
/>
<!-- Authentication component -->
 <rtc:AdobeHSAuthenticator id="identificator"
   userName="YourUserName" password="YourPassword"
   authenticationSuccess="Alert.show('authentication success')"
   authenticationFailure="Alert.show('authentication failed')"/>
</mx:Application>

Now that our application can establish a connection to the room, we can start adding pod components.

Using Cocomo AFCS Pods

Pods are “ready to go” components. When you use a ConnectSessionContainer, you just have to add pods as children in it, and allow them to detect and use your Cocomo AFCS server connection.

For now, Cocomo AFCS contains:
- Simple chat: chat component allowing public and private messages.
- WebCamera: webcam publisher / subscriber
- FileShare component: file sharing components (upload / download)
- Shared Notes components
- Roster and horizontalRoster: user management components
- SharedWhiteBoard

Let’s insert our pods :

<rtc:ConnectSessionContainer id="sessionManager" width="100%" height="100%" backgroundColor="#FFFFFF"
   authenticator="{identificator}"
   roomURL="http://connectnow.acrobat.com/votreCompte/nomSalon"
   synchronizationChange="onSynchro( event )"
   >

   <!-- PODS -->
   <mx:VBox width="50%" height="100%" horizontalAlign="center">

      <rtc:WebCamera id="webcam" width="300" />

      <rtc:SimpleChat id="chat" width="100%" height="100%" />

   </mx:VBox>

   <mx:VBox width="50%" height="100%"  right="0">

     <rtc:FileShare id="fileManager" width="100%" height="50%" />

      <rtc:Note id="notes" width="100%" height="50%" />
   </mx:VBox>
</rtc:ConnectSessionContainer>

Pods embed robust role management features, as we’ll see later.

Anyway, you’ve just built your first Cocomo AFCS application, or should I say your first “real time communication” application… I can’t think how we use to do that before!!??…

User authentication et connection management

Hmmm…there’s still something missing… For a single user app, it’s almost ok… but it’s not the scenario here… What are we going to do if, someday, we find friends and want to collaborate with them??? Does anybody need to connect with my “owner” account? Can we let any AS3 decompiler reveal our credential data? I don’t think so!! Fortunatly Cocomo AFCS allows us to easily manage these aspects.

Cocomo AFCS room allows several authentication methods, specially :
- as owner, based on your Cocomo AFCS Developer account credentials
- as guest, only needing a user name.

<mx:Panel id="logPanel" >
   <mx:Form>

      <mx:FormItem label="Login">
         <mx:TextInput id="chp_login" />
      </mx:FormItem>

      <mx:FormItem label="your role :" direction="horizontal" >

         <mx:RadioButtonGroup id="userRole" />

         <mx:RadioButton id="isGuest" groupName="userRole"
            label="Guest" value="{UserRoles.VIEWER}"  selected="true"
         />
         <mx:RadioButton id="isOwner" groupName="userRole"
            label="Host" value="{UserRoles.OWNER}"
         />
      </mx:FormItem>

      <mx:FormItem label="Password"  enabled="{ userRole.selectedValue == UserRoles.OWNER }">
         <mx:TextInput id="field_password" displayAsPassword="true"  />
      </mx:FormItem>

      <mx:FormItem >
         <mx:Button label="Enter"
            click="login(chp_login.text , userRole.selectedValue == UserRoles.OWNER ? field_password.text : null  )"
          />
      </mx:FormItem>

   </mx:Form>
</mx:Panel>

Users role definition is based on integer values, which are defined as constants in UserRoles class.

The principal roles are : owner (host / developer account), publisher (guest who can publish on one or several components) and viewer (passive guest who is only allowed to publish on chat channel). By default, guests can use a room only if the owner is connected. You can configure initial room settings (auto-promote guest as publisher, data persistence, free room access…). You can also manage user roles and permissions with the CocomoDevConsole AFCSDevConsole app, or directly by using the API. But that’s another story…

For now we will insert an authentication form. We thus need to deactivate the ConnectSessionContainer’s autoLogin property.

Then, we need to add a login() method, in charge of filling the AdobeHSAuthenticator with data. It will also initialize the sessionContainer room connection:

private function login ( login:String, password:String ):void
{
   identificator.userName = login;
	//if password is set : log as host
	//else log as guest
   identificator.password = password ;

	// run sessionManager connection
   sessionManager.login();
}

We can also add a logout button.

// disconnection
// in actual 0.9 beta, mostly pods, can't be re-connected after a disconnection

private function logout():void
{
    sessionManager.logout();

	// close() is supposed to disconnect et remove all childNodes, but seems not work yet
    //sessionManager.close();
}

<mx:VBox width="50%" height="100%" horizontalAlign="center" right="0">
    <mx:Button label="Logout" click="logout()" />

    <rtc:FileShare id="fileManager" width="100%" height="50%" />

    <rtc:Note id="notes" width="100%" height="50%" />
</mx:VBox>

Once the application is connected, we shall remove the form and the sessionContainer will be removed as well when the connection is stopped or lost

// for each synchronization event
// : connection, disconnection , state's change, ...
private function onSynchro( e:SessionEvent ):void
{

	// once application is successfully connected / synchronized
    if ( sessionManager.isSynchronized && ! isConnected )
    {
        Alert.show("Application connectée");

        isConnected = true ;

        removeChild( logPanel );

    } else if ( ! sessionManager.isSynchronized && isConnected ){
    // if disconnected
    isConnected = false ;

   /* remove the connectSessionContainer
   *  » in this version disconnected pods can't re-connect
   *
   *  » For re-connect, you can :
   *     - reload html page
   *     - dynamically re-create connectSession and pods
   */
   removeChild( sessionManager );

   // display logout message
   Alert.show( 'vous avez quitté la réunion, recharger la page pour entrer à nouveau');
   }
}

In this beta version, I encountered problems when trying to repeat multiple login/logout. After a few tests, the best way I found wass to force a page refresh.

Get sources

This first Cocomo AFCS example is finished, and obviously it’s possible to do a lot more. In future tutorials, we’ll take a deeper look on Cocomo AFCS architecture. We’ll also use the CocomoDevConsole AFCSDevConsole and LocalConnectionServer, two AIR utilities included in the SDK.

Have a good collaboration !!! :DAutres articles sur le même sujet

• Cocomo est là et personne me prévient ??!!
• Cocomo ? Kezako ?
• Introducing r.CØ … First “Cocomo ready” Air Wiibot…
• Developing with AFCS a.k.a Cocomo - Introduction

Hey there!
Here is, as a first English article, an introduction to Adobe Cocomo AFCS.
(Translated from French tutorial on FlashXPress )

Cocomo is an abbreviation of «COmmon COllaboration MOdel», which was the first name given by Adobe to its new online service dedicated to collaborative application development. The final commercial name is Adobe Flash Collaboration Services a.k.a AFCS

This name both references :

• a SDK that includes a Flex components library and tools dedicated to multi-users applications development. Just so you know, those components are used by Adobe for developing ConnectNow, a video conference application part of the Acrobat.com platform.
• a free online service (with some limitations), enabling creation and deployment of collaborative applications on FMS servers hosted and maintained by Adobe.

In short, Cocomo AFCS will allow us to develop applications that will use real-time communications capabilities of FMS servers, without taking care of those servers… cooool !!!

But what are the «real-time communications capabilities of those FMS servers» ???

In fact, the Cocomo AFCS servers will allow us to:

• exchange audio and video data flows, useful to create visioconference application for example,
• synchronize different types of data between multiple client applications. It allows you to add a chat to an existing application, to develop a co-navigation system, a document co-edition functionnality, some multi-users game…
• share files
• manage user rights regarding their role

This schema describes the interaction between a room, hosted on a developer account of a cocomo server, and some Flex clients : the host user (owner), an active guest (publisher), and a passive guest. The host send his webcam output, and both host and publisher can update notes on the server, these data are broadcasted to the other clients.

The library contains «high-level» graphical components, known as pods, but also some more «low-level» classes that a developer can use to create his own components (SharedModel, CollectionNode).

This schema shows an example of pods (Tchat, Notes, User management, Webcam and File sharing)

The pods are collaborative «plug’n’play» components, that we will use to create our first Cocomo AFCS applications without having to write a single line of code (Tchat, Webcam, Notes…). The lower level classes will help us to go deeper and create components that will fit more specific needs.

But, first things first : let’s create a «Cocomo AFCS Developer» account…

Cocomo AFCS Developer account creation

To create an account :

• Go to the Cocomo AFCS portal (https://cocomo.acrobat.com),
• Create a new account (you can also use your existing Adobe account)
• Choose a Cocomo AFCS account identifier («account name», room access URLs will be based on that identifier)
  1. The Account URL situation in the screen
  2. The Room instances panel (click the “Add” button)
  3. The “Download SDK” button


This capture represents the Cocomo AFCS home page. It mainly illustrates the three steps to follow:

• Once your account has been created, make sure to note your Account URL
• In the “Room instances” panel, create a new room. A room represents a “virtual meeting point” where several client application will be able to exchange audio / video flows, files or messages. Your account will allow you to create several rooms, with a single configuration for each room. A room is also identified by a URL that looks like http://connectnow.acrobat.com/yourAccount/roomName.
• Once your room has been created, download the SDK.

You’ll find within the downloaded ZIP:

• documentation
• application examples
• Air utilities: CocomoDevConsole AFCSDevConsole for your accounts and rooms management, and LocalConnectionServer, a local Cocomo AFCS server emulation that will allow you to test some of your applications features without having to connect to a “real” Cocomo AFCS server (mainly messaging)
• library sources
• library SWC for Flash Player 9 and Flash Player 10

Cocomo AFCS installation

For this version (0.9), installation will reside in including Cocomo AFCS library documentation at Eclipse’s one. To do so:

• create a ‘com.adobe.afcs‘ folder in the ‘plugins‘ folder of your Flex Builder installation
  Windows: C:\Program Files\Adobe\Flex Builder 3\plugins\com.adobe.afcs
  Macintosh: /Applications/Adobe Flex Builder 3/plugins/com.adobe.afcs
• Copy the content of the downloaded file into that folder
• (Re)Launch Flex Builder and open the help contents (Help / Help Contents)

You should now find the Cocomo AFCS API documentation

This schema is a screen capture of the cocomo documentation opened within the Flex Builder environment.

And noooow… let’s collaborate !!!
>> Next : My first Cocomo AFCS ApplicationAutres articles sur le même sujet

• Cocomo est là et personne me prévient ??!!
• Cocomo ? Kezako ?
• Introducing r.CØ … First “Cocomo ready” Air Wiibot…
• Hello AFCS ( bye Cocomo ) ! Simple user authentication with Adobe Flash Collaboration Services

Je vous suggère vivement si vous n’avez pas lu l’article ou si vous ne connaissez pas encore grand chose au développement sous iPhone de vous y intéresser pour mieux aborder cette suite…

Une dernière chose avant de démarrer : massez-vous les tempes, faites-vous un petit café…
Prêt ?

Installer le SDK iPhone

A l’heure ou j’écris ces lignes, Apple en est à la version 2.2 du SDK iPhone.
L’installation vous mettra à disposition tous les outils dont je vais parler ici.

Ouvrir un projet d’exemple pour se familiariser avec la structure d’un projet iPhone

Je considère à présent que vous avez déjà un Mac (bah oui…), et le SDK iPhone installé dessus.

1. Ouvrez XCode.
   
2. Faites Fichier > Nouveau projet…
   
3. Choisissez “View-Based Application”
4. Entrez le nom de projet “LaFabrick” puis choisissez un emplacement, vous arrivez alors sur l’interface principale d’Xcode.

Voyons maintenant les fichiers que nous avons :

Nous sommes en Objective-C, donc pour chaque classe, vous trouverez un fichier .h définissant l’interface et un fichier .m contenant l’implémentation (amis du C bonjour !).
Ouvrons “LaFabrickAppDelegate.h”

On constate dans cette interface les déclarations d’un objet fenêtre (objet de base utilisé pour l’affichage) et le contrôleur LaFabrickViewController que nous étudierons rapidement après.
L’implémentation est simple :

Lorsque l’application vient d’être démarrée applicationDidFinishLaunching, on demande l’affichage de la vue contrôlée par notre LaFabrickViewController dans la fenêtre [window addSubview:viewController.view];.
Notez enfin la notation à crochet pour appeler une méthode d’un objet : oui oui, c’est relou.

Jetons maintenant un oeil à LaFabrickViewController (.h et .m) : il est quasiment vide ! C’est effectivement là qu’on doit travailler un peu…
Quelques questions se posent :

• Où est la vue ?
• Comment est-elle associée au contrôleur ?

Nous allons voir cela avec l’interface builder.

Utilisation de l’Interface Builder pour gérer la vue

Première réponse : notre vue est ici créée à partir d’un fichier de description d’interface géré par l’interface builder : LaFabrickViewController.xib. Double-cliquez dessus, l’interface suivante s’affiche alors :

On constate notamment dans la fenêtre centrale, les éléments suivants :

• File’s owner : LaFabrickViewController
• View : UIView

OK, donc le .xib permet de dire que la vue est associée au contrôleur LaFabrickViewController, voilà la deuxième réponse !

Sélectionnez à présent la ligne View : UIView puis sélectionnez le second onglet dans la fenêtre de droite.
Note : si cette fenêtre n’est pas visible, faites Tools > Identity Inspector

Vous pouvez visualiser l’association entre la vue View et la propriété view du contrôleur LaFabrickViewController.

Cette partie est primordiale pour que l’affichage de la vue soit effectif : souvenez-vous que dans LaFabrickAppDelegate, on charge la propriété “view” de LaFabrickViewController, aussi sans l’association effectuée dans l’Interface Builder, il serait impossible d’afficher quoi que ce soit !

D’une manière générale, chaque élément ajouté depuis l’Interface Builder devra être lié à une propriété du contrôleur (ou d’un délégué) via l’Interface Builder afin que vous puissez interagir avec depuis le code.
La propriété en question est alors nommée “Outlet” côté Interface Builder, soit “Sortie” si l’on traduit litéralement : c’est effectivement un paramètre de sortie de votre interface.

Personnaliser un peu l’interface

Depuis l’Interface Builder, ajoutez deux champs texte, deux labels et un bouton histoire d’obtenir à peu près ça :

Si vous faites Tools > Reveal in Document Window… vous verrez l’arborescence de contrôles de la vue mise à jour.

Il est maintenant temps de contrôler ces éléments depuis notre LaFabrickViewController.
Pour cela deux méthodes :

1. Directement depuis Interface Builder (cf. vidéo de démonstration)
   • Sélectionnez LaFabrickViewController depuis le Document Window
   • Dans “l’Inspector” (fenêtre de droite) choisissez le dernier onglet (i) puis ajoutez les propriétés via la section “Class Outlets”
     
   • Ceci fait vous devez enregistrer les modifications dans le fichier LaFabrickViewController.m. Pour cela, vous devez utiliser la fonction File > Write class files…
   • Faites alors “Save”
   • L’outil vous demande si vous souhaitez fusionner ou écraser : choisissez Merge (fusionner)
   • Le fichier .m n’est pas modifié, vous pouvez le fermer, en revanche vous constaterez que le .h peut être modifié comme suit :
     
     sous réserve que vous choisissiez l’action “Choose left” depuis le menu déroulant du bas
   • Sauvegardez (enfin) votre fichier fusionné
2. Mix XCode et Interface Builder
   • Déclarez manuellement les propriétés correspondant aux contrôles que vous souhaitez manipuler dans l’interface (LaFabrickViewController.h) :
IBOutlet UITextField *lastNameField;
IBOutlet UITextField *nameField;
IBOutlet UIButton *validateButton;

   • Compilez le projet
   • Rouvrez l’Interface Builder pour faire les liens

Note : la première méthode a le mauvais goût d’ouvrir l’outil de fusion de fichiers pour que vous validiez que rien n’est écrasé ou ajouté sans votre accord.
J’avoue que, malgré la nécessité de la fusion, je trouve ça très peu pratique voire franchement lourdingue, je m’attendais à mieux venant d’un monstre de l’ergonomie. Mais c’est le prix à payer pour avoir deux outils quasiment indépendants, et enfin, si vous connaissez une meilleure méthode, n’hésitez pas à poster !

– ca se voit tant que ça que je préfère la méthode à l’ancienne ? –

Ce n’est pas encore tout à fait terminé ! (si si je vous jure, c’est long)
Il reste à faire les fameux liens entre les contrôles de la vue et les propriétés que nous avons créé dans LaFabrickViewController. Pour cela, rien ne vaut l’image (et en plein écran tant qu’à faire) :

Voilà ! Vous avez lié les contrôles de votre vue à des propriétés de votre contrôleur.
Nous utiliserons désormais la technique décrite ci-dessus pour gérer nos association vue-contrôleur.

Reprenons Interface Builder pour créer un handler gérant le clic sur le bouton. Pour cela :

1. Sélectionnez LaFabrickViewController depuis la Document Window
2. Dans le dernier onglet de l’Inspector, cliquez sur le bouton + de la section Class Actions en entrez buttonClick:. Laissez le Type sur id
3. Sauvegardez, faites Write class files…, fusionnez les sources et enregistrez
4. Faites un lien entre l’événement Touch up Inside de votre bouton et LaFabrickViewController, l’éditeur vous propose alors votre fonction buttonClick:

Maintenant que votre événement est lié à votre contrôleur, ajoutons un bout de code bateau juste pour valider que l’ensemble fonctionne bien :

1. Retournez sous XCode, et ouvrez LaFabrickViewController.m
2. Modifiez le code pour avoir la méthode buttonClick: sous la forme suivante :
   - (IBAction)buttonClick:(id)sender {
[firstNameField setText:[lastNameField text]];
} 

   Le principe étant simplement de modifier le texte du prénom avec le texte du nom (je vous avais prévenu, c’est un bout de code bateau)

3. Faites Build and Go et testez !

Bien, il ne reste plus qu’à apprendre Objective-C. Pour cela, rien ne vaut quelques ressources dédiée au sujet :

• Passage de C++ à Objective-C
• Passage de Java à Objective-C

Voilà, vous avez à présent les bases nécessaires pour démarrer le développement d’une application iPhone.
A bientôt !Autres articles sur le même sujet

• [Flex 3 Beta] bug : Application File doesn’t exist
• Développer une application iPhone - Introduction aux concepts de base
• Reflex #1: une micro-architecture pour Flex… simple !
• Reflex #2 : vous reprendrez bien un peu de IOC ?

Si ce n’est déjà fait, je vous laisse jeter un œil sur la première partie de cette architecture, et de récupérer le swc avant de lire la suite.

A quoi ça sert l’IOC ?

L’IOC ( Inversion Of Control ) est un patron d’architecture, possédant plusieurs représentations ( inversion de contrôle, injection de dépendance, …). Je ne vais pas faire un cours sur l’Injection de contenu : je vous laisse voir ici pour plus d’informations.

Dans Reflex, le but du package IOC est de décentraliser les objets de configurations de l’application. En gros, mettre les services d’accès aux données dans un fichier de configuration XML au lieu de les coder en dur dans l’application Flex.

Certains spécialistes me diront certainement que l’Injection de contenu n’est pas forcement une représentation de l’IOC, et donc un abus de langage pour Reflex : je répondrais par “traduisez ici IOC par Injection Of Content, et laissons tomber les patrons d’architecture !”.

Au commencement, le ServicesLocator

Nous avons vu dans la première partie comment réaliser simplement un appel à une méthode distante. Avoir un point d’accès global aux différents services est pratique lorsque l’on commence à avoir plusieurs services, ou si des vues différentes utilisent un service identique. Voyons comment procéder avec le premier exemple.

Reprenons l’exemple du tuto #1 : il faut charger les services dans le ServicesLocator. Nous allons donc modifier notre vue :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"

	creationComplete="init()"

	xmlns:controller="controller.*"
	xmlns:model="model.*">

	<mx:Script>
		<![CDATA[
			import com.lafabrick.reflex.service.ServicesLocator;

			public static const SERVICE_USER:String = "userService";
			public static const SERVICE_OTHER:String = "otherService";

			private function init() : void
			{
				ServicesLocator.addService( SERVICE_USER, remoteUser );
				ServicesLocator.addService( SERVICE_OTHER, remoteOther );

				userControl.service = ServicesLocator.getService( SERVICE_USER );
			}

		]]>
	</mx:Script>

	<mx:RemoteObject id="remoteUser"
		destination="javaFacadeUser" showBusyCursor="true" />

	<mx:RemoteObject id="remoteOther"
		destination="javaFacadeOther" showBusyCursor="true" />

	<controller:UserController id="userControl" />

	<model:UserModel id="userModel" />

	<mx:VBox>
		<mx:TextInput id="login" />
		<mx:TextInput id="password" displayAsPassword="true" />

		<mx:Button label="connect"
			click="{userControl.login(login.text, password.text)}" />

		<mx:Label x="208" y="44"
			text="User Name : {userModel.userLogged.name}"/>
	</mx:VBox>

</mx:Application>

• À la création de l’application ( creationComplete ), nous déclenchons la fonction init();.
• Nous ajoutons les services RemoteObject dans le ServicesLocator. La signature de cette méthode est la suivante :

  ServicesLocator.addService( serviceName:String, serviceObject:AbstractService )
  

   

  • 



serviceName:String est le nom de référence utilisé pour indexer, et plus tard retrouver le bon service.
  • serviceObject:AbstractService est l’identifiant (id) de l’object service (le RemoteObject).

• Nous supprimons la propriété service dans la déclaration mxml de UserController, pour la déclarer en ActionScript dans la fonction init(). 

ServicesLocator.getService( serviceName:String ) renvoie l’instance du service défini par serviceName, référencée dans le locator.

Note : Au niveau de l’appel du service, nous pourrions appeler la méthode getController de ControllerLocator.

userControl.login(login.text, password.text);


devient :

( ControllerLocator.getController( MonApplication.SERVICE_USER )
	as UserController ).login(login.text, password.text);

Dans ce cas, nous devons “caster” le retour de getController(…) en UserController ( sinon erreur ! Flex ne connaîtrait pas la méthode login )

Un composant pour la vue

Histoire de mettre en pratique un peu plus l’utilisation des “locators” de Reflex, nous allons créer un composant MXML étendant Canvas, qui va contenir la représentation visuelle de notre application. Nous allons utiliser ControllerLocator dans ce fichier pour récupérer le UserController.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="100%"
	height="100%">

	<mx:Script>
		<![CDATA[
			import model.UserModel;
			import controller.UserController;
			import com.lafabrick.reflex.controller.ControllerLocator;
			import com.lafabrick.reflex.model.ModelLocator;

			[Bindable]
			private var userDataModel:UserModel =
				( ModelLocator.getModel( UserModel ) as UserModel);

		]]>
	</mx:Script>

	<mx:VBox horizontalCenter="0" verticalCenter="0">
		<mx:TextInput id="login" />
		<mx:TextInput id="password" displayAsPassword="true" />

		<mx:Button
			label="connect"
			click="{ ( ControllerLocator.getController( UserController )
				as UserController ).login( login.text, password.text )}" />

		<mx:Label x="208" y="44"
			text="User Name : {userDataModel.userLogged.name}"/>
	</mx:VBox>

</mx:Canvas>

Pour que le “Binding” fonctionne correctement entre la vue et le modèle, nous devons utiliser des pointeurs vers les modèles à utiliser.

Le fichier de configuration XML (IOC)

Nous venons de voir comment utiliser le ServiceLocator. Intégrons maintenant le système IOC pour ne plus avoir à le gérer !

Ce fichier vous permet de décrire des objets, pour ensuite les récupérer et les instancier dans votre application ( via ApplicationContext ). Ce fichier s’inspire fortement des fichiers de configuration de Spring, un framework puissant pour Java.

Ci-dessous le fichier représentant 2 services RemoteObject :

<?xml version="1.0" encoding="UTF-8"?>
<objects>

	<object id="remotingUser" className="mx.rpc.remoting.mxml.RemoteObject">
		<property name="destination" className="String">javaFacadeUser</property>
		<property name="showBusyCursor" className="Boolean">true</property>
	</object>

	<object id="remotingOther" className="mx.rpc.remoting.mxml.RemoteObject">
		<property name="destination" className="String">javaFacadeOther</property>
		<property name="showBusyCursor" className="Boolean">true</property>
	</object>

</objects>

• Le tag <objects> englobe les différents objets définis dans le fichier. Il est défini par :
• Un objet <object> est défini par :
  • un identifiant id. Cet id est celui que nous utiliserons plus tard dans l’application Flex pour retrouver et instancier l’objet.
  • un nom de classe className : la classe de référence.
• Les propriétés des objets sont définies par :
  • leur nom name
  • leur classe className de référence.

Ici, un RemoteObject a besoin de 2 propriétés : la destination du type String, et éventuellement showBusyCursor du type Boolean.

Régler le problème d’inclusion de classe

Le “petit” problème de ce système est que la déclaration externe des objets fait que les classes ne sont pas intégrées dans le projet Flex. Le compilateur Flex ne trouve pas de référence aux classes, et ne les intègre donc pas dans la compilation. Un façon très simple de régler ce problème est de créer un petit fichier actionScript, et d’ajouter des objets bidons du même type que ceux définis dans votre fichier de config.

Exemple avec les services : (fichier includeService.as)

import mx.rpc.http.mxml.HTTPService;
import mx.rpc.remoting.mxml.RemoteObject;
import mx.rpc.soap.mxml.WebService;

private var ser1:RemoteObject;
private var ser2:HTTPService;
private var ser3:WebService;

Ce fichier sera intégré dans votre application.

Chargement et gestion du contexte XML

Vous allez voir : simple comme bonjour !
Nous allons ajouter le chargement du fichier via ApplicationContext. ApplicationContext permet de charger automatiquement le contexte cible, et de retrouver, instancier, et enregistrer automatiquement tous les services qui se trouvent dans votre fichier de configuration XML dans le ServicesLocator.

Votre application finale :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"

	creationComplete="init()"

	xmlns:model="model.*"
	xmlns:view="view.*"
	xmlns:controller="controller.*"
	xmlns:service="service.*">

	<mx:Script>
		<![CDATA[
			import com.lafabrick.reflex.ioc.event.ContextEvent;
			import com.lafabrick.reflex.ioc.ApplicationContext;
			import com.lafabrick.reflex.controller.ControllerLocator;
			import com.lafabrick.reflex.service.ServicesLocator;

			include "includeService.as"

			private function init() : void
			{
				ApplicationContext.addEventListener(
					ContextEvent.CONTEXT_LOADED, onLoaded );

				ApplicationContext.load( "ioc/application-config.xml" );
			}

			private function onLoaded( event:ContextEvent ) :void
			{
				// Contexte chargé
				// ...
			}

		]]>
	</mx:Script>

	<controller:UserController id="userControl" />

	<model:UserModel id="userModel" />

	<view:LoginView id="view" />

</mx:Application>

• Nous continuons à utiliser le “creationComplete” pour déclencher la fonction init() qui chargera le fichier de configuration.
• Il ne faut pas oublier d’inclure au besoin les classes contenues dans notre fichier de config !

  include "includeService.as"
  

• Dans la fonction init(), nous ajoutons un écouteur sur ApplicationContext (ContextEvent.CONTEXT_LOADED), qui déclenchera la fonction onLoaded quand le fichier de configuration sera chargé. Puis nous lançons le chargement du fichier de config ( ioc/application-config.xml ).
• … Et nous incluons la vue LoginView.

Modification de notre UserController

Dans un soucis de clarté, nous allons créer 2 classes contenants les constantes référençants les noms des services (contenus dans le fichier de configuration), et les noms des méthodes de ces services.

MethodConstant (dans notre exemple uniquement la méthode login)

package service
{
	public class MethodConstant
	{
		public static const LOGIN:String = "login";
	}
}

ServiceConstant (les identifiants des objets contenus dans le fichier de configuration)

package service
{
	public class ServiceConstant
	{
		public static const SERVICE_USER:String = "remotingUser";
		public static const SERVICE_OTHER:String = "remotingOther";
	}
}

Nous venons de charger notre fichier de configuration au niveau de notre Application. Nous devons maintenant modifier notre contrôleur pour qu’il écoute le chargement du fichier (événement ContextEvent.CONTEXT_LOADED), et mette à jour sa propriété service.

package controller
{
	import com.lafabrick.reflex.controller.BaseController;
	import com.lafabrick.reflex.ioc.ApplicationContext;
	import com.lafabrick.reflex.ioc.event.ContextEvent;
	import com.lafabrick.reflex.model.ModelLocator;
	import com.lafabrick.reflex.service.ServicesLocator;

	import dataObject.UserDo;

	import model.UserModel;

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

	import service.MethodConstant;
	import service.ServiceConstant;

	public class UserController extends BaseController
	{

		public function UserController() : void
		{
			ApplicationContext.addEventListener(ContextEvent.CONTEXT_LOADED, onLoaded);
		}

		private function onLoaded( event:ContextEvent ) :void
		{
			// Contexte chargé
			this.service = ServicesLocator.getService( ServiceConstant.SERVICE_USER );
		}

		public function login( log:String, pass:String ) : void
		{
			executeMethod(MethodConstant.LOGIN, onLoginResult, onLoginFault, log, pass);
		}

		public function onLoginResult( event:ResultEvent ) : void
		{
			(ModelLocator.getModel( UserModel ) as UserModel).userLogged =
				event.result as UserDo;

			trace((ModelLocator.getModel( UserModel ) as UserModel).userLogged.name);
		}
		public function onLoginFault( event:FaultEvent ) : void
		{
			trace("resultat pourri ..."+event.fault);
		}

	}
}

Les sources de cette exemple

Et voilà ! Je vais préparer d’autres articles, notemment l’intégration de Reflex dans un projet Gumbo/Flex4. N’hésitez pas à poster vos retours, c’est en flexant qu’on devient flexeron.Autres articles sur le même sujet

• Utiliser Cairngorm dans un projet Flex / AMFPHP
• Un projet Java / Flex avec Maven 2
• Google AJAX Language API… et ton Flex devient polyglotte !
• Reflex #1: une micro-architecture pour Flex… simple !

Let’s gamble !

Encore un MVC ?

Oui.
Plus sérieusement, l’écriture de cette micro-architecture est partie d’un besoin de simplicité et de robustesse.

Souvent dans le monde de Flex, les équipes ne sont pas forcement homogènes. Certains sont habitués à la rigueur de Java, d’autres sont plus “devsigners freestyle” venant du monde Flash. Les premiers aiment les grosses mécaniques comme PureMVC, ou Prana Framework “Spring like”. Les seconds connaissent au mieux Cairngorm, au pire confondent MVC et VMC - ce qui n’a rien a voir, sauf si vous faites une application riche sur le thème de la ventilation.
Il fallait donc trouver la solution la plus efficace pour avoir un flux de production le plus optimal.

Bon vous me direz “ba Cairngorm c’est pas mal” ! Oui mais voilà. Cairngorm est plus une ligne de conduite qu’une micro-architecture. Il suffit en gros de suivre les interfaces et d’écrire son MVC. C’est simple, mais pourquoi diable utiliser ces #?~! d’événements synchrones pour déclencher des commandes ! Et il devient assez pénible de dupliquer le travail déjà fait côté serveur… sans compter le temps de compilation à rallonge. C’est rigolo pour se faire les dents, mais au bout d’un moment faut être sérieux.

Donc Reflex.

Le MVC en 2 mots

MVC, pour Model View Controller, est le design pattern le plus connu. Le but de ce pattern est de décomposer la représentation graphique (la vue), la couche métier et le modèle de données.

Le modèle MVC de Reflex peut se visualiser comme suit :

• La vue demande au contrôleur la récupération de données.
• Le contrôleur lance la méthode avec les arguments associés, et capte les retours du serveur.
• À la réception des données, le contrôleur met à jour le modèle de données.
• Le modèle notifie à la vue son changement et la met à jour.

Préparation de votre projet d’exemple

Une page de ressources pour Reflex est disponible sur le Blog.

Commencez par récupérer le swc reflex.
Les sources, et la documentation sont aussi disponibles en lignes.

Pour cette exemple, nous allons utiliser un petit service Java. Je vous laisse télécharger le projet d’exemple “reflexTuto1”, et regarder :

• le répertoire “java” : les sources Java ( UserDo : l’object de donnée, UserDs : la couche métier ).
• Les fichiers de configuration dans le répertoire WebContent/WEB-INF/flex/remoting-config.xml : la configuration des services distants.

Pour cette exemple vous aurez besoin d’un environnement Flex avec les WTP installés ainsi qu’un serveur Tomcat (pour lancer les exemples).

Petit rappel :

• Pour installer les WPT ( qui vous donne accès à la perspective J2EE et à la vue server) :
  • Ouvrez le menu Help > Software updates > Find and install…
  • Faites “Search new features to install”
  • Dans la fenêtre qui apparaît, cochez “Europa Discovery Site”
  • Cliquez sur “Finish”
  • La recherche de plugins commence. Vous devrez choisir votre miroir. La fenêtre de résultats s’affiche. Déployez “Europa Update Site” et cochez “Web and J2EE Development”
  • Cliquez sur le bouton “Select Required”
  • Faites “Next”
  • Cochez “I accept…”
  • Faites “Next” de nouveau
  • Faites “Finish”
• Pour installer un serveur TOMCAT
  • Téléchargez un Tomcat 6
  • Décompressez l’archive dans le répertoire de votre choix
  • Vous devez configurer votre serveur dans Flex à partir de la vue Server : “Windows > Other View…” puis “Servers“
  • Un fois configuré (clic droit dans la vue servers et “New…“), n’oubliez pas d’ajouter votre projet sur votre serveur ! (clic droit dans la vue servers et “Add and remove projects…“)

Au départ : un service et un objet de données

Tout d’abord nous devons représenter l’objet de données du serveur dans votre projet.

L’objectif est d’avoir une image identique des données côté serveur et côté Flex, afin que les 2 parties “parlent la même langue” : cette classe contient une référence vers son “image” côté serveur.

package dataObject
{

	[Bindable]
	[RemoteClass(alias="User.UserDo")]
	public class UserDo
	{
		public function UserDo()
		{
		}

		public var login:String;
		public var name:String;

	}
}

Nous voulons discuter avec la couche server : nous allons donc utiliser un service de type RemoteObject, faisant référence à notre couche serveur, défini dans le fichier remoting-config.xml.

<mx:RemoteObject
	id="remoteUser"
	destination="javaFacadeUser"
	showBusyCursor="true" />;

Le Modèle

Le modèle est notre réceptacle de données.
Cette classe étend BaseModel, qui permet l’enregistrement automatique du modèle dans le ModelLocator.
C’est lui qui sera mis à jour par le contrôleur, et qui, via le tag [Bindable], mettra a jour là vue. Dans notre exemple nous allons stocker le UserDo, résultant de la requête serveur login().

package model
{
	import com.lafabrick.reflex.model.BaseModel;

	import dataObject.UserDo;

	public class UserModel extends BaseModel
	{
		[Bindable]
		public var userLogged:UserDo;

	}
}

Le Contrôleur

C’est l’intelligence du système. C’est lui qui invoque le service, récupère et met à jour les données.

package controller
{
	import com.lafabrick.reflex.controller.BaseController;
	import com.lafabrick.reflex.model.ModelLocator;

	import dataObject.UserDo;

	import model.UserModel;

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

	public class UserController extends BaseController
	{

		public function login( log:String, pass:String ) : void
		{
			executeMethod( "login", onLoginResult, onLoginFault, log, pass);
		}

		public function onLoginResult( event:ResultEvent ) : void
		{
			(ModelLocator.getModel( UserModel ) as UserModel).userLogged =
				event.result as UserDo;
		}

		public function onLoginFault( event:FaultEvent ) : void
		{
			trace("Bad result ..."+event.fault);
		}
	}
}

• Cette classe étend BaseController, qui permet l’enregistrement automatique du contrôleur dans le ControllerLocator.
• La méthode login() contient la mécanique de déclenchement du service (méthode de BaseController). La méthode executeMethod est définie par les propriétés suivantes :
  • method:String : le nom de la méthode ( “login” ),
  • resultFunction:Function : la fonction déclenchée lorsque le serveur renvoie un résultat (onLoginResult)
  • faultFunction:Function = null : la fonction déclenchée lorsque le serveur renvoie une faute (onLoginFault)
  • … args : tous les arguments à passer à la méthode distante…
• Le modèle est mis à jour dans le fonction de résultat. Pour récupérer l’instance du modèle, il suffit d’utiliser le ModelLocator :

  // Renvoie l'instance UserModel enregistré dans ModelLocator
  trace( ( ModelLocator.getModel( UserModel ) as UserModel ) );
  

NOTE : les “locator” ModelLocator et ControllerLocator n’enregistrent qu’une et une seul instance d’un même modèle / contrôleur. Si deux instances d’un même modèle / contrôleur sont déclarées, une erreur ReflexError est levée. Les classes étendant BaseController et BaseModel sont automatiquement référencées dans ModelLocator et ControllerLocator.

La Vue

Construisons maintenant notre vue.

<?xml version="1.0" encoding="utf-8">
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	xmlns:controller="controller.*"
	xmlns:model="model.*">

<mx:RemoteObject
	id="remoteUser";
	destination="javaFacadeUser";
	showBusyCursor="true" />

	<controller:UserController id="userControl" service="{remoteUser}" />

	<model:UserModel id="userModel" />

	<mx:VBox>
		<mx:TextInput id="login" />
		<mx:TextInput id="password" displayAsPassword="true" />

		<mx:Button label="connect"
			click="{userControl.login( login.text, password.text )}" />

		<mx:Label x="208" y="44"
			text="User Name : {userModel.userLogged.name}"/>;
	</mx:VBox>

</mx:Application>

• Nous créons une instance RemoteObject permettant de pointer sur le service côté serveur. La propriété destination est l’identifiant du service dans le fichier remoting-config.xml.
• Nous créons une instance de UserController, avec comme propriété service l’identifiant du RemoteObject “remoteUser”.
• De la même manière, nous créons l’instance du modèle UserModel.
• Au final, la vue appel la méthode login() du contrôleur, qui se charge d’envoyer et de réceptionner les données au serveur. Au retour, le contrôleur met à jour le modèle, en “poussant” le UserDo provenant du serveur. La vue est automatiquement mise à jour via le principe de Binding des données.

Les sources de cette exemple

Conclusion

Reflex n’a pas la prétention de concurrencer des architectures reconnues comme PureMVC ou MATE. L’objectif, vous l’aurez compris, est d’aller à l’essentiel, sans se perdre dans la forêt des Design Pattern, pour une productivité la plus efficace possible. A vous d’implémenter cette architecture selon vos besoins.

Le prochain tutoriel ira un peu plus loin dans cette micro-architecture : comment mieux découper son projet, et comment associer un fichier de configuration XML externe (package IOC).

J’attends vos retours !Autres articles sur le même sujet

• Utiliser Cairngorm dans un projet Flex / AMFPHP
• Utiliser le DragManager de Flex ( 1ère partie )
• Google AJAX Language API… et ton Flex devient polyglotte !
• Reflex #2 : vous reprendrez bien un peu de IOC ?