Découvrez Flex

Hein c'est quoi ce truc Flex?! Encore une de ces technos bizarres qui servent à rien?!!

Ola, à peine commencé on me harcèle déjà :p

La plupart des gens savent de quoi je parle lorsque je dis "Flash": "Ah oui c'est ce machin qui permet de faire des trucs qui bougent sur les pages d'internet!"
Par contre quand je dis Flex: "... heeeeuuu ... c'est un truc flexible?..."

Si c'est votre cas je ne vous en veux pas, c'est génial ce tuto est fait pour vous! :D

Ne perdons pas de temps, définition !

Flex : solution de développement puissante permettant la création et le déploiement d'applications RIA (Rich Internet Application). Projet commencé par Macromedia en 2004 puis repris par Adobe en 2006 (dû au rachat de Macromedia par Adobe).

Eh, mais Flash permet déjà de faire des RIA, à quoi bon une autre techno ?

Au commencement, Flash ne permettait que de faire des animations et l'utilisateur ne pouvait pas interagir avec elles. Il s'agissait en quelque sorte de GIF animés améliorés. Ensuite, Flash s'est doté d'un langage de programmation, "ActionScript", qui permettait d'ajouter du code derrière l'animation afin de la rendre dynamique (interaction avec l'utilisateur possible). Avec les différentes améliorations apportées au cours du temps à l'ActionScript, deux orientations différentes de la technologie Flash ont commencé à apparaître :

• voie n°1 : Flash utilisé surtout pour faire des animations avec un contenu graphique évolué, mais peu utilisé pour ses fonctionnalités de programmation ;

• voie n°2 : Flash utilisé surtout pour ses fonctionnalités de programmation avec un contenu graphique modéré.

La voie n°1 était plus adaptée aux graphistes, alors que la voie n°2 correspondait davantage à l'utilisation de Flash par des développeurs. Fort de cette déviance de l'utilisation de Flash, Macromedia a décidé d'agir en faveur des développeurs en créant une solution de développement qui leur serait plus adaptée. Tadaaaa... j'ai nommé : Flex !

En quoi Flex est-il plus adapté aux développeurs ? Et d'abord, c'est quoi la différence entre Flash et Flex ?

Flash n'est pas une plate-forme de développement, il n'a pas été conçu dans le but de le devenir, et ne le deviendra certainement jamais. Les versions 1 et 2 d'ActionScript n'étaient que des solutions de développement greffées à Flash pour lui permettre de créer du contenu interactif. Le grand hic, c'est qu'ActionScript ressemblait plus à de la bidouille qu'à un langage de programmation propre et normalisé. L'apprentissage d'ActionScript pour un développeur était, de ce fait, souvent long et rigoureux.

Flex est une plate-forme de développement conçue spécifiquement pour les développeurs et qui s'appuie sur une nouvelle version du langage : ActionScript 3. Ce dernier est un langage qui obéit aux règles de la POO (Programmation Orientée Objet) et agrandit considérablement les possibilités de création en termes de développement. Il dispose d'un framework fournissant au développeur de nombreuses classes, ce qui permet un développement rapide et un code mieux structuré. Contrairement à Flash, Flex ne dispose pas d'outils de dessin. Les composants nécessaires sont déjà créés, le développeur peut les insérer à souhait et modifier leur apparence au besoin. Pour ceux qui connaissent Visual Basic, il s'agit du même principe (juste le principe ! :p ). Dernier détail : il est possible de créer des animations avec Flex, mais il faut les écrire en ActionScript ; pas très pratique, donc... :o Mais pas de panique ! Il est possible d'importer du contenu Flash dans une application Flex, possibilité améliorée avec la sortie de Flex Builder 3.

Important : Flex n'a pas été conçu avec l'objectif de remplacer Flash. En effet, les 2 technologies sont complémentaires et répondent à des besoins différents. La venue de Flex n'annonce en rien la mort de Flash.

Je vais m'arrêter là pour la présentation de Flex : aller plus en profondeur déboucherait sur une étude technique, ce qui n'est pas le but ici. Sachez toutefois que le Web regorge d'informations si vous souhaitez en savoir plus sur les avantages, les inconvénients, les performances, la sécurité, etc.

Maintenant, pour les petits impatients qui ne peuvent pas attendre de voir à quoi ressemble une application Flex, voici une démo qui va vous intéresser (une fois la page chargée, cliquez sur Products en haut). Si vous n'avez pas le plug-in Flash Player 9 installé, prenez patience et passez au chapitre suivant :p .

Le Flex Store

Depuis le 25 février 2008, Flex Builder 3 est téléchargeable sur le site d'Adobe :

Page de téléchargement de Flex Builder 3 Professional

Cliquez sur le lien ci-dessus et une fois la page chargée, vous devriez voir ceci :

Si vous avez déjà un compte Macromedia ou Adobe, utilisez-le pour vous logger, sinon créez un nouveau compte en cliquant sur Create an Adobe account.

Pas de panique ! S'inscrire prend à peine 2 minutes, et vous ne vous ferez pas spammer à condition de ne pas cocher les cases d'inscription aux newsletters comme indiqué ci-dessous :

Une fois inscrits et loggés, vous devriez arriver sur la page suivante :

Dans la liste de sélection, choisissez la version qui correspond à votre langue et à votre système d'exploitation. Ne cherchez pas de version française de Flex, il n'y en a pour le moment aucune. Une solution consisterait à installer Eclipse avec le pack de langages additionnels pour la langue française, puis d'installer le plugin Flex. Je n'ai pas testé cette solution, n'hésitez pas à me faire part de vos feedbacks si vous avez essayé. :D

Une fois le fichier téléchargé, lancez l'installation. L'installation n'a rien de très compliqué, mais juste au cas où, suivons-la étape par étape.

• Sur l'écran d'accueil, on vous propose de choisir votre langue (ce qui entre nous est un peu stupide puisque la liste ne propose qu'un seul choix : l'anglais). Cliquez sur le bouton ok.

• La page qui s'affiche vous recommande de fermer toutes les applications en cours d'exécution avant de continuer. Je vous recommande effectivement de fermer les applications "lourdes", c'est-à-dire celles qui prennent beaucoup d'espace mémoire, ou dont le processus sollicite beaucoup le processeur (évitez par exemple d'encoder un divX pendant ce temps-là :D ). Ah et euh... oui, n'oubliez pas de gardez votre navigateur préféré ouvert, vous en aurez besoin pour continuer de suivre ce tutoriel ^^ . Vous pouvez ensuite cliquer sur Next.

• Lisez et acceptez les accords de licence, cliquez sur Next.

• Choisissez votre répertoire de destination, cliquez sur Next.

• Vérifiez que les cases pour installer le plugin Flash Player 9 pour IE, Netscape ou Firefox sont bien cochées. C'est important sinon vous ne pourrez pas lancer vos applications Flex ! Vous avez aussi le choix d'installer l'extension ColdFusion ou le plug-in JavaScript. Si vous pensez utiliser ces technologies, cochez également ces cases mais sachez que ces installations ne sont pas indispensables au développement d'une application Flex. Cliquez sur Next.

• Si votre navigateur préféré est ouvert, l'installateur vous demandera de le fermer pour pouvoir installer Flash Player. Cette fois-ci, pas le choix. Fermez donc votre navigateur, cliquez sur Next puis sur install et revenez me voir une fois l'installation terminée. :)

Félicitations ! :D Flex Builder 3 est maintenant installé sur votre ordinateur. Essayez donc de lancer l'application pour vérifier que tout s'est bien passé.

Si vous possédez un numéro de licence, entrez-le ici, sinon cliquez sur Continue Trial et vous pourrez utiliser cette installation pour une période de 2 mois :

Il se peut qu'au premier démarrage le message suivant s'affiche dans la fenêtre Flex Start Page :

Citation : Flex Start Page

The Flex Start Page requires the Adobe Flash Player. Please use the installers in the Flex Builder 3/Player/ folder to install the Adobe Flash Player into your default browser.

Si s'est le cas, rendez-vous dans le dossier d'installation de Flex, et dans le dossier Player devrait se trouver un dossier contenant les installations du Player Flash pour votre système d'exploitation. Fermez Flex, exécutez la commande Install Flash Player 9 ActiveX et réessayez de lancer Flex. L'installation du contrôle ActiveX devrait suffire à régler le problème ; toutefois, si ça n'est pas le cas, exécutez également Install Flash Player 9 Plugin (vous devrez fermer votre navigateur).

Voilà, l'installation est terminée !

Dernière info : si vous souhaitez vous tenir au courant des nouveautés, visitez le site Adobe Labs :

Ce site est incontournable si vous souhaitez être au courant du prochain gadget que la machine Adobe va vous pondre ;) . Si vous le souhaitez, faites un petit tour sur le site : on y trouve un tas de choses intéressantes, en particulier pour les développeurs. Personnellement, je le visite régulièrement pour connaître les améliorations qui seront apportées à Flex ou à Flash. Point faible : le site n'est disponible que dans une seule langue, l'anglais.

Maintenant, on passe aux choses sérieuses ! :p

Nous allons ensemble créer un nouveau projet très simple permettant de comprendre le fonctionnement de base d'une application Flex.

Si Flex Builder n'est pas lancé, commencez par là (ouh la ça attaque dur ! ^^ ).

Ensuite, cliquez sur File dans le menu principal. Dans le menu qui se déroule sous vos yeux, survolez New avec votre souris. Une liste apparaît avec plusieurs possibilités. Ce qui nous intéresse, nous, c'est de créer un nouveau projet : donc cliquons sur Flex Project. La fenêtre suivante apparaît :

On remarque ici qu'il est possible de créer des applications de bureau, il suffit pour cela de cocher Desktop Application (runs in Adobe AIR). Cela signifie qu'il est non seulement possible de créer des applications internet, mais également de faire du software exécutable sur votre ordinateur. :)

Dans ce tutoriel nous allons créer un projet Web, vérifiez donc que Web Application (runs in Flash Player) est bien coché. Ensuite donnez un nom à votre projet, entrez tutoFlex dans le champ Project Name. Vous avez ensuite la possibilité de choisir où vous souhaitez enregistrer votre projet, ou vous pouvez laisser le chemin par défaut. Le dernier encadré permet de choisir la technologie serveur avec laquelle on va travailler. Par exemple, pour un projet PhP/MySQL, vous choisirez PHP dans la liste. Dans ce tutoriel, je n'utiliserai pas de technologie serveur, vous pouvez donc laisser la sélection sur None et cliquer sur Next.

Dans cette boîte de dialogue on vous demande de choisir le dossier dans lequel les fichiers compilés du projet seront exportés. En d'autres termes, le dossier de votre site web qui va contenir l'application Flex. Pour notre exemple nous laisserons bin-debug, ce dossier sera créé dans la racine de notre projet Flex. Cliquez sur Next.

Ici, on vous demande de choisir un nom pour votre dossier source. Le nom par défaut est src mais vous pouvez bien sur entrer celui qui vous convient. Vous avez également la possibilité d'inclure des dossiers contenant une autre partie du code source mais qui se trouvent en dehors du dossier source principal. Pour cela il suffit de cliquer sur Add Folder. Le champ Output folder URL désigne l'URL de votre application (compilée) sur le serveur où elle s'exécute. Dans notre exemple nous n'utiliserons pas de serveur, nous laisserons donc ce champ vide. Enfin, l'onglet Library Path vous permet d'ajouter des bibliothèques complémentaires au SDK de base. Ceci est pratique si vous disposez de classes spécialisées qui ne font pas partie du SDK, que vous souhaitez pouvoir utiliser dans votre projet. Encore une fois, je vous dis cela à titre informatif, nous n'utiliserons pas de classes supplémentaires dans cet exemple, vous pouvez donc cliquer sur Finish pour terminer.

Tadaaaa! :D Si tout s'est bien passé, le projet est créé, vous devriez obtenir ceci :

Si vous voyez du code au lieu du dégradé gris, cliquez sur le bouton Design au-dessus du code et la fenêtre ci-dessus apparaîtra.

Pour expliquer l'interface, rien de mieux qu'un exemple ! Alors lançons-nous ! ^^

Pour commencer nous allons insérer un bouton, élément de base permettant à l'utilisateur d'interagir avec le programme. Pour cela, allez dans la fenêtre Components et double-cliquez sur le dossier Controls pour afficher la liste des contrôles disponibles :

Sélectionnez le composant Button puis glissez-le dans le plan de travail comme indiqué ci-dessous :

Une fois le bouton inséré dans le plan de travail, il est automatiquement sélectionné et ses propriétés apparaissent dans la fenêtre des propriétés à droite de l'espace de travail :

Cette fenêtre a une grande importance car c'est elle qui vous permettra, entre autres, de modifier l'apparence des différents composants de votre interface graphique. Elle remplace en quelque sorte les outils de dessin de Flash. Vous disposez d'un modèle de base pour votre bouton, mais vous pouvez lui donner une apparence totalement différente en changeant ses propriétés. Amusez-vous avec les propriétés et essayez de modifier votre bouton. Mais copiez pas sur moi ! :colere2:

Voilà le mien ^^ :

Il est beau, hein ? :-° Bon allez : si vous avez copié, je vous pardonne... (Je suis trop bon. :p )

Bon, assez rigolé ! J'ai oublié de parler de la propriété la plus importante de tous les composants : l'identifiant ! Il s'agit du premier champ de la fenêtre des propriétés intitulé "ID". Pourquoi ce champ est-il important ? Parce que c'est lui qui va vous permettre d'accéder à votre bouton au sein du code. Bien sûr, si vous ne comptez pas utiliser de composant dans votre code, vous n'avez pas besoin de spécifier d'ID. Personnellement, je ne spécifie jamais l'ID tout de suite, je rajoute les identifiants au fur et à mesure que je développe, lorsque j'ai besoin d'accéder à un composant. Cela évite de surcharger le code avec des identifiants inutiles.

Eh ?! Vous n'êtes pas en train de vous dire que ça manque de propriétés, quand même, cette...