Flex

Flex est le framework d'Adobe permettant de créer des applications Web dites RIA. Disponible depuis fin février 2008 dans sa version 3, Flex est une technologie qui permet de réaliser des applications au format SWF facilement, grâce à deux langages : une grammaire MXML, basée sur le langage XML, et Actionscript 3. MXML sert principalement à définir l'interface graphique de l'application en gérant l'agencement des composants dont deux types sont disponibles : les conteneurs (boîtes, panneaux, fenêtres, etc.) et les éléments de contrôle (champs texte, listes, tree, etc.) ; mais MXML peut également être utilisé pour définir de manière déclarative des aspects non graphiques d'une application, comme l'accès à des sources de données côté serveur par exemple. Les balises MXML correspondent à des classes ou des propriétés de classe Actionscript. Actionscript 3 permet donc d'étendre le périmètre fonctionnel de l'application notamment en enrichissant les contrôles. Même si à l'instar de Flash, Flex permet de générer des fichiers SWF, il s'agit tout de même d'une approche vraiment différente entre ces deux technologies (qui restent néanmoins compatibles). Flex est un outil plutôt orienté pour les développeurs, permettant de s'affranchir des aspects purement graphique de Flash et de développer très rapidement des applications riches en composant, tandis que Flash demeure l'outil le plus approprié pour la réalisation d'animations.

Compatibilités

D'après les statistiques publiées sur le site d'Adobe, le Flash Player, plugin permettant de lire les fichiers portant l'extension SWF, serait installé sur plus de 98% des ordinateurs connectés à Internet. Ce plugin s'installe sur la plupart des systèmes d'exploitation et est compatible avec les navigateurs les plus populaires :

• Windows : IE, AOL, Firefox, Netscape, Opera
• MacOS X : Firefox, Safari, Opera (+ Netscape et AOL pour processeur powerPC)
• Linux : Firefox, Seamonkey
• Solaris : Firefox

Toutefois, les applications développées avec Flex 3 ne seront compatible qu'avec le Flash Player version 9. En effet, il s'agit du seul player à pouvoir interpréter Actionscript 3, player qui est tout de même, installé sur plus de 800 millions de postes connectés à Internet, soit 95% du parc informatique mondial (selon les dernières statistiques d'Adobe, décembre 2007).

Outils de développement

Pour développer des applications Web avec Flex (version 3), il faut avant tout posséder le Flex 3 SDK, qui est disponible en trois version :

• Free Adobe Flex SDK : le SDK officiel (et complet) qui contient tout ce qu'il faut pour développer une application Flex (classes AS3, compilateur MXML, etc.).

• Open Source Flex SDK : le SDK qui comprend uniquement la partie open source du SDK officiel (compilers, framework, debugger).

• Adobe Add-ons for Open Source Flex SDK : autrement dit la partie non open source du SDK : Adobe Flash Player, Adobe AIR, et les librairies.

Un simple éditeur de texte peut être suffisant pour développer en MXML et AS3. Mais il existe des IDEs permettant de profiter pleinement de Flex.

• Windows :
  • Adobe Flex Builder 3 : dispose de l'auto-complétion du code et de la coloration syntaxique pour les deux langages, d'un éditeur WYSIWYG, et propose une interface simplifiée et intuitive des fonctionnalités disponibles dans le SDK (debugger, compilateur, ...). Cette plateforme de développement est basée sur Eclipse et se présente sous deux formats : l'IDE complet (comprend alors le SDK) ou uniquement le plugin (fonctionnel uniquement avec Eclipse 3.3 et supérieur). Dans les deux cas l'IDE est payant, et disponible gratuitement pour une version d'évaluation de 60 jours.
  
  
  • Flashdevelop : IDE gratuit et open source, conçu uniquement pour Windows, et qui permet de faire de l'AS3. Il dispose d'une fonction de compilation qui évite d'avoir à compiler en ligne de commandes.
  
  
  • Spket IDE : gratuit et disponible en IDE indépendant ou en plugin Eclipse, Spket est (entre autres) un éditeur MXML assez puissant.

• Linux :
  • Eclipse (3.3 ou supérieur) avec le plugin « Flex Builder Linux alpha ». Le plugin comprend le Flex 3 SDK pour Linux, ainsi qu'une version allégée du Adobe Flex Builder 3 de Windows (absence d'éditeur WYSIWYG notamment). Ce plugin est payant et disponible gratuitement pour une période d'essai de 60 jours.
  
  
  • Spket IDE : éditeur MXML (le même que pour Windows).
  
  
  • Actuellement aucun éditeur particulier pour AS3.
  
  
  • MXML Editor 1.0 qui est en cours de développement sous forme de plugin Eclipse, devrait permettre l'édition de MXML et AS3.

Principe de fonctionnement

Une application Flex se développe principalement en MXML. Des fichiers AS3 peuvent s'ajouter à un projet afin d'étendre les fonctionnalités de l'application. Il faut ensuite compiler les fichiers MXML et AS3 afin d'obtenir l'application Flex. Il existe alors deux modes de déploiement :

• Standalone : on souhaite obtenir un unique fichier SWF. Pour cela, il suffit d'utiliser le compilateur mxmlc (fournit dans le SDK de Flex 3) : soit en ligne de commandes (documentation sur les options de mxmlc), soit par l'interface graphique d'un IDE.

• Server : les fichiers sources sont hébergés sur un serveur. Lors d'un appel par le navigateur à un fichier MXML, celui-ci est compilé à la volée par le serveur au format SWF (en utilisant mxmlc) et incorporé à une page HTML. Le serveur renvoi alors la page HTML qui contient l'application SWF. Pour ce faire, Adobe met à disposition un module compatible avec les serveurs Apache 1.x/2.x (Windows, MacOS, Linux) et IIS 5.1/6/7 (Windows) gratuitement pour la version beta (seule version disponible actuellement) : le Flex Module for Apache and IIS. Ce module requière également l'installation du JRE 1.4.2 ou supérieur ainsi que du Flex 3 SDK.

Il est également possible de créer des composants personnalisés héritant de composants de base (par exemple un formulaire qui est composé de champs et de boutons) et de les réutiliser via son propre espace de nom. De même, il est possible de créer sous Flash des composants pour Flex, ce qui montre la complémentarité de ces deux technologies.

Lorsque l'application Flex se comporte comme un client avec une infrastructure Client/Serveur, il possible côté serveur d'utiliser les langages Cold Fusion, Java, .NET, et PHP. Flex propose trois modes d'accès aux données :

• l'objet HTTPService : permet d'effectuer des requêtes HTTP (utile pour s'interfacer avec une architecture REST).
• l'objet WebService : permet de s'interfacer avec un webservice via SOAP.
• l'objet RemoteObject : implémentation du protocole RCP.

Pour les grosses applications, il existe un framework, Cairngorm, mis à disposition par Adobe et qui permet d'appliquer le pattern MVC à une application Flex 2 (en cours de développement pour Flex 3).

Ses avantages

• Utilisation d'une syntaxe proche du XML (MXML)
• Utilisation de Actionscript 3 : 100% compatible ECMA
• Utilisation de plusieurs langages possibles côté serveur
• Complémentarité avec Flash
• Mode de déploiement à la volée
• Existence de nombreuses bibliothèques/composants open-source
• Framework en partie Open-Source
• Nombreux protocoles d'échange de données
• Disponibilité du Flash Player sur plus de 98% du parc informatique
• Multi-plateforme
• Multi-navigateurs
• Richesses des interactions avec l'utilisateur
• Produit stable (version 3)
• Communauté active
• Utilisation conjointe de Flex et AJAX : FABridge
• Réduit la charge serveur grâce aux traitements côté client
• Sécurité : code qui s'exécute dans un sand-box (le flash player)

Ses inconvénients

• Dépendant du Flash Player
• Pas de rétro-compatibilité avec les players antérieurs (pour Flex 3)

Exemples

• Site qui recense plus de 300 applications Flex : http://flex.org/showcase/

• La page d'Adobe qui présente de nombreux composants de base testable (avec le code source, très intéressant) : http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

• Le flex cookbook est une sorte de HowTo sous forme de de blog/forum: http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2

Liens utiles

• Le site du framework Cairngorm : http://labs.adobe.com/wiki/index.php/Cairngorm

• La documentation en ligne du langage ActionScript 3 : http://livedocs.adobe.com/flex/3/langref/index.html

• Le kit de détection de Flash Player : http://www.adobe.com/fr/products/flashplayer/download/detection_kit/

• Le forum de la communauté officielle Adobe Flex : http://flex.mediabox.fr/

• Le site de Spkek IDE : http://www.spket.com/flex-mxml-editor.html

• Tutoriel pour créer des composants Flex avec Flash :

  http://blog.phiphou.com/index.php/?2007/06/03/26-creer-des-composants-flex-avec-flash-cs3

• Le site de funFX, un utilitaire en ruby pour tester les fonctionnalités d'une application Flex : http://funfx.rubyforge.org/

• Le site de flexlib, catalogue de composants open-source : http://code.google.com/p/flexlib/

Sources

• http://osflash.org/mxmleditor
• http://filt3r.free.fr/index.php/2007/07/24/23-mon-premier-swf9-gratos-avec-flex-sdk
• http://wiki.mediabox.fr/tutoriaux/flex
• http://doc.ubuntu-fr.org/eclipse_flexbuilder
• http://www.korben.info/installer-flex-sur-linux.html
• http://www.adobe.com/fr/products/flex/faq/
• http://prendreuncafe.com/blog/post/2007/08/19/Presentation-de-Flex