So MXML is a slick tool for laying out UI components, but how do you interface the UI and the underlying application data structures? Meet the Repeater:
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”> <mx:Script> <![CDATA[ public var myArray:Array = [ "Hello", "World" ]; ]]> </mx:Script> <mx:Repeater id=”myRepeater” dataProvider=”{myArray}”> <mx:Button label=”{myRepeater.currentItem}”/> </mx:Repeater></mx:Application>
There’s a lot going on in that chunk of code, so follow along:
- The “<mx:Script> <![CDATA[" tag is similar to <?php -- basically, dropping out of XML and into ActionScript.
- There, we define a normal array "myArray" containing a couple items.
- Then "]]> </mx:Script>” drops us back into XML
- Next we define the <mx:Repeater> tag, name it, and link it to the “myArray” created above
- And now the magic: we define a <mx:Button> and set its label equal to the value of the “currentItem” of the repeater.
Step 5 is the interesting one. Essentially, we define a template that is “repeated” for every item of the array. That can be anything. Here, I’ve made it a button. But it could be a Panel or a big huge compound object, or a custom tag, or whatever. This magic tag bridges the gap between ActionScript data and MXML UI. Cool!
Note: When you compile the above code you’ll get the following warning:
Warning: Data binding will not be able to detect assignments to “myArray“.
This is because we’re using a standard Array object as a “dataProvider”. This’ll work in a bind, except a real data provider would implement the ICollectionView interface, which lets the collection get events when the contents of the collection change. Or, said another way, if you were to modify the Array after the Repeater does its thing, the Repeater won’t notice and thus won’t update the UI to match the data structure. But if you were to use a real collection object (such as an ArrayCollection) instead of an Array, then the Repeater would automatically update the UI whenever the collection itself changes.
Also note: I didn’t put [bindable] in front of the myArray, as other examples. I’m not sure what that’s supposed to do, but it seems to work fine without it.
