Flex, une techno RIA incontournable pour les futures app web ?

  • 4,541 views
Uploaded on

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 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,541
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
130
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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”
  • 41. 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
  • 42. Merci de votre écoute Ahmed EL HOUARI ahmed @ wenovia.com