Mon premier projet en Flex
UPDATE du 17/06/2009 :
Il y a une mise a jour de ce tuto a cette adresse :
http://blog.lyrixx.info/flex/son-premier-projet-en-flex/
Bon voila, flex est maintenant fraichement installé sous windows ou sous linux. Il ne reste plus qu’a créer un nouveau projet.
Bon le plus gros du travail 
, commencer par cliquer sur le raccourci flex buider pour le lancer 
.
Ensuite il faut faire : File>New>Flex Projet
- On donne un nom au projet, ici « MonPremierProjet« , ainsi qu’un chemin sur votre disque dur de l’emplacement du projet, ici « D:ProgflexMonPremierProjet« .
- On peut ensuite choisir le type d’application : Web application ou Desktop application. Web application est une application qui sera exécuté dans un navigateur, et qui sera en fait un fichier flash (.swf). Il faudra bien entendu que l’utilisateur de l’application est préalablement installé Flash Player. Pour rappel, le Flash player a un taux de pénétration supérieur a 99%, donc ne vous faites pas de soucis. Desktop application est une application qui sera exécuté directement par le système d’exploitation, mais nous y reviendront plus tard.
On selectionne donc Web Application.
- La dernière partie sert a selectionné le type de d’application serveur que l’on utilise (php, J2EE,.NET etc) pour l’instant nous resterons sur none.
On peut d’ors et déjà cliquer sur finish.
Les petits curieux cliqueront sur next et obtiendront la fenetre suivant :
- Le « output folder » indique le répétoire ou les fichier seront compilés. Il y aura donc au moins un fichier .html et un fichier .swf.
Nous laissons bin-debug et cliquons sur next.
Il y a ici quelques informations à donner. Cependant je vous conseil de garder les informations par défaut.
- « Main source folder » sert a indiquer le répertoire de vous sources (.mxml …). Ici on laisse src.
- « Main Application file » sert a indiquer votre fichier principal (comme le main en java ou le index.php en php), ici on laisse MonPremierProjet.mxml (c’est le ‘nom du projet’.mxml).
- « Output folder url » sert a indiquer l’url du serveur ou seront exporter les fichiers compilés. Comme nous n’utilisons pas de serveur, on laisse ce champs vide.
- On peut aussi ajouter d’autre répertoire de fichier source, mais nous n’en avons pas besoin ici.
- Enfin on peut aussi ajouter d’autre librairie (dans le 2eme onglet « Librairie path »), mais nous commencerons avec les librairie par default.
On peut enfin cliquer sur finish.
Nous voila enfin dans flex builder. Pour ceux qui ne sont pas trop familier avec l’IDE, je vais vous faire une résumé rapide de l’environement (Cliquer pour agrandir):
- Le répertoire src ou il y a vos fichiers sources. Ici il n’y a que MonPremierProjet;mxml. ce Répertoire est dans un dossier : MonPremierProjet.
- Il y dans la version windows un gros avantage a la version linux : on peut passer en mode design. Dans Flex Builder Il y a deux grand mode de développement : Le mode design et le mode source. En mode design vous pouvez tout simplement glisser deposer des components (composants, qui se trouve dans la boite 3). Et en mode source, vous pouvez directement coder vos composants, ainsi que coder les scripts en AS3. On peut facilement faire une analogie avec Dreamweaver (pour ceux qui connaissent et/ou utilisent).
- Dans cette boite, vous retrouverez tout les composants dont vous aurez besoin (bouton, image, label, lien, text etc …)
- Et enfin dans cette boite vous retrouverez tout les informations et propriété de l’élément sélectionné.
On va maintenant faire une toute petite application qui vous donnera l’heure quand vous cliquerez sur un bouton. Il faut etre en mode design, c’est plus simple pour commencer.
Allons dans la boite 3 : Components, puis dans le dossier control, puis glisser deposer l’element button n’importe ou dans l’espace de travail (la zone bleu-gris).
Maintenant allons dans la boite 4 Flex Properties dans le champs id mettre : « MonBoutton« . Dans le champs label mettre « Clique moi !!!« .
C’est dans la boite 4 qui vous pouvez définir un style a tous vos éléments. N’hésiter pas à essayer des petits réglages perso.
L’ID du bouton est « MonBoutton » c’est grâce a lui que l’on pourra facilement l’identifier. Chaque ID doit etre unique.
Il est réelement préférable d’avoir deja des connaissances en création de site web en XHTML et CSS, ainsi que des connaissances en POO. Il y a de tres bon cours sur internet si vous voulez apprendre, comme sur le site du zéro.
On va maintenant glisser déposer un element TextInput sur notre zone de travail (de la même manière que précédemment). Et on va lui assigner les valeurs suivante : ID = « resultat » et pas de Text
Voila, notre plan de travail est pret, nous allons donc maintenant coder l’application pour qu’elle affiche l’heure lorque l’on clique sur le bouton « Clique moi !!!« .
Il faut donc passer maintenant en mode Source. Le mode source est une représentation de vote application en XML. vous n’avez pas besoin de grandes compétance en XML, cependant il est recommendé de savoir ce qu’est un namespace. En Flex, le namespace par default de mx, tous les composants commencent donc par mx:
On va tout d’abord ajouter une zone de code AS3 au code deja présent. D’ailleur vous pouvez voir qu’il y a belle et bien vos deux composants avec les propriétés que vous leurs avez mises.
On va donc ajouter la balise script a l’interieur de la balise Application. il suffit de se place en dessous de la balise <mx:application …> (inserer une ligne si il le faut) puis taper juste : ‘<mx:S‘. Normalement un menu apparait et affiche toutes les balises disponibles (si ce menu ne s’affiche pas, il suffit de faire CTRL+ESPACE (comment dans tout bonne IDE), il vous suffit alors de choisir ‘<mx:Script’ et de cliquer sur entrer puis de femer la balise. normalement la balise fermante s’ajoute ainsi qu’une zone CDATA.
Bon normalement vous arrivez a quelques chose comme ca :
]]>
[/code]
Voila Maintenant il n'y a plus qu'a faire de l'AS3 ...
Je vous donne directement le code. Je l'expliquerai dans un autre articles.
import flash.events.MouseEvent;
import mx.events.FlexEvent;
private function creationCompleteHandler(event:FlexEvent):void {
MonBoutton.addEventListener (MouseEvent.CLICK, clickHandler);
}
private function clickHandler ( event:Event ):void {
resultat.text = "Hello, World!";
}
]]>[/code]
Bon pour compiler il suffit de faire CTRL+B mais normalement c'est en automatique, donc suffit de savuegarder le projet avec CTRL+S
Et voila la demo :
Articles en rapport :
- Installer Flex Builder 3 sous windows
- Installer le plugin Flex pour eclipse sous Linux
- Son premier projet en flex
- Liste de sites pour bien commencer avec Flex
- Sortie de Flex Tour