Edito

Avant de commencer le cours, je tiens a souligner que les codes sources ne sont pas bien indentés et je m'excuse pour les gènes que cela peuvent occasionner. Si quelqu'un sait comment insérer du code proprement dans "dotclear", je suis preneur.
La meilleur façon de progresser est de tester par vous même, pour cela, le code source est fournit en fin du cours. Créer un nouveau projet puis importer l'archive fourni.
Bonne lecture...

Explorer mon premier projet

Commencez par créer un nouveau projet flex (new>Flex project), et nommez le par exemple "helloWorld". Acceptez le changement de perspective si cela vous est demandé. Ouvrez votre seul fichier .mxml et vous constatez 2 onglets fort intéressants, Source et Design.

Sachez qu'avec flex, l'un des gros avantages, est le fait de pouvoir développer très rapidement une application. Pour se faire, utilisez l'interface "Design" pour déposer simplement vos composants comme bon vous semble, et vous obtenez exactement le résultat voulu sur la page html. Pour les mordus de codes, vous pouvez tout faire via l'interface "Source", tout est question de pratique et d'habitude.

Voici les premières lignes de votre page .mxml:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

  • La 1ere ligne déclare un document XML
  • mx:Application est votre balise de conteneur par défaut, qui indique un attribut xmlns (nameSpace) qui a pour préfixe "mx". Pour plus de détail concernant les namespaces, je vous renvoie sur la définition de XML.
  • layout définit comment sera affiché votre conteneur par rapport aux autres. Absolute vous permez de saisir des valeurs suivants les coordonnées X et Y, alors que "horizontal" et "vertical" seront utilisés si vous désirez faire un alignement horizontal (resp vertical) avec horizontalAlign="center" (resp verticalAlign) par exemple.

Première application

Sans plus attendre, insérons un texte "HelloWorld" grâce au balise:

<mx:Label text="Hello"/>

ou

<mx:Label> <mx:text>Hello</mx:text> </mx:Label>

A savoir, les commentaires en MXML sont de la forme (tout comme en HTML): <! Mon commentaire >

Mise en forme avec les conteneurs

Une application flex est formée de conteneurs les uns imbriqués aux autres, ce qui veux dire que leur taille et leurs styles dépendent de leurs conteneurs parents. C'est assez similaire au div en HTML.

Nous allons voir quelques conteneurs et leur utilisation, a commencer par:

les Hbox et les Vbox:
L'utilisation de ces 2 conteneurs, permet de pouvoir afficher des éléments horizontalement ou verticalement au sein du conteneur parent. Imaginez que vous voulez publier vos photos de vacances en miniature. Ces conteneurs vont pouvoir organiser la façon dont ces images vont s'afficher les unes par rapport aux autres.

Exemple: HBoxDemo.mxml et VBoxDemo.mxml

Canvas:
Conteneur de base pour spécifier des positions absolues plutôt que des positions relatives.

  • Spécifier les propiétés x, y des composants a l’intérieur du conteneur
  • Pour : Meilleure performance car n’utilise pas de puissance de traitement pour déterminer l’emplacement des objets
  • Contre : Vous devez positionner et mettre en forme manuellement et votre application n’est pas redimensionnée en fonction de la taille du navigateur.

Synthax:
<mx:Canvas> <mx:Label x="20" y="10"/> <mx:Label x="100" y="10"/> </mx:Canvas>

Exemple: CanvasDemo.mxml

Panel:
Utilisé pour créer des modules d’application autonomes.

Synthax:
<mx:Panel title="title" status="panel status" cornerRadius="n" headerHeight="n" headerColors="array of two colors"> … </mx:Panel>

Exemple: PanelDemo.mxml

ControlBar:
Vous pouvez intégrer un controlBar dans votre panel par exemple, mais aussi d'autres conteneurs que vous souhaitez. Je ne vois pas l'intéret particulier du controlBar, a part que ça fait bien joli dans un panel :d

Synthax:

<mx:ControlBar

direction="horizontal|vertical"
marginBottom="0"
marginTop="0"
horizontalAlign="left|center|right"
verticalAlign="top|middle|bottom"
horizontalGap="6"
verticalGap="6">
/>

Exemple: ControlBarDemo.mxml

Checkbox:
Une case a cocher, rien de particulier. Nous verrons au prochain cours, les événements attachés a ce genre de conteneur (etat coché, déchoché).

Synthax:

<mx:CheckBox label="No default." labelPlacement="right|left|bottom|top" selected="false|true" buttonDown="Event handler;no default." buttonDragOut="Event handler;no default." click="Event handler; no default." />

Exemple: CheckBoxDemo.mxml

Création de liaison entre composant ou binding

On appelle liaison entre composants (binding) l’action qui consiste a relier les données d’un objet a un autre objet. Il existe 2 façon de procéder:

  • Les parenthèses ( { } )
  • La balise <mx:Binding> (non utilisé dans ce cours)

Sachant que tous les conteneurs héritent de toutes les propriétés des classes UIComponent et Container, alors a chaque fois que nous utilison une balise, nous créeons une instance de classe. De ce fait, chaque objet peut être définit par son ID, ce qui va nous permettre de faire référence a ce dernier.
Voici un exemple d'utilisation du binding:

<mx:Label id="one" text="Hello"/> <mx:Label text="{one.text}"/>

la 2e balise va chercher son texte contenu dans la balise 1.
Pour plus d'exemple: DataBindingDemo.mxml, DataBindingDemo2.mxml

Utiliser des composants MXML

En général, vous ne voulez pas faire tenir toute votre application dans un seul fichier. Il est préférable de diviser votre application dans des fichiers MXML séparés pour plusieurs raisons:

  • Permet a plusieurs développeurs de travailler sur une même application
  • Facilite la maintenance d’une application
  • Permet la réutilisation des différentes parties de l’application

En pratique
Pour se faire, vous devez créer de multiples composants MXML qui seront intégrés dans une application principale. Noté qu'une application ne peux contenir qu'une seule balise <mx:application></mx:application>.

Supposons que nous avons une application principale qui est composée d'un label. Il suffit de créer un nouveau composant "composant1.mxml" par exemple contenant:

<?xml version="1.0" encoding="utf-8"?> <mx:Label text="My First Component" xmlns:mx="http://www.adobe.com/2006/mxml"/>

Ensuite dans l'application principale, il faut l'appeler grave au namespace. Supposons que nous avons un dossier "components" contenant tous nos composants externes, utilisez * afin de considerer tous les fichier présents:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="components.*" >

Enfin, insérez le composant comme toute autre balise MXML a l'endroit voulu:

<comp:component1/>

Quelques exemples: ComponentDemo.mxml, components/Component1.mxml

Ajout de propriétés et de méthodes aux composants MXML

Cette dernière partie du cours 1, vous donne un aperçu de comment intégrer du code Action Script 3 au sein d'un fichier .mxml. synthax:

<mx:Script> <![CDATA[

  Bindable
  public var internalProp:String;
  public function test():String
  {
    return "From the method";
  }

]]> </mx:Script>

Ce bloc doit être placé dans la balise racine, en général au début:

  • Utiliser le mot clé var pour déclarer la propriété
  • Ajouter le mot clé public pour la rendre visible a l’extérieur
  • Utiliser la syntaxe des deux points (:) pour préciser le type
  • Utiliser CDATA pour éviter l’interprétation de certains caractères dans le code (empêche l’interprétation XML)
  • Au-dessus, ajouter le metatag Bindable pour “binder” la propriété
  • Les commentaires // ou /* mon bloc */

Une fois que le composant est instancié, donnez lui un nom, et on peut accéder aux propriétés:

<comp:Component1 id="myC"/> <mx:Label text="{myC.internalProp}"/> <mx:Label text="{myC.test()}"/>

Exemple:ComponentPropMethod.mxml, components/PropMethod.mxml

Nous arrivons a la fin du premier cours, ou tutorial si vous préférez. J'espère que j'ai pu aider certains a prendre son envol pour cette nouvelle technologie qui est flex 2, et qu'ils ont pu apprécier autant que moi a cette formation.

N'hésitez pas a laisser vos questions.

A très bientôt pour la suite.

TELECHARGER LES SOURCES : cours 1