The ITEM
widget is the child node of a LIST
and is used to encapsulate other FML widgets. If the LIST
has tied to a datasource (attribute data="") and a single <ITEM/>
is specified (as shown below), the is a prototype and its used as a template for each row in the datasource set.
Name
Type
Default
Description
Req
data
string
n/a
The data associated with each item in the list
index
int
n/a
The zero based index in the list data set. The first item in the list is index=0, second item is index=1, ...
selected
bool
false
Toggles true/false when a user clicks on the item
selectable
bool
true
Indicated the item can be selected
Name
Parameter Type
Description
select(index)
int
Selects the item (if deselected) at the specified index and sets the LISTs data to this item's data. Invoked in any EVENT
) string using .select(index)
deselect(index)
int
Deselects (if selected) the item at the sepcified index and sets the LISTs data to NULL. Invoked in any EVENT
) string using .deselect(index)
clear()
Clears any selected item and sets the LIST's data to NULL. Invoked in any EVENT
) string using .clear()
<FML >
<!-- Data Source -->
<GET id =" trackerdata" url =" resources/planedata.json" />
<!-- List -->
<LIST height =" 500" id =" planelist" data =" trackerdata" flex =" 1" selectable =" true" >
<ITEM pad =" 8" color =" ={this.selected} ? 'green' : 'grey'" selected =" ={this.index} == 0" >
<TXT value =" Departure: {data.estDepartureAirport}" style =" h6" />
/ITEM>
</LIST >
<ROW >
<BUTTON label =" select 3" onclick =" planelist.select(3)" />
<BUTTON label =" deselect 3" onclick =" planelist.deselect(3)" />
<BUTTON label =" clear" onclick =" planelist.clear()" />
</ROW >
<TEXT value =" the selected item is: {planelist.data}" ></TEXT >
</FML >
See it in Action
Other Widgets You May Find Useful