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

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

Fin de Ajax, la RIA Incontournable ? 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 Perspectives de la RIA Flex Q/R

Le contexte du projet Pourquoi la RIA Le choix d’une technologie 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 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 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)

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()); } }

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.

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

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.

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.

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

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

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

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

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

DEMO “Hello World”

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.

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>

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>

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é

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])

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

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

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.

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 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)

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é.

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

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

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.

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.

<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.

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 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 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 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 ….

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) 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

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

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

by GreenIvory on Nov 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 36

Statistics

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

http://www.slideshare.net	26
http://www.flexair.fr	10