Flex 4: ItemRenderer für eine DataGroup erstellen

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert