[ZT] How to Create a Customized List

Custom Skin Class:

package com.rabcore
{
 import flash.display.Sprite;
 import flash.text.engine.SpaceJustifier;
 
 import qnx.ui.skins.SkinAssets;
 import qnx.ui.skins.SkinStates;
 import qnx.ui.skins.UISkin;

 public class MyCustomSkin extends UISkin
 {
  /**@private**/
  protected var upSkin:Sprite;
  /**@private**/
  protected var selectedSkin:Sprite;
  /**@private**/
  protected var disabledSkin:Sprite;
  /**@private**/
  protected var downSkin:Sprite;
  
  protected var upOddSkin:Sprite;

  public function MyCustomSkin()
  {
   super();
  }
  
  override protected function initializeStates():void
  {
   
   upSkin = new Sprite();
   upSkin.graphics.beginFill(0xFF0000);
   upSkin.graphics.drawRect(0,0,200,200);
   upSkin.graphics.endFill();
   
   upOddSkin = new Sprite();
   upOddSkin.graphics.beginFill(0x342D7E);
   upOddSkin.graphics.drawRect(0,0,200,200);
   upOddSkin.graphics.endFill();
   
   downSkin = new Sprite();
   downSkin.graphics.beginFill(0x333333);
   downSkin.graphics.drawRect(0,0,200,200);
   downSkin.graphics.endFill();
   
   disabledSkin = new Sprite();
   disabledSkin.graphics.beginFill(0xCC0000);
   disabledSkin.graphics.drawRect(0,0,200,200);
   disabledSkin.graphics.endFill();
   
   selectedSkin = new Sprite();
   selectedSkin.graphics.beginFill(0x000000);
   selectedSkin.graphics.drawRect(0,0,200,200);
   selectedSkin.graphics.endFill();
   
   
   setSkinState(SkinStates.UP, upSkin );
   setSkinState(SkinStates.UP_ODD, upOddSkin );
   setSkinState(SkinStates.SELECTED,selectedSkin );
   setSkinState( SkinStates.DISABLED, disabledSkin );
   setSkinState( SkinStates.DOWN, downSkin );
   showSkin( upSkin );
   
  }

 }
}

Custom CellRenderer class:

package com.rabcore
{
 
 import qnx.ui.listClasses.AlternatingCellRenderer;
 
 public class MyCellRenderer extends AlternatingCellRenderer
 {
  public function MyCellRenderer()
  {
   super();
   setSkin(MyCustomSkin);
  }

 }
}

main class:

package
{
 import flash.display.Sprite;
 
 import qnx.ui.data.DataProvider;
 import qnx.ui.listClasses.CellRenderer;
 import qnx.ui.listClasses.List;
 
 import com.rabcore.MyCustomSkin;
 import com.rabcore.MyCellRenderer;
 
 // The following metadata specifies the size and properties of the canvas that
 // this application should occupy on the BlackBerry PlayBook screen.
 [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
 public class MaxG extends Sprite
 {
  public function MaxG()
  {
   var listOfThings:List = new List();
   
   var dp:DataProvider = new DataProvider();
   
   var arr:Array = new Array();  
   
   arr.push({label: "A long label."});
   arr.push({label: "A very long label."});
   arr.push({label: "An extremeley long label."}); 
   arr.push({label: "An extremeley long label."}); 
   arr.push({label: "An extremeley long label."}); 
   arr.push({label: "An extremeley long label."}); 
   arr.push({label: "An extremeley long label."}); 
   

   listOfThings.width = 300;
   listOfThings.columnWidth = 300;
   listOfThings.rowHeight = 40;
   listOfThings.height = arr.length * 40;
   listOfThings.scrollable = false;
   
   listOfThings.setSkin(MyCellRenderer);
   
   
   dp.setItems(arr);
   
   listOfThings.dataProvider = dp;
   
   addChild(listOfThings);
  }
 }
}

so to sum it up to get customized lists:

make a skin > apply the skin to a custom cell renderer > apply it to the list

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Renderer-for-DropDown-working/m-p/644139#M1259