Flex une technologie RIA incontournable pour les applications web ? Ahmed Ahmed Ahmed Ahmed EL EL EL EL HOUARI HOUARI HOUARI HOUARI Email Email Email Email : : : Ahmed Ahmed Ahmed Ahmed (at) (at) (at) (at) wenovia wenovia wenovia wenovia. . .com com com com Developer Forum 5 // Oct 2009 Developer Forum 5 // Oct 2009 Developer Forum 5 // Oct 2009 Developer Forum 5 // Oct 2009
43
Embed
Flex, une techno RIA incontournable pour les futures app web ?
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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Developer Forum 5 // Oct 2009Developer Forum 5 // Oct 2009Developer Forum 5 // Oct 2009Developer Forum 5 // Oct 2009
Fin de Ajax, la RIA Incontournable ?Fin de Ajax, la RIA Incontournable ?Fin de Ajax, la RIA Incontournable ?Fin de Ajax, la RIA Incontournable ?Et quelle technologie RIA choisir pour répondre à ma problématique ?Et quelle technologie RIA choisir pour répondre à ma problématique ?Et quelle technologie RIA choisir pour répondre à ma problématique ?Et quelle technologie RIA choisir pour répondre à ma problématique ?
� Bilan sur la RIA Flex après 2 ans
d’utilisation
� Présentation du Framework Flex 3
Nouveautés dans Flex 4� Nouveautés dans Flex 4
� Perspectives de la RIA Flex
� Q/R
� Le contexte du projet
� Pourquoi la RIA
� Le choix d’une technologie
La solution actuelle� La solution actuelle
� La nouvelle version 2010
� Mise en ligne en septembre 2009� Editeur Butterfly Aero Training� Technology Adobe Flash Platform, Zend Framework + Zend_Amf, Apache, MySQL� Lien formations.aero
� Performance
� Diffusion multiplateforme (Navigateur/OS)
� Charge serveur
Streaming vidéo au format HD� 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
� Gain Expérience Utilisateur
� Usabilité
� Ergonomie
� Multimédia� Gain Expérience développeur
� Productivité
� Déploiement
� Performance
� Maintenance
� 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 � 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,
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());
}}
<mx:Button label=« Appel du Service"
click="zendRemoteObject.getArticles()"/>
� Application Flex consommant des services Java.
� Industrialisation avec Maven, pour un développement professionnel.
� Intégration de Spring-Flex, pour simplifier la configuration de 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 Flexreçues en instances d'objets Java et vice-versa.
� Présentation du Framework Présentation du Framework Présentation du Framework Présentation du Framework FlexFlexFlexFlex� De flash à De flash à De flash à De flash à flexflexflexflex …………� FlexFlexFlexFlex en quelques motsen quelques motsen quelques motsen quelques mots� La force et la faiblesse de La force et la faiblesse de La force et la faiblesse de La force et la faiblesse de FlexFlexFlexFlex� L’offre de la plateforme L’offre de la plateforme L’offre de la plateforme L’offre de la plateforme FlexFlexFlexFlex 3333� Industrialisation de Industrialisation de Industrialisation de Industrialisation de FlexFlexFlexFlex� Industrialisation de Industrialisation de Industrialisation de Industrialisation de FlexFlexFlexFlex� Fonctionnement et déploiementFonctionnement et déploiementFonctionnement et déploiementFonctionnement et déploiement� Démo «Démo «Démo «Démo « Hello WorldHello WorldHello WorldHello World »»»»� Communications avec le ClientCommunications avec le ClientCommunications avec le ClientCommunications avec le Client� Communications non persistantes avec le serveurCommunications non persistantes avec le serveurCommunications non persistantes avec le serveurCommunications non persistantes avec le serveur� Communication persistantes avec le serveurCommunication persistantes avec le serveurCommunication persistantes avec le serveurCommunication persistantes avec le serveur� DemoDemoDemoDemo «««« StreamingStreamingStreamingStreaming »»»»� Le référencement de Le référencement de Le référencement de Le référencement de FlexFlexFlexFlex� L’accessibilité dans L’accessibilité dans L’accessibilité dans L’accessibilité dans FlexFlexFlexFlex
� 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.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.
� 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)
� Flex s’adresse aux développeurs d’applications d’entreprise, habitués à des langages comme Java, .Net, Php 5, Python ou Ruby.
� Flex SDK est Open source.
http://flex.org
Version 3.2 stable 17 Version 3.2 stable 17 Version 3.2 stable 17 Version 3.2 stable 17 novnovnovnov 2008200820082008Version 4 beta 2 (Version 4 beta 2 (Version 4 beta 2 (Version 4 beta 2 (GumboGumboGumboGumbo))))V4 sortie officielle prévue pour 2010.V4 sortie officielle prévue pour 2010.V4 sortie officielle prévue pour 2010.V4 sortie officielle prévue pour 2010.
� 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 � 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
� 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 � 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
� IDE� Flex Builder – Plug-in Eclipse
� Development Factory� Plug-in Maven + Flex-Mojo
� Tests Factory� Tests Factory� Unit : ASUnit, FlexUnit (=JUnit) intégré dans V4
� Mock:Mock-AS3, Mock4AS (Integration Test)
� GUI:FlexMonkey (Adobe Air App/Flex UI Interactions)
� Local ConnectionsLocal ConnectionsLocal ConnectionsLocal 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)
� SharedSharedSharedShared ObjectsObjectsObjectsObjects� permet de stocker et de récupérer de la
data persistante sur la machine cliente, Sauvegarde des préférences.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.)
� ExternalExternalExternalExternal Interface Interface Interface Interface � Communication avec l'environnement sur
lequel l’application est hébergée. Interaction avec le navigateur. Faire appel à une méthode Javascript.
La méthode que vous choisirez dépend d'abord du type de La méthode que vous choisirez dépend d'abord du type de La méthode que vous choisirez dépend d'abord du type de La méthode que vous choisirez dépend d'abord du type de service que vous avez de disponible.service que vous avez de disponible.service que vous avez de disponible.service que vous avez de disponible.
Exemple d’un Exemple d’un Exemple d’un Exemple d’un HTTPServiceHTTPServiceHTTPServiceHTTPService avec un service distant en JSONavec un service distant en JSONavec un service distant en JSONavec un service distant en JSON
<mx:HTTPService id="service"
resultFormat="text"
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSON;
private function onJSONLoad(event:ResultEvent):void{//on récupère le résultat Json et on le cast en Stringvar rawData:String = String(event.result);
//on convertit cette donnée en un tableau d’objets à l’aideresultFormat="text"
url=http://www.wenovia.com/mashedwenov
ia.json
result="onJSONLoad(event)"/>
service.send();
//on convertit cette donnée en un tableau d’objets à l’aidede l’API Json.var exempleArray :Array = (JSON.decode(rawData) as Array);// On peuple le DataGrid avec le résultatexempleDG.dataProvider = exempleArray ;}
� Web Services� En utilisant du MXML et en utilisant de
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.
statesService.getCountries.send();� En utilisant du MXML et en utilisant de l'ActionScript.
� Envoie / reçoit SOAP (XML)� Web Service Definition Language
(WSDL)� Echanges de quelques données
"typées“: types primitifs AS3 (Boolean, int, uint, Number, String, ...), Qelquestypes complexes du top level (Array, Date)
� Sérialisation/ Désérialisation côté Flex� Pas de type personnalisé
<mx:WebService id="statesService"
wsdl="http://www.rightactio
nscript.com/states/webservice/StatesS
ervice.php?wsdl">
<mx:operation
name="getCountries"
result="trace(statesService.getCountri
es.lastResult)"/>
</mx:WebService>
statesService.getCountries.send();
� 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 � 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
http://www.jamesward.com/census/� Données typées:� Types primitifs� Types complexes Top Level
(selon passerelle)� Types personnalisés : Value
Objects ([RemoteClass])
� 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 : PyAMFPython : 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
Exemple de Service Flash Exemple de Service Flash Exemple de Service Flash Exemple de Service Flash RemotingRemotingRemotingRemoting....
� 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 � 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.
DEMO “Streaming Video”�DEMO “Streaming Video”
� 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
� 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
� Les fonctionnalités du composants sont mélangées avec l’apparence.l’apparence.
� Difficile de se constituer une bibliothèque de composants réutilisables avec un thème graphique spécifique.
� Le composant en Action Script (Flash Builder)� Comportement
� Donnée
� Logique� Logique
� L’habillage en MXML (Catalyst)� Graphisme
� Mise en page
� Animation
� Etat
� Utilisation d’une feuille CSS pour la relation.
� Flash XML Graphics� Format de fichier graphique (SVG
enrichi …)
� Basé sur MXML (XML).
� Spécification 1.0
<s:Graphic x="0" y="0">
<s:Line xFrom="0" xTo="100"
yFrom="0" yTo="100">
<s:stroke>
<s:SolidColorStroke
color="0x000000" weight="1"/>
</s:stroke>� Spécification 1.0
� Proche du rendu du format Flash.� Objectif
� 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.
</s:stroke>
</s:Line>
</s:Graphic>
workflow d’intégration entre designers et développeur
� Outil d’intégration de contenu statique et interactif.
� Pour définir rapidement l’expérience utilisateur d’une RIA.Transformer du contenu RIA.
� Transformer du contenu statique en composants interactifs.
� Publier du contenu interactif sans une ligne de code.
� Interface familière aux designers (calques, etc ...).
� 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 � 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.
� Le nom change : Adobe Flash Builder 4
� Prise en charge un certain nombre de serveurs distants.
� Applications J2EE - BlazeDS
� Applications Php (Zend_Amf et AmfPhp)
� Introspection des services distants
� Il peut donc récupérer le profil des méthodes, reconnaître
Data Centric Development
De
velo
pm
en
t
� 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 ….
Ra
pid
Ap
plic
ati
on
De
velo
pm
en
t
�DEMO “Introspection des �DEMO “Introspection des
services distants”
� 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)
� 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, LiveCycleEnterprise 2