[AIR] Créer une application avec Flex 4 Online

Introduction du cours

Bonjour,

Avant de commencer et d'entrer dans le vif du sujet il est impératif d'avoir lu et compris le tutoriel Découvrez Flex. En effet celui-ci expose les bases essentielles pour suivre ce tutoriel qui va un peu plus loin dans le sujet.

Qu'allez-vous apprendre à faire avec ce tutoriel ?

Vous allez voir comment l'on peut créer une application de bureau (dite "RDA", voir définition dans le premier chapitre) grâce à Flex. Cette application sera en fait un jeu, un des plus connus qu'il soit : le jeu du plus et moins. Ne vous en faites pas, je l'ai travaillé et il n'est pas basique.

Voici un aperçu du résultat, histoire de vous donner envie de continuer à lire. :p

Côté programmation, nous allons utiliser évidemment le couple MXML / ActionScript. Le premier pour la partie affichage et le second pour la partie logique.

Mieux connaître FlexPrésentation de Flex

Je pense qu'il est tout de même nécessaire de vous rappeler ce qu'est Flex.

Citation : Définition

Flex est un framework open source ActionScript, le langage de développement d'Adobe. Flex permet de créer ce qu'on appelle des RIA (Rich Internet Application) et des RDA (Rich Desktop Application).
Les RIA sont des applications qui tournent sur des serveurs web, le client a besoin d'Adobe Flash Player. Les RDA sont des applications plutôt dites "clientes" et nécessitent donc un runtime spécifique appelé AIR (Adobe Integrated Runtime).

Quels outils pour développer en Flex ?

Vous devez disposer de L'IDE (Integrated Development Environment) d'Adobe, à savoir Flash Builder 4. À noter que la précédente version de l'IDE se nommait Flex Builder 3 (celle vue dans le tutoriel que je vous ai recommandé de lire). En passant à Flex 4, Adobe a décidé de nommer son IDE Flash Builder 4.

Pourquoi pas Flex Builder 4 ?

Tout simplement, car il y avait trop de confusions, la majorité des gens pensaient (et pensent toujours) que Flex est un langage à part entière. Je le répète : Flex est un framework ActionScript !

Téléchargements

À noter que Flash Builder 4 (ou Flex Builder 3 et précédents) est un IDE basé sur le célèbre Eclipse. Au téléchargement vous pourrez soit télécharger l'IDE complet, soit télécharger le plug-in Flex pour Eclipse si vous l'avez déjà d'installé.

• Adobe Flash Builder 4 (version d'évaluation 60 jours)

• Adobe AIR (le runtime qui doit être installé pour exécuter une application AIR [*.air])

On se retrouve pour la suite dans la partie suivante ! :)

Création du projet

Pour pouvoir commencer à coder, il va falloir créer un projet Flex.

Je vais vous guider, mais rappelez-vous que vous devez impérativement lire le tutoriel suscité en introduction ou alors vous serez perdu. Si ce n'est pas fait allez-y en revenez ensuite.

À la différence du tutoriel recommandé, nous allons créer un projet AIR.

Pour le tutoriel je vais utiliser Flash Builder 4 en français. Si vous avez Flex Builder 3, les manipulations sont similaires, mais le code MXML de l'application diffère. Je vous donnerai en fin de tutoriel le code complet pour Flex 3.

Après avoir ouvert Flash Builder 4, faites Fichier > Nouveau > Projet Flex > Puis nous allons donner un nom à notre projet, "jeu" par exemple. Nous cochons "Application de bureau", "Utiliser le SDK par défaut" et nous n'utilisons aucun type de serveur.

Puis faites Terminer.

Mise en place de l'interface

Début des hostilités.

L'IDE nous a créé deux fichiers dans le répertoire src (sources).

• jeu.mxml : il contiendra notre jeu, l'affichage et la logique.

• jeu-app.xml : il contient des informations sur l'application, nom de la fenêtre principale, numéro de version, etc.

Lorsque vous double-cliquez sur jeu.mxml, un nouvel onglet va s'ouvrir, cet onglet contient des sous-onglets "Source" et "Création". En gros la source c'est le code qui permet de représenter la "création".

Dans la source vous retrouvez le code minimal permettant de créer la fenêtre vide que vous avez à l'écran :

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). --> </fx:Declarations> </s:WindowedApplication>

Je mets la balise code en XML, car le MXML n'existe pas sur le SDZ !

Rapidement, <s:WindowedApplication /> est notre fenêtre, tous les composants de cette fenêtre se trouveront à l'intérieur de cette balise.
Les attributs qui commencent par xmlns représentent le chargement des packages qui vont servir pour la création des composants. En gros, nous aurons trois préfixes de balise : fx:, s: et mx:. Chacun correspond à un package. Je reviendrai un peu plus tard sur les packages.
<fx:Declarations> est une nouvelle balise de Flex 4. En gros on doit y placer à l'intérieur les composants qui n'apparaissent pas directement à l'écran. J'ai du mal à vous trouver un exemple simple alors vous verrez par la suite, car nous devrons l'utiliser.

L'interface du jeu, je l'ai bien sûr déjà réalisée donc nous ne nous attarderons pas là-dessus. La création de l'interface est déjà évoquée dans le tutoriel à lire avant celui-ci. :p

Pour modifier l'apparence de la fenêtre : vous allez dans l'onglet Création puis vous sélectionnez l'objet dont vous voulez modifier les propriétés, en l'occurrence ici il n'y en a qu'un seul, vous pouvez cliquer au milieu. À droite apparaîtront alors les propriétés de l'objet.

Par exemple, mettez en valeurs : 454 en largeur et 314 en hauteur. Ensuite, basculez dans l'onglet Source, et vous verrez que les attributs (ou propriétés) ont été créés dans la balise <s:WindowedApplication >.

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="454" height="314"> <fx:Declarations> <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). --> </fx:Declarations> </s:WindowedApplication>

Vous devez télécharger deux images dont je me sers dans le jeu. Le feu rouge et le feu vert (lignes 49 et 50).

Dans les balises <mx:Image /> vous devez changer les valeurs de l'attribut source en mettant bien le lien de l'image stockée sur votre disque dur.

Je vous mets le code complet de l'interface, à coller donc dans "Source".

<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" height="314" width="454" creationComplete="init()"> <fx:Script> <![CDATA[ // code ActionScript ]]> </fx:Script> <fx:Declarations> <s:RadioButtonGroup id="radiogroup"/> </fx:Declarations> <mx:Text x="58" y="40.65" text="Niveau sélectionné :" fontSize="12"/> <mx:Text x="196" y="40.65" id="niveauText" fontWeight="bold" width="108"/> <s:Label x="62" y="181.95" text="Entrez un nombre :"/> <s:TextInput x="196" y="179.95" width="56" id="nombreEntree" maxChars="4" editable="false" enter="verifierNombre(parseInt(nombreEntree.text));nombreEntree.text = '';"/> <s:Button x="296" y="179.95" label="J'ai de la chance" click="verifierNombre(parseInt(nombreEntree.text));nombreEntree.text = '';" enabled="false" id="chance" height="20"/> <s:Label x="113" y="219.95" text="Résultat :"/> <mx:Text x="196" y="214.95" width="230" fontWeight="bold" id="resultat"/> <s:RadioButton x="196" y="69.65" label="Facile" groupName="radiogroup" id="facile" selected="true" click="afficherNiveau(facile.label,parseInt(facile.value.toString()))" value="400"/> <s:RadioButton x="196" y="98.65" label="Normal" groupName="radiogroup" id="normal" click="afficherNiveau(normal.label,parseInt(normal.value.toString()))" value="800"/> <s:RadioButton x="196" y="128.7" label="Difficile" groupName="radiogroup" id="difficile" click="afficherNiveau(difficile.label,parseInt(difficile.value.toString()))" value="1000"/> <s:Button x="296" y="98.6" label="Commencer" click="genererNombre(radiogroup.selectedValue.toString())" id="commencer" height="20"/> <mx:Text x="31.7" y="252.7" text="0" width="30" fontWeight="bold" id="tentatives" textAlign="left" height="21"/> <mx:Text x="49" y="253" text="/15" width="29" textAlign="center"/> <s:Label x="33.65" y="272" text="0" id="secondesText" width="21" fontWeight="bold" height="12"/> <s:Label x="52" y="271.7" text="s."/> <mx:MenuBar labelField="@label" x="0" y="0" itemClick="actionMenu(event)" width="100%"> <fx:XMLList> <menuitem label="Fichier"> <menuitem label="Quitter" data="fermer"/> </menuitem> <menuitem label="Aide"> <menuitem label="Règles" data="regles"/> <menuitem label="Crédits" data="credits"/> </menuitem> </fx:XMLList> </mx:MenuBar> <mx:Image x="10" y="253" source="@Embed(source='D:/flex/vert.png')" id="feu_vert" visible="false"/> <mx:Image x="10" y="253" source="@Embed(source='D:/flex/rouge.png')" id="feu_rouge"/> <s:BorderContainer width="288" height="38.05" id="recommencer" x="86" y="247.95" visible="false" borderColor="#FFFFFF"> <s:Label text="Recommencer ?" x="0" y="10"/> <s:Button label="Oui" id="oui" y="5" x="112.5" click="init()" width="65" height="20"/> <s:Button label="Non" id="non" x="206" y="5" click="nativeApplication.exit();" width="65" height="20"/> </s:BorderContainer> </s:WindowedApplication>

N'oubliez pas de corriger les liens vers les images puis regardez ce que ça donne dans l'onglet Création.

Si vous mettez la balise <fx:Declarations> après du code MXML vous obtiendrez une belle erreur "The default property contents must be contiguous."

Voilà notre exemple, <s:RadioButtonGroup id="radiogroup"/> est à l'intérieur de <fx:Declarations>. Pourquoi ? <s:RadioButtonGroup /> n'est pas un élément visuel. Il sert à créer un groupe de boutons radio "liés". Flex a besoin de cette balise sinon vous obtiendrez une erreur, essayez aussi de la retirer de <fx:Declarations> vous aurez une autre erreur. :)
Je ne vais pas vous commenter chaque ligne. Elles ont été générées, car je les ai "dessinées" via l'outil de création.
Cela ressemble plutôt à du (x)HTML, donc cela ne devrait pas être trop difficile à comprendre.

Pas mal non ?! :o

Dans l'onglet Source vous avez logiquement plein d'erreurs en bas de l'écran, le code ActionScript n'est pas inséré donc c'est tout a fait normal !

Où allons-nous écrire notre code ActionScript ?

Dans le même fichier comme je vous ai dit tout à l'heure. Nous pouvons bien sûr le faire dans un fichier *.as séparé, mais ce n'est pas impératif pour une petite application comme la nôtre.

Au même titre que le JavaScript ou PHP, il faut utiliser une balise spéciale pour implémenter le code. Regardez le dernier bout de code affiché, vous verrez que j'ai créé <fx:Script> et <![CDATA[.

Au coeur de l'applicationFonctionnementRègles du jeu

Voici les règles que j'ai établies : Le joueur a le droit à 15 essais ou à 45 secondes pour deviner le nombre, peu importe la difficulté choisie.

Déroulement du script

Voici une partie importante avant d'écrire un script : se demander quel cheminement il va adopter en fonction des événements (par exemple : interaction de l'utilisateur).

1. Au lancement de l'application (du jeu), la fonction init() (comme initialisation) sera exécutée (voir l'attribut creationComplete de <s:WindowedApplication /> . Cette fonction attribuera des valeurs par défaut à des variables et modifiera les propriétés de certains objets de l'interface.

2. Pour commencer à jouer, le joueur doit d'abord sélectionner la difficulté parmi 3 choix (facile, normal et difficile). Lorsque le joueur clique sur un bouton radio (bouton rond), on doit afficher le choix, pour cela on utilisera la fonction afficherNiveau() dans laquelle on passera en paramètre le libellé (label) ainsi que la valeur (value) correspondante. À noter que les valeurs sont respectivement : 400, 800 et 1000. C'est le nombre maximum que le script pourra piocher. Si on choisit le niveau difficile, alors le script choisira un nombre aléatoire compris entre 0 et 1000.

3. Une fois le choix sélectionné, le joueur clique sur "Commencer". Dès lors, la fonction genererNombre() sera exécutée avec en paramètre la valeur du bouton radio...