[tuto flex] hello world en flex: il y a un début à tout!
Publié par Guiral antoine sur avril 20, 2008
Comme promis le premier tutoriel sur FLEX. Cette techno me bluf! En 5 min j’ai fait mon hello world tout seul comme un grand sans google 
Non, n’applaudissez pas tout de suite vous allez voir c’est pas si compliqué que ça 
Bon on rentre dans le vif du sujet maintenant. Si vous n’avez pas téléchargé le Flex Builder d’Adobe c’est le moment.
Premièrement il faut créé un nouveau projet : soit en faisant file>new>flex project soit en faisant un clic droit sur le gestionnaire de projet (voir illustration ci-dessous).
Maintenant vous devriez avoir quelque chose comme ça devant vos yeux o_0
Nous allons séparer l’écran en 5 zones. La première en haut à gauche est le gestionnaire de projet : “flex navigator”. Celle du dessous, appelée “outline” va changer selon que la zone principale soit en mode “source” ou en mode “design”. Si l’on se trouve en mode “source” la zone “outline” va contenir nos différent composant. Tandis que si l’on est en mode “design” elle proposera tout les composants qu’il suffira alors de faire glisser dans la zone de travail pour les placer. Allez y testez vous ne risquez rien ;-).
Au milieu c’est là ou nous allons coder. Deux modes : “source” et “design”. Le premier sert à coder directement tandis que le second permet de passer en mode “assisté” puisque le code sera généré automatiquement. En dessous on retrouve la console qui affichera les erreurs notamment. Si vous utilisez eclipse ou aptana vous ne serez pas dépaysés.
Enfin, à droite cette fenêtre ne s’affichera qu’en mode “design”. elle permet de configurer les composant que vous aurez fait glisser sur votre application.
C’est bon vous êtes toujours là?! Ok, continuons.
Nous allons passer en mode “source”, mais vous pouvez lire le tuto puis essayer de le refaire sans regarder et utiliser le mode “design”.
Un petit rappel au passage : flex est basé sur MXML (proche du XML) et ActionScript3 (proche du javascript). Donc si vous êtes habitués à faire du web vous ne devriez pas être trop perdus.
-
Déclaration de l’application
Ca ressemble beaucoup au XHTML. On définit donc la norme utilisé ainsi que l’encodage : ici xml en version 1.0 et utf-8 (à privilégié puisque c’est le plus large, il prend bien les accents etc etc).
La seconde balise commence par “mx:“. Toutes les balises MXML commence par ce préfixe. Tout desuite après, on retrouve le type de la balise avec une majuscule : ici c’est la balise qui va définir l’application. C’est l’équivalent de notre bon vieux <html> (surtout dans le cas du XHTML puisqu’il fait intervenir l’attribut xmlns). L’attribut layout avec la valeur absolute signifie que nous allons placer tous nos éléments en absolute (équivalent du css). Il existe d’autre valeurs pour le layout : horizontal et vertical (pas besoin d’explications là si?). Puis viennent les dimensions de l’application.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” width=”314″ height=”126″>
-
L’interface
Vous remarquerez que toutes les balises commencent par <mx:LeNomDeMonComposant. Ici nous avons un Label, un TextInput un Button et de nouveau un Label. Notre application sera composé d’un titre (id lTitre), d’un champs de saisi de texte (id tMonText), d’un boutton (bAfficher) et enfin d’un dernier label (lMonResultat) dans lequel nous afficherons le texte contenu dans le textfield à chaque clic sur le boutton. Les attributs x et y correspondent aux positions dans notre layout (vous vous souvenez? nous sommes en absolute).
Nos balises doivent toutes êtres fermées : on respecte la norme XML. Nos composants sont des balises fermées, elles se terminent par “/>“. Notre balise Application sera fermé à la fin du document de la même manière que l’on fermerait un document XHTML.
<mx:Label x=”22″ y=”10″ text=”Mon hello world en flex” fontWeight=”bold” fontFamily=”Arial” fontSize=”24″ id=”lTitre”/>
<mx:TextInput x=”22″ y=”53″ width=”202″ id=”tMonText”/>
<mx:Button x=”232″ y=”53″ label=”Button” click=”afficher()” id=”bAfficher”/>
<mx:Label x=”22″ y=”92″ width=”202″ id=”lMonResultat”/>
</mx:Application>
Allez-y testez! Pour compiler le projet cliquez sur la petite flèche verte dans la barre d’outils (a gauche de l’insecte) ou clic droit sur le fichier puis run application.
“Mais heuuuuuuuu…quand je clic il se passe rien!!!!” On y vient!
-
Le script
Nous allons placer notre balise <mx:Script> juste en dessous de la déclaration de notre application. Vu que nous sommes sur un modèle XML strict nous devons indiquer au compilateur que les lignes qui suivent ne sont pas du XML mes du AS3 (ActionScript3). Le commentaire “<![CDATA[ mes fonctions AS3 ]]>” va nous permettre de le faire. Vous avez sûrement rencontré ce type de commentaire dans du XHTML voir du HTML.
Ensuite on déclare notre fonction. Vu que le AS3 est objet (comme le JAVA par exemple) nous devons indiquer la portée de nos fonctions, ici : private. Juste avant l’accolade on indique le type des données retournée. Dans notre cas la fonction ne retourne rien, elel est donc du type void.
Enfin notre traitement, on affecte au label lMonResultat le text qui est contenu dans le textfield tMonText.
<mx:Script>
<![CDATA[
private function afficher():void{
lMonResultat.text=tMonText.text;
}
]]>
</mx:Script>
Recompilez votre application et cela devrait marcher!
Vous venez de réaliser votre première applications FLEX!!! Si vous avez modifier un peu le script pour aller plus loin n’hésitez pas à nous le montrer! N’ayez pas peur j’ai commencé il y à seulement quelques heures 
A bientôt et amusez vous bien!
Publié dans flex, tutoriel, web 2.0 | Taggé: 2.0, concept, flex, internet, tutoriel, web | 4 Commentaires »
