flex spaghetti

Just another WordPress.com weblog

Archive for the ‘List’ Category

Paging Data in Spark Components (AsyncListView)

Posted by rvollmar on November 20, 2009

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>

Advertisements

Posted in AsyncListView, List, Paging | 1 Comment »

TileLayout Example

Posted by rvollmar on November 17, 2009

Here’s a quick example of using a TileLayout for a List and positioning elements within it:

<?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">
  <s:VGroup>
    
    <s:HGroup>
      <s:Button label="horizontalAlign left" click="TileLayout(list1.layout).horizontalAlign = 'left'" />
      <s:Button label="horizontalAlign center" click="TileLayout(list1.layout).horizontalAlign = 'center'" />
      <s:Button label="horizontalAlign right" click="TileLayout(list1.layout).horizontalAlign = 'right'" />
    </s:HGroup>  
    <s:HGroup>
      <s:Button label="verticalAlign top" click="TileLayout(list1.layout).verticalAlign = 'top'" />
      <s:Button label="verticalAlign middle" click="TileLayout(list1.layout).verticalAlign = 'middle'" />
      <s:Button label="verticalAlign bottom" click="TileLayout(list1.layout).verticalAlign = 'bottom'" />
    </s:HGroup>    
    <s:List id="list1"  >
      <s:itemRenderer>
        <fx:Component>
          <s:ItemRenderer width="10" height="10">
            <s:Rect width="100%" height="100%" >
              <s:stroke>
                <mx:SolidColorStroke weight="1" color="{data.color}"/>
              </s:stroke>
            </s:Rect>
          </s:ItemRenderer>
        </fx:Component>
      </s:itemRenderer>
      <s:layout>
        <s:TileLayout horizontalAlign="center" 
                verticalAlign="middle"
                columnWidth="40" rowHeight="40" />
      </s:layout>
      <s:dataProvider>
        <mx:ArrayCollection>
          <fx:Object color="0xff0000" />
          <fx:Object color="0x00ff00" />
          <fx:Object color="0x0000ff" />
          <fx:Object color="0xffff00" />
        </mx:ArrayCollection>
      </s:dataProvider>
  </s:List> 
  </s:VGroup>
</s:Application>

Posted in Group, Layout, List | Leave a Comment »