Découverte de Flex Builder 2.0

| Morgan Loyer | Grégory Dumas |

Découverte de Flex Builder : Des bases, en passant par l'installation, jusqu'au premier projet.

- Titre : Découverte de Flex Builder 2.0

- Auteurs : Morgan Loyer, Grégory Dumas

- Parution : 1 août 2007

- Licence : Copyright ® 2007 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Préambule, petite chronique de Flex

- II. Les langages MXML & ActionScript

- II-A. Le langage MXML

- II-A-1. Qu'est ce donc ?

- II-A-2. Les bases

- II-A-3. Comprendre le fonctionnement à travers un exemple simple

- II-B. Le langage ActionScript 3.0

- III. Installation de Flex Builder

- III-A. Téléchargement de Flex builder 2

- III-B. Installation sous Windows

- III-C. Installation sous Mac OSX

- IV. Mon premier projet Flex

- IV-A. Créer un projet Flex

- IV-B. Compiler un projet Flex

- IV-C. Déployer un projet

- IV-D. Partager les sources

- V. Utiliser les composants

- V-A. Positionnement des composants

- V-B. Ajout de code ActionScript

- VI. Conclusion

I - Préambule, petite chronique de Flex

Flex a été initialement conçu en 2004 par la société Macromedia (rachetée par Adobe en 2005), comme plate-forme de création d'applications Internet riches (RIA), compatible avec de multiples plates-formes, grâce au player Flash (répandu sur environ 96% des machines).

Flex séduit car il permet à son utilisateur de créer des projets organisés et puissants, très simplement par rapport à la quantité de travail qui serait nécessaire sans un tel outil.

Les projets Flex se composent de deux langages :

- Le langage MXML, basé sur XML, qui permet de mettre en place extrêmement facilement et rapidement des interfaces utilisateurs interactives.

- Le Langage ActionScript 3.0 repose sur les normes ECMAScript. C'est actuellement la dernière version du langage qui accompagne Flash depuis des années. L'ActionScript 3.0 peut se revendiquer à présent en temps que véritable langage de programmation orientée objet ( similaire à Java, C++...).

Vous pouvez vous demander quelles sont ces différentes versions de Flex dont vous entendez parler. Voici quelques définitions :

- Le Flex Builder est l'environnement de développement de Flex, il peut être installé en temps qu'IDE indépendant ou en temps que plug-in pour Eclipse (http://eclipse.developpez.com/).

- Le Flex Charting est une bibliothèque de graphiques que les développeurs peuvent intégrer à leurs applications. Ces graphiques sont ensuite liés à des scripts, rendant l'application interactive.

- Le Flex SDK (rendu open-source) se compose des compilateurs MXML et ActionScript, du débuggeur ActionScript 3.0 ainsi que des éléments graphiques de base pour programmer avec Flex.

- Flex Data Service est une librairie offrant des moyens de communications avancés avec un serveur.

II - Les langages MXML & ActionScript

II-A - Le langage MXML

II-A-1 - Qu'est ce donc ?

Le langage MXML est destiné à garder un code propre et accessible d'accès même dans des projets de très grande envergure. Il se base sur XML et sera compilé en ActionScript par le compilateur de Flex SDK.

II-A-2 - Les bases

Le langage MXML étant basé sur XML, il suit ses contraintes, notamment :

- Chaque balise doit être fermée : <balise/> ou <balise></balise> .

- La valeur des arguments des balises doivent être entre guillemets.

II-A-3 - Comprendre le fonctionnement à travers un exemple simple

Le principe de MXML est simple : à une balise correspond une classe ActionScript
Ainsi, un composant Button sera défini comme suit :

<mx:Button id=«monBouton» label="Je suis un bouton"/>

Label est une propriété du composant Button, il s'agit du texte qui s'affiche sur le bouton Et en toute logique, ce qu'en ActionScript 3.0, vous auriez écrit :

monBouton.x = 100;
monBouton.y = 100;

, vous pouvez maintenant l'intégrer dans la balise du composant :

<mx:Button id=«monBouton» label="Je suis un bouton" x=«100» y=«100» />

Cela revient au même, puisque le code sera compilé en ActionScript !
De même, pour établir l'interactivité du bouton, ce qu'en ActionScript 3.0 vous auriez écrit :

monBoutton.addEventlListener(MouseEvent.DOWN, onClick);

, sera intégré dans la balise comme suit :

<mx:Button id="monBouton" label="Je suis un bouton" x=«100» y=«100» click="onClick" />

, avec onClick en tant que fonction qui se déclenchera au clic sur le bouton. Mais où la place-t-on cette fameuse fonction onClick ?
Deux possibilités s'offrent à vous, selon l'organisation de votre projet :
Soit, directement dans le fichier mxml, entre les balises :

<mx:Script> ////////// PROBLEME D'INCLUSION DE LA BALISE CDATA DANS L'EDITEUR !
<![CDATA[
public function onClick (e:Event)
{
// le code
}
</mx:Script>

(Notez que la balise CDATA permet d'introduire des caractères spéciaux présents dans l'ActionScript dans le code MXML, qui perturberaient la structure du document sans cela).
La seconde solution consiste à importer la classe contenant la fonction :

<mx:Script>
import com.monPackage.MaClasse;
</mx:Script>

II-B - Le langage ActionScript 3.0

L'ActionScript 3.0 est la dernière version du langage de programmation de Flash et maintenant de Flex. Avec de nombreuses nouveautés introduites pas Adobe, il se démarque de l'ActionScript 1 et de l'ActionScript 2 (où étaient apparues les classes) en temps que véritable langage de programmation orientée objet (POO).

Dans les nouveautés, nous pouvons citer :

- Une nouvelle architecture, beaucoup plus logique et puissante que la précédente.

- La possibilité d'utiliser des expressions régulières.

- L'usage du XML en natif, c'est à dire que l'on peut à présent accéder facilement aux éléments d'un XML chargé, comme aux propriétés d'un objet

- Un nouveau système de gestion d'événements.

De plus, l'ActionScript 3.0 bénéficie des nouveautés introduites par Adobe Flash 8 telles que les classes Bitmap et BitmapData qui permettent de travailler facilement sur des images bitmap.

Pour plus d'informations et de cours sur le langage ActionScript 3.0, vous pouvez vous rendre :

- sur la page tutoriels de Developpez.com.

- sur la page de référence d'ActionScript 3.0 (Flex)

- sur la page d'aide à la transition ActionScript 2 -> ActionScript 3

III - Installation de Flex Builder

Une étape qui peut paraître facile pour certains, mais qui le sera moins pour les moins avertis. Elle mérite donc sa place dans ce test, n'hésitez pas à passer à la suite si vous la jugez inutile.

III-A - Téléchargement de Flex builder 2

Pour télécharger Flex Builder, il vous faut vous rendre sur le site d'Adobe, dans la section téléchargement. Adobe vous demande de vous inscrire, si cela n'est pas encore fait, ne soyez pas effrayé par la quantité d'informations que demande Adobe lors de l'inscription, ces données servent pour des statistiques. Sélectionnez ensuite « Flex Builder 2 » ainsi que la version de votre système d'exploitation et téléchargez.

III-B - Installation sous Windows

Après avoir téléchargé votre fichier, vous devriez être en possession d'un .exe

Tout d'abord, choisissez l'emplacement destiné à décompresser les fichiers (temporairement) :

L'installateur vous demande ensuite si vous souhaitez installer Flex en temps qu'application indépendante ou en temps que plug-in Eclipse. Choisissez la première solution si vous n'avez ou n'utilisez pas Eclipse.
(Attention, ce test ne couvre pas la version plug-in d'Eclipse!).

L'installateur vous laisse la possibilité d'annuler l'installation, cliquez sur Next.

Vous devez accepter la licence d'utilisation imposée par Adobe, cochez donc la case "I accept the terms of the licence Agreements" puis cliquez sur Next si vous en acceptez les conditions.

L'installateur vous laisse ensuite choisir le lieu d'installation de Flex, il est normalement bien paramétré dans votre dossier "Documents & Settings"

L'installateur vous propose également d'installer le lecteur Flash player 9 sur l'ensemble de vos navigateurs.

L'installateur vous expose un bref récapitulatif que vous devrez valider en cliquant sur Next pour installer Flex Builder.

III-C - Installation sous Mac OSX

Après avoir téléchargé votre fichier, vous devriez être en possession d'un .dmg

L'installateur vous laisse la possibilité d'annuler l'installation, cliquez sur Next...

Vous devez accepter la licence d'utilisation imposée par Adobe, cochez donc la case "I accept the terms of the licence Agreements" puis cliquez sur Next si vous en acceptez les conditions.

L'installateur vous laisse ensuite choisir le lieu d'installation de Flex, choisissez sur quel disque vous souhaitez l'installer.

L'installateur vous propose également d'installer le lecteur Flash Player 9 sur l'ensemble de vos navigateurs, s'il ne l'est pas encore, cochez la case...

L'installateur vous expose un bref récapitulatif que vous devrez valider en cliquant sur Next.

Patientez pendant la copie des fichiers de Flex Builder...

Normalement, l'installateur devrait vous confirmer l'installation de Flex Builder :

IV - Mon premier projet Flex

IV-A - Créer un projet Flex

Tout d'abord, lançons Flex Builder

Ouverture de FlexBuilder

Pour créer un nouveau projet, nous devons aller dans le menu File puis choisir New puis enfin choisir Flex Project

Nouveau projet Flex

Flex Builder nous propose alors de configurer notre projet.

Tout d'abord en choisissant notre mode connexion aux données. Pour notre test, le mode basique suffira

Choix du mode d'accès aux données

Ensuite, il nous demande le nom du projet à créer ainsi que l'emplacement où l'on souhaite le créer

Choix du nom et de l'emplacement du projet

Enfin, Flex Builder nous propose d'éventuellement ajouter d'autres répertoires, d'autres librairies, de configurer le répertoire de sortie ...

Options complémentaires de création du projet

Dans notre cas, nous allons garder les paramètres par défaut et cliquer sur Finish pour créer notre projet.
Notre environnement de développement ressemble alors à ceci :

Environnement de développement

Examinons plus en détails, les principaux panneaux :

Le panneau Navigator : Ici, nous retrouvons tous les fichiers générés nécessaires au bon fonctionnement de l'application

Fichiers générés

Le panneau mxml en vue Source :

Panneau mxml - Source

Le panneau mxml en vue Design : A gauche du panneau, on a un aperçu de l'application; à droite, l'ensemble des propriétés disponibles pour le composant sélectionné. Ici, vu qu'aucun composant n'a encore été ajouté, il s'agit des propriétés de la scène.

Panneau mxml - Design

Le panneau Components : Ici, nous retrouvons tous les composants disponibles pour enrichir notre application

Panneau des composants disponibles

IV-B - Compiler un projet Flex

Dans Flex Builder, la compilation se fait de manière transparente. En effet, il suffit de sauvegarder son projet pour que celui-ci régénère les fichiers "résultants".

Dans notre cas, si l'on sauvegarde notre projet (toujours vide), on obtient en exécutant le projet la fenêtre vierge suivante :

Fenêtre d'exécution du projet par défaut

Maintenant, si nous modifions seulement le fond de notre animation et que nous sauvegardons à nouveau, nous nous apercevons que Flex Builder génère à nouveau le projet.

Nouvelle sauvegarde après modification du fond de l'animation

Ensuite, il suffit d'actualiser la fenêtre de notre navigateur pour voir la modification : le fond est désormais blanc.

Après actualisation du navigateur : le fond est blanc

IV-C - Déployer un projet

Il n'y a de processus de déploiement particulier, il suffit de placer le contenu du répertoire bin sur un serveur pour que l'application soit déployée.

IV-D - Partager les sources

Partager ses sources avec Flex est un jeu d'enfant. Pour cela, il suffit de cliquer sur le bouton prévu à cet effet.

Publier le code source

Une fenêtre apparait nous demandant quels fichiers doivent être partagés.

Options de publication des sources

Avant l'opération, nous avions :

Avant publication des sources

Désormais nous avons ceci :

Après publication des sources

Qu'est-ce que cela change pour l'animation ?
Un nouvel item est apparu sur le clic droit : "View Source"

Nouvel item dans le menu contextuel (clic droit)

Lorsqu'on sélectionne cet item, nous obtenons :

Le code source disponible

V - Utiliser les composants

V-A - Positionnement des composants

Tout d'abord, pour ajouter un composant à l'animation, il suffit, en mode design, de glisser/déposer un composant sur la scène.
Pour commencer, ajoutons deux boutons à l'animation.
On obtient ceci :

Deux boutons positionnés en mode absolu

Comme vous pouvez le constater, dans les propriétés de la scène, on peut voir que le mode de positionnement (layout) par défaut est absolu.
Dans ce mode, les composants sont positionnés en fonction de leur coordonnées x et y.

Il existe deux autres modes de positionnement :

- Horizontal

- Vertical

Modes de positionnement

Dans le mode horizontal, les composants se placent automatiquement les uns à coté des autres.

Mode horizontal

Dans le mode vertical, les composants se placent automatiquement les uns en-dessous des autres.

Mode horizontal

Dans ces deux modes, les seuls paramètres sur lesquels l'on peut agir sont la taille et la hauteur des composants

Dans le mode absolu, en plus des coordonnées (x et y), de la largeur et de la hauteur des composants, il est possible d'agir des contraintes de positionnement. Les composants ainsi contraints se positionnent de manière constante par rapport à un bord ou rapport à un autre composant.

Contraintes de positionnement

Ainsi dans l'exemple précédent, on a contraint un bouton à se situer de manière constante à 50px du haut de l'animation et de bord droit.

Exemples :

Exemple 1

Exemple 2

Le code source est mis à jour pour obtenir ceci :

Code source mis à jour

Maintenant que nous savons positionner nos composants, voyons comment les rendre plus dynamique. Cela passe par l'ajout de code ActionScript.

V-B - Ajout de code ActionScript

Pour ajouter du code ActionScript, nous allons nous placer dans la vue source comme dans l'image précédente.
Nous allons nous placer sur un des deux composants bouton puis nous allons appuyer sur la barre espace.
Cette action a pour but de faire apparaître toutes les propriétés, méthodes accessibles depuis notre composant.

Liste des propriétés disponibles

Pour notre exemple, nous allons sélectionner l'item click afin d'ajouter un événement sur le clic du bouton. Par exemple, nous allons déclencher l'ouverture d'une fenêtre Alert sur le clic du bouton.

Nous allons commencer par taper mx ("librairie racine") puis l'auto-complétion nous guidera pour obtenir notre composant mx.controls.Alert

Ajout de l'événement clic sur un bouton

Vous remarquerez que lors de l'ajout de notre composant, Flex Builder à automatiquement ajouté la librairie correspondante :

<![CDATA[
import mx.controls.Alert;
]]>

Aussi, il nous est possible d'"alléger" le code que nous venons de taper et ainsi supprimer mx.controls devenu inutile.
Nous terminons enfin la ligne de code par l'affichage de la popup grâce à la méthode Show.

Code de notre bouton affichant la popup

Une fois publié, lorsque nous cliquons sur notre bouton, nous obtenons :

Résultat de l'exemple

VI - Conclusion

Ce test ne prétend pas être complet, il s'agissait essentiellement de vous faire découvrir cet EDI. Ainsi un certain nombre de fonctionnalités ou d'options n'ont pas été abordées et vous ne manquerez pas de les découvrir par vous-même.

Nous espérons que ce test vous aura donné envie de prolonger par vous-même ces tests. Une version de démonstration est téléchargeable sur le site d'Adobe : Version d'essai de Flex Builder 2

N'hésitez pas à nous faire part de vos impressions sur le forum Flex : EDI & Outils