![<!--:fr-->[tuto flex] hello world en flex: il y a un début à tout!<!--:-->](http://antoine.guiral.info/wp-content/uploads/2008/04/flex.jpg)
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!
Digg
Del.icio.us
Mixx
Stumble
User Responses
8 Responses and Counting...
Leave a Reply
![<!--:fr-->[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)<!--:-->](http://antoine.guiral.info/wp-content/uploads/2008/03/jquery.jpg)
[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)- [tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (1/2)
![[2 birthday] 2 ans aujourd’hui = 2 smashing book à gagner](http://antoine.guiral.info/wp-content/uploads/2010/01/200.303398.738F78ED-B01F-4442-9BC8-8DFF45F85A0A.jpg)
[2 birthday] 2 ans aujourd'hui = 2 smashing book à gagner ![<!--:fr-->[tuto web] cadre avec bordures extensibles valide xhtml/css<!--:-->](http://antoine.guiral.info/wp-content/uploads/2008/01/examples-tips-formatting.png)
[tuto web] cadre avec bordures extensibles valide xhtml/css![<!--:fr-->[tuto mashup] Google maps sur votre site : c’est possible! (version statique)<!--:-->](http://antoine.guiral.info/wp-content/uploads/2008/01/google-maps-large.png)
[tuto mashup] Google maps sur votre site : c'est possible! (version statique)
![[facebook] Du nouveau sur la roadmap](http://antoine.guiral.info/wp-content/uploads/2010/02/facebook_logo.png){kind=logo}
![[facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php](http://antoine.guiral.info/wp-content/uploads/2010/02/hiphop.jpg)
![[apple iPad] énorme succés de l’iPad à la dernière keynote d’apple](http://antoine.guiral.info/wp-content/uploads/2010/01/ipad.jpg)
![[google] google, le 51ème état?](http://antoine.guiral.info/wp-content/uploads/2010/01/51emeetat.jpg)
- 7 Tools You Should Be Using For Better Web Designs 4 février 2010 Jacob Gube
- Link Underlines Grow to Backgrounds on Hover 4 février 2010 Chris Coyier
- [facebook] Du nouveau sur la roadmap 3 février 2010 Antoine
- Jive 3 février 2010 Stéphane
- [facebook php] hiphop for php : une petite révolution dans le monde du développement web et de php 3 février 2010 Antoine
avril 20, 2008
Bon tuto, ça donne envie de s’y mettre
avril 20, 2008
Héhé content de te voir ici xav! Si tu veux allez faire un tour sur ce que j’ai fait hier soir : http://antoine-guiral.fr . Ce n’est pas grand chose mais bon, il faut bien commencer hein
avril 20, 2008
C’est quand même bien classe, ça promet pour l’avenir !
avril 20, 2008
Avec un peu plus de pratique ca peut envoyer du bois oui
Et toi tu t’y es mis?
avril 20, 2008
Salut,
si tu veux en savoir plus sur le Flex, je peux te conseiller mon site Adobe Flex Tutorial ou tu pourras trouver des centaines d’exemples Flex sur Flex et Flex Builder 3 ou les Flex Styles / Skins et bien d’autres tuto Flex (Liste).
A bientôt
fabien
avril 20, 2008
Merci fabien! Je vais y jetter un oeil dès que possible et je parlerais sûrement de ton site ici
A bientôt!
avril 20, 2008
Salut,
Je n’ai pas réussi à reproduire le « Hello World ». J’ai installé Flex Builder 3, puis ajouter le code dans le « MyProject.mxml ». Et lorsque je fais F5, IE se lance avec rien à l’intérieur. idem pour le swf.
Si quelqu’un à une idée, tout aide serait grandement apprécié.
Merci,
Vincent
avril 20, 2008
J’ai eu le meme probleme, rien au lancement de la page.
Je suis sous ubuntu, et j’arrive a lire les animations sur d,autres sites
Merci