Mon retour d’expérience



           &
Ah, désolé je parle franglais…

              &


              &
François Le Droff

• “Just another Java guy” (doing Flex)

   – +11 ans d’expérience (web 1+n.0)
   – OSS geek :
       • ...
Et vous ?
•   Architectes ? Dévelopeurs ?
•   Vos attentes ?
•   Java ?
     – Spring, ORM, JEE ?
     – UnitTest (JUnit, ...
Agenda
• La plateforme: Flash, AIR, SDK Flex

• Flex Java : la plomberie

• Flex : Qualité, Architecture et usine logiciel...
La plateforme:
                     Flash,
                     AIR,
                     SDK Flex




                   ...
RIA : les défis techniques
                           Web 1.0 application                                                 ...
La révolution: le Flash Player un socle applicatif

                                                                     ...
La technologie Flash a +13 ans

                                          Animation

                                     ...
Demonstrations
                          Flash 10




                                                                    ...
RIA sur le bureau

                          AIR




                                                                  ®
...
Une génération d’avance…




                    Adobe AIR est un nouvel environnement d’exécution multi-
                ...
Adobe AIR 1.5: Fonctionnalités



        Gestion du HTML avec WebKit                                 Ressources locales

...
Online / Offline
                                                                                     ®




Copyright 2008...
Pourquoi les RIA sur le bureau ?
                               Connection permanente                         Personnalisa...
Demonstrations




             next

                                                                        ®




      ...
Desktop Rich Internet Applications “On AIR”




                Deploying to the Desktop with
                            ...
Parleys.com




                                                                    ®




  Copyright 2008 Adobe Systems I...
NY times




                                                                    ®




  Copyright 2008 Adobe Systems Inco...
RIA sur le mobile

        Flash Player 10


        Michaël CHAIZE
        mchaize@adobe.com




                     ...
Deux problématiques à résoudre



                  Web                                                          Standalon...
Open Screen Project




                                                                        ®




                    ...
The RIA leader technology: Adobe Flex



                                                          ADOBE FLEX 4
          ...
Fonctionnement et déploiement


                Flex Builder IDE                                                        Br...
Adobe Flex Builder 3 Flash Builder 4

   IDE basé sur Eclipse
           Code hinting, debuging
           Vue Design W...
Fonctionnement et déploiement


                Flex Builder IDE                                                     Brows...
Adobe Flash Builder




                                                                                        ®




Copy...
Adobe Flash Builder 4 – Améliorer la productivité
    Nouveautés :
       Expérience de coding
                   Suppor...
Adobe Flash Builder 4 – Intégration de services distants
   Nouveautés:
       Introspection de services
          Assis...
“In front of the glass” Flex !
“Behind the glass” Java !




                                                             ...
FLASH PLAYER                                            FLEX 3 SDK                     LIVECYCLE DATA SERVICES




     Fl...
Flex Back-end
 Integration




                                                                       ®




              ...
LiveCycle Data Services ES

                                                                       LiveCycle Data Services...
Qu’est ce que BlazeDS?

BlazeDS est un sous-ensemble Open Source                                            BlazeDS
      ...
LCDS.war

Un fichier LCDS.war est fourni pour démarrer vos projets Flex / Java.

     Structure du WAR:
              +W...
Architecture Entreprise et Adobe


    Client
    Application
    Tier




                      HTTP REST XML            ...
Flex :
    XML sur HTTP
    mx:HTTPService




                                                                       ®


...
Flex :
    SOAP
    mx:WebService




                                                                       ®




       ...
Flex et les serveurs
    d’application Java
    Remoting, Messaging et Data
    Management




                           ...
Remoting
   mx: RemoteObject




                                                                       ®




            ...
Flex Remoting Service
• Permet aux applications clients d’appeller à distance
  (remoting) des méthodes sur des objets dép...
Flex Remoting 101
<mx:RemoteObject id="srv" destination="product"/>
<mx:Button label="Get Data" click="srv.getProducts()"/...
Class Mapping & Serialization/Deserialization

       L’annotation AS3 [RemoteClass] fournit l’information de mapping


 ...
Conversion de types Java/AS3

Java type                    ActionScript type (AMF 3)                    Java type         ...
Mapping personnalisé entre ActionScript et Java

• Si les mécanismes standards de sérialisation et de
  désérialisation de...
Messaging
            mx: Producer
            mx:Consumer



                                                            ...
Publish/Subscribe Messaging




                         Livecycle Data Services


Client A



                           ...
Demo: Chat




             49
Messaging - Data Push




                 LiveCycle Data Services

                                                      ...
Data Management




                                                                       ®




                         ...
Travailler avec des données:
Le mode traditionnel du HTML (page)

                                                        ...
Le modèle de la RIA




                      data                                        data   data



     Le client p...
L’approche de LiveCycle Data Services




                                                                  Data
         ...
L’approche de LiveCycle Data Services




                                                                                ...
Data Services


                                                                  LiveCycle Data Services



             ...
LiveCycle Data Services 3.0 Themes
1. Most productive and powerful solution for building
   data driven applications using...
Code-Driven Development




                                          Code
                                          •UI c...
Fiber: LCDS Model-Driven Development


                                          Code
                                    ...
LCDS Model-Driven Development

                                                Model authoring and deployment
            ...
LCDS Model Driven Development Benefits

Productivity: Less code to write
•   No persistence code or data sync code
•   Val...
Real Time Platform

Existing in LCDS 2.6
• Publish/Subscribe messaging infrastructure
• JMS integration
• Scalable channel...
Channels




                                                                       ®




                                ...
Les Channels dans LiveCycle Data Services ES




                                               64
Quels canaux utiliser pour le temps réel ?

    Channel           Description            Les Plus             Les Moins


...
Quels canaux utiliser pour le temps réel ? (LCDS)

         Channel                      Description                  Les ...
Adobe Flash Catalyst




                                                                  ®




Copyright 2008 Adobe Syst...
Le modèle de composant de Flex 3



                                                                  Component / Skin



...
Le modèle de composant de Flex 4 : MVC

                        ActionScript                                            MX...
Format FXG                 Design interactif    Projet FXP   Flash Builder 4
Prototypage                                  ...
FXG (XML Graphics for Flex)




      <s:Rect y="141.5" x="268.5" height=”50" width=”50">
         <s:fill>
           <s:...
FXG (XML Graphics for Flex)




             <fx:DesignLayer d:userLabel="Layer 1">
             <s:Rect y="141.5" x="268....
FXG (XML Graphics for Flex)




           <fx:DesignLayer d:userLabel="Layer 1">
           <s:Rect y="-35.5" x="290.5" h...
FXG (XML Graphics for Flex)
     <s:states>
          <s:State name="up"/>
          <s:State name="over"/>
          <s:S...
Workflow Flash et Flash Builder



   Depuis Flash CS3 (Flex Component Toolkit)
   Export au format SWC et intégration d...
Demo




                                                                  ®




Copyright 2008 Adobe Systems Incorporated...
®




Copyright 2008 Adobe Systems Incorporated. All rights reserved.
®




Copyright 2008 Adobe Systems Incorporated. All rights reserved.
Flex : Qualité, Architecture et usine logicielle
                  « à la Java »
La Qualité du code
• Retour sur la Qualité Logicielle Java
    – http://www.slideshare.net/francoisledroff/soire-qualite-l...
Automatisation du processus de construction en Flex
Automatisation du processus de construction en Flex
• Ant :
   – FlexAntTasks
      • Ant : Antennae
• Maven :
   • Flex-m...
Automated docs and reports
Automatisation du processus de construction en Flex:
              gestion des dépendances
Managing Dependencies
• Maven (or Ant + Ivy)
Managing Dependencies
Nexus, gestionnaire de référentiel d’artefact de
                       construction


• Externalisez vos artefacts (jar, ...
Stratégie des test unitaires en Flex
Stratégie des test unitaires en Flex

• Retour sur nos « meilleures pratiques » de test
     – http://www.jroller.com/fran...
Our Agile Testing Principles.


                            Test Everything –Frameworks,
   Accept and Minimize
          ...
Flex - Testing Concerns Separately
    AccidentWizardView Presentation Graphic Layer
  VehicleDescriptorView        MXML  ...
FlexUnit
Flex Unit
•   http://opensource.adobe.com/wiki/display/flexunit/FlexUnit
FlexUnit4
• FlexUnit 4 (merge de Fluint et FlexUnit0.9)
       • très similaire à JUnit 4
       • Intégré à Flash Builder...
FlexUnit4
• FlexUnit 4 (suite cf. http://docs.flexunit.org/index.php?title=FlexUnit4FeatureOverview )
FlexUnit within your Build
• FlexUnit   within your build
Les bouchons de test Flex
Au delà de FlexUnit : Les bouchons
Hamcrest
        http://github.com/drewbourne/hamcrest-as3#readme
        containing ...
Flex Unit Tests Code Coverage
Code Coverage – FlexCover
http://code.google.com/p/flexcover
Flexcover – Emma report -headless agent for CI builds
http://www.eyefodder.com/blog/2009/07/flex_code_coverage_process_par...
FlexUnit & Flexcover – in Continuous Integration
Flex Functional Testing
Flex Functional Testing
• Functional Testing
  – RiaTest http://www.riatest.com/video/getting-started/index.html
Flex Functional Testing
•   Functional Testing (suite)
    – Selenium for Flash
    – FlexMonkey (http://www.gorillalogic....
Analyse statique de code Flex
Analyse statique de code: FlexPMD
• FlexPMD

• Ce projet est hébergé sur opensource.adobe.com sous license BSD.
• Comme so...
Analyse statique de code: FlexPMD
• FlexPMD dans cette première mouture vient avec 83 règles, ces règles
  vous permettron...
Analyse statique de code: FlexPMD
• FlexPMD
  – Personalisable selon vos besoins
      • http://opensource.adobe.com/svn/o...
Analyse statique de code: FlexPMD
• FlexPMD
  – Intégré
     • Mac automator :
         – http://www.youtube.com/watch?v=C...
• FlexPMD   within your build
Analyse statique de code: FlexPMD
• FlexPMD Eclipse plugin
•   http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Ec...
Analyse statique de code: FlexCPD

• FlexCPD : Détection de copié-collé
Analyse statique de code: FlexMetrics

• FlexMetrics
Intégration continue
Intégration continue




http://www.octo.com/Java-Productivity-Primer.10/Publications
les contrôles industrialisés
•   mise en place des règles de style de code
•   rapport de tests unitaires
•   rapport de l...
Intégration continue: Hudson
Hudson Quality reports
– Automated Unit and functional test
    • TestNG
    • FlexUnit
    • FlexMonkey and or RIATest
– ...
Dashboard Qualité Flex
Hudson Flex unit Dashboard
Dashboard Qualité : Sonar

• Présentation de Sonar
  – http://www.parisjug.org/xwiki/bin/download/Meeting/20090915/2009-15...
Dashboard Qualité : Sonar

• Sonar
Dashboard Qualité : Sonar

• Sonar Flex plugin
  – http://docs.codehaus.org/display/SONAR/Sonar+Flex+Plugin
Questions ?
Flex & Java @ TourJUG
Upcoming SlideShare
Loading in...5
×

Flex & Java @ TourJUG

1,832

Published on

ma présentation au TourJUG
Retour d'expérience Flex & Java

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,832
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Flex & Java @ TourJUG

  1. 1. Mon retour d’expérience &
  2. 2. Ah, désolé je parle franglais… & &
  3. 3. François Le Droff • “Just another Java guy” (doing Flex) – +11 ans d’expérience (web 1+n.0) – OSS geek : • membre de l’ossgtp, du ParisJUG, et TTFX • conférencier à MAX, et Solution Linux • blogs : – http://www.droff.com – http://blogs.adobe.com/francoisledroff/ • ledroff@adobe.com
  4. 4. Et vous ? • Architectes ? Dévelopeurs ? • Vos attentes ? • Java ? – Spring, ORM, JEE ? – UnitTest (JUnit, TestNG, …) ? – Functional test (Selenium…) ? – Ant and/or Maven ? – Hudson, CC ? • Flex ? – ActionScript MXML – Flex Remoting, AMF – And may be • BlazeDS, LCDS • FlexUnit , RIATest, FlexMonkey • Cairngorm, Parsley, Mate, SpringActionScript
  5. 5. Agenda • La plateforme: Flash, AIR, SDK Flex • Flex Java : la plomberie • Flex : Qualité, Architecture et usine logicielle « à la Java »
  6. 6. La plateforme: Flash, AIR, SDK Flex ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  7. 7. RIA : les défis techniques Web 1.0 application Rich Internet Application • Meilleurs temps de réponse • Bande Passante allégée • Charge Serveur diminuée • Moins de tests <page> <page> <page> <page> <data> <page> <page> <page> <application> ® 8 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  8. 8. La révolution: le Flash Player un socle applicatif  Performances LaVM a été réécrite intégralement avec un compilateur JIT  ActionScript 3 (100% ECMA-262)  Support total sur Windows, Mac et Linux  Nouvelle machine virtuelle : AVM2 Conçuepour être rapide tout en consommant un minimum de mémoire Coexiste avec la AVM1  AVM2 est un projet Open Source  Avec la communauté Mozilla (projet Tamarin)  Text layout engine ® 9 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  9. 9. La technologie Flash a +13 ans Animation Interactivité Rich Media Applications ® 10 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  10. 10. Demonstrations Flash 10 ® 11 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  11. 11. RIA sur le bureau  AIR ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  12. 12. Une génération d’avance… Adobe AIR est un nouvel environnement d’exécution multi- plateformes qui permet aux développeurs d’utiliser leurs connaissances en développement d’applications web pour réaliser et déployer des applications riches sur le bureau. ® 13 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  13. 13. Adobe AIR 1.5: Fonctionnalités Gestion du HTML avec WebKit Ressources locales Flash Player 10 Online/offline détection Intégration HTML/Flash/PDF Drag-and-drop Base de données SQLite Accès au Clipboard Background processing Gestion multi-fenêtres Custom window chrome Transparent applications More… ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  14. 14. Online / Offline ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  15. 15. Pourquoi les RIA sur le bureau ? Connection permanente Personnalisation Puissance du desktop Accès aux données Développement optimisé ® 16 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  16. 16. Demonstrations next ® 17 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  17. 17. Desktop Rich Internet Applications “On AIR” Deploying to the Desktop with AIR ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  18. 18. Parleys.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  19. 19. NY times ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  20. 20. RIA sur le mobile  Flash Player 10  Michaël CHAIZE  mchaize@adobe.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  21. 21. Deux problématiques à résoudre Web Standalone Browsing Applications YouTube.com ® 22 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  22. 22. Open Screen Project ® 23 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  23. 23. The RIA leader technology: Adobe Flex ADOBE FLEX 4 Action Script 3 MXML Free, open source framework Less time needed to develop Expressive, highly interactive apps X-platform, consistent deployment ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  24. 24. Fonctionnement et déploiement Flex Builder IDE Browser Flex SDK Flash Player MXML ActionScript Flex Class Library SOAP HTTP/S AMF/S RTMP/S Web Server Compile XML/HTTP LC Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  25. 25. Adobe Flex Builder 3 Flash Builder 4  IDE basé sur Eclipse  Code hinting, debuging  Vue Design WYSIWYG  Communication avec la CS3  Profilers de Memoire et Performance  SDK FB : Charting components, advanced datagrid  Support des tests ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  26. 26. Fonctionnement et déploiement Flex Builder IDE Browser Flex SDK Flash Player MXML ActionScript Flex Class Library SOAP HTTP/S AMF/S RTMP/S Web Server Compile XML/HTTP LC Data Services REST SOAP Web Services J2EE Application Server Existing Applications & Infrastructure ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  27. 27. Adobe Flash Builder ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  28. 28. Adobe Flash Builder 4 – Améliorer la productivité Nouveautés :  Expérience de coding  Support de modèles  Génération de gestionnaire d’événements  Génération des Getter/setter  Aide Tooltip en ASDoc  Vue de code par States  Package explorer  Développement agile  Tests unitaires  Builds en ligne de commande  Nouveau: Network monitor  Amélioration du debugging, profiling et ® du re-factoring Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  29. 29. Adobe Flash Builder 4 – Intégration de services distants Nouveautés:  Introspection de services  Assistants d’introspection et tests d’appel d’opération  Génération automatique de code “exemple” SOA RES côté serveur P T  Vue du modèle de données  Configuration visuelle des services  Support du Data management et du paging  Génération de composants et binding  Génération automatique de formulaires  Data-binding par glisser - déposer ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  30. 30. “In front of the glass” Flex ! “Behind the glass” Java ! ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  31. 31. FLASH PLAYER FLEX 3 SDK LIVECYCLE DATA SERVICES Flash Player 9 ou 10 Gratuit, framework open source LiveCycle Data Services 12 ans d’existence Flex Builder basé sur Eclipse Data intensive applications 98% des PC équipés Framework MVC Meilleures perfs du marché Langage objet AS3 Accessibilité, Test unitaire, Debug Remoting architecture AVM2 JIT Compiler Component based programming Messaging and Data Push Open Source: Tamarin Dévelopment rapide Data Management Services Offline synchronization ® 32 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  32. 32. Flex Back-end Integration ® 33 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  33. 33. LiveCycle Data Services ES LiveCycle Data Services ES LiveCycle Data Services est un Service Data Management Adapters ensemble de composants J2Ee et d’API Data Synchronization LiveCycle utilisés pour: Off-line Applications  Créer des RIA qui manipulent énormément de Data Paging ColdFusion données avec un minimum de code, et accélérer la mise en production en RPC Services Hibernate programmant sur un modèle client-serveur. Web Service HTTP Service SQL  Intégrer une RIA avec des applications Remote Object Service existantes de l’infrastructure J2EE. JMS Messaging  Intégrer facilement des RIA avec des Publish & Subscribe Java processus documentaires LiveCycle. Collaboration  Développer des application collaboratives, Real Time Data Push Custom… gérer la synchronisation offline, gérer le Proxy Service temps réel. Web-tier Compiler  Générer des PDF à la demande qui intègrent Portal Deployment des éléments graphiques. RIA-PDF Generation ® 34 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  34. 34. Qu’est ce que BlazeDS? BlazeDS est un sous-ensemble Open Source BlazeDS Service (LGPL) de LCDS. C’est une solution de Data Management Adapters Remoting et de HTTP messaging. Data Synchronization LiveCycle Off-line Applications Data Paging ColdFusion  Gratuit et Open Source RPC Services Hibernate Web Service  Ouverture du format d’échange de données AMF3 (Action Message Format) HTTP Service SQL Remote Object Service  Technologie de messaging sur le standard JMS HTTP (équivalent de Comet) Messaging  Builds certifiées, support entreprise disponible Publish & Subscribe Java (LC Community Edition) Collaboration Custom… Real Time Data Push Proxy Service Web-tier Compiler Portal Deployment RIA-PDF Generation ® 35 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  35. 35. LCDS.war Un fichier LCDS.war est fourni pour démarrer vos projets Flex / Java.  Structure du WAR:  +WEB-INF/classes Pour placer ses classes Java  +WEB-INF/lib Contient les librairies Java de LCDS  +WEB-INF/flex Contient les fichiers XML de configuration  Remoting-config.xml Destinations vers les classes Java  Messaging-config.xml Destinations pour le messaging  Data-Management-config.xml Destinations vers les assemblers  Proxy-config.xml Destinations vers les services HTTP  Services-config.xml Configuration des canaux ® 36 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  36. 36. Architecture Entreprise et Adobe Client Application Tier HTTP REST XML SOAP WebService AMF DATA RTMP MESSAGE CLOUD HTTP API Couche d’invocation des services GENERER ET CAPTURER GERER DES PDF L’INFORMATION Business Rules/ Service Tier Repository Service Container Core Services LIVECYCLE PROCESS Workflow MANAGEMENT PROTEGER GERER LE VOLUME & BAM L’INFORMATION DE DONNEES Interface de prestation de service Bases de Messages Resource Tier ERP LEGACY GEIDE données Queues ® 37 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  37. 37. Flex : XML sur HTTP mx:HTTPService ® 38 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  38. 38. Flex : SOAP mx:WebService ® 39 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  39. 39. Flex et les serveurs d’application Java Remoting, Messaging et Data Management ® 40 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  40. 40. Remoting mx: RemoteObject ® 41 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  41. 41. Flex Remoting Service • Permet aux applications clients d’appeller à distance (remoting) des méthodes sur des objets déployés sur votre serveur d’application • L’information de Type est maintenue • Données compréssées et binaires • Bénéfices : – Facilité de programmation – et performance (pas de double transformation XML double) ®
  42. 42. Flex Remoting 101 <mx:RemoteObject id="srv" destination="product"/> <mx:Button label="Get Data" click="srv.getProducts()"/> <mx:DataGrid dataProvider="{srv.getProducts.lastResult} "/> • remoting-config.xml <destination id="product"> <properties> <source>flex.samples.ProductService</source> </properties> </destination> • ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  43. 43. Class Mapping & Serialization/Deserialization  L’annotation AS3 [RemoteClass] fournit l’information de mapping Product.as Product.java [RemoteClass(alias="flex.samples.Pr oduct")] public class Product { public class Product { public var id:int; private int id; public var name:String; private String name; public var description:String; private String description; public var price:Number; private double price; public var qtyInStock:int; private int qtyInStock; } // getters and setters } ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  44. 44. Conversion de types Java/AS3 Java type ActionScript type (AMF 3) Java type ActionScript type (AMF 3) java.lang.String String java. math.BigInteger String java.math.BigDecimal String java.lang.Boolean, boolean Boolean Date - Dates are sent in the Coordinated Universal Time (UTC) time zone. Clients java.util.Calendar Int - If value < 0xF0000000 || value > and servers must adjust time accordingly 0x0FFFFFFF, the value is promoted to for time zones. java.lang.Integer, int Date - Dates are sent in the UTC time Number due to AMF encoding requirements. java.util.Date zone. Clients and servers must adjust time accordingly for time zones. int - If i < 0xF0000000 || i > 0x0FFFFFFF, java.lang.Short, short the value is promoted to Number. java.util.Collection (for mx.collections.ArrayCollection example, java.util.ArrayList) Int - If i < 0xF0000000 || i > 0x0FFFFFFF, java.lang.Byte, byte[] the value is promoted to Number. java.lang.Object[] Array Object (untyped). For example, a java.lang.Byte[] flash.utils.ByteArray java.util.Map java.util.Map[] is converted to an array (of objects). java.lang.Double, double Number java.util.Dictionary Object (untyped) java.lang.Long, long Number org.w3c.dom.Document XML object java.lang.Float, float Number null null Typed Object - Objects are serialized by java.lang.Character, char String using JavaBean introspection rules and java.lang.Object (other than also include public fields. Fields that are previously listed types) static, transient, or nonpublic, as well as java.lang.Character[], char[] String bean properties that are nonpublic or static, are excluded. 45
  45. 45. Mapping personnalisé entre ActionScript et Java • Si les mécanismes standards de sérialisation et de désérialisation de données entre ActionScript (client) et Java (server) ne sont pas satisfaisants: – Vous pouvez implémenter l’interface ActionScript sur le client grâce à flash.utils.Iexternalizable – Vous pouvez créer la correspondance Java et écrire votre propre schéma de sérialisation avec java.io.Externalizable
  46. 46. Messaging mx: Producer mx:Consumer ® 47 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  47. 47. Publish/Subscribe Messaging Livecycle Data Services Client A Message Endpoint Service Client B RTMP Client C AMF HTTP Publisher Subscriber 48
  48. 48. Demo: Chat 49
  49. 49. Messaging - Data Push LiveCycle Data Services Messaging Adapter X System X Message JMS Endpoint JMS Adapter Services Provider Messaging Adapter Y System Y RTMP AMF HTTP Publisher Subscriber 50
  50. 50. Data Management ® 51 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  51. 51. Travailler avec des données: Le mode traditionnel du HTML (page) Persistence Solutions: Hibernate JDOs EJB 3 Others… data data  Le client est souvent utiliser pour capturer de la données et l’affichage  Le client ne conserve pas une version de la donnée  Pas de réelle manipulation de données côté client  Les données doivent être snchronisées entre le middle-tier et la base ® 52 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  52. 52. Le modèle de la RIA data data data  Le client possède une version de la donnée  Manipulation riche des données côté client  La donnée doit être synchronisée entre le tiers client, le middle-tier ET entre le middle-tier et la base ® 53 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  53. 53. L’approche de LiveCycle Data Services Data Service data data Client-Side API:  Flags changes (create, update, delete)  Maintient une version d’origine de la donnée pour appliquer la stratégie de locking  Envoie une liste de changement à LCDS dans un groupe de messages  Gère les conflits, les accès concurrents ® 54 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  54. 54. L’approche de LiveCycle Data Services Object Hibernate Data Service JDBC ColdFusion data data Custom Data Service:  Désérialise la liste des changements qui proviennent du client  Sérialise les données avant de les données au client  Passe la liste des changement au bon adapter  Notifie les clients qui sont abonnés à la destination Adapter:  Effectue les changements  Identifie les conflits  Passe les résultats à Data Services ® 55 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  55. 55. Data Services LiveCycle Data Services JDBC RDBMS Client A Adapter Endpoint Data Object Adapter DAO Service Client B Hibernate Adapter Hibernate CFC Client C Adapter ColdFusion ® 56 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  56. 56. LiveCycle Data Services 3.0 Themes 1. Most productive and powerful solution for building data driven applications using Fiber (aka LCDS Rich Model Driven Development) 2. Most scalable and reliable infrastructure for web- based real time messaging applications 3. Open platform providing tight integration with existing Enterprise solutions
  57. 57. Code-Driven Development Code •UI controls / formatters / styles • Calculated fields • Validation Rules • Variants (conditional properties) • Localization • Security • Data Retrieval Logic (paging, lazy loading) • Data Synchronization Logic Model •Basic Data Description Model Server-side code Client-side code
  58. 58. Fiber: LCDS Model-Driven Development Code • Ad-hoc customization • View composition • External business/validation logic Model • Rich data model (data and behaviors) • Calculated fields • Validation Rules • Variants (conditional properties) • Localization • Security • UI hints/defaults: controls, formatters, styles Model Server-side code Client-side code Model includes enough information to derive data retrieval, persistence, and synchronization logic
  59. 59. LCDS Model-Driven Development Model authoring and deployment Model-aware gestures and artifacts (ie. Model-driven forms) Tools Model Code Runtime Gen Code gen of boilerplate code (value Model-aware runtimes support dynamic objects, stubs, etc.) model interpretation (no code gen needed)
  60. 60. LCDS Model Driven Development Benefits Productivity: Less code to write • No persistence code or data sync code • Value objects and service stubs are automatically generated Maintainability: Less code to maintain • Changes to the model are automatically propagated Consistency • Between client and server (for example, constraints and validation rules are defined in the model, not duplicated using different languages in the client and the server) • Across views (for example, UI controls, styles, and validation rules are defined in the model, not duplicated across different views) Approachability • No code to write to implement complex capabilities such as persistence, synchronization, paging, lazy loading, offline, etc. Innovation: • Offline and client synchronization capabilities • Model is language independent and can be leveraged by different client technologies and tools (Flex, PDF, etc)
  61. 61. Real Time Platform Existing in LCDS 2.6 • Publish/Subscribe messaging infrastructure • JMS integration • Scalable channels: RTMP and NIO streaming / long polling • Per-client QoS New in LCDS 3 • Reliable messaging • Throttling • Edge Server
  62. 62. Channels ® 63 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  63. 63. Les Channels dans LiveCycle Data Services ES 64
  64. 64. Quels canaux utiliser pour le temps réel ? Channel Description Les Plus Les Moins Poll roundtrip Poll ~ 1 min overhead AMF Server parks poll Works with firewalls Long Polling Servlet API blocking until data available IO HTTP proxies can Server pushes No polling overhead swallow messages Streaming AMF infinite messages Servlet API (HTTP Chunk) Works with firewalls blocking IO AMF Messages/ Works with firewalls Simple polling request/response Piggyback Enabled piggybacking 65
  65. 65. Quels canaux utiliser pour le temps réel ? (LCDS) Channel Description Les Plus Les Moins RTMP (in a ChannelSet with fallback to Single duplex Immediate notification Non standard port NIO AMFChannel configured to connection when a client is closed blocked by firewalls Long Poll) Better scalability and no NIO AMF Uses an NIO server configured upper bound Requires more network Long Polling and minimal HTTP on no. of parked poll configuration (no fallback) stack 1000s of clients requests NIO Streaming AMF Better scalability and no Uses an NIO server (in a ChannelSet followed configured upper bound and minimal HTTP Same as above by the polling AMFChannel on the number of stack 1000s of clients below for fallback) streaming connections NIO AMF Uses an NIO server Simple polling and minimal HTTP Same as above Same as above Piggyback Enabled stack 1000s of clients 66
  66. 66. Adobe Flash Catalyst ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  67. 67. Le modèle de composant de Flex 3 Component / Skin Graphics Layout Animation Parts States Behavior Logic Data ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  68. 68. Le modèle de composant de Flex 4 : MVC ActionScript MXML Component Skin Graphics Behavior Layout Logic CSS Animation Data properties Parts States Séparation complète de l’apparence et des fonctionnalités ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  69. 69. Format FXG Design interactif Projet FXP Flash Builder 4 Prototypage Prototypage Format FXG Maquette ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  70. 70. FXG (XML Graphics for Flex) <s:Rect y="141.5" x="268.5" height=”50" width=”50"> <s:fill> <s:SolidColor color="#bf8f8f"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  71. 71. FXG (XML Graphics for Flex) <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="141.5" x="268.5" height="333" width="281"> <s:fill> <s:SolidColor color="#bf8f8f"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  72. 72. FXG (XML Graphics for Flex) <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="-35.5" x="290.5" height="333" width="281"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x990000" alpha="1" ratio="0" /> <s:GradientEntry color="0xD5D5D5" alpha="1" ratio="1" /> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  73. 73. FXG (XML Graphics for Flex) <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <fx:DesignLayer d:userLabel="Layer 1"> <s:Rect y="-35.5" x="290.5" height="333" width="281"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0x990000" color.down=“0x77DD66” alpha="1" ratio="0" /> <s:GradientEntry color="0xD5D5D5" color.down=“0x1100DD” alpha="1" ratio="1" /> </s:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0x4769C4" caps="none" joints="miter" miterLimit="4" weight="1"/> </s:stroke> </s:Rect> </fx:DesignLayer> ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  74. 74. Workflow Flash et Flash Builder  Depuis Flash CS3 (Flex Component Toolkit)  Export au format SWC et intégration dans Flex Builder  Workflow toujours possible avec Flash Builder ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  75. 75. Demo ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  76. 76. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  77. 77. ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  78. 78. Flex : Qualité, Architecture et usine logicielle « à la Java »
  79. 79. La Qualité du code • Retour sur la Qualité Logicielle Java – http://www.slideshare.net/francoisledroff/soire-qualite-logicielle-paris-jug-tour- dhorizon-des-outils-open-source • Avant de voir comment l’appliquer aux projets Flex
  80. 80. Automatisation du processus de construction en Flex
  81. 81. Automatisation du processus de construction en Flex • Ant : – FlexAntTasks • Ant : Antennae • Maven : • Flex-mojos • Alternatives : • ServeBox (Projet Français) • and Israfil • Archetypes – FlexMojos V3 est un projet sonatype – Sonatype et Adobe travaillent ensemble pour le support FB dans m2eclipse
  82. 82. Automated docs and reports
  83. 83. Automatisation du processus de construction en Flex: gestion des dépendances
  84. 84. Managing Dependencies • Maven (or Ant + Ivy)
  85. 85. Managing Dependencies
  86. 86. Nexus, gestionnaire de référentiel d’artefact de construction • Externalisez vos artefacts (jar, war, ear, swf, swc…) de votre GCL • Publier les sur un repository commun d’entreprise
  87. 87. Stratégie des test unitaires en Flex
  88. 88. Stratégie des test unitaires en Flex • Retour sur nos « meilleures pratiques » de test – http://www.jroller.com/francoisledroff/entry/automated_testing_and_quality_control • Test unitaires : FlexUnit • Les bouchons de test • Couverture de test : FlexCover • Les Tests fonctionnels
  89. 89. Our Agile Testing Principles. Test Everything –Frameworks, Accept and Minimize Integration etc. Untestable Code Test Concerns Separately Test Many Things At Once
  90. 90. Flex - Testing Concerns Separately AccidentWizardView Presentation Graphic Layer VehicleDescriptorView MXML UIComponent DisplayObject Presentation Behavior Layer AccidentWizardPM VehicleDescriptorPM Presentation Models Utilities Customer Domain / Application Layer CarCompany Utilities / Domain Models Application Models Factories IncidentDescriptor Persistence Layer SaveReportCommand Commands / Brokers / DataModels Translators / Utilities IncidentReportTranslator Delegates “saveReport” Persistence Definition Layer RemoteObject Network Access File Access LocalConnection
  91. 91. FlexUnit
  92. 92. Flex Unit • http://opensource.adobe.com/wiki/display/flexunit/FlexUnit
  93. 93. FlexUnit4 • FlexUnit 4 (merge de Fluint et FlexUnit0.9) • très similaire à JUnit 4 • Intégré à Flash Builder 4 Beta
  94. 94. FlexUnit4 • FlexUnit 4 (suite cf. http://docs.flexunit.org/index.php?title=FlexUnit4FeatureOverview )
  95. 95. FlexUnit within your Build • FlexUnit within your build
  96. 96. Les bouchons de test Flex
  97. 97. Au delà de FlexUnit : Les bouchons Hamcrest  http://github.com/drewbourne/hamcrest-as3#readme  containing constraints or predicates allowing 'match' rules to be defined declaratively  hasProperty - checks that a property exists and, optionally, that it matches the provided matcher  hasItem, hasItems - test a collection contains elements  Mock Frameworks  mock-as3: http://code.google.com/p/mock-as3  Used by Adobe Consulting  Mock4AS: http://code.google.com/p/mock4as  Mockito flex
  98. 98. Flex Unit Tests Code Coverage
  99. 99. Code Coverage – FlexCover http://code.google.com/p/flexcover
  100. 100. Flexcover – Emma report -headless agent for CI builds http://www.eyefodder.com/blog/2009/07/flex_code_coverage_process_par.shtml#more
  101. 101. FlexUnit & Flexcover – in Continuous Integration
  102. 102. Flex Functional Testing
  103. 103. Flex Functional Testing • Functional Testing – RiaTest http://www.riatest.com/video/getting-started/index.html
  104. 104. Flex Functional Testing • Functional Testing (suite) – Selenium for Flash – FlexMonkey (http://www.gorillalogic.com/flexmonkey ) – Other commercial products based on Adobe’s Flex Automation API : – Mercury QTP – IBM Rational Functional Tester – RIATest • Load and Stress Testing – JMeter, OpenSTA, Grinder – Adobe’s Data Services Stress Testing Framework – Other commercial (Flex/AMF specific) products : – NeoLoad – WebLoad
  105. 105. Analyse statique de code Flex
  106. 106. Analyse statique de code: FlexPMD • FlexPMD • Ce projet est hébergé sur opensource.adobe.com sous license BSD. • Comme son nom l'indique, ce projet suit la trace de PMD pour Java, l'idée est donc de: • détecter des "pattern" et "anti-pattern" dans l'arbre syntaxique du code ActionScript et MXML – définir ces patterns et anti-pattern dans des règles FlexPMD • pouvoir automatiser cette détection à travers le build (ou les outils de développement) • pouvoir créer facilement des ensembles de règles (des "rulesets") spécifiques aux besoins et aux contraintes de vos projets – et ensuite surveiller le respect de ces règles de façon automatique et systématique
  107. 107. Analyse statique de code: FlexPMD • FlexPMD dans cette première mouture vient avec 83 règles, ces règles vous permettront de réaliser l'audit de code Flex à la recherche • de code mortCode mort : Parametre, variable locale, fonction privée, attribut non-utilisé • Taille de code: Complexité cyclomatique, fonction trop longue, trop d’attribut, trop de functions • MXML: Bloc script trop long • Conventions de nommage (variable, classe, casse des packages) • de mauvaise pratique architecturale – dans l'utilisation de cairngorm – dans la gestion d'évènement – dans le référencement de composants visuels dans les modèles – ou de mauvaise encapsulation
  108. 108. Analyse statique de code: FlexPMD • FlexPMD – Personalisable selon vos besoins • http://opensource.adobe.com/svn/opensource/flexpmd/bin/flex-pmd-ruleset- creator.html – Extensible: créer vos propres règles
  109. 109. Analyse statique de code: FlexPMD • FlexPMD – Intégré • Mac automator : – http://www.youtube.com/watch?v=C5DBuZzHLwc • Tâche Ant • Plugin Maven
  110. 110. • FlexPMD within your build
  111. 111. Analyse statique de code: FlexPMD • FlexPMD Eclipse plugin • http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD+Eclipse+plugin
  112. 112. Analyse statique de code: FlexCPD • FlexCPD : Détection de copié-collé
  113. 113. Analyse statique de code: FlexMetrics • FlexMetrics
  114. 114. Intégration continue
  115. 115. Intégration continue http://www.octo.com/Java-Productivity-Primer.10/Publications
  116. 116. les contrôles industrialisés • mise en place des règles de style de code • rapport de tests unitaires • rapport de la couverture de ces tests • contrôle automatisé des règles, des pattern et anti-pattern de code par outils d’analyse statique de code
  117. 117. Intégration continue: Hudson
  118. 118. Hudson Quality reports – Automated Unit and functional test • TestNG • FlexUnit • FlexMonkey and or RIATest – Automated code Coverage reports • Cobertura • FlexCover – Automated code analysis • PMD • FlexPMD
  119. 119. Dashboard Qualité Flex
  120. 120. Hudson Flex unit Dashboard
  121. 121. Dashboard Qualité : Sonar • Présentation de Sonar – http://www.parisjug.org/xwiki/bin/download/Meeting/20090915/2009-15-09-Sonar.pdf • Sonar : – http://docs.codehaus.org/display/SONAR/Documentation
  122. 122. Dashboard Qualité : Sonar • Sonar
  123. 123. Dashboard Qualité : Sonar • Sonar Flex plugin – http://docs.codehaus.org/display/SONAR/Sonar+Flex+Plugin
  124. 124. Questions ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×