Flex est le moyen le plus rapide et le plus facile pour développer une application Web en flash. Dans ce tutoriel, nous verrons les bases pour le un développement, en voyant l'exemple d'une petite galerie d'images, récupérant les données à partir d'un fichier xml.

 

L'application

Voici comment se décompose l'application : 
  • galerie.mxml
  • render.mxml

Aucun script ActionScript n'est nécessaire pour ce projet. Le premier fichier correspond à l'application principale. Le fichier render correspond au bloc contenant les petites images.

La structure de l'application : 

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

    < mx:Panel title="" horizontalAlign="center" minHeight="476" borderColor="#AF7FAF">
        < mx:HorizontalList id="listIMG"
                           columnCount="4"
                           columnWidth="200"
                           rowCount="1"
                           rowHeight="180"
                           itemRenderer="Render"/>
         < mx:VBox id="detail" >
             < mx:Image id="img" />
             < mx:Label text="" />
         < /mx:VBox>
    < /mx:Panel>

< /mx:Application>
Un document mxml est proche d'un document xml. Il commence par la même déclaration.
La structure des documents est découpée en bloc. Le principal, et l'unique s'il ne doit y en avoir qu'un seul, est le composant Application suivi de son namespace.
 
Dans notre application, nous allons créer un Panel qui va contenir nos deux composants, qui sont la liste des images miniatures et le bloc contenant l'image et la description de celle-ci.
 
En ce qui concerne le composant HorizontalList, je souhaite m'attarder sur l'attribut itemRenderer qui permet de personnaliser l'affichage d'un dataProvider (nous y reviendrons un peu plus tard) à l'aide d'un nouveau fichier mxml. Son principal avantage est de pouvoir découper son application en plusieur module pour alléger le script principal et ainsi faciliter la maintenance. Cet attribut prend comme valeur le nom du fichier mxml dont voici le contenu : 
< mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
    < mx:Image source="{data.img_mini}" />
    < mx:Label text="{data.nom}" />
< /mx:VBox>
Ce fichier n'est composé que d'un seul bloc contenant une image et du texte. Le data binding est effectué à partir du dataProvider spécifier dans l'élément dont nous allons voir comment l'utiliser.

 

La récupération des données via XML

La récupération de données XML avec Flex est relativement simple. Avant tout, voici la structure de notre fichier diapo.xml 

< ?xml version="1.0" encoding="UTF-8" ?>
< images>
    < image>
        < nom>img1< /nom>
        < img_mini>diapo/img_mini.jpg< /img_mini>
        < img>diapo/img.jpg< /img>
        < description>desc1< /description>
    < /image>
< /images>
Maintenant, dans notre application, nous allons récupérer les données en utilisant l'object HTTPService en précisant un identifiant qui nous permettra de l'utiliser par la suite, et l'url du fichier xml : 
< mx:HTTPService id="xmlService" url="./diapo.xml" />

Une fois que nous avons récupéré les données, il nous suffit de faire du data binding pour afficher les éléments aux bons endroits.Voilà à quoi ressemble galerie.mxml : 

< ?xml version="1.0" encoding="utf-8"?>
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="xmlService.send()">
       
    < mx:HTTPService id="xmlService" url="./diapo.xml" />

    < mx:Panel title="{listIMG.selectedItem.nom}" horizontalAlign="center" minHeight="476" borderColor="#AF7FAF">
        < mx:HorizontalList id="listIMG"
                           dataProvider="{xmlService.lastResult.images.image}"
                           columnCount="4"
                           columnWidth="200"
                           rowCount="1"
                           rowHeight="180"
                           itemRenderer="Render"/>
         < mx:VBox id="detail" >
             < mx:Image id="img" source="{listIMG.selectedItem.img}" />
             < mx:Label text="{listIMG.selectedItem.description}" />
         < /mx:VBox>
    < /mx:Panel>

< /mx:Application>

Nous ajoutons la récupération des données en créant un évenement qui se déclenchera lorsque l'application aura été entièrement terminé.

Le Data Binding est une fonctionnalité que vous pouvez utiliser pour lier un composant à un autre composant ou à un objet ActionScript. Il y a plusieurs syntaxes que vous pouvez utiliser pour activer le data binding, mais la plus simple est d'utiliser les crochets ( {} ) pour évaluer une expression en mxml directement.

 

Le style des composants

Maintenant que nous avons notre application qui fonctionne, quoi de mieux que la personnaliser un peu. Rien de plus simple. Les styles en mxml sont relativement proche du CSS. Le style doit se trouver entre les balises <mx:Style></mx:Style>. Par exemple, nous souhaitons changer l'apparence de la description des images. Pour cela, nous avons besoin de renseigner l'attribut styleName du composant Label : styleName="description".
Et le style à présent :
  
< mx:Style>
        Application {
               backgroundColor: #000000;
          }
   
        .description {
            fontWeight: bold;
            font-size : 18;
            font-family : Verdana;
        }
</ mx:Style>
Avec le fond de l'application en noir, pour changer du bleu. Tout les composants sont définis par leur nom, alors que les styles propres à un ou plusieurs composants sont définis pas le styleName précédé d'un '.'.
 
 

Animation des images

Flex permet un ajout d'animation, plutôt de transition dans notre cas, sur les différents composantsd'une application. Ici, nous souhaitons faire un simple fondu lors du changement d'image. Pour ce faire, nous allons utiliser la transition Disolve :
  
< mx:Dissolve id="anim"
        duration="1000"
        target="{detail}"
        alphaFrom="0.0" alphaTo="1.0"/>
Avec en attribut l'identifiant qui permettra le déclenchement de celle-ci. l'attribut target permet de définir la cible sur laquel s'applique l'animation,avec également la durée ainsi que la transparence de début et de fin.
Maintenant, pour que l'animation se déclenche, nous devons ajouter un évenement sur chaque image composant la liste horizontale : click="anim.play();"
 
 
Nous avons maintenant à notre disposition une petite galerie d'images, développée avec Flex en à peine 50 lignes de code.
 
Voir la démo.
Télécharger les sources.