<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/15/creating-a-view-cursor-on-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Array id="arr">
<mx:String>One</mx:String>
<mx:String>Two</mx:String>
<mx:String>Three</mx:String>
<mx:String>Four</mx:String>
<mx:String>Five</mx:String>
</mx:Array>
<mx:ArrayCollection id="arrColl" source="{arr}" />
<mx:Script>
<![CDATA[
import mx.collections.IViewCursor;
import mx.collections.Sort;
import mx.collections.SortField;
[Embed("assets/accept.png")]
public var acceptIcon:Class;
[Embed("assets/exclamation.png")]
public var exclamationIcon:Class;
private var cursor:IViewCursor;
private function init():void {
var sortField:SortField = new SortField(null, true);
var sort:Sort = new Sort();
sort.fields = [sortField];
arrColl.sort = sort;
arrColl.refresh();
cursor = arrColl.createCursor();
}
private function button_click(evt:MouseEvent):void {
var found:Boolean = cursor.findAny(textInput.text);
if (found) {
img.source = acceptIcon;
list.selectedItem = cursor.current;
} else {
img.source = exclamationIcon;
list.selectedItem = null;
}
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Canvas>
<mx:TextInput id="textInput" />
<mx:Image id="img" right="3" verticalCenter="0" />
</mx:Canvas>
<mx:Button id="button"
label="Find"
click="button_click(event);" />
</mx:ApplicationControlBar>
<mx:List id="list"
dataProvider="{arrColl}"
width="100"
rowCount="{arrColl.length}" />
</mx:Application>
Thursday, March 31, 2011
Creating a view cursor on an ArrayCollection in Flex
Repeater Referencing repeated components
To reference individual instances of a repeated component, you use indexed id references, as the following example shows:
<?xml version="1.0"?>
<!-- repeater\RefRepeatedComponents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function labelTrace():void {
for (var i:int = 0; i < nameLabel.length; i++)
trace(nameLabel[i].text);
}
]]>
</mx:Script>
<mx:Model id="catalog" source="../assets/repeater/catalog.xml"/>
<mx:ArrayCollection id="myAC" source="{catalog.product}"/>
<mx:Label id="title" text="Products:"/>
<mx:Repeater id="r" dataProvider="{myAC}" startingIndex="1">
<mx:Label id="nameLabel"
text="{r.currentItem.name}: ${r.currentItem.price}"
width="200"/>
</mx:Repeater>
<mx:Button label="Trace" click="labelTrace();"/>
</mx:Application>For More Details Visit : http://livedocs.adobe.com/flex/3/html/help.html?content=repeater_3.html
Flex repeaters tutorial
Flex Repeaters can save you a lot of time. As long as they work, but troubleshooting these little guys can be a serious pain in the butt. In this article I'm going to talk about some best practices to avoid some major headaches.
What is a repeater?
A Flex Repeater is basically a loop function in mxml. You give the repeater a data provider (A collection of data), and the repeater will iterate over that collection and display the MXML components within the repeater.
Simple example:
dataProvider. In this example, we are assuming we have some sort of collection with the name "schoolsList". This can be an an Array, an ArrayCollection, an ICollectionView, an IList, or an XMLList. The dataProvider isn't picky.
recycleChildren. This can cause problems. If you are experiencing buggy behavior; try changing this to false. Repeaters will automatically listen to changes in your dataProvider and update the repeated elements accordingly. Having recycleChildren be "true" can improve performance because after a data change, elements that haven't changed will not get re-created.
schoolsRpt.currentItem. This is the current item within the iteration. So if our dataProvider is an ArrayCollection of School objects, currentItem is the current School object.
There are two things to pay attention to about this. Firstly, since currentItem is just a generic Object, we want to cast it to what we know it to actually be. In my example we are doing that like so: School(schoolsRpt.currentItem). Secondly, currentItem is only available at the time of iteration. If you have an event handler, such as a click event. currentItem is no longer there, so you must use getRepeaterItem()
Example:
What is a repeater?
A Flex Repeater is basically a loop function in mxml. You give the repeater a data provider (A collection of data), and the repeater will iterate over that collection and display the MXML components within the repeater.
Simple example:
<VBox> <mx:Repeater id="schoolsRpt" dataProvider="{schoolsList}" recycleChildren="true"> <mx:Text text="{School(schoolsRpt.currentItem).schoolName}"/> </mx:Repeater> </VBox>
recycleChildren. This can cause problems. If you are experiencing buggy behavior; try changing this to false. Repeaters will automatically listen to changes in your dataProvider and update the repeated elements accordingly. Having recycleChildren be "true" can improve performance because after a data change, elements that haven't changed will not get re-created.
schoolsRpt.currentItem. This is the current item within the iteration. So if our dataProvider is an ArrayCollection of School objects, currentItem is the current School object.
There are two things to pay attention to about this. Firstly, since currentItem is just a generic Object, we want to cast it to what we know it to actually be. In my example we are doing that like so: School(schoolsRpt.currentItem). Secondly, currentItem is only available at the time of iteration. If you have an event handler, such as a click event. currentItem is no longer there, so you must use getRepeaterItem()
Example:
<VBox> <mx:Repeater id="schoolsRpt" dataProvider="{schoolsList}" recycleChildren="true"> <mx:Button text="{School(schoolsRpt.currentItem).schoolName}" click="var btn:Button = Button(event.currentTarget); Alert.show(School(btn.getRepeaterItem()).schoolName + ' pressed')"/> /> </mx:Repeater> </VBox>
Subscribe to:
Posts (Atom)