Flex 3 - Applications Internet riches
© Groupe Eyrolles, 2008
148
Ce chapitre décrit le processus d’intégration d’une galerie d’images simple
et interactive, qui pourra servir de base à la conception de vos propres galeries d’images. Bien entendu, avec Flex, l’intégration de cette fonctionnalité
est particulièrement simplifiée. Quelques lignes de code MXML suffiront. Nous découvrirons à l’occasion les outils de rendu d’éléments (item
renderers), qui sont une spécificité propre à Flex et qui s’avéreront très
utiles dans la conception de vos interfaces utilisateurs comportant plusieurs formats de médias différents dans les divers modules.
Personnaliser ses listes à l’aide d’un item
renderer
Les item renderers sont des éléments très utiles pour personnaliser certains composants de Flex basés sur l’affichage par « liste ». En effet, dans
le framework Flex, vous utiliserez fréquemment les composants de type
liste suivants :
Les listes sont donc des composants qui permettent d’afficher une collection d’éléments de tout format que l’internaute pourra parcourir et
sélectionner. Dans notre étude de cas, nous emploierons donc un composant HorizontalList afin de pouvoir disposer des vignettes d’images
horizontalement sous la forme d’une liste composée de cellules. L’utilisateur pourra ainsi facilement parcourir la liste avec ascenseur horizontal
et il pourra également sélectionner une vignette pour l’afficher en grand
format. Le composant HorizontalList sera personnalisé en utilisant un
Tableau 9–1 Composants Flex de type liste
Nom du composant
Description
List
Le composant List affiche une liste d’objets verticalement. Il ressemble au formulaire SELECT utilisé en HTML.
DataGrid
Le composant DataGrid est similaire à un composant List, mais il peut afficher plus d’une colonne de données, ce
qui lui permet d’afficher plusieurs objets de différents types.
Tree
Le composant Tree permet d’afficher une vue hiérarchisée de données similaires à une arborescence. Chaque élément
de l’arbre est considéré comme une branche ou une feuille. Une feuille est aussi reconnue comme un point de terminaison d’une branche. Nous retrouvons ce type d’arborescence pour la classification des dossiers ou répertoires (branches)
et des fichiers (feuilles) dans à peu près tous les systèmes d’exploitation.
Menu
Le composant Menu crée un menu de type pop-up à sélection individuelle, identique aux menus conventionnels que
nous trouvons dans la plupart des interfaces utilisateurs de logiciel.
TileList
Le composant TileList affiche une liste d’objets sous forme de tuiles imbriquées (tile en anglais). Les tiles sont des
objets graphiques organisés en lignes ou en colonnes.
HorizontalList
Le composant HorizontalList permet d’afficher une liste horizontale d’objets. Nous allons utiliser ce composant
associé à un item renderer pour la conception de notre galerie d’images.
© Groupe Eyrolles, 2008
148
Ce chapitre décrit le processus d’intégration d’une galerie d’images simple
et interactive, qui pourra servir de base à la conception de vos propres galeries d’images. Bien entendu, avec Flex, l’intégration de cette fonctionnalité
est particulièrement simplifiée. Quelques lignes de code MXML suffiront. Nous découvrirons à l’occasion les outils de rendu d’éléments (item
renderers), qui sont une spécificité propre à Flex et qui s’avéreront très
utiles dans la conception de vos interfaces utilisateurs comportant plusieurs formats de médias différents dans les divers modules.
Personnaliser ses listes à l’aide d’un item
renderer
Les item renderers sont des éléments très utiles pour personnaliser certains composants de Flex basés sur l’affichage par « liste ». En effet, dans
le framework Flex, vous utiliserez fréquemment les composants de type
liste suivants :
Les listes sont donc des composants qui permettent d’afficher une collection d’éléments de tout format que l’internaute pourra parcourir et
sélectionner. Dans notre étude de cas, nous emploierons donc un composant HorizontalList afin de pouvoir disposer des vignettes d’images
horizontalement sous la forme d’une liste composée de cellules. L’utilisateur pourra ainsi facilement parcourir la liste avec ascenseur horizontal
et il pourra également sélectionner une vignette pour l’afficher en grand
format. Le composant HorizontalList sera personnalisé en utilisant un
Tableau 9–1 Composants Flex de type liste
Nom du composant
Description
List
Le composant List affiche une liste d’objets verticalement. Il ressemble au formulaire SELECT utilisé en HTML.
DataGrid
Le composant DataGrid est similaire à un composant List, mais il peut afficher plus d’une colonne de données, ce
qui lui permet d’afficher plusieurs objets de différents types.
Tree
Le composant Tree permet d’afficher une vue hiérarchisée de données similaires à une arborescence. Chaque élément
de l’arbre est considéré comme une branche ou une feuille. Une feuille est aussi reconnue comme un point de terminaison d’une branche. Nous retrouvons ce type d’arborescence pour la classification des dossiers ou répertoires (branches)
et des fichiers (feuilles) dans à peu près tous les systèmes d’exploitation.
Menu
Le composant Menu crée un menu de type pop-up à sélection individuelle, identique aux menus conventionnels que
nous trouvons dans la plupart des interfaces utilisateurs de logiciel.
TileList
Le composant TileList affiche une liste d’objets sous forme de tuiles imbriquées (tile en anglais). Les tiles sont des
objets graphiques organisés en lignes ou en colonnes.
HorizontalList
Le composant HorizontalList permet d’afficher une liste horizontale d’objets. Nous allons utiliser ce composant
associé à un item renderer pour la conception de notre galerie d’images.