9 – Créer une galerie de photos interactive
© Groupe Eyrolles, 2008
151
Pour décrire les trois méthodes d’utilisation des item renderers, nous
allons temporairement remplacer notre composant HorizontalList par
un DataGrid. Ce composant est en effet plus explicite pour présenter la
méthode d’intégration d’un item renderer dans Flex.
Méthode drop-in : item renderer sur DataGrid
Personnaliser le composant DataGrid
Originellement, le composant DataGrid peut assurer l’affichage de plusieurs colonnes de cellules contenant des chaînes de caractères. En utilisant un item renderer personnalisé, nous allons détourner l’utilisation de
base d’un DataGrid pour afficher d’autres médias dans ses cellules, et
ainsi personnaliser facilement notre composant. Cette méthode de création d’item renderer est nommée drop-in.
Prenons comme exemple le bloc de code suivant :
Item renderer sur un DataGrid
Nous avons intégré un composant DataGrid constitué de trois colonnes :
deux contiennent du texte, et la dernière une simple image. C’est ici
qu’intervient notre item renderer. La méthode drop-in appliquée sur un
DataGrid consiste donc à insérer dans les propriétés d’une ou plusieurs
colonnes une instruction du type : itemRenderer="mx.controls.Image".
horizontalAlign="center"
styleName="panneauStyleSimple" width="100%" height="570">
id="testDataGrid"
color="#000000"
dataProvider="{dataGridData}">

dataField="prenomJoueur"
headerText="Prénom"/>
dataField="nomJoueur"
headerText="Nom"/>
dataField="imageJoueur"
headerText="Photo"
itemRenderer="mx.controls.Image"/>