Class “ListView”
Object > NativeObject > Widget > Composite > CollectionView > ListView
| Type: | ListView<ItemType> extends CollectionView<Cell> |
| Generics: | ItemType: any |
| Constructor: | public |
| Singleton: | No |
| Module: | tabris-decorators |
| Direct subclasses: | None |
| JSX Support: | Element: <ListView/>Parent Elements: <Canvas/>, <Cell/>, <Composite/>, <Page/>, <RefreshComposite/>, <Row/>, <ScrollView/>, <Stack/>, <Tab/>Child Elements: <Cell/> |
ListView is a high-level extension of the low-level CollectionView widget. It provides additional API to make usage more convenient, but does not add any new features.
ListView is optimized for JSX and data binding. It can be used in plain JavaScript, but in this case some features do not work, as noted below.
In contrast to CollectionView it features an items property and requires no callbacks to create or populate cells, and no explicit item position/content updates: The load(), insert(), remove() and refresh()) methods are called implicitly when the items property value changes or mutates. For this to work as expected the items property must either be set a List instance, or to a series of immutable arrays. Any change to a List will be recognized immediately, while an items array must to be entirely replaced without modifying the previous one. ListView will then compute the difference between the old and new array automatically.
To define the look of a ListView it requires one or more <Cell> child elements containing widgets that bind themselves to the cell’s item. These cells act as templates for all Cell instances needed by ListView to display the items. If multiple cell templates are present, their itemType and/or itemCheck properties are used to determine which cell template to use for which item.
Note that this mechanism ONLY works in JSX, but ListView can still be used without templates by setting the createCell, cellType and cellHeight properties instead. You may want to do this if you are using plain JavaScript project setup. In this scenario the Cell properties itemType, itemCheck and selectable are not supported.
ListView is not exported by the tabris module, but by tabris-decorators, which needs to be installed separately.
Examples
JSX
contentView.append(
<ListView stretch items={items}>
<Cell padding={8} height={52}>
<TextView centerY bind-text='item.text' font='24px'/>
</Cell>
</ListView>
);
See also:
JSX Examples with various cell types and selection events
JSX Data Binding Example
TSX Examples with various cell types and selection events (TypeScript variant)
TSX Data Binding Example (TypeScript variant)
JS Examples with various cell types and selection events (Plain JavaScript - some features not supported)
Constructor
new ListView(properties?)
| Parameter | Type | Description |
|---|---|---|
| properties | Properties<ListView> |
Sets all key-value pairs in the properties object as widget properties. Optional. |
Static Methods
select(ev, action?)
This is a helper method intended to be used in an event listener of any event of Cell or its children. It triggers a select event on the ListView containing the cell. The action value is set on the resulting ListViewSelectEvent event object.
Example usage: onTap={ev => ListView.select(ev, someNumber)}.
Use selectPrimary, selectSecondary, selectToggle or selectDismiss as a shorthand to trigger select with a specific value for action, or just set the selectable property of Cell.
| Parameter | Type | Description |
|---|---|---|
| ev | EventObject |
|
| action | number |
A numeric value passed on to the select event object, defaults to 0. Optional. |
Returns: undefined
selectDismiss(ev)
This is a helper method intended to be used directly as an event listener of any event of Cell or its children. Like the select method it triggers a select event on the ListView containing the cell. This difference is only semantic: The action value on the ListViewSelectEvent event object will be set to ItemAction.Dismiss (i.e. 4), typically indicating the item should be removed .
Example usage:onSomeEvent={ListView.selectDismiss}.
| Parameter | Type | Description |
|---|---|---|
| ev | EventObject |
Returns: undefined
selectPrimary(ev)
This is a helper method intended to be used directly as an event listener of any event of Cell or its children. Like the select method it triggers a select event on the ListView containing the cell. This difference is only semantic: The action value on the ListViewSelectEvent event object will be set to ItemAction.Primary (i.e. 1), indicating a ‘normal’ selection.
Example usage: onTap={ListView.selectPrimary}.
| Parameter | Type | Description |
|---|---|---|
| ev | EventObject |
Returns: undefined
selectSecondary(ev)
This is a helper method intended to be used directly as an event listener of any event of Cell or its children. Like the select method it triggers a select event on the ListView containing the cell. This difference is only semantic: The action value on the ListViewSelectEvent event object will be set to ItemAction.Secondary (i.e. 2), indicating some alternative kind of selection.
Example usage: onSomeEvent={ListView.selectSecondary}.
| Parameter | Type | Description |
|---|---|---|
| ev | EventObject |
Returns: undefined
selectToggle(ev)
This is a helper method intended to be used directly as an event listener of any event of Cell or its children. Like the select method it triggers a select event on the ListView containing the cell. This difference is only semantic: The action value on the ListViewSelectEvent event object will be set to ItemAction.Toggle (i.e. 3), typically indicating the item should be marked as checked or unchecked.
Example usage: onSomeEvent={ListView.selectToggle}.
| Parameter | Type | Description |
|---|---|---|
| ev | EventObject |
Returns: undefined
Properties
items
List or Array containing the items that to be displayed. If a List is used any changes to the list (items added/removed/replaced) the ListView updates itself automatically. The updated will be animated if possible.
| Type: | List<ItemType> | ItemType[] |
| Settable: | Yes |
| Change Event: | itemsChanged |
Events
select
An event that may be triggered by a Cell as the result of any kind of user interaction. By default cells do not trigger select events, they have to be explicitly configured to do so. This can be done via the selectable property on Cell or the static select trigger methods.
EventObject Type: ListViewSelectEvent<ListView>
| Property | Type | Description |
|---|---|---|
| action | number |
A general-purpose parameter passed on when the event was triggered by one of the static select methods. This is meant to be used by the application to differentiate between different kind of interactions. It can be safely ignored if there is only one kind of selection, such as tapping a cell. tabris-decorators exports a ItemAction enum defining 4 pre-defined values for use with this property: Primary, Secondary, Toggle and Dismiss. These are set when using the corresponding trigger methods. |
| item | ItemType |
The item currently associated with the Cell that triggered the event. |
| itemIndex | number |
The index of the item within the items list/array. |
| originalEvent | EventObject |
The event that was the cause of this select event. |
Change Events
itemsChanged
Fired when the items property has changed.
EventObject Type: PropertyChangedEvent<ListView, List | Array>
| Property | Type | Description |
|---|---|---|
| value | List<ItemType> | ItemType[] |
The new value of items. |
