Custom ItemRenderer & TreeItemRenderer sous Flex
Par Gwenn Guihal :: 02/02/2008 :: Flex :: #24 :: rss
Bonjour !
Tout d'abord, je souhaite dire à tous les utilisateurs de Windows de passer à Mac. J'ai switché il y'a très peu de temps, et je suis conquis, vraiment conquis...
Cela dit, passons aux choses un peu plus sérieuses. Dans ce billet, j'explique comment créer ses propres item pour des listes (DataGrid,TileList,...) et pour le Tree ; la réalisation d'un itemRenderer pour ce dernier étant un peu plus complexe...

Si vous "flexez" un peu, j'imagine que vous avez déjà implémenté vos propres itemRenderers pour divers composants. Au cas où, un petit rappel :
Créez un nouveau composant, héritant de HBox par exemple. Placez-y un Label, et une Image, puis dans votre composant (ici List) utilisez la propriété itemRenderer afin de spécifier votre composant comme item de votre liste. La variable data équivaut à l'élément actuel de votre dataProvider.
Composant ItemRenderer :
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%">
<mx:Script>
<![CDATA[
import inc.PhotographeEvent;
public var test:Boolean = false;
]]>
</mx:Script>
<mx:Label
id="nomPhotographe"
text="{data.nom}"/>
<mx:Image
buttonMode="true"
useHandCursor="true"
source="@Embed('../assets/icon/edit.gif')"
click="dispatchEvent(new PhotographeEvent(PhotographeEvent.EDIT_PHOTOGRAPHE))"/>
</mx:HBox>
Votre liste :
<mx:List
id="maListe"
width="100%"
height="100%"
itemRenderer="{new ClassFactory(PhotographeRenderer)}"
doubleClickEnabled="true"
itemDoubleClick="goPageCategories(event);"
dataProvider="{arrayPhotographes}"/>
Vous remarquez que nous utilisons une ClassFactory pour instancier notre itemRenderer... Cette classe génère une instance d'une autre classe, un peu comme un singleton, mais au lieu d'avoir q'une seule instance, il y'en a plusieurs. Sa particularité est que lors d'un changement d'état d'une propriété, ce changement sera répercuté sur toutes les instances.
Dans le cas de notre itemRenderer, nous allons créer pour chaque item un renderer. Dès que l'on souhaitera modifier une propriété d'un renderer en utilisant la ClassFactory, cette propriété sera changée sur tous nos renderer. Voici comment procéder :
var monPhotograheRenderer = new ClassFactory(PhotographeRenderer);
monPhotograheRenderer.properties = { test: true };
maListe.itemRenderer = monPhotograheRenderer;
Maintenant que nous avons vu comment créer nos propres itemRenderer pour divers composants, voyons voir comment cela se passe pour un Tree. En effet, chaque item d'un Tree possède quelques fonctionnalités en plus comme le fait d'afficher ses sous-items...
Ainsi, afin de garder ces particularités, nous créons notre ItemRenderer en héritant de TreeItemRenderer.
Puis, pour ajouter une icône d'édition (comme sur l'image ci-dessus), nous surchagons la méthode createChildren() et ajoutons notre image dans la DisplayList en utilisant addChild(). Afin de la positionner, nous surchagons la méthode updateDisplayList() et affectons des données aux propriétés x et y de notre image. Les comportements doivent être implémentés dans cette méthode (ici l'ajout découteur aux clicks).
Ainsi, il faut distinguer les deux étapes, création de l'objet puis ajout des propriétés et comportements. Faites attention à positionner la méthode super.createChildren avant la création de vos objets (enfin tout dépend de ce que vous souhaitez faire...).
package renderer {
import flash.events.MouseEvent;
import inc.CategorieEvent;
import mx.collections.*;
import mx.controls.Image;
import mx.controls.treeClasses.*;
public class CategorieRenderer extends TreeItemRenderer {
private var editImg:Image;
[Embed(source="../assets/icon/edit.gif")] private var editIcon:Class;
public function CategorieRenderer() {
super();
}
override protected function createChildren():void {
super.createChildren();
editImg = new Image();
editImg.source = editIcon;
editImg.width = editImg.height = 16;
addChild(editImg);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (super.data) {
editImg.x = deleteImg.x + deleteImg.width + 2;
editImg.buttonMode = true;
editImg.useHandCursor = true;
editImg.addEventListener(MouseEvent.CLICK,onEditClick);
}
}
private function onEditClick(evt:MouseEvent):void {
dispatchEvent(new CategorieEvent(CategorieEvent.EDIT_CATEGORIE));
}
}
}
En conclusion, un hors sujet : Pourquoi les télécommandes de nos téléviseurs sont encore composées de chiffres alors que les chaînes TV sont définies par des noms et presque plus par des numéros...?

Commentaires
1. Le 04/02/2008 à 20:26, par Fardeen
2. Le 19/02/2008 à 12:01, par Opatrick
3. Le 11/03/2008 à 20:32, par PeZ
4. Le 02/04/2008 à 21:04, par b
5. Le 15/07/2008 à 11:53, par thm
6. Le 11/08/2008 à 15:37, par yesil
7. Le 27/08/2008 à 16:13, par K20
8. Le 26/12/2008 à 22:00, par diaboloche
9. Le 29/12/2008 à 14:10, par myrddin
10. Le 12/02/2009 à 09:43, par Cedric G.
11. Le 13/08/2009 à 22:08, par switcherdav
12. Le 14/08/2009 à 12:54, par myrddin
13. Le 26/02/2010 à 08:08, par Term Papers
14. Le 14/05/2010 à 13:12, par Dissertation Writing Service
15. Le 09/06/2010 à 21:52, par Bowtrol
16. Le 17/06/2010 à 13:32, par free best buy gift card
Ajouter un commentaire