Adobe^® Flex^™ Tutorial

Cet article a pour but de vous introduire à Flex 4 et le logiciel d'aide à la création de contenu Flex: Flash Builder 4

Flex 4 ?

Adobe Flex 4 est un framework Open Source multi-plateforme permettant la création d'application internet riches (RIA) avec un rendu identique sur la plupart des navigateurs et des systèmes d'exploitation (Windows, Linux, Mac). Grâce à son compilateur, Flex donne la possibilité de créer des fichiers .SWF pouvant être lu par Adobe Flash Player. Tout comme Adobe Flash Professional peut créer des fichiers SWF, Flex peut aussi le faire mais la méthode de développement est totalement différente.

Flex est dédié aux développeurs

Contrairement à Flash, Flex n'a pas été crée pour faire de l'animation, ici plus de timeline. Flex à été crée pour les développeurs de logiciel, et les méthodes des développement sont comparables à celles que vous connaissez déjà. Si vous connaissez Java (très proche), C, C++, vous pouvez apprendre Flex sans grand effort. L’objectif de Flex était initialement de créer un langage de développement avec lequel les développeurs pourraient facilement générer des fichiers SWF pour le Flash Player (et maintenant AIR). Flex contient des classes, des composants, un compilateur, un debugger, des librairies et utilise XML (MXML) pour déclarer les balises de ses composants. Le langage de programmation ActionScript 3, est basé sur ECMAScript 4 (le standard de langage duquel est issu JavaScript) et supporte en natif l'E4X qui permet de manipuler de manière intuitive des structures XML. Il contient aussi la plupart de composants que vous utilisez déjà comme les boutons, listes, datagrid, combobox, tree mais il possède aussi des composants comme HBox, VBox, TabNavigator, TitleWindow et bien d’autres!

Si vous avez déjà développé des logiciels auparavant, vous ne serez pas perdus en utilisant Flex. Flex est compatible avec tous les serveurs HTTP ainsi qu'avec n'importe quel langage de programmation serveur, donc votre connaissance en PHP, ASP.net ou JSP pourra aussi être utile. Flex vous permet juste de programmer le côté client dans une paradigme que vous connaissez et comprenez déjà: la programmation objet.

Flex permet de créer des applications

Flex a été crée pour faire des applications riches côté client (RIA). Il n'a pas été crée pour faire des pages web, des bannières de pub ou bien du code côté serveur. Flex a été crée pour créer des applications client-side déployables sur Internet communiquant avec des serveurs distants. Il a déjà été utilisé pour créer de superbes application:

Parmi les applications Flex à voir absolument, on peut citer entre autres:

• Picnik: Retouche d'images à la Photoshop
• SlideRocket: Permet de créer des diaporama type PowerPoint/Keynote en ligne
• Buzzword: Editeur de texte type Microsoft Word (racheté par Adobe)
• Adobe Photoshop Express: Version simplifiée de photoshop en ligne très intuitive
• Video Remixer: Montage vidéo en ligne (Adobe Premiere Express)

Les meilleures applications Flex sont répertoriées sur le showcase de flex.org. Il faut noter le fait que Flex offre la possibilité de fournir une expérience utilisateur similaire à une application de bureau mais sur Internet (en utilisant AIR, il est possible de réaliser des applications de bureau en Flex).

Des applications multi-plateformes sur le web (Adobe Flash Player)

Flash Player est installé sur plus de 98% des ordinateurs utilisant Internet (environ 3,5 milliards de téléchargements). Lorsque vous développez un logiciel, vous voulez qu'il puisse tourner sur le maximum de machines possibles. Adobe Flash Player (à partir de sa version 9) est une plateforme sans installation ou mise à jour de logiciel. Si vous construisez un site e-commerce accessible à tous les internautes, choisir le Flash Player vous permet de garantir une nouvelle expérience utilisateur pour 98% du web. Notez que les applications Flex 3 nécessitent au moins un Flash Player 9 alors que les applications Flex 4 nécessitent au moins un Flash Player 10.

Des applications multi-plateformes bureautiques (AIR 2, anciennement Apollo)

AIR 2 est un nouveau runtime d’Adobe permettant de concevoir des applications disponibles sur 3 Systèmes d’Exploitation (Mac ,Windows ,Linux) à partir de la même base de code. AIR permet de développer des applications de bureau, qui vont interagir directement avec votre système plutôt que des sites internet. Il possède donc beaucoup plus de fonctionnalités que les applications Flex Web. Les applications AIR sont des applications de bureau natives. Des API pour la gestion des fichiers, le drag and drop de fichiers, les notifications systèmes, l'appel de processus natifs, la détection de support de stockage amovible et la détection de connexion réseau sont quelques-une des fonctionnalités fournies par AIR 2.

Des applications pour les environnements mobiles (Adobe Flash Player 10.1 et Air 2)

Le développement des applications mobiles est aujourd'hui un business florissant. Grâce à Flash Player 10.1 et Air 2 (tous deux sortis officiellement début Juin 2010), vous pourrez aussi développer pour plate-formes mobiles et cela, sans changer votre code. En effet, tous les mobiles équipés d'Android 2.2 (tous les mobiles Android sortis en 2010 profiteront de cette mise à jour) permettent d'avoir Flash Player 10.1 directement sur le navigateur de votre mobile. C'est-à-dire que vous avez exactement le même rendu sur un mobile que sur votre navigateur web classique. Vous n'avez ainsi pas à re-programmer votre application dans un autre langage, elle fonctionne déjà sur mobile. Air 2 permet quand à lui de développer des applications natives pour votre mobile Android et de profiter des capacités de votre téléphone telles que la géo-localisation, les appels / messages ... Encore une fois, le code est le même que pour une application bureautique, seul le packaging final est différent.

Le langage MXML

La description de l'interface s'opère au moyen du langage MXML, basé sur XML un peu comme ce que proposent XUL ou XAML. Deux types principaux de composants sont disponibles :

• Les conteneurs: boîtes, panneaux, fenêtres... (TitleWindow, Panel, Canvas, HBox, VBox , etc.)

• Les éléments de contrôle: champs texte, listes, boutons, listes, tableaux, arbres ... (TextInput, Button, List, ComboBox, CheckBox, DataGrid, Tree, etc.)

L'ensemble de ces composants sont visibles sur le Component Explorer crée par Adobe. Ce sont ici les composants Flex 3, les composants Flex 4 ayant simplement un look différent:

Accéder au Adobe Flex 3 Component Explorer

Le framework propose de nombreux composants de base mais grâce à l'aspect Open Source de Flex, on peut trouver une multitude de nouveaux composants développés par des utilisateurs disponibles au téléchargement. La flexlib par exemple propose une trentaine de composants inédits de qualité gratuitement.

Voila un exemple de code MXML décrivant l'interface d'une application simpliste :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <s:Panel title="Exemple MXML" width="330">
   <s:layout>
     <s:VerticalLayout paddingLeft="15" paddingTop="15" paddingBottom="15" paddingRight="15"/>
   </s:layout>
     <s:TextInput id="firstname"/>
     <s:Button label="Dire bonjour" click="{result.text='Bonjour, '+firstname.text}"/>
     <s:Label id="result" width="265"/>
   </s:Panel>
</s:Application>

Uniquement quelques lignes de code MXML, on a réussi à décrire une interface simpliste ayant un aspect applicatif.

Le code MXML est assez explicite mais voyons quand même quelques précisions:

• Le conteneur principal de l'application (<s:Application>) déclare l'espace de nommage (namespace) "s", qui permet d'utiliser les composants natifs de Flex 4
• Imbriqué dans le tag Application, on déclare un conteneur sous la forme d'un Panel contenant un conteneur et 3 contrôles:
  • Un TextInput, simple champ de saisie utilisateur
  • Un Button, simple bouton avec événements (click, rollOver ...)
  • Un Label, qui est un champ de texte dont on peut changer la valeur dynamiquement
• Chaque élément peut avoir un attribut "id" qui doit impérativement être unique. Cet id, s'il est renseigné permettra de référencer facilement un élément de votre application Flex
• La gestion des évènements peut se faire directement en MXML : ici, quand on clic sur le bouton, le contenu texte du label est modifié en fonction de la valeur textuelle du champs de saisie.

Personnaliser le Style et le Mise en Forme des composants Flex

On peut bien sur personnaliser le look des composants de base de plusieurs manières:

• Le CSS: soit dans la déclaration des composants MXML (inline), soit dans un fichier CSS séparé de l'application. Ce fichier peut-être compilé avec l'application ou chargé à la volée. Il faut noter que Flex propose de nombreuses propriétés spécifiques par rapport au xhtml par exemple, avec des propriétés permettant de régler directement l'angle d'arrondi des bordures ou la transparence d'un border ...
• Les Skins: Flex 4 fait la part belle au Skinning de composant Flex. En effet, depuis Flex 3, Adobe a choisi de simplifier le processus de skinning de composants Flex grâce au format d'échange FXG. Vous pouvez ainsi créer un design sous Adobe Photoshop ou Adobe Illustrator et l'exporter en FXG pour pouvoir l'importer ensuite soit dans Flash Catalyst, soit dans Flash Builder 4. Vous trouverez des tutoriaux sur le skinning de composant Flex 4 sur flex-tutorial.fr
• Les itemRenderer: technique permettant de définir un composant personnel qui sera utilisé pour chaque élément du composant cible (une liste déroulante contenant sur chaque ligne une image, un champ texte et un label par exemple)

Les propriétés CSS permettent à elles seules de transformer totalement le style d'une application. Les propriétés sont bien plus nombreuses que celle proposées pour le html par exemple, il faut donc apprendre à connaître et à utiliser ces propriétés Flex CSS.

Le Langage ActionScript 3 (AS3)

ActionScript est le langage de programmation utilisé au sein des applications Adobe Flash et Adobe Flex. ActionScript est un langage de script, (orienté objet), basé sur ECMAScript. ECMAScript étant une version standardisée de JavaScript, ActionScript et JavaScript partagent une syntaxe semblable.

Avec Flex, ActionScript 3 permet aussi bien de créer des composants dynamiquement et de les ajouter à l'application que de traiter des chaînes de caractères, d'ajouter des écouteurs d'événements (EventListener) ou de gérer les échanges client/serveur. L'AS3 possède une implémentation totalement objet, l'organisation en packages, la gestion des types natifs (int, String, Boolean, Number ...).

Un exemple de plusieurs utilisations simples de l'Action Script 3:

// image embed (compilée) dans l'application
[Bindable]
[Embed(source="assets/image.png")]
public var imgClass:Class;
// définition de variables utilisant certains types de base
public var newArray:Array = new Array;
public var newNumber:Number = 8;
public var newString:String = "Chaine";
// définition de variables static
private static var instance:SearchResult;
// singleton d'une classe SearchResult par exemple
public static function getInstance():SearchResult {
    if ( instance == null ) {
        instance = new SearchResult();
    }
    return instance;
}
// fonction simple
public function addImageLink():void{
    // création d'une image
       var newImage:Image = new Image();
       newImage.name = "newImageName";
       newImage.source = imgClass;
       newImage.toolTip = newString;
       // ajout d'un événement sur le click
       newImage.addEventListener(MouseEvent.CLICK, sendData);
}
// fonction executée lors d'un click sur l'image créee au dessus
public function sendData(evt:MouseEvent){
    trace ("bouton cliqué");
}

Les composants personnalisés

Une des grandes forces de Flex est la simplicité avec laquelle on peut créer ses propres composants en héritant de composants basiques préexistants et de les manipuler via son propre espace de noms.

Voici un exemple de composant simple (fenêtre de login):

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx" width="496" height="332" paddingTop="15">
    <mx:ProgressBar id="progressBar" width="215" x="145" y="231" label="Authentification en cours..." trackHeight="10"
                    verticalGap="-30" indeterminate="true" styleName="loginProgressBar" />
    <mx:Form id="loginForm" x="120" y="190">
      <mx:FormItem label="Utilisateur :" color="#FFFFFF">
        <mx:TextInput id="loginInput" fontSize="10" height="25" width="125" enabled="{!cb.selected}" text="demo" color="#000000"/>
      </mx:FormItem>
      <mx:FormItem label="Mot de passe :" color="#FFFFFF">
        <mx:TextInput id="passInput" fontSize="10" height="25" width="125" enabled="{!cb.selected}" displayAsPassword="true" text="demo" color="#000000"/>
      </mx:FormItem>
      <mx:Spacer width="100%" height="10"/>
      <mx:HBox width="100%">
        <mx:Spacer width="20%"/>
        <mx:CheckBox id="cb" label="Connexion anonyme" selected="false"/>
        <mx:Spacer width="100%"/>
        <mx:Button id="okButton" label="Ok" />
      </mx:HBox>
    </mx:Form>
</s:VGroup>

Voici ensuite comment l'utiliser dans une application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
    <s:Panel title="Exemple MXML" width="330">
      <s:layout>
        <s:VerticalLayout paddingLeft="15" paddingTop="15" paddingBottom="15" paddingRight="15"/>
      </s:layout>
        <local:LoginWindow id="loginWindow" />
    </s:Panel>
</s:Application>

Flex et l'accès au données distantes (connexion Client / Serveur)

Flex propose trois modes d'accès aux données distantes, par le biais de trois composants :

• L'objet HTTPService, comme son nom l'indique, permet d'effectuer des requêtes HTTP sur une URL et d'en récupérer la réponse. Un objet bien pratique quand on veut s'interfacer avec une architecture REST, par exemple. Cet objet utilise les classes ActionScript URLLoader et URLRequest en background.
• L'objet WebService permet de s'interfacer avec un WebService au format WSDL via SOAP. Quand on dispose de tels service, c'est un plaisir de se baser dessus depuis Flex puisqu'on a qu'à référencer les méthodes à utiliser et les déclencher depuis leur référence.
• L'objet RemoteObject, implémentation du protocole RPC dans Flex, pendant Flash/ActionScript du RMI en Java.

La gestion native de l'E4X, qui permet la manipulation aisée de fichiers XML, fait de Flex un outil de choix pour la communication avec des Services Web. Notez que Flash Builder 4 contient des assistants de connexion à votre base de données pour vous simplifier la création de code client.

Flash Builder 4

Adobe propose un IDE dédié à la réalisation d'applications Flex et ActionScript, Flash Builder 4. Cet outil, basé sur l'environnement Eclipse, permet de disposer d'un environnement complet de développement comprenant entre autres un éditeur de code (MXML en mode source/wysiwyg, ActionScript, CSS, etc.), un débogueur avancé à la Java, un gestionnaire de projets, la compilation automatique et surtout un accès à l'immense catalogue des plugins Eclipse (connecteurs SVN ..). D'ailleurs, Flash Builder 4 est également disponible sous la forme d'un plugin à installer sur une instance d'Eclipse existante : de quoi travailler sur vos projets Flex/PHP / Java de façon centralisée, par exemple.

Voir les fonctionnalités de Flash Builder 4 en détail

Inconvénient de cet outil, il est payant. Dans sa version de base, il est proposé aux alentours de 200€. Cette version contentera la grande majorité des développeurs car très complète. Néanmoins, le SDK de Flex étant gratuit, vous pouvez tout à fait vous passer de Flash Builder et compiler vos applications à la main. Vous pouvez aussi utiliser un logiciel gratuit (mais moins complet et performant) tel que FlashDevelop. Même s'il n'est pas gratuit, l'acquisition de Flash Builder vous permettra de développer bien plus rapidement des applications Flex. Le prix de cet outil est négligeable par rapport au confort de code qu'il vous procure.

Télécharger une version d'essai de Flash Builder 4

Télécharger le SDK Flex gratuitement

Flex, en bref

Au final, Flex est un nouvel environnement de développement permettant de développer des applications pour le web mais aussi des applications bureautiques et pour les mobiles. Ces applications étant compatibles avec tous les navigateurs disposant du Flash Player 10 et tous les systèmes d'exploitation. Le mieux est d'essayer une version du Flash Builder 4 et de développer ses premières applications Flex pour se rendre compte de sa puissance et de sa facilité d'utilisation. L'excellente documentation de l'ensemble des composants et des classes ainsi que les nombreux tutoriaux Flex en ligne vous permettront de développement rapidement des applications riches.

L'essayer, c'est l'adopter!

Les Tutoriaux Adobe Flex

Vous pouvez dès maintenant consulter la liste des tutoriaux Flex proposés par flex-tutorial.fr.