9 – Créer une galerie de photos interactive
© Groupe Eyrolles, 2008
155
Le code MXML de ce composant est très simple. Nous allons tout naturellement créer un conteneur de type VBox afin d’agencer les différents
composants verticalement. La disposition finale constituera la structure
d’une cellule de notre liste horizontale.
Code MXML composant ItemRenderGallery
Nous ajusterons la propriété verticalGap à 0 afin de réduire l’espacement
entre les composants. La liaison de données avec les textes et l’image de
chaque cellule sera effective avec les attributs source="{data.vignette}"
pour l’image, text="{data.titre}" pour le texte du titre et
text="{data.date}" pour le texte concernant la date.
Le style à appliquer sur le texte sera défini dans le fichier CSS
MediaFoot.css et contiendra le bloc suivant :
Style CSS pour le texte du composant
Enfin, dans le fichier Photo.mxml, nous insérerons notre composant liste
HorizontalList tout en faisant un appel à l’item renderer construit avec
notre composant personnalisé :
Composant HorizontalList dans conteneur TitleWindow

horizontalAlign="center"
verticalAlign="middle" verticalGap="0">


textAlign="right"/>

.textWhiteGallery
{
color:
#FFFFFF;
fontSize:
9;
fontWeight:
normal;
fontFamily:
Verdana;
}

title="{horListGallery.selectedItem.titre}"
horizontalAlign="center"
styleName="panneauStyleSimple"
width="100%" height="570">