[tuto flex] hello world en flex: il y a un début à tout!

Antoine — Sun, 20 Apr 2008 20:50:24 +0000

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 (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.

L’interface

Vous remarquerez que toutes les balises commencent par

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.

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 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 « » 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.

private function afficher():void{
lMonResultat.text=tMonText.text;
}
]]>

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!

[annonce] Mes débuts avec flex

Antoine — Sun, 20 Apr 2008 16:10:22 +0000

C’est décider je me mets à FLEX. FLEX est une technologie qui permet de faire des RIA’s. Ce langage, ou plutot ce framework est basé sur deux langages : ActionScript 3 (ressemble beaucoup à javascript puisque les deux sont issus de la norme ECMAScript) et MXML (Macromedia XML qui est un dérivé du XML au même titre que le XHTML).

Pour commencer, il faut installer l’environnement de travail : le Flex Builder d’Adobe. Vous pouvez le télécharger gratuitement pour 60 jours.

Hop hop hop on installe tout ça est on attaque! Premier tutoriel sur un hello world en flex très prochainement!

Pensez à vous abonner au flux pour ne rien louper

En attendant allez faire un saut sur picnik, un éditeur de photo en ligne entièrement réalisé en flex

Le tuto est prêt depuis quelques jour, je suis en train de rédiger le second

Antoine.Guiral.Info » RIA

[tuto flex] hello world en flex: il y a un début à tout!

Déclaration de l’application

L’interface

Le script

[annonce] Mes débuts avec flex