SlideShare une entreprise Scribd logo
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

Contenu connexe

Tendances

Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
Lilia Sfaxi
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
Lilia Sfaxi
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlinangeeLee
 
Chap1 p1-introduction
Chap1 p1-introductionChap1 p1-introduction
Chap1 p1-introduction
Moez Re
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 eechdalel
 
Les plateformes de développement des web services
Les plateformes de développement des web servicesLes plateformes de développement des web services
Les plateformes de développement des web servicesoussemos
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaoui
El Habib NFAOUI
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
Gautier DUMAS
 
Les web services
Les web servicesLes web services
Les web services
dihiaselma
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpel
Lilia Sfaxi
 
2 20 presentations_generales_des_web_services
2 20 presentations_generales_des_web_services2 20 presentations_generales_des_web_services
2 20 presentations_generales_des_web_servicesCamus LANMADOUCELO
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
Lilia Sfaxi
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
Adyax
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
Claude Coulombe
 
Introduction aux web services
Introduction aux web servicesIntroduction aux web services
Introduction aux web services
mohammed addoumi
 
HTTP et REST
HTTP et RESTHTTP et REST
HTTP et REST
Luc Trudeau
 

Tendances (20)

Tp1 - WS avec JAXWS
Tp1 - WS avec JAXWSTp1 - WS avec JAXWS
Tp1 - WS avec JAXWS
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
eServices-Tp1: Web Services
eServices-Tp1: Web ServiceseServices-Tp1: Web Services
eServices-Tp1: Web Services
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlin
 
Chap1 p1-introduction
Chap1 p1-introductionChap1 p1-introduction
Chap1 p1-introduction
 
Dotnet j2 ee
Dotnet j2 eeDotnet j2 ee
Dotnet j2 ee
 
.NET DotNet CF - 3
.NET DotNet CF - 3.NET DotNet CF - 3
.NET DotNet CF - 3
 
Les plateformes de développement des web services
Les plateformes de développement des web servicesLes plateformes de développement des web services
Les plateformes de développement des web services
 
Services web soap-el-habib-nfaoui
Services web soap-el-habib-nfaouiServices web soap-el-habib-nfaoui
Services web soap-el-habib-nfaoui
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
S51 vos projets web services ibm i a l aide de php
S51   vos projets web services ibm i a l aide de phpS51   vos projets web services ibm i a l aide de php
S51 vos projets web services ibm i a l aide de php
 
Les web services
Les web servicesLes web services
Les web services
 
eServices-Tp2: bpel
eServices-Tp2: bpeleServices-Tp2: bpel
eServices-Tp2: bpel
 
2 20 presentations_generales_des_web_services
2 20 presentations_generales_des_web_services2 20 presentations_generales_des_web_services
2 20 presentations_generales_des_web_services
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Cours 2/3 - Architecture Web
Cours 2/3 - Architecture WebCours 2/3 - Architecture Web
Cours 2/3 - Architecture Web
 
Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09Ajax en Java - GTI780 & MTI780 - ETS - A09
Ajax en Java - GTI780 & MTI780 - ETS - A09
 
Introduction aux web services
Introduction aux web servicesIntroduction aux web services
Introduction aux web services
 
HTTP et REST
HTTP et RESTHTTP et REST
HTTP et REST
 

En vedette

Dev Drink II (Flex by Navx)
Dev Drink II (Flex by Navx)Dev Drink II (Flex by Navx)
Dev Drink II (Flex by Navx)
ALTAIDE
 
Devforumfrancois Tonic
Devforumfrancois TonicDevforumfrancois Tonic
Devforumfrancois Tonic
GreenIvory
 
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
GreenIvory
 
DevCloud - Setup and Demo on Apache CloudStack
DevCloud - Setup and Demo on Apache CloudStack DevCloud - Setup and Demo on Apache CloudStack
DevCloud - Setup and Demo on Apache CloudStack
buildacloud
 
Desktop A Franke
Desktop A FrankeDesktop A Franke
Desktop A Franke
GreenIvory
 
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembertAltaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
ALTAIDE
 
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
ALTAIDE
 
Dev cloud
Dev cloudDev cloud
Dev cloud
Rajesh Battala
 
Altaide : Présentation activité recrutement
Altaide : Présentation activité recrutementAltaide : Présentation activité recrutement
Altaide : Présentation activité recrutementALTAIDE
 
Agilite Teletravail
Agilite TeletravailAgilite Teletravail
Agilite Teletravail
GreenIvory
 
20091008 Tests Interaces Web Riches Selenium
20091008   Tests Interaces Web Riches Selenium20091008   Tests Interaces Web Riches Selenium
20091008 Tests Interaces Web Riches Selenium
GreenIvory
 
Xen and Apache cloudstack
Xen and Apache cloudstack  Xen and Apache cloudstack
Xen and Apache cloudstack
The Linux Foundation
 
Web sémantique
Web sémantiqueWeb sémantique
Web sémantique
GreenIvory
 
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelleAltaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
ALTAIDE
 
Observatoire des solutions de recrutement innovant
Observatoire des solutions de recrutement innovantObservatoire des solutions de recrutement innovant
Observatoire des solutions de recrutement innovant
Jean-Baptiste Audrerie
 
Altaide les métiers du numérique, le grand capharnaüm 0316
Altaide les métiers du numérique, le grand capharnaüm 0316Altaide les métiers du numérique, le grand capharnaüm 0316
Altaide les métiers du numérique, le grand capharnaüm 0316
ALTAIDE
 
Altaide : Evolution des métiers du digital en 2015
Altaide : Evolution des métiers du digital en 2015Altaide : Evolution des métiers du digital en 2015
Altaide : Evolution des métiers du digital en 2015
ALTAIDE
 
Altaide : Les nouveaux métiers du Big Data et Cloud Computing
Altaide : Les nouveaux métiers du Big Data et Cloud ComputingAltaide : Les nouveaux métiers du Big Data et Cloud Computing
Altaide : Les nouveaux métiers du Big Data et Cloud Computing
ALTAIDE
 

En vedette (18)

Dev Drink II (Flex by Navx)
Dev Drink II (Flex by Navx)Dev Drink II (Flex by Navx)
Dev Drink II (Flex by Navx)
 
Devforumfrancois Tonic
Devforumfrancois TonicDevforumfrancois Tonic
Devforumfrancois Tonic
 
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
20091006 Dev Forum Fr 001Introduction à GWT en utilisant AppCase SDK
 
DevCloud - Setup and Demo on Apache CloudStack
DevCloud - Setup and Demo on Apache CloudStack DevCloud - Setup and Demo on Apache CloudStack
DevCloud - Setup and Demo on Apache CloudStack
 
Desktop A Franke
Desktop A FrankeDesktop A Franke
Desktop A Franke
 
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembertAltaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
Altaide comment booster sa recherche d'emploi le cv 0115 lycee alembert
 
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
Initiation à la Dégustation des Vins par Jacques Froissant (Altaide) 0214
 
Dev cloud
Dev cloudDev cloud
Dev cloud
 
Altaide : Présentation activité recrutement
Altaide : Présentation activité recrutementAltaide : Présentation activité recrutement
Altaide : Présentation activité recrutement
 
Agilite Teletravail
Agilite TeletravailAgilite Teletravail
Agilite Teletravail
 
20091008 Tests Interaces Web Riches Selenium
20091008   Tests Interaces Web Riches Selenium20091008   Tests Interaces Web Riches Selenium
20091008 Tests Interaces Web Riches Selenium
 
Xen and Apache cloudstack
Xen and Apache cloudstack  Xen and Apache cloudstack
Xen and Apache cloudstack
 
Web sémantique
Web sémantiqueWeb sémantique
Web sémantique
 
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelleAltaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
Altaide : Les clés de l'ereputation de l'enfance à la vie professionnelle
 
Observatoire des solutions de recrutement innovant
Observatoire des solutions de recrutement innovantObservatoire des solutions de recrutement innovant
Observatoire des solutions de recrutement innovant
 
Altaide les métiers du numérique, le grand capharnaüm 0316
Altaide les métiers du numérique, le grand capharnaüm 0316Altaide les métiers du numérique, le grand capharnaüm 0316
Altaide les métiers du numérique, le grand capharnaüm 0316
 
Altaide : Evolution des métiers du digital en 2015
Altaide : Evolution des métiers du digital en 2015Altaide : Evolution des métiers du digital en 2015
Altaide : Evolution des métiers du digital en 2015
 
Altaide : Les nouveaux métiers du Big Data et Cloud Computing
Altaide : Les nouveaux métiers du Big Data et Cloud ComputingAltaide : Les nouveaux métiers du Big Data et Cloud Computing
Altaide : Les nouveaux métiers du Big Data et Cloud Computing
 

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

Adobe flex®
Adobe flex®Adobe flex®
Adobe flex®
finalspy
 
RIA
RIARIA
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Gaëtan LAVENU
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsVincent Perrin
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
Tugdual Grall
 
education
educationeducation
education
guestb6689d
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
DNG Consulting
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
Frédéric Queudret
 
Formation adobeflex
Formation adobeflexFormation adobeflex
Formation adobeflex
Cynapsys It Hotspot
 
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hindguendouz2000
 
Cours architecture
Cours architectureCours architecture
Cours architecture
Abdelaziz Elbaze
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applicationsgoldoraf
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
david deraedt
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Frédéric Harper
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
HINDGUENDOUZ
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
Microsoft
 

Similaire à Flex, une techno RIA incontournable pour les futures app web ? (20)

Adobe flex®
Adobe flex®Adobe flex®
Adobe flex®
 
RIA
RIARIA
RIA
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
education
educationeducation
education
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009Silverlight 3.MSDays EPITA 11/06/2009
Silverlight 3.MSDays EPITA 11/06/2009
 
Formation adobeflex
Formation adobeflexFormation adobeflex
Formation adobeflex
 
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
xml-webservices-intro.pdfhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
 
Cours architecture
Cours architectureCours architecture
Cours architecture
 
Rich Desktop Applications
Rich Desktop ApplicationsRich Desktop Applications
Rich Desktop Applications
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
Fondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application FlexFondamentaux d'architecture d'une application Flex
Fondamentaux d'architecture d'une application Flex
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbWebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
WebServices.pdfbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
 
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
 

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

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