Publié par
Il y a 10 années · 13 minutes · Front

Adobe Flex

Lors du développement d’une application web J2EE, le développeur est confronté à d’autres technologies que du « pur » Java. On lui demande fréquemment de manipuler à un bout de la chaîne le langage SQL, et à l’autre bout les langages HTML / JavaScript. Désormais, on lui demande également de connaître les technologies des applications internet riches, et en particulier les frameworks AJAX.

Depuis plusieurs mois maintenant, on entend parler et on rencontre de plus en plus souvent des applications qui utilisent la technologie de client riche d’Adobe : Adobe Flex. La version 3 de Flex vient tout juste d’être mise à disposition. C’est à cette occasion que ce billet vous propose une présentation générale de Flex, et ce qu’elle apporte à la partie cliente d’une application J2EE.

Introduction

Il y a quelques années sont apparues les premières applications ou sites Internet développés avec un framework JavaScript/AJAX. Le premier réflexe de la plupart d’entre nous, devant la richesse de l’interface proposée, était de vérifier la présence de l’entrée « A propos d’Adobe Flash Player » dans le menu contextuel de la page.
Le réflexe était naturel. Historiquement, Flash est LA solution permettant d’apporter de la richesse à une application Internet : animations, graphismes, vidéos, support multi-navigateurs. Les frameworks AJAX ont su en partie répondre à un manque des applications web classiques, en leur apportant certaines de ces fonctionnalités, et c’est ce qui a assuré leur succès.
Mais les frameworks AJAX ont répondu à la pauvreté d’éléments natifs du HTML par une « émulation » de nouveaux composants (widgets, calendriers, animations). Flash et Flex, eux, les gèrent de façon native dans une machine virtuelle bien plus optimisée que le navigateur hôte exécutant le code JavaScript. Pourquoi donc ne pas systématiquement développer les applications RIA avec Flex ?

Il y avait jusqu’ici différentes raisons, plus ou moins valables suivant le contexte :

  • Flex est une technologie propriétaire
  • L’environnement de développement est payant (quelques centaines d’euros, ce n’est pas un obstacle en entreprise)
  • Peu de développeurs maîtrisent le langage et les outils
  • Le contenu n’est pas indexable par les moteurs de recherche
  • Les frameworks AJAX rencontrent un engouement plus fort que Flex
  • Le support de Linux est déficient
  • Il faut installer le plugin Flash 9 sur l’ensemble des postes

La plupart des arguments cités ci-dessus ne sont plus valables aujourd’hui même s’il en subsiste d’autres (voir la fin du billet). On est forcé de constater aujourd’hui l’explosion de la notoriété de Flex. De nombreux clients se posent aujourd’hui la question, ou ont déjà développé leurs premières applications, les conférences sur le sujet fleurissent et la pénurie de développeurs Flex sur le marché de l’emploi est un excellent signe en faveur de la technologie.

En avril 2007, un évènement a indéniablement placé Flex sur la rampe de lancement : l’annonce par Adobe du passage en OpenSource du framework. Flex 2 était déjà gratuit mais propriétaire (le SDK était gratuit, mais l’environnement de développement Flex Builder est payant). Flex 3, sorti en début de semaine dernière, est OpenSource (seuls Flex Builder et la librairie Flex Charting restent propriétaires et payants).

Présentation technique

Flex permet de développer des applications Internet riches (RIA), exécutées dans le navigateur, grâce au plugin Flash 9 (la version 9, dernière en date, est obligatoire). Flex apporte la portabilité des applications développées. En effet, elles sont exécutées exactement de la même manière sur les trois plateformes majeures (Windows, Linux, Mac OS).

Flex comprend plusieurs éléments:

  • un environnement de développement intégré (Flex Builder), basé sur Eclipse
  • une bibliothèque de composants et animations
  • une bibliothèque permettant de générer des graphiques (Flex Charting : camemberts, histogrammes, etc.)
  • des composants permettant d’effectuer des appels client / serveur.

La liste des composants de Flex peut-être consultée en ligne, avec pour chaque composant un exemple de code (voir le « component explorer Flex« ). Le nombre de composants est assez impressionnant ! On trouve bien sûr l’équivalent de tous les composants de base du langage HTML, des animations apportant de la richesse aux composants, et de nombreux autres composants permettant de développer une application de type bureau (barre de menus, conteneurs permettant de positionner les éléments dans l’application, éditeur de texte, calendrier, …).

Flex a été implémenté par Adobe sous la forme d’une librairie ActionScript, qui contient tous les composants Flex. Les applications Flex sont développées à l’aide des langages MXML et ActionScript 3, et de cette librairie Flex.

MXML

L’interface graphique est décrite dans un fichier MXML, à l’aide de balises XML spécifiques. Les éléments visuels de l’application (composants, animations, …) sont décrits à l’aide de ces balises MXML. MXML permet également de déclarer certains éléments non visuels, tels que les composants d’appel à des services côté serveur.

Par exemple, on utilise le tag <mx:TextInput> pour créer une instance de TextInput à l’aide du bloc MXML qui suit:


L’attribut id permet d’identifier le composant de manière unique. On pourra ensuite se baser sur cet id pour référencer le composant.

ActionScript 3

On ajoute ensuite du dynamisme à l’application développée en MXML l’aide de fonctions ActionScript 3. Ce langage implémente, à l’instar de JavaScript, la spécification ECMAScript. Ainsi, les développeurs JavaScript ne seront pas dépaysés.
Le code ActionScript 3 peut être stocké dans le fichier MXML, à l’aide de la balise <Script>, mais peut également être stocké dans des fichiers ActionScript externes.

Exemple d’application Flex

Prenons pour exemple une application Flex dont le but est d’afficher un histogramme. Au hasard, le nombre d’employés de Xebia depuis sa création.

Code source




    
        

    

        

            
                
            

            
                
            
        

        

    

La balise <mx:Application> définit le conteneur Application, elle est présente dans toutes les applications Flex.
Le code ActionScript est déclaré dans un bloc <mx:Script> où l’on déclare et on initialise une collection employeesAC contenant pour chaque année le nombre d’employés.

La balise <mx:Panel> définit un conteneur Panel qui inclut une barre de titre, une bordure, et le layout des éléments qu’il contient (horizontal ou vertical).
Le contrôle <mx:LineChart> permet de dessiner un histogramme, les données permettant de le dessiner sont fournies par la variable employeesAC, grâce à l’attribut dataProvider. On personnalise ensuite les axes du graphique grâce aux balises <mx:horizontalAxis> et <mx:series>.

Cycle de développement

Le cycle de développement de l’application Flex présentée ci-dessus est le suivant:

  • écriture des sources de l’application dans un éditeur de texte ou dans l’IDE Flex Builder
  • compilation des sources par le compilateur Flex. Celui-ci parse les tags MXML, les transforme en code ActionScript, puis compile ce code en bytecode SWF. Le bytecode est ensuite packagé dans un fichier SWF (Flash), directement exécutable par un navigateur disposant du plugin Flash 9.
  • déploiement du fichier Flash sur le serveur web, qui sera ensuite téléchargé par l’utilisateur sur son poste à la première connexion

Le résultat final

Communication avec un serveur

Trois possibilités s’offrent au développeur pour effectuer des appels vers un serveur à partir de l’application Flex :

Flex client serveur

  • il peut appeler un service HTTP qui retourne les données au format XML (ou d’autres formats) grâce au composant HTTPService (ce composant est l’équivalent du XMLHttpRequest d’AJAX)
    
    
  • il peut appeler des services web au standard SOAP grâce au composant WebService
    
      
        
          {country.selectedItem.data}
        
      
    
    
  • il peut appeler de manière transparente des objets Java exposés sur le serveur (objets de type service Spring) grâce au composant RemoteObject, à l’aide du protocole AMF, ce qui nécessite d’installer côté serveur « Flex Data Services » (Blaze DS est la version OpenSource de FDS)
    
      
        
          {country.selectedItem.data}
        
      
    
    

Seul le troisième cas nécessite d’avoir un serveur Java (l’équivalent existe pour d’autres langages, PHP par exemple). Dans les deux premiers cas, on peut consommer des services web ou services HTTP développés dans n’importe quel autre langage. On a ici un vrai découplage technique entre l’application affichée à l’utilisateur et les services métiers exposés sur le serveur.

Performances

Contrairement aux frameworks AJAX qui sont souvent consommateurs de ressources sur le poste client (tous les composants riches sont « émulés » en JavaScript), les composants sont ici nativement gérés par le plugin Flash. De nombreuses optimisations sont apparues avec la version 9 du plugin Flash (compilateur JIT), ce qui nécessite d’ailleurs deux machines virtuelles dans le plugin pour jouer les animations Flash, une machine virtuelle pour les animations Flash 9, et une machine virtuelle différente pour les animations Flash < 9.

Les nouveautés de Flex 3

Nous y reviendrons plus spécifiquement dans un prochain billet, mais vous trouverez ci-dessous quelques nouveautés de Flex 3 :

  • Flex Builder 3 bénéficie de nombreuses améliorations : fonctionnalités de refactoring, profiler inclus permettant d’optimiser le code ActionScript
  • compilation 30 à 40% plus rapide
  • nouveaux composants graphiques
  • Adobe AIR (qui permet d’exécuter des applications Flex ou AJAX sur le bureau, hors du navigateur)
  • les différentes versions payantes ont été réorganisées, en particulier Flex Charting n’est plus disponible seul, on doit acheter Flex Builder 3 Pro pour en bénéficier

Voir la liste complète des nouveauté Flex 3

Les points négatifs de Flex

Les arguments anti-Flex/Flash souvent cités

Reprenons quelques-uns des arguments cités en introduction :

  • Technologie propriétaire : Adobe a annoncé le passage de Flex en OpenSource pour la version 3, qui doit sortir au premier trimestre 2008. Flash reste propriétaire, mais les spécifications pour les fichiers SWF (le byte code Flash) sont publiées, ce qui a permis le développement de plug-ins Flash OpenSource, ou du framework OpenLaszlo. Début 2007 Adobe a sorti la version 9 du plug-in Flash pour Linux (nécessaire pour exécuter une application Flex 2)
  • Environnement de développement payant : c’est toujours le cas pour Flex Builder 3, mais le SDK est gratuit. Pour une entreprise l’investissement de quelques centaines d’euros par poste de développement est négligeable. Avec la popularité de Flex, on devrait voir apparaître des environnements de développements tiers.
  • Peu de développeurs maîtrisent le langage : plus la popularité de Flex augmente, plus on trouve de développeurs connaissant la technologie. Le coût d’entrée pour un développeur Java/JEE n’est pas énorme, ActionScript implémente la même spécification que JavaScript. La communauté de développeurs Flex est conséquente, on trouve énormément de ressources traitant du sujet sur Internet.
  • Taux de pénétration du plugin Flash 9 : en Décembre 2007, le taux de pénétration du plugin Flash 9 était de 95%, il n’était que de 85% en Mars 2007 (http://www.adobe.com/products/player_census/flashplayer/version_penetration.html)

Points négatifs

Quelques points négatifs subsistent:

  • les applications développées avec Flex ne sont par indexées par les moteurs de recherche. Si ce point a peu d’intérêt pour une application d’entreprise qui n’a pas pour vocation à être exposée sur internet, il est plus ennuyeux pour une boutique en ligne par exemple. Pour l’instant Google ne sait indexer que le contenu statique, « en dur » dans le code, mais Adobe a mis à disposition récemment son Search Engine SDK, Google l’utilise déjà. Souhaitons qu’Adobe fasse évoluer rapidement son logiciel d’indexation.
  • Flex est absent du monde mobile. Si le plugin Flash Lite est présent sur certains modèles de PDA, il n’est pas capable de jouer les animations Flex. C’est aujourd’hui à mon sens LE gros défaut de Flex.
  • il n’est pas aisé de tester unitairement les animations Flash, ou d’automatiser les tests d’intégration. Il existe des frameworks permettant de tester unitairement le code ActionScript (FlexUnit), mais un seul outil permet d’automatiser les tests de l’IHM, Mercury QTP, qui est propriétaire et payant.
  • Flex traite assez mal les composants HTML, il est donc difficile d’imaginer une application Flex qui présente le contenu d’une application web tierce
  • on ne peut pas utiliser la fonctionnalité « onglets » des navigateurs web récents
  • Flex 3 est OpenSource, mais Adobe garde la main sur le système de gestion d’anomalies, et le processus de correction ne semble pas être aussi transparent que sur un projet OpenSource classique

Conclusion

Flex semble bien être LA technologie permettant de développer des applications d’entreprise de type RIA, les avantages sur les frameworks AJAX sont nombreux (nous vous proposerons bientôt un billet comparant les deux technologies), et si l’on devait s’avancer un peu et jouer au jeu des prédictions, on pourrait très bien imaginer décrire AJAX comme une technologie de transition entre les applications web classiques et les purs outils RIA tel que Flex. On peut aujourd’hui la recommander en entreprise, et c’est un outil qui valorisera grandement le bagage technique du développeur Java / J2EE.

Pour résumer les qualités du framework:

  • une fois le coût d’entrée assimilé, on obtient rapidement d’excellents résultats, et le développeur n’a pas besoin de tester l’application sur différents navigateurs / environnements (portabilité apportée par le plugin Flash 9)
  • Flex apporte un vrai découplage entre le client web et le serveur d’applications, le mariage d’un client Flex avec un serveur d’applications J2EE est naturel
  • la communauté de développeurs Flex est très active, on trouve de l’information très facilement
  • l’environnement de développement intégré Flex Builder permet de bénéficier des outils classiques des IDE, complétion syntaxique, debugger
  • les performances sont au rendez-vous, Flash 9 est beaucoup plus performant et stable que les versions précédentes
  • le plugin Flash 9 bénéficie d’une énorme base de déploiement (>95%)

Toutefois la concurrence s’est organisée depuis quelques mois. Si Sun avec JavaFX n’est aujourd’hui pas bien menaçant, une autre menace se fait plus précise : SilverLight du géant Microsoft. Si SilverLight est très en retard sur le déploiement du plugin, on peut compter sur Microsoft pour profiter de sa plateforme de mise à jour de Windows (Windows Update) pour y remédier très rapidement.

Les frameworks RIA tiers pourraient bien pâtir de cette guerre entre géants. Nous ne donnons que bien peu de chances de survie à un framework tel qu’OpenLaslzo par exemple… L’avenir nous le dira, mais il se pourrait bien qu’AJAX ne soit qu’une technologie de « transition », qui s’effacera peu à peu devant Flex et SilverLight.

Pour terminer, quelques liens utiles sur Flex que nous vous invitons à découvrir. Ils vous permettrons d’en apprendre plus sur la technologie, et de rester au courant des dernières nouvelles sur le sujet.

10 thoughts on “Adobe Flex”

  1. Publié par Guillaume Carre, Il y a 10 années

    Bonjour Sébastien,

    merci pour le lien je ne connaissais pas l’outil.
    Après un rapide parcours de leur site, RIATest permet de tester des applications Flex 3 (il ne supporte pas Flex 2), et ils annoncent une version finale pour le mois prochain.

    En revanche je n’ai pas l’impression que RIATest soit opensource, d’après leur FAQ l’outil est closed source et payant.

  2. Publié par JY, Il y a 10 années

    Probablement hors sujet … (quoique ?)

    Qu’en est-il du Mozilla Toolkit (XUL vs Flex, XulRunner vs AIR) dans le même domaine ? Trouves-tu cette techno équivalente ? Est-il plus pertinent de commencer le développement d’application métier complexe et pérenne avec le Toolkit Mozilla ou avec Flex ?

    Quelles sont les comparaisons et points d’analogies entre XUL et Flex ?
    – D’un point de vue fonctionnalité/richesse
    – D’un point de vue extensibilité
    – D’un point de vue compétences nécessaires à la mise en œuvre
    – D’un point de vue process de développement
    – etc …

    J’ai besoin de plus d’objectivité car bien qu’ayant testé XUL et Flex, je suis encore à mon goût trop prononcé pour l’un des 2 ! :)

  3. Publié par Julien Wajsberg, Il y a 10 années

    A mon sens, XUL et Flex sont très très proches dans la philosophie. Pour à peu près chaque composant, on a un équivalent pour chaque techno: XulRunner/AIR, XUL/MXML, XBL/MXML, JS/AS, XPCOM/Classes AS.

    Les forces de XUL sont, pour moi :
    – l’extensibilité, clairement. le mécanisme des overlays est tout simplement génial
    – les thèmes
    – le caractère multi-plateforme, tout en gardant un aspect natif
    – la création de composants XPCom dans plein de langages différents
    – la création d’une interface en XUL est à la fois facile et ludique
    – accessibilité presque native, qui vient de l’utilisation de composants natifs

    Les inconvénients de XUL sont :
    – un manque de doc flagrant, malgré l’excellence de xulfr.org. C’est dommage (et en même temps génial) que parfois, la seule doc, ce soit le code de Firefox.
    – le saut de XUL+JS à XUL+XPCom est quand même assez abrupt
    – même si avec Eclipse ou Aptana on arrive à s’en sortir, on manque d’un IDE sérieux…

    Les avantages de Flex :
    – un look « séduisant » par défaut… à première vue… même si, à mon avis, un look&feel « natif » est plus efficace sur le long terme. Le tape à l’oeil, très peu pour moi…
    – un IDE très très performant (même si payant)… Et encore mieux avec sa version 3
    – c’est de l’objet, du vrai qu’on connait parce que ça ressemble à Java
    – j’aime beaucoup le fait qu’un MXML et une classe en AS soient complètement équivalents en Flex

    Les désavantages (la plupart sont dits dans l’article) :
    – accessibilité déficiente
    – c’est dans le navigateur… et pourtant le type de navigation dans l’appli n’est pas comme celui du web -> un utilisateur lambda peut moins s’y retrouver
    – extensibilité zéro
    – aucune interface possible avec le système qui n’aurait pas été prévue
    – lent sur les machines plus anciennes (et où c’est moins optimisé, genre Linux)
    – le CSS, c’est pas vraiment du vrai CSS…
    – les exécutables sont GROS… En effet, le Flash Player ne connait rien de Flex: à la compilation, tout le framework Flex est adjoint à l’exécutable…

    J’en oublie sans doute… Pour finir, je dirais juste qu’on ne va pas utiliser du Flex dans le navigateur comme on ferait du XUL, à mon avis. Pour AIR c’est autre chose… à suivre :-)

  4. Publié par Jules, Il y a 9 années

    Un framework de test d’acceptances pour Flex est FunFX, développé par Peter Motzfledt. FunFX s’appuie sur le langage interprété Ruby pour simuler l’utilisation d’applications web clientes en Flex. Plus de précisions sur le site de l’auteur.

  5. Publié par Mohand, Il y a 9 années

    Flex commence effectivement a gagner du terrain alors je souhaite anticiper et je demande aux personnes qui l’utilisent de m’aider pour obtenir un tutorial de flex pour pouvoir l’utiliser avec java dans un projet web ou autres choses qui va dans ce sens.
    Merci D’avance

  6. Publié par Ars, Il y a 9 années

    Flex 3 et Coldfusion 8 sont tout deux gratuits pour les ETUDIANTS https://freeriatools.adobe.com/ ; l’interface du site est en anglais, cependant adobe demande une photocopie de la carte d’étudiant ou du certificat de scolarité.

    Résultat : j’ai eu ma licence (clé) pour flex 3 pro en 1 journée!!!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *