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.

PLAIN TEXT
Actionscript:
  1. [Bindable]public var entries:ArrayList = new ArrayList();
  2. […]
  3. var entry:EntryVO = new EntryVO();
  4.  
  5. entry.label = "The Embarcadero";
  6. entry.imgUrl = "http://farm5.static.flickr.com/4119/4779586909_30fdf6d27a_m.jpg";
  7. entries.addItem(entry);
  8.  
  9. entry = new EntryVO();
  10. entry.label = "Pier am Embarcadero";
  11. entry.imgUrl = "http://farm5.static.flickr.com/4101/4780251102_98762e8f49_m.jpg";
  12. entry.color = 0xEABC8E;
  13. entries.addItem(entry);
  14.  
  15. entry = new EntryVO();
  16. entry.label = "Powell Station";
  17. entry.imgUrl = "http://farm5.static.flickr.com/4076/4761612662_edf2973e40_m.jpg";
  18. entries.addItem(entry);

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.

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.

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                 xmlns:s="library://ns.adobe.com/flex/spark"
  4.                 xmlns:mx="library://ns.adobe.com/flex/mx"
  5.                 autoDrawBackground="false"
  6.                 contentBackgroundColor="0x00FF00"
  7.                 color="{data.color}"
  8.                 >
  9.    
  10.     <s:layout>
  11.         <s:HorizontalLayout />
  12.     </s:layout> 
  13.    
  14.     <mx:Image source="{data.imgUrl}" />
  15.     <s:VGroup>
  16.         <s:Label text="{data.label}" fontSize="16"/>
  17.         <s:Label text="San Francisco" fontSize="12"/>      
  18.     </s:VGroup>
  19.  
  20.    
  21. </s:ItemRenderer>

In der Haupt-MXML-Datei muss man seiner DataGroup nun nur noch diesen Renderer zuweisen (der obige Renderer heißt im Beispiel MyItemRenderer).

PLAIN TEXT
XML:
  1. <s:DataGroup dataProvider="{entries}" itemRenderer="MyItemRenderer">
  2.     <s:layout>
  3.         <s:VerticalLayout />
  4.     </s:layout>  
  5. </s:DataGroup>

Den kompletten Quellcode gibt es hier zum Anschauen und Download.