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 :
Code : XML | <?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.
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 >.
Code : XML | <?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".
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58 | <?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 ?!
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
<
[AIR] Créer une application avec Flex 4
Durée d'étude :
1
heure,
30
minutes
Documentation Flex
SoftDeath
.
.
Desolation
Trouvez une formation
Suggestions
Twitter
Facebook
Google+