Flex supporte plusieurs protocoles de communication avec un backend .Net :

• SOAP
• XML over Http
• AMF

Le choix de l’un de ces protocoles va avoir un impact à la fois sur le développement et sur les performances.

Pour plus de détails sur les performances des différents protocoles, je vous recommande la lecture du comparatif de James Ward : http://www.jamesward.org/census/

Bien qu’il n’existe pas d’offre Adobe côté serveur pour permettre à une application Flex d’échanger des données en AMF avec un backend .Net, je recommande l’utilisation de ce protocole. Il offre, en effet, de très bonnes performances et ne surcharge pas les coûts de développement. Il existe deux solutions pour recourir à AMF3 avec un backend .Net :

• FluorineFx v1.0.0.15
• Ou de WebORB (. NET) 3.6

Comme nous le verrons ci-dessous, ces 2 solutions sont simples d’utilisation et rapides à mettre en œuvre.

Ma première application avec FluorineFx

Côté Serveur

Avant d’aborder la partie ‘Interface Flex’, nous allons nous attacher au côté serveur.

L’exemple suivant sera réalisé en C #.

1. Téléchargez et installez  FluorineFx (http://www.fluorinefx.com/download.html)

1. Créez un nouveau Site Web avec Visual Studio (Fichier -> Nouveau site Web …)
2. Si FluorineFx a été correctement installé, vous devriez avoir un modèle de site web appelé FluorineFx ASP.NET Web Site.
3. Sélectionnez ce modèle, donnez un nom au projet , et sélectionnez votre langage préféré. Pour cet exemple, nous utiliserons C# et appellerons notre site web : WebSiteWithFluorineFx.
4. Ajoutez les classes définies ci-dessous à votre projet dans un répertoire AppCode
5. Générez le site web (Générer -> Générer le site web)

1
2
3
4
5
6
7
8
9
10
11

using System;
namespace vo
{
  public class DataInfo
  {
    public DateTime dateValue;
    public string stringValue;
    public bool booleanValue;
    public int intValue;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

using System;
using FluorineFx;
using FluorineFx.AMF3;
using vo;
 
namespace service
{
  [RemotingService("DataInfo Service")]
  public class DataInfoService
  {
    public ArrayCollection getDataList()
    {
      ArrayCollection result = new ArrayCollection();
      for (int x = 0; x < 10; x++)
      {
        result.Add(getData(x));
      }
      return result;
    }
 
    public DataInfo getData()
    {
      return getData(0);
    }
 
    private DataInfo getData(int x)
    {
      DataInfo dataInfo = new DataInfo();
      dataInfo.intValue = x;
      dataInfo.stringValue = "value " + x.ToString();
      dataInfo.dateValue = new DateTime(2009, x + 1, x + 1);
      dataInfo.booleanValue = x % 2 == 0;
      return dataInfo;
    }
  }
}

Vous remarquerez que le package FluorineFx.AMF3 comprend deux types de données:

· ArrayCollection

· ByteArray

Ces deux types permettent la sérialisation de collection pour le premier et de tableau de bits pour le second. Il existe un autre code spécifique, l’annotation RemotingService au dessus de la classe service. Seules les classes ayant cette annotation seront visibles en flex. Le code spécifique à  FluorineFx reste minime.

Si tout se passe bien, vous devriez être en mesure de lancer la console de navigateur des services dans votre navigateur Web. Faites un clic droit sur le ficher Console.aspx et sélectionnez Afficher dans le navigateur. Cela devrait vous afficher dans un navigateur la page suivante: (http://localhost/WebSiteWithFluorineFx/Console.aspx)

Ici, vous pouvez naviguer dans chacun de vos services et invoquer chacun d’eux afin de vous assurer qu’ils renvoient les données appropriées.

Côté client

Nous pouvons maintenant tester notre service. Pour cela attardons nous sur la partie flex.

1. Lancez Flex Builder et créez un nouveau Flex Project.
2. Créez un nouveau fichier nommé services-config.xml dans le répertoire racine de votre projet avec le contenu suivant:


XMLservices-config.xml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?xml version="1.0" encoding="UTF-8"?> <services-config> <services> <service id="fluorine-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage"> <destination id="fluorine"> <channels> <channel ref="my-fluorine"/> </channels> <properties> <source>*</source> </properties> </destination> </service> </services> <channels> <channel-definition id="my-fluorine" class="mx.messaging.channels.AMFChannel"> <endpoint uri="http://localhost/WebSiteWithFluorineFx/Gateway.aspx" class="flex.messaging.endpoints.AMFEndpoint"/> </channel-definition> </channels> </services-config>





3. La seule chose à modifier pour que cela fonctionne est l’attribut uri. Ce dernier doit pointer sur la page Gateway.aspx. du site web créé précédemment. Ouvrez les propriétés de votre projet. Dans section Flex Compiler, ajoutez l’argument de compilation suivant :

-services "services-config.xml"


4. Ajoutez les fichiers définis ci-dessous à votre projet


MXMLMain.mxml

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.charts.chartClasses.DataDescription; import mx.utils.ObjectUtil; import vo.DataInfo; import flash.net.registerClassAlias; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.rpc.remoting.RemoteObject; import mx.events.FlexEvent;   registerClassAlias("vo.DataInfo", DataInfo);   private function handleGetDataButtonClick(event:Event):void { service.getData(); } private function handleGetDataListButtonClick(event:Event):void { service.getDataList(); } private function handleGetDataResult(event:ResultEvent):void { var data:DataInfo = event.result as DataInfo log.text += ObjectUtil.toString(data); } private function handleGetDataListResult(event:ResultEvent):void { var data:ArrayCollection = event.result as ArrayCollection; log.text += '\n'+ObjectUtil.toString(data); } private function handleFault(event:FaultEvent):void { log.text += '\n'+ObjectUtil.toString(event.fault); }   ]]> </mx:Script> <mx:RemoteObject id="service" destination="fluorine" source="service.DataInfoService" fault="handleFault(event)"> <mx:method name="getData" result="handleGetDataResult(event)"/> <mx:method name="getDataList" result="handleGetDataListResult(event)"/> </mx:RemoteObject> <mx:HBox> <mx:Button label="DataInfoService.getData" click="handleGetDataButtonClick(event)" /> <mx:Button label="DataInfoService.getDataList" click="handleGetDataListButtonClick(event)"/> </mx:HBox> <mx:TextArea id="log" width="100%" height="100%"/> </mx:Application>





ACTIONSCRIPTDataInfo.as

1 2 3 4 5 6 7 8 9 10 11 12 13

package vo { [RemoteClass(alias='vo.DataInfo')] public class DataInfo { public function DataInfo() {}   public var dateValue:Date; public var stringValue:String; public var booleanValue:Boolean; public var intValue:int; } }





Vous avez surement remarqué la ligne :


registerClassAlias("vo.DataInfo", DataInfo);


Cette ligne permet de faire l’association entre le type défini du côté « back » et celui côté « front ».

Attention!! il est aussi nécessaire d’ajouter le méta-tag RemoteClass sur la classe DataInfo.




5. Vous pouvez maintenant exécuter l’application.

L’interface est extrêmement simple. Appuyez sur DataInfoService.getData pour faire l’appel de service service.DataInfoService.getData().  La zone de texte affichera le descriptif de ce qui a été retourné (c.-à-d. un objet de type vo::DataInfo).

Et si vous appuyez sur DataInfoService.getDataList, vous appellerez le service service.DataInfoService.getDataList() et la zone de texte affichera le descriptif d’une ArrayCollection de 10 objets de type vo::DataInfo.

Voir la seconde partie : Flex & .Net (part 2/3) : WebORB

Voir la troisième partie : Flex & .Net (part 3/3) : Le bilan