La technologie Adobe Flex est aujourd'hui reconnue comme une des solutions les plus productives pour développer rapidement des applications de type RIA (Rich Internet Applications). Le succès de cette technologie repose sur deux notions fondamentales : la portabilité et l’interopérabilité. Cela fait deux ans que nous utilisons la technologie Flex. Je viens partager avec vous mes retours d'expériences concernant le développement des applications RIA basées sur Adobe Flex. Ahmed El Houari

1. Flex
une technologie RIA
incontournable pour
les applications web ?
Developer Forum 5 // Oct 2009
Ahmed EL HOUARI
wenovia.
Email : Ahmed (at) wenovia.com

2. Fin de Ajax, la RIA Incontournable ?
Et quelle technologie RIA choisir pour répondre à ma problématique ?

3. Bilan sur la RIA Flex après 2 ans
d’utilisation
Présentation du Framework Flex 3
Nouveautés dans Flex 4
Perspectives de la RIA Flex
Q/R

4. Le contexte du projet
Pourquoi la RIA
Le choix d’une technologie
La solution actuelle
La nouvelle version 2010

5. Mise en ligne en septembre 2009
Editeur Butterfly Aero Training
Technology Adobe Flash Platform, Zend Framework + Zend_Amf, Apache, MySQL
Lien formations.aero

6. Performance
Diffusion multiplateforme (Navigateur/OS)
Charge serveur
Streaming vidéo au format HD
Intégration dans des services hétérogènes du
SI (java, php, mysql, etc) et reprise de
l’existant.
Déploiement
Maintenance

7. Gain Expérience Utilisateur
Usabilité
Ergonomie
Multimédia
Gain Expérience développeur
Productivité
Déploiement
Performance
Maintenance

8. Les deux acteurs majeurs : Silverlight et Flex.
JavaFX, initiave de Sun, est en retard par rapport aux
autres solutions.
HTML 5 n’avance pas beaucoup.
GWT est intéressant car sans plug-in mais il manque la
gestion du multimédia en particulier la vidéo.
Silverlight et Flex offrent quasiment les mêmes
services mais ne répondent pas aux mêmes
problématiques.
Comment choisir une technologie RIA ?
Son existant et ses enjeux (déploiement, performance,
critique, …)
Son expérience (.Net, Java, ActionScript, Php)

9. Flex + Zend_AMF + Zend Framework
<mx:RemoteObject id="zendRemoteObject"
destination= "zend" source="ArticleService"
endpoint="http://www.domain.org/gateway"
result="Alert.show(event.result.myProperty)"/>
<mx:Button label=« Appel du Service"
click="zendRemoteObject.getArticles()"/>
class GatewayController extends Zend_Controller_Action
{
public function indexAction()
{
$this->getHelper('ViewRenderer')->setNoRender();
$server = new Zend_Amf_Server();
$server->addDirectory( dirname(__FILE__) .
'/../services/' );
echo($server->handle());
}
}

10. Application Flex consommant des
services Java.
Industrialisation avec Maven,
pour un développement
professionnel.
Intégration de Spring-Flex, pour
simplifier la configuration de
BlazeDS.
BlazeDS s'interpose entre le client
Flex et les services Java à la
manière d'un proxy.
Blaze permet de :
localiser et invoquer les services
Java.
désérialiser les données Flex
reçues en instances d'objets Java
et vice-versa.

11. Présentation du Framework Flex
De flash à flex …
Flex en quelques mots
La force et la faiblesse de Flex
L’offre de la plateforme Flex 3
Industrialisation de Flex
Fonctionnement et déploiement
Démo « Hello World »
Communications avec le Client
Communications non persistantes avec le serveur
Communication persistantes avec le serveur
Demo « Streaming »
Le référencement de Flex
L’accessibilité dans Flex

12. Flash a été développé par Macromedia de 1996 à
fin 2005.
Création de Flex en 2004 par Macromédia.
En 2005, la société Macromedia a été racheté
par Adobe.
En 2006, Adobe a commencé a parlé de RIA et a
publié un livre blanc à ce sujet.
Aujourd’hui, Adobe parle de Adobe Flash
Platform pour désigner un ensemble de logiciels
Adobe.
Flex est au cœur de cette stratégie.

13. Flex permet de construire
des applications web qui
s’exécutent:
Dans le navigateur web (Adobe
Flash Player) - RIA
Sur le bureau (AIR Runtime) — RDA
Sur le mobile (Flash Lite / Flash 10)
http://flex.org
Flex s’adresse aux
développeurs d’applications
d’entreprise, habitués à des
Version 3.2 stable 17 nov 2008
langages comme Java, .Net, Version 4 beta 2 (Gumbo)
(Gumbo)
Gumbo
Php 5, Python ou Ruby. V4 sortie officielle prévue pour 2010.
Flex SDK est Open source.

14. Flex nécessite le plug-in Flash Player sur le
navigateur du poste client (ou Air RunTime
pour le desktop)
AS3 100% ECMA-262 (fortement Objet qui répond
au standard ECMA-262 comme C#)
Multiplateforme : Win, Mac et Linux
Performance depuis FP9 : Nouvelle VM (AVM2)
qui cohabite avec la VM1
AVM2 est un projet Open Source

15. Description du code
MXLML (pour décrire une interface en XML), Action Script 3 (standard ECMA
Script 262, proche de Java et C#)
Programmation par évènements
Bibliothèques de composants et de librairie
Nouveau dans la V4 : séparation design et comportement
Accès aux services orientés données grâce à Adobe LiveCyle Data
Services.
Accès aux services REST, SOAP et AMF.
Design composant
CSS, héritage et enrichissement de composant
Nouveau dans la V4 : langage de description graphique des composants (FXG)
DataBinding
Espace de stockage Client avec les ShareObjects
Design Patern Architecture (MVC)
Cairngorm
PureMVC

16. IDE
Flex Builder – Plug-in Eclipse
Development Factory
Plug-in Maven + Flex-Mojo
Tests Factory
Unit : ASUnit, FlexUnit (=JUnit) intégré dans V4
Mock:Mock-AS3, Mock4AS (Integration Test)
GUI:FlexMonkey (Adobe Air App/Flex UI Interactions)
Code coverage :FlexCover
Quality :AS3NCSS, FlexPDM (clone Java), ASDocs
Design Patern Architecture
MVC : Cairngorm ou PureMVC

17. Compilateur AS3 en ligne Flex SDK 3
Compilateur MXML en ligne MXML ActionScript
Debugger en ligne Flex Class Library
Flex Class Library Debuggers
Bibliothèque de composants standards (des
classes AS3 que vous pouvez étendre
comme en Java)
Licence
Mozilla Public License, version 1.1 (MPL)
Adobe Flex SDK license
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

18. Flex Builder IDE
SOURCE MXML et Action Script 3
Flex SDK
MXML ActionScript
Flex Class Library
Compile

19. DEMO “Hello World”

20. Local Connections
permet à 2 fichiers SWF de communiquer;
solution aux problèmes d'interopérabilité
entre deux versions de swf chargées dans
un swf parent)
Shared Objects
permet de stocker et de récupérer de la
data persistante sur la machine cliente,
Sauvegarde des préférences.
Les shared object distant permettent la
synchronisation de données en temps réel
sur plusieurs clients, mais ils nécessitent
aussi un logiciel côté serveur tel que Flash
Media Server.)
External Interface
Communication avec l'environnement sur
lequel l’application est hébergée.
Interaction avec le navigateur. Faire appel
à une méthode Javascript.

21. La méthode que vous choisirez dépend d'abord du type de
service que vous avez de disponible.
HTTPService
• Requêtes HTTP(s) countryService.send();
• URLencoding, (couple identifiant/valeur
voir XML) <mx:HTTPService
id="countryService"
• Script / Page ASP, JSP, PHP, ...
url=“data/countries.xml"/>
• Services REST
• Les données échangées ne sont pas <mx:ComboBox id="country"
typées. dataProvider="{countryService.la
• Ou JSON (typage des données) , il faut stResult.countries.country}"/>
adjoindre à votre projet la librairie “corlib” <countries>
: http://code.google.com/p/as3corelib/ <country>Sélectionner</country>
pour sérialiser/désérialiser vos data Json. <country>France</country>
<country>English</country>
</countries>

22. Exemple d’un HTTPService avec un service distant en JSON
import mx.rpc.events.ResultEvent; private function onJSONLoad(event:ResultEvent):void
import com.adobe.serialization.json.JSON; {
//on récupère le résultat Json et on le cast en String
var rawData:String = String(event.result);
<mx:HTTPService id="service"
resultFormat="text" //on convertit cette donnée en un tableau d’objets à l’aide
url=http://www.wenovia.com/mashedwenov de l’API Json.
ia.json var exempleArray :Array = (JSON.decode(rawData) as
result="onJSONLoad(event)"/> Array);
// On peuple le DataGrid avec le résultat
exempleDG.dataProvider = exempleArray ;
service.send();
}
<mx:DataGrid id="exempleDG" right="10" left="10" top="10" bottom="10">
<mx:columns>
<mx:DataGridColumn headerText="Service" dataField="src"/>
<mx:DataGridColumn headerText="Title" dataField="title"/>
</mx:columns>
</mx:DataGrid>

23. Flash Player n'a pas de support natif pour les Web Services SOAP. Cependant,
Flex propose un composant WebService qui utilise le support des
requêtes/réponses HTTP mais aussi le support du XML pour vous permettre de
travailler avec des Web Services SOAP.
Web Services
En utilisant du MXML et en utilisant de statesService.getCountries.send();
l'ActionScript.
Envoie / reçoit SOAP (XML) <mx:WebService id="statesService"
Web Service Definition Language wsdl="http://www.rightactio
(WSDL) nscript.com/states/webservice/StatesS
Echanges de quelques données ervice.php?wsdl">
"typées“: types primitifs AS3 (Boolean, <mx:operation
int, uint, Number, String, ...), Qelques name="getCountries"
types complexes du top level (Array, result="trace(statesService.getCountri
Date) es.lastResult)"/>
Sérialisation/ Désérialisation côté Flex </mx:WebService>
Pas de type personnalisé

24. Remote Object
Remoting : AMF : ActionScript Message Format = AS binaire
Introduit en 2001 avec Flash Player 6
HTTP(S) ou protocoles temps réél (RTMP)
AMF3 = AS3 (Flex), AMF0 = AS1 + AS2
Spécifications ouvertes
Data Mapping avec les objets stockés sur le serveur,
Performance car basé sur les spec AMF, qui est un protocole de transfert
binaire et natif dans la VM,
Besoin d'une passerelle (gateway) capable de recevoir et d'envoyer des
paquets AMF en HTTP, sérialiser et désérialiser de l’AMF, délégué les
requetes vers les services appropriés.
Census RIA Data Loading Benchmarks
Données typées: http://www.jamesward.com/census/
Types primitifs
Types complexes Top Level
(selon passerelle)
Types personnalisés : Value
Objects ([RemoteClass])

25. Voici une liste des principales passerelles Flash Remoting Open
Source :
JAVA : BlazeDS, WebORB, GraniteDS, Cinnamon
.NET : Fluorine, WebORB
PHP : Zend_Amf, AMFPHP, WebORB, SABREAMF
RoR : RubyAMF, WebORB
Python : PyAMF
Spec et implémentation de AMF :
http://download.macromedia.com/pub/labs/amf/amf3
_spec_121207.pdf
http://osflash.org/documentation/amf3/implement
ations

26. Remoting.
Exemple de Service Flash Remoting.
ro.sayHelloTo(inputText.text); package hello;
public class HelloWorld {
<mx:RemoteObject id="ro" public String sayHelloTo(String str) {
destination="helloworld"
System.out.println("Hello " + str);
result="resultHandler(event)" />
return "Hello " + str;
<?xml version="1.0" encoding="UTF-8"?> }
<service id="remoting-service"
class="flex.messaging.services.RemotingService"> }
<adapters>
<adapter-definition id="java-object"
class="flex.messaging.services.remoting.adapters.JavaAdapter Solution basée sur
" default="true"/> Serveur Tomcat
</adapters>
<default-channels> Serveur Blaze-DS (war à configurer dans
<channel ref="my-amf"/>
</default-channels> le projet / Eclipse Flex Builder )
<destination id="helloworld"> Création du fichier de config :
<properties>
<source>hello.HelloWorld</source> WEB-INF/flex/remoting-config.xml
</properties>
</destination> http://www.javabeat.net/articles/print.php
</service>
?article_id=116

27. Flash Player supporte les connections
socket bas-niveau et persistantes (XML
Sockets, Binary Sockets, RTMP).
Vous avez la possibilité de créer :
Des applications multimédia avec diffusion en
continu de vidéo au format HD.
Des applications temps réel ayant un faible
délai de latence (tableau de bord dans la
finance).
Des applications Flex comme des clients mail,
des clients VNC, et bien plus.

28. DEMO “Streaming Video”

29. Adobe travaille avec Google et Yahoo (à suivre ...)
Google sait indexer les fichiers Flash (SWF) .
L’indexation est délicate, les données ne sont pas là !
Solution Adobe, le Deep Linking couplé avec d’autres
techniques traditionnels :
Basé sur la communication entre l’application Flex et le
navigateur. Mais il faut en tenir compte dès la phase de
développement.
Permet de relier une URL à une zone de son application
Flex et de charger des données.
Utilisation des fragments, la partie de l’URL qui se trouve
après le # (ex : http://www.domain.com#view=1)

30. Coder l'application avec des raccourcis clavier
Utiliser des éléments de code en Flex et Flash qui permettent
de rendre accessible l'application (26 éléments sont cités)
Utiliser MSAA (Microsoft Active Accessibility) pour rendre
exploitable l'application par les lecteurs d'ecran
Utiliser les solutions de sous-titrage (à base de xml) pour les
vidéos
Fournir à l'utilisateur une aide sur l'utilisation des dispositifs
spécifiques qui ont été développés en vue d'améliorer
l'accessibilité
Faire appel à des experts en accessibilité
Intégrer l'expérience utilisateur pour éprouver la mise en
place de l'accessibilité.

31. La nouvelle offre RIA de Adobe en2010
Inconvénient du modèle de composant Flex 3
Le nouveau modèle de composant Flex 4
Le FXG : un SVG enrichi …
La chaine de production Adobe des RIA.
Outil de prototypage RIA : Catalyst
Nouveautés dans l’IDE Flash Builder 4
Quelques changements dans le flex SDK 4
Démo de l’approche RAD de Adobe

32. Clients
Adobe Flash Player 10.1
Adobe AIR™ 2.0
Outils
Adobe Flash CS4 Professional
Adobe Flash Catalyst (av Thermo)
Adobe Flash® Builder™ (av Flex Builder)
Framework
Adobe Flex (SDK)
Serveurs
BlazeDS (Version gratuite de LiveCycle mais
sans l’implémentation de RTMP)
Gamme Adobe Flash Media Server
Technologies associées
Adobe Creative Suite® 4
Adobe ColdFusion
Adobe LiveCycle® ES

33. Les fonctionnalités du
composants sont
mélangées avec
l’apparence.
Difficile de se constituer
une bibliothèque de
composants réutilisables
avec un thème graphique
spécifique.

34. Le composant en Action Script (Flash Builder)
Comportement
Donnée
Logique
L’habillage en MXML (Catalyst)
Graphisme
Mise en page
Animation
Etat
Utilisation d’une feuille CSS pour la relation.

35. <s:Graphic x="0" y="0">
Flash XML Graphics <s:Line xFrom="0" xTo="100"
Format de fichier graphique (SVG yFrom="0" yTo="100">
enrichi …) <s:stroke>
Basé sur MXML (XML). <s:SolidColorStroke
Spécification 1.0 color="0x000000" weight="1"/>
</s:stroke>
Proche du rendu du format Flash. </s:Line>
Objectif </s:Graphic>
Facilité la conception graphique des
RIA Flex (productivité).
A partir des outils des graphistes
(Photoshop, Illustrator),
A partir d’un outil de prototypage
RIA comme Adobe Catalyst.

36. workflow d’intégration entre designers et développeur

37. Outil d’intégration de contenu
statique et interactif.
Pour définir rapidement
l’expérience utilisateur d’une
RIA.
Transformer du contenu
statique en composants
interactifs.
Publier du contenu interactif
sans une ligne de code.
Interface familière aux
designers (calques, etc ...).

38. Séparation claire entre le visuel et le comportement d'un composant.
Une nouvelle architecture autour du format graphique FXG
Namespaces et packages dans Flex 4
Introduction du package Spark qui reprend les composants et les classes de
bases. (Tag s)
Les composants Flex 3 sont conservés (package Halo) ainsi que l’espace de
nom MXML 2006 pour une retrocompatibilité (Tag mx)
Nouvel espace de nom MXML 2009 (Tag fx), qui ne contient aucun
composant.
Composants non-visuels et tag Declarations
Avant Flex 4, Flex autorisait le tag Application à inclure des composants visuels
(AddChild) et non-visuels (déclarations de propriétés).
A partir de Flex4, la déclaration de composant non-visuels n'est pas autorisée comme
enfant. Vous pouvez utiliser ces enfants non-visuels au sein d'un tag
<fx:Declarations>. Cela inclut les effects, les validators, les déclarations de donnée et
les classes RPC.

39. Le nom change : Adobe Flash Builder 4 Data Centric Development
Prise en charge un certain nombre de serveurs distants.
Applications J2EE - BlazeDS
Rapid Application Development
Applications Php (Zend_Amf et AmfPhp)
Introspection des services distants
Il peut donc récupérer le profil des méthodes, reconnaître
le contenu d'un objet retourné par une méthode et
effectuer un binding avec un objet graphique.
Intégration de FlexUnit
qui permet de réaliser des suites de tests et de l'intégration
continue.
Générer automatiquement les getter et les setter,
Génerer automatiquement certains évènements
Le refactoring a été amélioré. Il peut maintenant être
effectué sur les composants MXML.
Générer automatiquement les formulaires à partir des
données distantes.
La pagination pour toutes les applications serveur.
Etc ….

40. DEMO “Introspection des
services distants”

42. Le Flash Player 10.1
Conforme aux spécifications de l’Open Screen Project,
Garantir un comportement homogène sur différents types de
terminaux :
Odinateur
Netbooks, smartphones (Windows Mobile, PalmOS, Symbian et
Android pour début 2010)
Téléphones mobiles.
Sauf Iphone
Support du multi-touch
Flash CS 5 va permettre de développer des applications pour Iphone !
Flex SDK 4
Sortie prévue de Air 2, Flash Builder 4, Flash Catalyst 2, LiveCycle
Enterprise 2

43. Merci de votre écoute
Ahmed EL HOUARI
ahmed @ wenovia.com