Creating a list with tiles

How to

Create a list with tiles of items in your application.

Solution

Construct the tiled list object in your class

// To allow other applications to reference 
// this object, you can place it in the class root.
var myTileList:TileList = new TileList();

Initialize your tiled list's attributes

// Set location for list
myTileList.x = 100;
myTileList.y = 200;

// Optional: Create background for tile list
var bg:Sprite = new Sprite();
// Set outer line color
bg.graphics.lineStyle(2,0xCCCCCC);
// Set inner fill color
bg.graphics.beginFill(0x333333,1);
// Create background rectangle
bg.graphics.drawRect(0,0,510,420);
// Stop coloring
bg.graphics.endFill();
// Set position of the background box
bg.x = 90;
bg.y = 190;
// Add to stage
this.addChild(bg);

// Set column width
myTileList.columnWidth = 160;
// Set number of columns
myTileList.columnCount = 3;
// Set spacing of column cells
myTileList.cellPadding = 5;
// Set width
myTileList.width = 510;
// Set height
myTileList.height = 400;

// Optional: Set selection mode
myTileList.selectionMode = ListSelectionMode.MULTIPLE;
// Optional: Set scroll direction
myTileList.scrollDirection = ScrollDirection.VERTICAL;

// Call event functions when list is clicked or scrolled
myTileList.addEventListener(ListEvent.ITEM_CLICKED, onListClick);
myTileList.addEventListener(ScrollEvent.SCROLL_END, onScroll);
myTileList.addEventListener(ScrollEvent.SCROLL_BEGIN, onScrollStart);

// Add list to stage
this.addChild( myTileList );

Create and apply your tiled list's content

// Create an array for objects
var arrMonth:Array=[];

// Add objects with a label property
arrMonth.push({label: "January"});
arrMonth.push({label: "February"});
arrMonth.push({label: "March"});
arrMonth.push({label: "April"});
arrMonth.push({label: "May"});
arrMonth.push({label: "June"});
arrMonth.push({label: "July"});
arrMonth.push({label: "August"});
arrMonth.push({label: "September"});
arrMonth.push({label: "October"});
arrMonth.push({label: "November"});
arrMonth.push({label: "December"}); 

// Link array to list as a data provider
myTileList.dataProvider = new DataProvider(arrMonth);

Create the functions that are called by your tiled list's interaction events

private function onListClick(event:ListEvent):void 
{
	trace("Item clicked: " + event.data.label);
	trace("Index clicked: " + event.index);
	trace(myTileList.selectedIndices + " items selected");
}

private function onScroll(event:ScrollEvent):void
{
	trace("Finished scrolling...");
}

private function onScrollStart(event:ScrollEvent):void
{
	trace("Start scrolling...");
}

Build requirements

You must include the following classes in the class:

import qnx.fuse.ui.events.ListEvent;
import qnx.fuse.ui.events.ScrollEvent;
import qnx.fuse.ui.listClasses.ListSelectionMode;
import qnx.fuse.ui.listClasses.ScrollDirection;
import qnx.fuse.ui.listClasses.TileList;
import qnx.ui.data.DataProvider;

Discussion

When you create a tile list, you declare the TileList variable and set its properties to whatever values your application requires. After you set your list's properties, you can create an array of data to provide the list's contents and use the list's dataProvider property to apply the contents. To add functionality, you can add listener functions for ITEM_CLICKED, SCROLL_BEGIN, and SCROLL_END events to perform the actions that are defined in the functions, when the user interacts with your list. You can also reference the currently selected items in your list elsewhere in the class by using your list's selectedIndices property.