There’s a new class, mx.collections.AsyncListView, which implements IList and takes an IList. It sits between the Spark component and the data source. So to use it:
– Set a List’s dataProvider property equal to an AsyncListView.
– Set the AsyncListView’s list property equal to the data source, such as DataService.
Now, AsyncListView will handle all the ItemPendingErrors coming from the data source and give the List either objects from the data source, pending objects, or failed objects. The developer defines functions for the AsyncListView to call when items fail or are pending; the objects returned from these functions are put into the List. To set up these functions, set the createPendingItemFunction and createFailedItemFunction properties.
The main outstanding issue, which we aren’t going to fix now, is that sorting/dragging/dropping of pending and failed items isn’t supported. See SDK-23911 for details.
Here’s an example which pages data from a DataService to a List. The pending function returns “item x pending”, and the fail function returns “item x failed”. The item renderer in the list draws a white background for successful items, a green background for pending items, and a red background for failed items.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024"
minHeight="768">
<fx:Script>
<![CDATA[
public function pendingFunction(i:int, obj:Object):Object{
return {value: "item " + i.toString() + " pending"};
}
public function errorFunction(i:int, obj:Object):Object{
return {value: "item " + i.toString() + " failed"};
}
public function doFault(e:* = null):void{
//trace("DataService fault");
}
]]>
</fx:Script>
<fx:Declarations>
<s:DataService id="ds" destination="pagingTest" fault="doFault()" />
</fx:Declarations>
<s:Button x="100" y="0" label="Get Data" click="ds.fill(lcv)"/>
<s:List x="100" y="50" id="theList" useVirtualLayout="true"
height="300" width="300" fontSize="18">
<s:dataProvider>
<mx:AsyncListView id="theView"
createPendingItemFunction="pendingFunction"
createFailedItemFunction="errorFunction">
<mx:list>
<mx:ListCollectionView id="lcv" />
</mx:list>
</mx:AsyncListView>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="100%">
<fx:Script>
<![CDATA[
import mx.graphics.SolidColor;
private function getColor(obj:Object):uint{
if(obj == null)
return 0xffffff;
else if(obj.value.indexOf("pending") > -1)
return 0x00ff00;
else if(obj.value.indexOf("failed") > -1)
return 0xff0000;
else
return 0xffffff;
}
override public function set data(obj:Object):void{
super.data = obj;
try{
nameLabel.text = (obj.value) as String;
nameLabel.setStyle('backgroundColor', getColor(obj));
}catch(e:Error){
//trace("Error for " + obj + ", " + e.message);
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Label id="nameLabel" width="100%" height="100%" paddingTop="5"
paddingBottom="5" paddingLeft="5" paddingRight="5" />
<s:Rect width="100%" height="100%" id="theRect" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
flex spaghetti 