Ergänzend zum Beitrag ItemRenderer für DataGroup erstellen möchte ich ein weiteres Feature von Flex 4 vorstellen: Virtual Layouts.

Die Virtual Layouts sorgen für eine effiziente Nutzung des Speichers. Anstatt für jeden ItemRenderer ein neues Objekt zu erstellen, werden vorhandene Objekte wiederverwendet. Dies spart Arbeitsspeicher, nutzt die vorhandenen Ressourcen effizienter und führt so zu einem Performancegewinn.

With virtual layout, the container reuses item renderers so that it only creates item renderers for the currently visible children of the container. As a child is moved off the screen, possible by scrolling the container, a new child being scrolled onto the screen can reuse its item renderer.

Recycling von Objekten

Ich habe das Beispiel aus dem Vorgängerbeitrag modifiziert, so dass 3000 Objekte als Quelle für die DataGroup dienen. Flex erstellt dann zu Beginn alle 3000 Objekte, da virtuelle Layouts standardmäßig deaktiviert sind (rechts in der Abbildung).

Setzt man useVirtualLayout auf true werden hingegen zu Beginn nur 8 Objekte in diesem Beispiel generiert, die immer wieder verwendet werden (links in der Grafik). Wenn der User weiterscrollt, kümmert sich Flex selbst darum, die vorhandenen Objekte zu nutzen. Es werden also insgesamt nicht mehr als die 8 Objekte benötigt.

XML:
  1. :DataGroup dataProvider="{entries}" itemRenderer="MyItemRenderer">
  2.     :layout>
  3.         :VerticalLayout useVirtualLayout="true" />
  4.     :layout>  
  5. :DataGroup>

Performancegewinn und Speicherauslastung

Die Speicherauslastung zeigt deutlich den Unterschied. Wenn virtuelle Layouts deaktiviert sind, lässt sich die Anwendung mit 3000 Objekten bei mir gar nicht mehr nutzen (sehr lange Ladezeit und Anwendung reagiert danach nicht mehr). Mit virtuellen Layouts läuft die Anwendung problemlos.

Link: Beispiel anschauen (useVirtualLayout=true)
Link: Quellcode zum Anschauen und Download