Hier ein kurzes Beispiel, wie man einen eigenen ItemRenderer in Flex 4 erstellen. Der ItemRenderer legt fest, wie die Inhalte – in diesem Beispiel von einer DataGroup – dargestellt werden.
Ausgangslage: ArrayList mit Value Objects
Ausgangslage dieses Beispiels ist eine ArrayList, die mit mehreren Instanzen einer Value Object Klasse befüllt werden. Jedes Objekt hat Attribute wie eine Bild-URL, einen Bildnamen oder eine Schriftfarbe.
[as]
[Bindable]public var entries:ArrayList = new ArrayList();
[…]
var entry:EntryVO = new EntryVO();
entry.label = „The Embarcadero“;
entry.imgUrl = „http://farm5.static.flickr.com/4119/4779586909_30fdf6d27a_m.jpg“;
entries.addItem(entry);
entry = new EntryVO();
entry.label = „Pier am Embarcadero“;
entry.imgUrl = „http://farm5.static.flickr.com/4101/4780251102_98762e8f49_m.jpg“;
entry.color = 0xEABC8E;
entries.addItem(entry);
entry = new EntryVO();
entry.label = „Powell Station“;
entry.imgUrl = „http://farm5.static.flickr.com/4076/4761612662_edf2973e40_m.jpg“;
entries.addItem(entry);
[/as]
Beispiel anschauen
Die DataGroup soll so gerendert werden, dass der Text neben dem Bild angezeigt wird. Wurde eine Farbe definiert, wird der Text entsprechend eingefärbt.
[kml_flashembed publishmethod=“dynamic“ fversion=“10.0.0″ movie=“http://www.video-flash.de/wp-content/uploads/2010/07/flex4-itemrenderer/DataGroupExample.swf“ width=“600″ height=“550″ targetclass=“flashmovie“/]
ItemRenderer als eigene Klasse
Um dies zu erreichen, erstellt man sich einen ItemRenderer. Den ItemRenderer kann man als eigene Klasse oder MXML-Datei definieren. Da der ItemRenderer sich in einem eigenen Scope befindet, funktioniert der Zugriff auf den DataProvider über die Eigenschaft data.
[xml]
[/xml]
In der Haupt-MXML-Datei muss man seiner DataGroup nun nur noch diesen Renderer zuweisen (der obige Renderer heißt im Beispiel MyItemRenderer).
[xml]
[/xml]
Den kompletten Quellcode gibt es hier zum Anschauen und Download.