Flex et Flex Builder 3

Présentation de Flex et Flex Builder 3

Flex 3 ?

Adobe Flex 3 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). Au départ, Flex donne la possibilité de créer des fichiers .SWF pouvant être lu par Adobe Flash Player. Tout comme Flash 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. Flex a déjà été utilisé pour créer de superbes application:

Personnalisation de produit Harley Davidson

Applications orientées Business

Visualisation de données (SAP)

Business Application Flex

Data Visualisation Flex

Application Média Riche (Belgacom TV)

Editeur de texte type Word en ligne

Boutique en ligne (Sony)

Produit Selection Flex Sony

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.

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

AIR 1.0 est un nouveau runtime d’Adobe permettant de concevoir des applications disponibles sur 3 Systèmes d’Exploitation (Mac ,Windows ,Linux) avec le même fichier. 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 et la détection du réseau sont aussi fournies dans AIR.

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

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"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center">
   <mx:Panel title="Exemple MXML" width="330"
   	paddingLeft="15" paddingTop="15" paddingBottom="15" paddingRight="15">
   	<mx:HBox>
      <mx:TextInput id="firstname"/>
      <mx:Button label="Dire bonjour" click="{result.text='Bonjour, '+firstname.text}"/>
    </mx:HBox>
      <mx:Label id="result" width="265"/>
   </mx:Panel>
</mx:Application>

This movie requires Flash Player 9

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 (<mx:Application>) déclare l'espace de nommage (namespace) "mx", qui permet d'utiliser les composants natifs de Flex
Imbriqué dans le tag Application, on déclare un conteneur sous la forme d'un Panel contenant un conteneur et 3 contrôles:
- Un conteneur HBox qui permet simplement d'aligner les composants
- 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: les skins utilisent des éléments graphiques externes compilées avec l'application et pas seulement des propriétés prédéfinies comme le CSS. Ainsi on peut complètement changer la forme et l'aspect d'un composant. Ces éléments graphiques sont contenus dans un SWF dont les éléments sont repérés par noms de symbole. Les skins peuvent être crées à partir de Flash ou d'Illustrator par exemple.
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.

Adobe a crée une application Flex permettant de visualiser directement l'effet de ces propriétés CSS directement sur les composants: le Flex 3 Style Explorer:

Adobe Flex 3 Style Explorer

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"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="496" height="332">
	<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" color="#FFFFFF" textRollOverColor="#FFFFFF"/>
			<mx:Spacer width="100%"/>
			<mx:Button id="okButton" label="Ok" />
		</mx:HBox>
	</mx:Form>
	<mx:HBox id="copyrightButton" bottom="0"  backgroundColor="0x444444" width="100%" horizontalAlign="center">
		<mx:LinkButton label="linkButton" color="0xFFFFFF"
			rollOverColor="0xFFFFFF"selectionColor="0xFFFFFF"/>
	</mx:HBox>
</mx:Canvas>

S'il on écrit ce composant dans un fichier nommé "LoginWindow.mxml" par exemple et qu'on le stocke dans le répertoire "comps". On pourra l'utiliser directement dans une application grâce à ce code MXML très simple:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:local="comps.*"
   layout="absolute">
   <mx:Panel title="Connexion">
      <local:LoginWindow id="loginWindow"/>
   </mx:Panel>
</mx:Application>

On a déclaré un nouvel espace de noms, ici "local" (mais on aurait pu mettre ce qu'on veut) pointant vers les fichiers sous le répertoire "comps" du projet. On voit ici la facilité d'utilisation des composants réutilisables dans Flex. De nombreux composants sont disponibles gratuitement avec les sources sur Internet.

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.

Flex Builder 3

Adobe propose un IDE dédié à la réalisation d'applications Flex, FlexBuilder. 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. D'ailleurs, FlexBuilder 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.

Inconvénient majeur de cet outil, il est payant. Et coûte relativement cher, puisque proposé aux alentours de 500€. Néanmoins, le SDK de Flex étant gratuit, vous pouvez tout à fait vous passer de FlexBuilder et compiler vos applications à la main.

Télécharger une version d'essai de Flex Builder 3

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. Ces applications étant compatibles avec tous les navigateurs disposant du Flash Player 9 et tous les systèmes d'exploitation. Le mieux est d'essayer une version du Flex Builder 3 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.

Adobe^® Flex^™ Tutorial