Flex 3 - Applications Internet riches
© Groupe Eyrolles, 2008
158
Il reste à présent à coder l’affichage de l’image grand format sous la liste
horizontale avec le texte descriptif qui lui est associé. Nous pourrions par
exemple créer un second composant personnalisable via un second item
renderer. Nous nous contenterons ici d’ajouter un conteneur VBox intégrant l’image et le texte. Nous implémenterons ensuite la liaison avec le
tableau de données en utilisant la technique de liaison de données. Le
bloc d’instructions MXML suivant assure cette fonctionnalité :
Affichage de l’image grand format dans une VBox
Compilez et observez le résultat en cliquant sur une cellule du composant liste horizontale. L’affichage de l’image et du texte fonctionne correctement, mais il est un peu abrupt. Nous allons donc utiliser les effets
du framework Flex pour adoucir l’apparition de l’image grand format.
Pour cela, ajoutez l’événement suivant dans la balise
: click="fondu.play();".
Cette instruction appellera l’effet identifié par le nom « fondu » dont
voici le code MXML :

source="{horListGallery.selectedItem.imageGrande}" />
styleName="textWhiteSmall"/>
id="fondu"
duration="1000"
target="{photoGrandFormat}"
alphaFrom="0.0" alphaTo="1.0"/>