Nous allons développer une application très simple en Flex 2, pour cela, des connaissances en programmation Objet seront nécessaires, plus particulièrement en .net et bien sûr quelques notions en Flex 2(utilisation de MXML et de AS3). Je précise que je ne rentre pas dans certains détails, que je ne juge pas importants afin de ne pas alourdir la lecture.

I.Téléchargement

Télécharger et installer Fluorine : http://fluorine.thesilentgroup.com/fluorine/fluorine.exe
Télécharger et installer Adobe Flex Data Services 2 : http://www.adobe.com/products/flex/dataservices/

II.Création du nouveau projet .net et configuration

1. Créez un dossier « FlexFlorine », puis 2 dossiers a l’intérieur de celui-ci appelés « dotNet » et « Flex » qui serviront pour stocker les sources de chaque projet.
2. Sous Visual Studio 2005, Créez un nouveau projet « Empty website » et nommez le « FluorineFlex » par exemple et indiquez le chemin de votre dossier « dotNet » précédemment créé.
3. Ajoutez une référence dans ce projet « FluorineFlex », clic droit, puis « add reference », sous l’onglet .net, sélectionnez « Fluorine ». Ceci permet a .net de pouvoir utiliser les bibliothèques Fluorine installées.
4. Ajoutez un fichier de configuration au projet si le fichier « Web.config » n’existe pas déj puis ajoutez ces lignes dans la balise <system.web></system.web>

<httpModules> <add name="FluorineGateway" type="com.TheSilentGroup.Fluorine.FluorineGateway,com.TheSilentGroup.Fluorine" /> </httpModules>



5. Ajouter un fichier « Gateway.aspx » dans le projet, qui servira de passerelle entre .net et flex 2. Si ce Fichier n’existe pas, vous aurez une erreur.
6. Créez un nouveau dossier « WEB-INF » dans le projet .net. Puis créez un sous dossier « flex » dans Web-INF. Ajouter un fichier « XML File » dans flex et nommez le « services-config.xml ». Puis ajouter ces lignes sous le tag XML :

<services-config>

   <services> 
       <service id="remoting-service"
                class="flex.messaging.services.RemotingService"
                messageTypes="flex.messaging.messages.RemotingMessage">
           <destination id="fluorine">
               <channels> 
                   <channel ref="my-amf"/>
               </channels> 
               <properties> 
                   <source> *</source> 
               </properties> 
           </destination> 
       </service> 
   </services> 

   <channels> 
       <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
           <endpoint uri="http://{server.name}:{server.port}/{context.root}/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/>
       </channel-definition>
   </channels>

</services-config>

Ce fichier configure les services a utiliser au sein de .net avec le URI du type : http://localhost/fluorineflex/Gateway.aspx si vous êtes en local, ou sinon votre URL si vous le déployez.
La configuration est terminée pour .net, nous allons voir du côté de Flex 2.

III.Créer un nouveau projet Flex 2

1. Si ce n’est pas déj fait, installez « flex builder » que vous trouverez sur le site d’Adobe.
Créez un nouveau projet « Flex data services » dans flex, choisissez « Compile application locally in Flex Builder. » puis décochez « Use default local Flex Data Services Location». Puis indiquez les différents chemins comme ceci :

Root folder : chemin vers votre dossier dotNet (D:\Projects\Flexfluorine\dotNet.)
Root URL : chemin vers votre projet .net sur le serveur (http://localhost/fluorineFlex/), si vous rencontrez des difficultés pour la mise en marche, rajoutez le port, chez moi en local :1101.
Context Root : dossier du projet (/fluorineFlex).

2. Indiquez ensuite le chemin où vous allez stocker votre projet Flex, dans notre cas, le dossier Flex créé dans (D:\Projects\Flex\Flexfluorine\Flex.

IV.Créer un service fluorine pour .net

Bon, nous allons enfin pouvoir mettre quelques lignes de code pour faire un test. Pour commencer, revenons sur Visual Studio 2005.

1. Créez une nouvelle classe dans le projet .net et nommez le « FlexService.cs » qui sera directement placé dans « app_code ». Ajoutez un namespace si vous en avez besoin pour plus tard, et ajoutez une fonction de test : echo.

using System.Web; namespace MyFirstApp {

   public class FlexService
   {
       public FlexService() { } 
       public string echo(string msg){
           return "helloWorld: " + msg;
       }

} }

C’est cette dernière fonction echo, qui sera appelée par flex 2 au sein de son application. Nous y reviendrons pour l’explication dans la dernière partie.

V. Création d’une application Flex 2

1. Dans Flex, créez un objet RemoteObject dans le fichier MXML principal comme ceci :

<mx:RemoteObject

     id="roFlexService"
     destination="fluorine"
     source="myFirstApp.FlexService"
     showBusyCursor="true"
     result="roResult(event)"
     fault="roFault(event)"
     />

Explication :
Id : Identifiant de l’objet, qui sera utilisé pour des appels de fonctions.
Destination : Correspond a la destination définie dans le services-config.xml pour utiliser fluorine.
Source : la classe a instancier que nous avons créée dans .net.
Result et fault, correspondent respectivement aux fonctions qui seront appelées suivant que l’événement du RemoteObject a réussi ou pas.

2. Ajoutez dans ce même fichier, un « input field » et un champ de texte et 2 boutons comme ceci :

<mx:TextArea id="taMessage" width="250" height="150" x="50" y="40"/>
<mx:TextInput x="50" y="10" id="txtInput" width="185"/>
<mx:Button x="243" y="10" label="Echo!" id="btnSend" click="submitText()"/>
<mx:Button x="50" y="198" label="Submit Bad Call" id="btnBad" click="badCall()"/>


Explication:
Au click sur l’un des boutons, la fonction correspondante sera appelée via du code AS. Pour cela, 2 façons de procéder : soit nous mettons le code directement dans le fichier MXML, soit nous le mettons dans un fichier .as a part et nous l’attachons au fichier MXML via les balises <mx:Script source= monfichier.as></mx:Script>

Fichier « monScript.as » :

   import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;
         
         public function submitText():void
         {
              roFlexService.echo(txtInput.text);
         }
             
         public function badCall():void
         {
             //this won't work because there is no method called badCall()
             roFlexService.badCall(txtInput.text);
         }
             
         public function roResult(e:ResultEvent):void
         {
             taMessage.text = "roResult(e)";
             taMessage.text += "\n" + e.result;
         }
             
         public function roFault(e:FaultEvent):void
         {
             taMessage.text = "roFault(e)";
             taMessage.text += "\n" + e.fault.faultCode;
             taMessage.text += "\n" + e.fault.faultString;
             taMessage.text += "\n" + e.fault.faultDetail;
         }



Explication:
Au click sur le bouton “echo”, la fonction submitText() sera appelée. Cette fonction déclenche l’événement echo de l’objet RemoteObject qui est rattaché a la classe MyfirstApp.FlexService que nous avons créée auparavant dans le projet .net.
Echo retourne la chaine « Helloword » suivie de la chaine passée en paramètre qui n’est autre que le contenu saisi dans « input Text ».
Tout s’est bien déroulé, donc roResult() sera déclenché , d’où le message dans le champ de texte.

Au click sur le bouton « Submit… », la fonction badCall() sera appelée. Or badCall n’est pas définie dans la classe MysFirstApp.FlexService, donc il y a une erreur. roFault() sera enclenché.

Nous avons vu comment Configurer Flex 2 et .net afin d’assurer leur communication, et l'intégration de flex 2 dans un projet .net. Ce tutoriel part du principe que vous ayez des notions en programmation objet mais aussi en .net et Flex. Certes, ce mini tutoriel est très basique, mais il a pour but de vous guider dans les premiers pas quand a l’utilisation de Fluorine. Pour la suite, je laisse la main a vos imaginations.

J’espère que ce tutorial a pu aider des gens et n’hésitez pas a laisser vos commentaires ou remarques.
A très bientôt pour un autre billet.