Tutorial flex
Par Dai, dimanche 25 mars 2007 à 00:09 :: Tutoriel Flex - AIR :: #20 :: rss
Le but de ce mini tutorial est d’apprendre a utiliser flex a partir de « flex builder 2 » afin de vous donner une idée de cette technologie. Pour cela, nous allons créer un mini projet de calcul de TVA.
Avant de commencer, vérifiez que vous avez bien installé le plug-in « flex builder » pour Eclipse, sinon téléchargez le sur le site officiel a cette adresse
Attention, le tutorial sera simplifié au maximum afin de se concentrer sur l’essentiel. Des bases en programmations sont recommandées.
1.Création d’un nouveau projet
File > New > Project
Choisissez ensuite « new Flex project »
Donnez un nom a votre projet, par exemple: « flexBasicCalculator »
Enfin pensez a remplir le champ « Main source folder » , qui indique le dossier source. C’est la que vous placerez vos futurs fichiers (histoire de faire les choses proprement).
2.Création du fichier .mxml
« Le MXML est un language créé par Adobe/Macromedia comparable au XAML ou au XUL basé sur le format texte XML. Ce langage est une surcouche de l’AS3 utilisé par le compilateur du SDK de Flex2 et qui permet aux utilisateurs de développer rapidement des contenus intéractifs basés sur une animation au format swf sans se soucier réellement du code complexe nécessaire pour le mettre en place. Il est possible d’utiliser dans un format MXML des feuilles de styles, des composants, du code au format AS3, etc. Il est bien entendu possible d’utiliser du code ActionScript 3 en parallèle d’un fichier MXML. »
Après cette explication sur le langage MXML, voyons de plus prêt le code : Il existe 2 vues possibles pour éditer le contenu de la page .mxml :
-en mode design, vous pouvez glisser déposer les composants comme bon vous semble.
-en mode source, vous avez le code source de la page entière.
Pour créer l’interface de la calculatrice, il vous faut :
-un label pour indiquer le contenu du champ
-un InputText, pour saisir la valeur a calculer
-un bouton pour lancer le calcul
-un TextArea, pour afficher le résultat
Remarquez les balises "mx:script" qui vous permet d’insérer du code AS3 dans une page .mxml.
Explication :
1. récupère le nombre entré dans inputText "id=input"
2. nous créons une instance de classe Calcul en appelant le constructeur et en lui passant en paramètre la valeur saisie par l’utilisateur.
3. Nous affichons les résultats dans le TextArea "id=result"
3.Création Calcul.as
Voyons maintenant la classe Calcul. Créer un package « util » dans « src » , clic-droit sur « src » et « new folder ». Nous allons créer la classe « Clacul.as » dans ce dernier. Clic-droit sur le dossier « util » et « new Action Script Class ».
Si vous êtes développeur Java, vous verrez que l'Actionscript3 (AS3) et assez proche de ce langage.
Explication :
Un constructeur prenant en paramètre un Number et remplit la propriété « errorMsg » si la valeur n’est pas un Number. Les 2 fonctions « claculht » et « calcultva » retourne la valeur arrondie selon la méthode de calcul du TVA. Enfin la fonction displayRes, renvoie une chaine de caractère contenant le résultat ou une erreur.
Conclusion :
Nous avons vu qu’il est facile et rapide de créer une application riche grâce a Flex, du moment qu’on ait déja une base dans un langage comme le Java. La force du MXML et qu’il nous permet de manipuler des composants aisément pour obtenir des effets dynamiques sans pour autant être un acros a l’actionscript. De plus, l’utilisation en parallèle de AS3 et de MXML apporte un atout supplémentaire pour Flex. J’espère que ce mini tutorial vous a permis de mieux comprendre le fonctionnement de Flex et son environnement.
Télécharger les sources





Commentaires
1. Le mercredi 16 mai 2007 à 16:01, par Lascap
2. Le mercredi 16 mai 2007 à 17:40, par dai
3. Le jeudi 28 juin 2007 à 18:03, par paskal
4. Le vendredi 29 juin 2007 à 01:03, par dai
5. Le samedi 15 décembre 2007 à 12:28, par Pabavard
6. Le vendredi 1 février 2008 à 16:34, par Marcutioo
7. Le lundi 4 février 2008 à 16:35, par dai
8. Le lundi 11 février 2008 à 14:24, par P$y(h0
9. Le vendredi 22 février 2008 à 11:51, par dai
10. Le jeudi 28 février 2008 à 13:35, par batobad
11. Le jeudi 10 avril 2008 à 17:42, par mew
12. Le lundi 30 juin 2008 à 15:21, par pag
13. Le lundi 30 juin 2008 à 19:40, par dai
14. Le mardi 1 juillet 2008 à 13:45, par pag
15. Le mercredi 2 juillet 2008 à 10:53, par dai
16. Le mercredi 2 juillet 2008 à 14:23, par Arrepia
17. Le mercredi 2 juillet 2008 à 14:25, par Arrepia
18. Le vendredi 4 juillet 2008 à 10:37, par pag
19. Le vendredi 4 juillet 2008 à 10:57, par dai
Ajouter un commentaire