Depuis quelques temps, Flex fait beaucoup parler de lui et commence à être de plus en plus adopter par les projets. Lors d’un précédent billet, nous avons étudié le principe de Flex ainsi que son fonctionnement. Ce billet sera consacré à un tutorial sur la mise en place d’une galerie d’images en Flex.

Le jeu de données

En premier lieu, nous avons besoin de données. Pour cela nous allons initialiser une liste de la manière suivante :

<mx:Array id="lands">
        <mx:Object label="Paysage 1"
                smallImage="images/paysage1.jpg"/>
        <mx:Object label="Paysage 2"
                smallImage="images/paysage2.jpg"/>
        <mx:Object label="Paysage 3"
                smallImage="images/paysage3.jpg"/>
        <mx:Object label="Paysage 4"
                smallImage="images/paysage4.jpg"/>
        <mx:Object label="Paysage 5"
                smallImage="images/paysage5.jpg"/>
        <mx:Object label="Paysage 6"
                smallImage="images/paysage6.jpg"/>
        <mx:Object label="Paysage 7"
                smallImage="images/paysage7.jpg"/>
        <mx:Object label="Paysage 8"
                smallImage="images/paysage8.jpg"/>
    </mx:Array>

Cela revient à créer une liste (avec un id='lands') composée d’objets qui ont comme attributs label et smallImage.
Par ailleurs, il est possible d’initialiser un jeu de données par le biais d’une ArrayCollection :

[Bindable]
private var collectionCars:ArrayCollection = new ArrayCollection([{label:'Paysage 1', smallImage:'images/paysage1.jpg'},
    								  {label:'Paysage 2', smallImage:'images/paysage2.jpg'},
    								  {label:'Paysage 3', smallImage:'images/paysage3.jpg'},
    								  {label:'Paysage 4', smallImage:'images/paysage4.jpg'},
    								  {label:'Paysage 5', smallImage:'images/paysage5.jpg'},
    								  {label:'Paysage 6', smallImage:'images/paysage6.jpg'},
    								  {label:'Paysage 7', smallImage:'images/paysage7.jpg'},
    								  {label:'Paysage 8', smallImage:'images/paysage8.jpg'}]);

Création de la galerie

Le fichier Galery.mxml décrit le composant HorizontalList. Ce dernier est contenu par un composant Panel dont l’attribut title sera la valeur du label de l’item selectionné. Pour cela nous avons utilisé la méthode selectedItem qui permet de savoir quel élément de la liste a été sélectionné :

<mx:Panel title="{listLands.selectedItem.label}" horizontalAlign="center" borderColor="#AF7FAF">
        <mx:HorizontalList id="listLands"
                           dataProvider="{lands}"
                           columnCount="4"
                           columnWidth="160"
                           rowCount="1"
                           rowHeight="140"
                           itemRenderer="Render"/>
</mx:Panel>

Les attributs du composant HorizontalList sont :

• id : Id du composant.
• dataProvider : La liste précédemment définie et identifiée par son id (ie cars).
• columnCount : Le nombre d’images affichés à l’écran.
• columnWidth : La largeur du composant.
• rowCount : Le nombre de ligne.
• rowHeight : La hauteur du composant.
• itemRenderer : Permet de customiser le rendu.

Le rendu customisé est fait par un appel à Render.mxml (itemRenderer) :

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">
    <mx:Image source="{data.smallImage}" />
    <mx:Label text="{data.label}" />
</mx:VBox>

Render.mxml décrit :

• Le composant VBox qui est un layout permettant d’organiser les composants verticalement.
• Le composant Image permettant d’afficher les images.
• Le composant Label pour afficher le libellé des images.

Le résultat :

Détail et effets

Nous allons maintenant améliorer cette galerie : lors du clique sur une des images, une image plus grande ainsi qu’une description devra s’afficher.

Pour cela, nous devons modifier notre source de données :

<mx:Array id="lands">
        <mx:Object label="Paysage 1"
                smallImage="images/paysage1.jpg"
                fullImage="images/paysage1_large.jpg"
                description="Description Paysage 1"/>
        <mx:Object label="Paysage 2"
                smallImage="images/paysage2.jpg"
                fullImage="images/paysage2_large.jpg"
                description="Description Paysage 2"/>
        <mx:Object label="Paysage 3"
                smallImage="images/paysage3.jpg"
                fullImage="images/paysage3_large.jpg"
                description="Description Paysage 3"/>
        <mx:Object label="Paysage 4"
                smallImage="images/paysage4.jpg"
                fullImage="images/paysage4_large.jpg"
                description="Description Paysage 4"/>
        <mx:Object label="Paysage 5"
                smallImage="images/paysage5.jpg"
                fullImage="images/paysage5_large.jpg"
                description="Description Paysage 5"/>
        <mx:Object label="Paysage 6"
                smallImage="images/paysage6.jpg"
                fullImage="images/paysage6_large.jpg"
                description="Description Paysage 6"/>
        <mx:Object label="Paysage 7"
                smallImage="images/paysage7.jpg"
                fullImage="images/paysage7_large.jpg"
                description="Description Paysage 7"/>
        <mx:Object label="Paysage 8"
                smallImage="images/paysage8.jpg"
                fullImage="images/paysage8_large.jpg"
                description="Description Paysage 8"/>
</mx:Array>

Nous ajoutons ainsi les attributs fullImage et description aux objets de la liste.
Et ajouter l’image ainsi que la description au panel :

<mx:Panel title="{listLands.selectedItem.label}" horizontalAlign="center" height="476" borderColor="#AF7FAF">
        <mx:HorizontalList id="listLands"
                           dataProvider="{lands}"
                           columnCount="4"
                           columnWidth="160"
                           rowCount="1"
                           rowHeight="140"
                           itemRenderer="Render"/>
         <mx:HBox id="detail">
	         <mx:Image id="img" source="{listLands.selectedItem.fullImage}" />
	         <mx:Label text="{listLands.selectedItem.description}" styleName="labelCar"/>
         </mx:HBox>
</mx:Panel>

Nous utilisons le composant (un layout) HBox qui permet d’aligner les composants de manière horizontale.
Viens ensuite le composant Image qui affichera une image plus grande. Nous utilisons encore la méthode selectedItem qui permet d’accéder à l’attribut fullImage. Enfin le composant Label affichera la description.

Un style a été appliqué au composant Label (styleName="labelCar"). Il est défini de la manière suivante :

    <mx:Style>
    	.labelCar {
            fontWeight: bold;
            font-size : 18;
            font-family : Verdana;
        }
    </mx:Style>

Les styles se déclarent comme les CSS.
Afin d’avoir un meilleur rendu, nous allons appliquer un effet d’apparition. Pour cela nous allons utiliser le composant Dissolve _(Bien entendu, il existe d’autres effets)_ :

    <mx:Dissolve id="dissolve"
        duration="1000"
        target="{detail}"
        alphaFrom="0.0" alphaTo="1.0"/>

• id : id du composant.
• duration : 1000 ms.
• target : detail (référence à l’id du composant HBox).
• alphaFrom et alphaTo : nous voulons une apparition (donc de 0 à 1). Pour une disparition, nous aurions eu le contraire.

Reste à ajouter l’attribut click au composant HorizontalList :

click="dissolve.play();"

Vous pouvez télécharger les sources sur le SVN de Xebia France.

Reference :

• http://blog.flexexamples.com/