Create a List

  1. Import the required classes.
    import flash.display.Sprite;
    
    import qnx.ui.data.DataProvider;
    import qnx.fuse.ui.listClasses.List; 
    import qnx.fuse.ui.listClasses.ListSelectionMode;
    import qnx.fuse.ui.listClasses.ScrollDirection;
    
    
  2. Add the following statement to your class, directly before the class signature. This statement sets the stage width and height, the frame rate, and the background color of your application.
    [SWF(height="600", width="1024", 
    frameRate="30", backgroundColor="#FFFFFF")]
  3. Create an application framework by extending Sprite.
    class ListSample extends Sprite
    {
  4. Create a constructor for your class and invoke initializeUI().
         public function ListSample()
         {
    	     initializeUI();
         }
  5. Create the initializeUI function to set up and initialize the UI controls.
         private function initializeUI():void
         {
  6. In the initializeUI function, create the array of objects. By default, the List object looks for the label property within the List object data. The label property contains the String that appears inside each list cell. In the following code sample, the array is populated with an object for each month of the year, where each object contains a label property.
             var arrMonth:Array=[];
    
             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"}); 
  7. In the initializeUI function, instantiate the List class and position it on the stage. Provide a height and width for the list, otherwise it will not render.
             var myList:List = new List();
    
             myList.setPosition(100, 100);
             myList.width = 300;
             myList.height = 400;
             myList.columnWidth = 100;
  8. In the initializeUI function, set the scrollDirection property to ScrollDirection.HORIZONTAL to allow the list to scroll horizontally.
     myList.selectionMode = ListSelectionMode.MULTIPLE;
             myList.scrollDirection = ScrollDirection.HORIZONTAL;
  9. In the initializeUI function, assign a DataProvider to the list. In the following code sample, a new DataProvider instance is created using the array of objects that you created in step 5.
             myList.dataProvider = new DataProvider(arrMonth);
  10. In the initializeUI function, add the List object to the stage.
             this.addChild(myList);
         }
    }

Adding an item to a list

Call the addItemAt method to add an item to a list at a given index. In the following code sample, a new item is added to the list at the second index. The addItemAt method takes the object data to add and the index location to place the new data.

myList.addItemAt({label: "Q1 FY11"}, 2);

You can append a child to the list by calling the addItem method.

You can add multiple children to a given item by calling the addItemsAt method. In the following code sample, a new array of data is added at the second index. The addItemsAt method takes an array of object data and the index location to place the new data. The array data is inserted into the existing data array.

myList.addItemsAt(myNewArray, 4)

Removing an item from a list

You can remove data from a list at runtime. Call the removeItem method and specify a valid object to remove the object from a list. In the following code sample, an object with the label property "January" is removed from the list.

myList.removeItem({label: "January"});

To remove an item at a given index, use the removeItemAt method.

myList.removeItemAt(2)
To remove all items in the list, use the removeAll method.

Updating an item in a list

You can update the data in a list at runtime.

To update an item with a given item, use the updateItem method. In the following code sample, an object with the label property "January" is updated with a new object that contains the label property "Q1 FY11".

myList.updateItem({label: "January"}, {label: "Q1 FY11"} );

You can use the updateItemAt method to update an item at a given index.

myList.updateItemAt({label: "Q1 FY11"}, 1)

You can call the updateItemsAt method to update the data in the array starting at the fourth index, using a new array of data. The updateItemsAt method takes an array of object data and the index location at which to update the new data. The array data is inserted into the existing data array.

myList.updateItemsAt(myNewArray, 4)