Creating a sectioned lists with tiles

How to

Create a tile list with sections of items in your application.

Solution

Construct the section tile list object in your class

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

Initialize your section tile list's attributes

// Set location
mySectionTileList.x = 100;
mySectionTileList.y = 50;

// 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,540,520);
// Stop coloring
bg.graphics.endFill();
// Set position of the background box
bg.x = 90;
bg.y = 40;
// Add to stage
this.addChild(bg);

// Set width
mySectionTileList.width = 520;
// Set height
mySectionTileList.height = 500;
// Set height for section headers
mySectionTileList.headerHeight = 48; 
// Set number of columns
mySectionTileList.columnCount = 5;
// Set column width
mySectionTileList.columnWidth = 100;
// Set spacing of column cells
mySectionTileList.cellPadding = 5;


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

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

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

Create and apply your section tile 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"}); 

var mySDP:SectionDataProvider = new SectionDataProvider();
 
// Populate section data provider
for( var i:int = 0; i < arrMonth.length; i++ )
{
    // Add month names from array to data provider
    var section:Object = arrMonth[i].label;
    mySDP.addItem( section );
                
    // Add day numbers to each section, (all 31 for now). Further
    // logic to remove non-existing dates could be implemented.
    for( var j:int = 1; j<32; j++ )
    {
        mySDP.addChildToItem( {label: j}, section );    
    }
} 

// Link section data provider to list as a data provider
mySectionTileList.dataProvider = mySDP;

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

private function onListClick(event:ListEvent):void 
{
	trace("Item clicked: " + event.data.label);
	trace("Index clicked: " + event.index);
	trace("Section clicked: " + event.section);
    trace(mySectionTileList.selectedItems.length + " items selected");
	
    for( var n:int = 0; n < mySectionTileList.selectedItems.length; n++ )
    {        
        trace(mySectionTileList.selectedItems[n].label + " is currently selected");
    }
}

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.SectionTileList;
import qnx.ui.data.SectionDataProvider;

Discussion

When you create a sectioned list with tiles, you declare the SectionTileList 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 selectedItems property.

The selectedItems property returns an array of objects. You can iterate through this array and obtain the labels of selected list items. If you have duplicate labels, (for example, the calendar data in the example code) consider adding code to track the selections more specifically when section data is available.