Publié par

Il y a 11 ans -

Temps de lecture 3 minutes

Galerie d’images Flex

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 :


        
        
        
        
        
        
        
        
    

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é :


        

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) :



    
    


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 :


        
        
        
        
        
        
        
        

Nous ajoutons ainsi les attributs fullImage et description aux objets de la liste.
Et ajouter l’image ainsi que la description au 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 :

    
    	.labelCar {
            fontWeight: bold;
            font-size : 18;
            font-family : Verdana;
        }
    

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)_ :

    
  • 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/

Publié par

Publié par Nicolas Jozwiak

Nicolas est delivery manager disposant de 12 ans d’expérience en conception et développement. Son parcours chez un éditeur avant son entrée chez Xebia lui a notamment permis de développer de solides compétences dans le domaine de la qualité et de l’industrialisation (tests, intégration continue, gestion de configuration, contrôle qualité). Bénéficiant d’une expérience très solide de mise en place des méthodes agiles et d’accompagnement d’équipes sur le terrain, il s’attache à mettre à profit quotidiennement son expérience qui est reconnue pour son approche pragmatique, proactive et pédagogique.

Commentaire

5 réponses pour " Galerie d’images Flex "

  1. Publié par , Il y a 9 ans

    Tutoriel sympa :-)

    J’ai cependant une petite question, comment procéder pour précharger la première image?

  2. Publié par , Il y a 9 ans

    Merci ^ ^

    J’ai vu qu’il est aussi possible de faire ainsi : Ajouter selectedIndex = « 0 » dans les attributs(?) de HorizontalList (ça marche dans le cas d’un XML, à tester pour un array)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.