Creating a list

How to

Create a list of items in your application.

Solution

Construct the list object in your class

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

You can use the RoundList class instead to create a list that loops back to the beginning when scrolled to the end. In all other aspects, this class behaves the same as the List class.

Initialize your list's attributes

// Set location
myList.x = 100;
myList.y = 100;

// Set width
myList.width = 300;
// Set height
myList.height = 400;

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

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

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

Create and apply your list's contents

// 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
myList.dataProvider = new DataProvider(arrMonth);

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

private function onListClick(event:ListEvent):void 
{
	trace("Item clicked: " + event.data.label);
	trace("Index clicked: " + event.index);
	trace(myList.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.List;
import qnx.fuse.ui.listClasses.ListSelectionMode;
import qnx.fuse.ui.listClasses.ScrollDirection;
import qnx.ui.data.DataProvider;

Discussion

When you create a list, you declare the List 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 in the class by using your list's selectedIndices property.