Flex

une technologie RIA

incontournable pour

les applications web ?

AhmedAhmedAhmedAhmed ELELELEL HOUARIHOUARIHOUARIHOUARIEmailEmailEmailEmail :::: AhmedAhmedAhmedAhmed (at)(at)(at)(at) wenoviawenoviawenoviawenovia....comcomcomcom

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,

critique, …)

� Son expérience (.Net, Java, ActionScript, Php)

� FlexFlexFlexFlex + + + + Zend_AMFZend_AMFZend_AMFZend_AMF + Zend Framework+ Zend Framework+ Zend Framework+ 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"

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)

� Code coverage :FlexCover

� Quality :AS3NCSS, FlexPDM (clone Java), ASDocs� Design Patern Architecture

� MVC : Cairngorm ou PureMVC

� Compilateur AS3 en ligne� Compilateur MXML en ligne� Debugger en ligne� Flex Class Library

Flex SDK 3

Flex Class Library

MXML ActionScript

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

Debuggers

http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

SOURCE MXML et Action Script 3Flex Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Flex Class Library

Compile

DEMO “Hello World”�DEMO “Hello World”

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

� HTTPService• Requêtes HTTP(s)• URLencoding, (couple identifiant/valeur

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.

countryService.send();• URLencoding, (couple identifiant/valeur

voir XML)• Script / Page ASP, JSP, PHP, ...• Services REST• Les données échangées ne sont pas

typées.• Ou JSON (typage des données) , il faut

adjoindre à votre projet la librairie “corlib” : http://code.google.com/p/as3corelib/pour sérialiser/désérialiser vos data Json.

<mx:HTTPService

id="countryService"

url=“data/countries.xml"/>

<mx:ComboBox id="country"

dataProvider="{countryService.la

stResult.countries.country}"/>

<countries><country>Sélectionner</country><country>France</country><country>English</country></countries>

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

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

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

<mx:RemoteObject id="ro"

destination="helloworld"

result="resultHandler(event)" />

ro.sayHelloTo(inputText.text); package hello;

public class HelloWorld {

public String sayHelloTo(String str) {

System.out.println("Hello " + str);

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" default="true"/></adapters><default-channels><channel ref="my-amf"/></default-channels><destination id="helloworld"><properties><source>hello.HelloWorld</source></properties></destination></service>

return "Hello " + str;

}

}

Solution basée sur

Serveur Tomcat

Serveur Blaze-DS (war à configurer dans

le projet / Eclipse Flex Builder )

Création du fichier de config :

WEB-INF/flex/remoting-config.xml

http://www.javabeat.net/articles/print.php

?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 � 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

techniques traditionnels :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'ecranexploitable 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 …� 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 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.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

� Merci de votre écoute

� Ahmed EL HOUARI� Ahmed EL HOUARI

� ahmed @ wenovia.com