| Package | qnx.ui.listClasses |
| Class | public class SectionTileList |
| Inheritance | SectionTileList SectionList List UIComponent flash.display.MovieClip |
SectionTileList class allows you to group sections of data in a grid.
When the list is set to scroll vertically, the columnCount property is used to layout the grid.
You can use the rowHeight and columnWidth height properties to set the dimensions of each cell.
You can use the cellPadding property to set the padding between each cell.
The following image shows a basic calendar that is provided as an example:
See also
| Property | Defined By | ||
|---|---|---|---|
![]() | allowDeselect : Boolean
Determines if a selected cell in the list can be deselected when pressed. | List | |
| cellPadding : int
Gets or sets the amount of padding used between each cell in the grid. | SectionTileList | ||
| columnCount : int
Gets or sets the number of columns in the grid. | SectionTileList | ||
![]() | columnWidth : int
Gets or sets the width of each column in the list. | List | |
![]() | containment : String
Gets or sets a property that determines how a component is contained within a parent container. | UIComponent | |
![]() | dataProvider : IDataProvider [override]
Gets or sets the DataProvider for the list. | SectionList | |
![]() | enableShadows : Boolean
Sets or gets whether the scroll shadows should be shown. | List | |
![]() | firstVisibleItem : ICellRenderer [read-only]
Returns the first visible item in the view port area as defined by the width and height
| List | |
![]() | footerView : DisplayObject
Gets or sets the footer view. | List | |
![]() | headerHeight : int
Gets or sets the height of the header (in pixels). | SectionList | |
![]() | headerWidth : int
Gets or sets the width of the header (in pixels). | SectionList | |
![]() | lastVisibleItem : ICellRenderer [read-only]
Returns the last visible item in the view port area as defined by the width and height
| List | |
![]() | rowHeight : int
Gets or sets the height of each row in the list. | List | |
![]() | scrollable : Boolean
Gets or sets a value that determines whether a list can be scrolled. | List | |
![]() | scrollBarAlpha : Number
Gets or sets the opacity value for the scroll bar on the list. | List | |
![]() | scrollBarColor : Number
Gets or sets the color of the scroll bar. | List | |
![]() | scrollBarOffset : int
Gets or sets the x or y postion of the scrollbar, in pixels. | List | |
| scrollDirection : String [override]
A section tile list can only be scrolled vertically and will return
a scroll direction of VERTICAL. | SectionTileList | ||
![]() | selectedIndex : int [override]
Setting the selectedIndex property will have no effect on the list and will cause an error to be thrown. | SectionList | |
![]() | selectedIndices : Array [override]
Setting the selectedIndices property will have no effect on the list and will cause an error to be thrown. | SectionList | |
![]() | selectedItem : Object
Gets or sets the currently selected item in a single-selectable list. | List | |
![]() | selectedItems : Array
Gets or sets the group of selected items (selectedItems) in a multi-selectable list. | List | |
![]() | selectionMode : int
Gets or sets a value that determines whether or not selection mode is enabled. | List | |
![]() | size : Number
Gets or sets the size for this component (as a percentage of the
container's size, or in pixels). | UIComponent | |
![]() | sizeMode : String
Gets or sets the size mode for this component. | UIComponent | |
![]() | sizeUnit : String
Gets or sets the unit of measure for the size property. | UIComponent | |
| Method | Defined By | ||
|---|---|---|---|
Creates a new SectionTileList instance. | SectionTileList | ||
![]() | addChildToIndex(item:Object, index:int):void
Appends a child item to a section in the list, given the index of the section. | SectionList | |
![]() | addChildToIndexAt(item:Object, index:int, childindex:int):void
Adds a child item to a section at a specified index. | SectionList | |
![]() | addItem(item:Object):void
Appends an item to the end of the list. | List | |
![]() | addItemAt(item:Object, index:int):void
Adds an item to the list at the specified index. | List | |
![]() | addItemsAt(items:Array, index:int):void
Adds an array item at the specified index. | List | |
![]() | destroy():void
Call this method when you want to have your object collected by the garbage collector. | UIComponent | |
![]() | drawNow():void
Calls the draw() method. | UIComponent | |
![]() | getIsCellVisibleAtIndex(index:int):Boolean
Returns a Boolean indicating whether or not a cell at a given index is visible in the virtual area. | List | |
![]() | getItemAt(index:int):Object
Returns the item in the DataProvider at the specified index. | List | |
![]() | invalidate(property:String, invalidateNow:Boolean = false):void
Marks the property as invalid and the draw() method is called on the next frame or the next render, whichever comes first. | UIComponent | |
![]() | removeAll():void
Removes all the items from the list. | List | |
![]() | removeAllChildrenFromIndex(index:int):void
Removes all child items from a section at the specified index. | SectionList | |
![]() | removeChildFromIndexAt(index:int, childindex:int):void
Removes a child item from a section at a specified index. | SectionList | |
![]() | removeItem(item:Object):void
Removes a given item from the list. | List | |
![]() | removeItemAt(index:int):void
Removes an item from list at the specified index. | List | |
![]() | replaceChildInIndexAt(index:int, item:Object, childindex:int):void
Replaces a child item in a section at a specified index. | SectionList | |
![]() | replaceItem(item:Object, oldObject:Object):void
Replaces an item, given the new item object and the old item. | List | |
![]() | replaceItemAt(item:Object, index:int):void
Replaces the item in the list at the specified index with a new item. | List | |
![]() | scrollIndexVisible(index:int, seconds:Number = 1):void [override]
Scrolls a given item into view, given an index and an animation duration (in seconds). | SectionList | |
![]() | scrollToIndex(index:int, seconds:Number = 1):void [override]
Animates the section into view so that the header is at the top of the list. | SectionList | |
![]() | scrollToIndexInSection(section:int, index:int, seconds:int = 1):void
Animates the child of a section into view. | SectionList | |
![]() | setHeaderSkin(skin:Object):void
Sets the header renderer skin. | SectionList | |
![]() | setPosition(x:Number, y:Number):void
Sets the x and y position of the component. | UIComponent | |
![]() | setSize(w:Number, h:Number):void
Sets the width and height of the component. | UIComponent | |
![]() | setSkin(skin:Object):void
Sets the cell renderer to use to populate the list. | List | |
![]() | updateChildInIndexAt(index:int, item:Object, childindex:int):void
Updates an item in a section at a specified index. | SectionList | |
![]() | updateItem(value:Object, oldObject:Object):void
Updates an item in the list, given the new item and the item to update. | List | |
![]() | updateItemAt(item:Object, index:int):void
Updates the item in the list at the specified index, given the new item. | List | |
![]() | updateItemsAt(items:Array, index:int):void
Updates the items starting at the specified index with new items. | List | |
| cellPadding | property |
cellPadding:intGets or sets the amount of padding used between each cell in the grid.
The default value is 10.
public function get cellPadding():int public function set cellPadding(value:int):void| columnCount | property |
columnCount:intGets or sets the number of columns in the grid.
The default value is 1.
public function get columnCount():int public function set columnCount(value:int):void| scrollDirection | property |
scrollDirection:String[override]
A section tile list can only be scrolled vertically and will return
a scroll direction of VERTICAL.
public function get scrollDirection():String public function set scrollDirection(value:String):voidSee also
| SectionTileList | () | Constructor |
public function SectionTileList()
Creates a new SectionTileList instance.
In the following example, a SectionTileList instance is used to render a basic calendar.
package
{
import flash.display.Sprite;
import qnx.ui.data.SectionDataProvider;
import qnx.ui.listClasses.SectionTileList;
[SWF(height="600", width="1024",
frameRate="30", backgroundColor="#FFFFFF")]
public class SectionTileSample extends Sprite
{
private var mySectionTileList:SectionTileList;
public function SectionTileSample()
{
initializeUI();
normalizeDays();
}
private function initializeUI():void
{
var bg:Sprite = new Sprite();
bg.graphics.lineStyle(2,0xCCCCCC);
bg.graphics.beginFill(0x333333,1);
bg.graphics.drawRect(0,0,540,520);
bg.graphics.endFill();
bg.x = 90;
bg.y = 40;
this.addChild(bg);
//create and setup section list
mySectionTileList = new SectionTileList();
mySectionTileList.setPosition(100, 50);
mySectionTileList.width = 520;
mySectionTileList.height = 500;
mySectionTileList.columnCount = 5;
mySectionTileList.cellPadding = 5;
mySectionTileList.dataProvider = createDataProvider();
this.addChild(mySectionTileList);
}
private function createDataProvider():SectionDataProvider
{
//populate month name array
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"});
var mySDP:SectionDataProvider = new SectionDataProvider();
//populate section data provider
for( var i:int = 0; i < arrMonth.length; i++ )
{
//add month names
var section:Object = new Object();
section.label = arrMonth[i].label;
mySDP.addItem( section );
//add day numbers, all 31 for now
for( var j:int = 1; j<32; j++ )
{
mySDP.addChildToItem( {label: j}, section );
}
}
return(mySDP);
}
private function normalizeDays():void{
//Remove February Days
//TODO: account for leap years
mySectionTileList.removeChildFromIndexAt(1, 30);
mySectionTileList.removeChildFromIndexAt(1, 29);
mySectionTileList.removeChildFromIndexAt(1, 28);
//Remove April Day
mySectionTileList.removeChildFromIndexAt(3, 30);
//Remove June Day
mySectionTileList.removeChildFromIndexAt(5, 30);
//Remove September Day
mySectionTileList.removeChildFromIndexAt(8, 30);
//Remove November Day
mySectionTileList.removeChildFromIndexAt(10, 30);
}
}
}