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.
-
span style="color: #ff0000;">"The Embarcadero""http://farm5.static.flickr.com/4119/4779586909_30fdf6d27a_m.jpg""Pier am Embarcadero""http://farm5.static.flickr.com/4101/4780251102_98762e8f49_m.jpg""Powell Station""http://farm5.static.flickr.com/4076/4761612662_edf2973e40_m.jpg"
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
.
-
<?xml version="1.0" encoding="utf-8"?>
-
:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" -
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/mx"
-
autoDrawBackground="false"
-
contentBackgroundColor="0x00FF00"
-
color="{data.color}"
-
>
-
-
:layout> -
:HorizontalLayout /> -
:layout>
-
-
:Image source="{data.imgUrl}" /> -
:VGroup> -
:Label text="{data.label}" fontSize="16"/> -
:Label text="San Francisco" fontSize="12"/> -
:VGroup>
-
-
-
:ItemRenderer>
In der Haupt-MXML-Datei muss man seiner DataGroup
nun nur noch diesen Renderer zuweisen (der obige Renderer heißt im Beispiel MyItemRenderer
).
-
:DataGroup dataProvider="{entries}" itemRenderer="MyItemRenderer"> -
:layout> -
:VerticalLayout /> -
:layout>
-
:DataGroup>
Den kompletten Quellcode gibt es hier zum Anschauen und Download.
Schreibe einen Kommentar