Specifications

CHAPTER 4

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

public var imgList:ArrayCollection = new ArrayCollection([

{img:"../assets/butterfly.gif"},

{img:"../assets/butterfly-gray.gif"},

{img:"../assets/butterfly-silly.gif"}

]);

]]></mx:Script>

<mx:Panel title="VBox with Repeater">

<mx:VBox height="150" width="250">

<mx:Repeater id="r" dataProvider="{imgList}">

<mx:Image source="../assets/{r.currentItem.img}"/>

</mx:Repeater>

</mx:VBox>

</mx:Panel>

</mx:Application>

If you use a List-based control, however, Flex only creates those controls in the list that are initially visible. The

following example uses the List control to create only the image needed for rendering:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

import mx.collections.ArrayCollection;

private static var birdList:Array =

["../assets/butterfly.gif","../assets/butterfly-gray.gif","../assets/butterfly-

silly.gif"];

[Bindable]

private var birdListAC:ArrayCollection = new ArrayCollection(birdList);

private function initCatalog():void {

birdlist.dataProvider = birdListAC;

}

]]></mx:Script>

<mx:Panel title="List">