Blog RIA

La gestion des items renderers a beaucoup changé depuis l’introduction de l’architecture Spark. Dans cet article, nous parlerons des différents item renderers présents dans le SDK Flex ainsi que des interfaces qu’ils implémentent.

1. Diagramme de classe

Regardons d’abord la vue d’ensemble des item renderers grâce à ce diagramme de classe :

2 choses sont à noter :

On peut d’une part faire un découpage des renderers en 3 parties :

• Les interfaces.
• Les renderers par défaut.
• Les renderers servant de base pour créer des renderers personnalisés.

D’autre part, on peut diviser cet arbre en 2 grandes parties :

• Les renderers qui concernent les éléments affichés dans une liste, sur la partie de gauche dans le diagramme.
• Les renderers qui concernent les éléments affichés dans la DataGrid spark sur la partie de droite.

2. Les interfaces

Les item renderers de Flex 4 implémentent tous IDataRenderer et au moins une des deux interfaces suivantes :

• IItemRenderer
• IGridItemRenderer

IDataRenderer est une interface qui expose un getter/setter data. Elle est implémentée par tous les composants servant de renderers qui vont accueillir un objet data transmis par le composant hôte (type listes ou charts, que ce soit MX ou Spark).

IItemRenderer hérite de IDataRenderer et de IVisualElement. Elle propose de nouveaux getter/setter pour que la classe qui implémente cette interface puisse communiquer avec son composant hôte (ce composant hôte doit implémenter quant à lui l’interface IItemRendererOwner, ex : SkinnableDataContainer ou DataGroup).
Ces getters/setters sont :

• itemIndex : fait référence à l’index de l’item renderer dans son composant hôte.
• dragging : indique si oui ou non l’item renderer est en train d’être glissé pour être ensuite déposé.
• label : est la valeur de la chaîne de caractères à afficher dans l’item renderer.
• selected : indique si oui ou non l’item renderer est sélectionné dans son composant host.
• showsCaret : indique si oui ou non l’item renderer peut afficher lui-même son état de focus.

IGridItemRenderer hérite également de IDataRenderer et de IVisualElement, c’est l’interface qui est implémentée par les item renderers de la DataGrid.
Elle propose un getter grid qui fait référence à la Grid associée à l’item renderer qui implémente cette interface. Un autre getter, columnIndex , fait référence à l’index de la colonne qui contient cet item renderer.
Les getter/setter sont :

• rowIndex: fait référence à l’index de la ligne dans laquelle se trouve l’item renderer.
• down: indique si oui ou non le bouton de la souris est enfoncé lorsque la souris se trouve au-dessus de l’item renderer.
• dragging: indique si oui ou non l’item renderer est en train d’être glissé pour être ensuite déposé.
• hovered: indique si oui ou non l’item renderer est survolé par la souris.
• label: est la valeur de la chaîne de caractères à afficher dans l’item renderer.
• selected: indique si oui ou non l’item renderer est sélectionné dans son composant hôte.
• showsCaret: indique si oui ou non l’item renderer peut afficher lui-même son état de focus.
• column: fait référence à l’instance GridColumn qui contient l’item renderer.

De plus, l’interface IGridItemRenderer propose deux méthodes supplémentaires :

• prepare(hasBeenRecycled:Boolean):void
• discard(willBeRecycled:Boolean):void

3. Les item renderers pour les composants de type liste

Voici les implémentations concrètes de renderer de type liste ainsi que leur contexte d’utilisation :

• DefaultItemRenderer : Il s’agit de l’item renderer par défaut appliqué au composant List quand celui-ci est utilisé dans un contexte Desktop. Cet item renderer affiche simplement la valeur de la propriété label (ou les résultat d’un labelFunction) dans un Label.
• LabelItemRenderer : Il s’agit de l’item renderer par défaut appliqué au composant List quand celui-ci est utilisé dans un contexte Mobile. Cet item renderer affiche simplement la valeur de la propriété label (ou les résultat d’un labelFunction) dans un StyleableTextField. StyleableTextField est un composant plus léger et plus optimisé que Label et doit être uniquement utilisé dans un contexte mobile et uniquement déclaré en ActionScript.
• IconItemRenderer : A utiliser dans un contexte mobile, il s’agit d’un renderer héritant de LabelItemRenderer permettant d’afficher en plus une icône sur la droite qui correspond à la propriété icon, une deuxième icône sur la gauche qui correspond à la propriété decorator ainsi qu’un second label en dessous de celui par défaut qui correspond à la propriété message. Pour plus d’infos concernant l’utilisation des renderers pour mobile, consultez cet article.
• DataRenderer : Classe de base qui implémente IDataRenderer et hérite de Group. N’a plus une très grande utilité et est amené à disparaitre dans les futurs versions.
• ItemRenderer : Elle hérite de DataRenderer. Il s’agit de la classe de base à hériter lorsqu’on crée des item renderers personnalisés. (A condition que l’on souhaite un minimum d’interaction: selection, hover, etc… et qu’on soit dans un contexte Desktop). Elle supporte différents états prédéfinis (normal, hovered, selected, dragging, normalAndShowCaret, hoveredAndShowCaret et selectedAndShowCaret). Ces états peuvent ensuite être implémentés dans votre item renderer personnalisé, déclarés idéalement en MXML.

Plusieurs types d’items renderer proposés par dafaut en Flex héritent de cette classe :

• DefaultComplexItemRenderer : Cette classe est pratiquement identique à ItemRenderer sauf qu’elle englobe sa data dans un Group. (Il s’agit de la propriété contentGroup). Sa data est un objet implémentant IVisualElement ou un tableau de IVisualElement. Si vous souhaitez afficher des composants UI en tant que source d’un DataGroup par exemple, il s’agit du renderer à utiliser.
• MXItemRenderer : Classe de base permettant d’afficher un composant Spark en tant qu’item renderer d’un composant hôte MX. Cette classe est la classe parente de MXDataGridItemRenderer, MXAdvancedDataGridItemRenderer et MXTreeItemRenderer qui permettent d’utiliser respectivement des composants Spark dans une DataGrid, AdvancedDataGrid ou Tree MX.

4. Les item renderers pour la DataGrid Spark

On vient de voir qu’il existait des items renderers dans Flex 4 destinés aux composants Flex 3 qui n’ont pas été portés en 4. Depuis la version 4.5, la Spark DataGrid a fait son apparition. Avec elle, sont apparues des nouvelles classes d’items renderers.
Par défaut, la DataGrid à pour type d’item renderers : DefaultGridItemRenderer. Il s’agit d’une implémentation simple de IGridRenderer qui n’affiche qu’un Label avec la valeur de la propriété label de l’item renderer. La classe par défaut des header renderers est quant à elle DefaultGridHeaderRenderer.
De la même manière qu’avec la classe ItemRenderer, il existe la classe GridItemRenderer qui est la classe de base pour la création d’item renderers personnalisés sur un composant de type DataGrid. Elle implémente également IGridItemRenderer. On notera que DefaultGridHeaderRenderer hérite directemment de cette classe.
On trouve enfin la classe UITextFieldGridItemRenderer, également une implémentation de l’interface IGridItemRenderer: Optimisée spécialement pour l’environnement de Microsoft « Windows » et lorsqu’un nombre important de colonnes est affiché dans votre DataGrid. (utilisation d’un TextField plutôt qu’un composant FTE)

Voilà, ce tour d’horizon est (enfin) fini.
En espérant vous avoir apporté un éclairage sur la gamme d’item renderers présents dans le SDK Flex et appliqués aux composants Spark.