Flex Item renderer : Modifier le rendu des listes

Par
tannoy
– 5 février 2010Publié dans : Composants

Flex propose des contrôles nous permettant d’afficher des listes de données. Ces contrôles permettent à l’utilisateur de défiler à travers les données et d’en sélectionner une ou plusieurs.

Les composants de types listes, dérivent tous de la classe ListBase et on retrouve parmi eux les contrôles suivants :

  • List
  • HorizontalList
  • TileList
  • MenuBar
  • Tree
  • DataGrid

Ces contrôles obtiennent leurs données depuis un data provider. Ce fournisseur de données est une collection contenant un objet de type Array ou XML.

Plusieurs contrôles peuvent utiliser le même fournisseur de données. La modification du data provider est reflétée automatiquement dans les contrôles qu’il l’utilise.

Les collections principales de Flex sont les classes ArrayCollection et XMLListCollection.

Le mode de rendu par défaut

Pour afficher les données, les contrôles de types listes utilisent ce que l’on appelle des item renderer. Les contrôles List et HorizontalList utilisent par défaut la classe ListItemRenderer, qui permet d’afficher un texte et éventuellement une image.

On pourra préciser quelles données du data provider doivent être utilisées pour l’affichage en renseignant les propriétés labelField et iconField du contrôle.

ListItemRenderer

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import fr.tannoy.model.Icon;
  7.             import mx.collections.ArrayCollection;
  8.  
  9.             [Bindable]
  10.             private var dp:ArrayCollection = new ArrayCollection();
  11.  
  12.             private function creationCompleteHandler():void
  13.             {
  14.                 dp.addItem(new Icon("Cinema Display", 1.20, "128", "assets/CinemaDisplay.png"));
  15.                 dp.addItem(new Icon("Monitor", 0.80, "128", "assets/desktop.png"));
  16.                 dp.addItem(new Icon("HP Monitor", 1.00, "128", "assets/HP-Monitor-Dock-512.png"));
  17.                 dp.addItem(new Icon("Macintosh", 1.40, "128", "assets/mymac.png"));
  18.                 dp.addItem(new Icon("LCD TV", 1.30, "128", "assets/nvtv.png"));
  19.             }
  20.  
  21.         ]]>
  22.     </mx:Script>
  23.  
  24.     <mx:HorizontalList x="49" y="186" dataProvider="{dp}" labelField="name" height="52"></mx:HorizontalList>
  25.     <mx:List x="49" y="22" dataProvider="{dp}" labelField="name" height="114"></mx:List>
  26.  
  27. </mx:Application>

Modifier le mode de rendu par défaut

Nous allons pouvoir contrôler l’affichage de nos listes en utilisant des item renderer personnalisés.

Il existe trois façons dans Flex pour définir un item renderer d’un contrôle :

  • Item renderer de type "Drop-in" : utilisation d’un seul composant pour définir l’item renderer
  • Item renderer de type "Inline" : utilisation de plusieurs composants pour définir l’item renderer
  • Item renderer de type "Component" : utilisation d’un composant réutilisable pour définir l’item renderer

Item renderer de type Drop-in

Pour créer un item renderer simple, il suffit de définir la propriété itemRenderer d’un contrôle avec une valeur référençant la classe du contrôle que vous voulez utiliser pour le rendu.

COPIER-COLLER
XML:
  1. itemRenderer="mx.controls.Image"

Dans l’exemple suivant, nous utilisons une Image comme item renderer et nous indiquons que c’est la propriété pathImage de nos objets Icon qui doit être utilisée dans notre item renderer.

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import fr.tannoy.model.Icon;
  7.             import mx.collections.ArrayCollection;
  8.  
  9.             [Bindable]
  10.             private var dp:ArrayCollection = new ArrayCollection();
  11.  
  12.             private function creationCompleteHandler():void
  13.             {
  14.                 dp.addItem(new Icon("Cinema Display", 1.20, "128", "assets/CinemaDisplay.png"));
  15.                 dp.addItem(new Icon("Monitor", 0.80, "128", "assets/desktop.png"));
  16.                 dp.addItem(new Icon("HP Monitor", 1.00, "128", "assets/HP-Monitor-Dock-512.png"));
  17.                 dp.addItem(new Icon("Macintosh", 1.40, "128", "assets/mymac.png"));
  18.                 dp.addItem(new Icon("LCD TV", 1.30, "128", "assets/nvtv.png"));
  19.             }
  20.  
  21.         ]]>
  22.     </mx:Script>
  23.  
  24.     <mx:HorizontalList x="49"
  25.         y="186"
  26.         dataProvider="{dp}"
  27.         labelField="pathImage"
  28.         itemRenderer="mx.controls.Image"
  29.         columnWidth="128"
  30.         rowHeight="128"
  31.         height="150">
  32.     </mx:HorizontalList>
  33.     <mx:List x="49" y="22" dataProvider="{dp}" labelField="name" height="114"></mx:List>
  34.  
  35. </mx:Application>

Ce type d’item renderer permet donc de créer rapidement un rendu simple d’un contrôle.

Il n’y a que les composants implémentant l’interface IDropInListItemRenderer qui peuvent être utilisés pour ce type d’item renderer. Les contrôles suivants implémentent cette interface et peuvent donc être utilisés :

  • Button
  • CheckBox
  • DateField
  • Image
  • Label
  • NumericStepper
  • Text
  • TextArea
  • TextInput

Item renderer de type Inline

Ce type d’item renderer vous permet de créer un mode de rendu plus évolué. En effet, vous ne serez pas limité à l’utilisation d’un seul contrôle mais vous pourrez utiliser plusieurs contrôles et les configurer comme vous le souhaitez.

La valeur de l’item renderer ne sera pas défini en tant qu’attribut mais en utilisant des tags MXML imbriqués. Le premier d’entre eux sera le tag <mx :itemrenderer> à l’intérieur du quel nous insèrerons le tag <mx :Component>.

COPIER-COLLER
XML:
  1. <mx:itemRenderer>
  2.   <mx:Component>
  3.  
  4.   </mx:Component>
  5. </mx:itemrenderer>

C’est dans ce dernier tag que nous viendrons insérer nos contrôles définissant le rendu. Dans l’exemple ci-dessous, nous allons utiliser une VBox contenant une image et un texte.

COPIER-COLLER
XML:
  1. <mx:HorizontalList x="49"
  2.         y="186"
  3.         dataProvider="{dp}"
  4.         columnWidth="140"
  5.         rowHeight="180"
  6.         height="200">
  7.         <mx:itemRenderer>
  8.             <mx:Component>
  9.                 <mx:VBox horizontalAlign="center" verticalScrollPolicy="off" horizontalScrollPolicy="off">
  10.                     <mx:Image />
  11.                     <mx:Label />
  12.                 </mx:VBox>
  13.             </mx:Component>
  14.         </mx:itemRenderer>
  15.     </mx:HorizontalList>

Pour que l’item renderer puisse utiliser et afficher les données de la liste, celle-ci lui passe l’objet du data provider, devant être rendu, dans sa propriété data. Dans notre cas, l’objet data de notre item renderer correspond à un objet Icon. Nous pouvons donc ensuite indiquer que notre image doit utiliser la propriété pathImage et notre texte, la propriété name.

Item renderer de type Component

La problématique des deux types d’item renderer précédents est qu’ils ne sont pas réutilisables. En effet, ils sont liés aux composants dans lesquels ils sont définis.

Avec un item renderer de type Component, nous allons externaliser le rendu dans un composant MXML. Le composant pourra donc être utilisé par plusieurs contrôles de notre application.

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  3.     horizontalAlign="center"
  4.     horizontalScrollPolicy="off"
  5.     verticalScrollPolicy="off" height="180">
  6.     <mx:HBox>
  7.         <mx:VBox horizontalAlign="center">
  8.             <mx:Image source="{data.pathImage}" />
  9.             <mx:Label text="{data.name}" />
  10.         </mx:VBox>
  11.         <mx:VBox verticalAlign="middle" horizontalAlign="center" height="180">
  12.             <mx:HBox>
  13.                 <mx:Label text="Prix :" />
  14.                 <mx:Label text="{data.price}" />
  15.             </mx:HBox>
  16.             <mx:HBox>
  17.                 <mx:Label text="Taille :" />
  18.                 <mx:Label text="{data.size}" />
  19.             </mx:HBox>
  20.         </mx:VBox>
  21.     </mx:HBox>
  22. </mx:VBox>

Comme pour un item de type Drop-in, nous définiront la propriété itemRenderer d’un contrôle avec une valeur référençant la classe du composant que nous voulons utiliser pour le rendu.

COPIER-COLLER
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import fr.tannoy.renderers.IconRenderer;
  7.             import fr.tannoy.model.Icon;
  8.             import mx.collections.ArrayCollection;
  9.  
  10.             [Bindable]
  11.             private var dp:ArrayCollection = new ArrayCollection();
  12.  
  13.             private function creationCompleteHandler():void
  14.             {
  15.                 dp.addItem(new Icon("Cinema Display", 1.20, "128", "assets/CinemaDisplay.png"));
  16.                 dp.addItem(new Icon("Monitor", 0.80, "128", "assets/desktop.png"));
  17.                 dp.addItem(new Icon("HP Monitor", 1.00, "128", "assets/HP-Monitor-Dock-512.png"));
  18.                 dp.addItem(new Icon("Macintosh", 1.40, "128", "assets/mymac.png"));
  19.                 dp.addItem(new Icon("LCD TV", 1.30, "128", "assets/nvtv.png"));
  20.             }
  21.  
  22.         ]]>
  23.     </mx:Script>
  24.  
  25.     <mx:HorizontalList x="359"
  26.         y="22"
  27.         dataProvider="{dp}"
  28.         columnWidth="280"
  29.         rowHeight="180"
  30.         height="200"
  31.         itemRenderer="fr.tannoy.renderers.IconRenderer"
  32.         width="840">
  33.     </mx:HorizontalList>
  34.     <mx:List x="49"
  35.         y="22"
  36.         dataProvider="{dp}"
  37.         rowHeight="180"
  38.         columnWidth="280"
  39.         itemRenderer="fr.tannoy.renderers.IconRenderer"
  40.         height="540">
  41.     </mx:List>
  42.  
  43. </mx:Application>

Le code complet

Télécharger le code complet

Tags : , , ,