Expandable list in Tizen

Gabor Paller's picture

Tizen Web UI framework provides an extensive set of widgets and we have seen one of the more complex ones, the List in the previous post. Now let's see some cute things we can do with improved versions of the list widget.

 

The example project is attached to this post. You have to be logged into Sfonge website to access it.

 

The first frequently used improvement is the expandable list. Expandable lists may be tricky in other platforms, e.g. in Android but it is super easy to create them in Tizen. A normal list specifies its list elements with <li> tags.

 

<ul data-role="listview">
     <li>Item1</li>
                ...
</ul>

 

If you want to create expandable lists, <li> elements need to be annotated to specify whether the <li> element in quetion is a first (group-) level or a second (child-) level element. If the list is collapsed, only group elements are shown and then group elements may be expanded to display child elements too.

 

Group rows look like this:

 

<li data-expandable="true" id="grey" data-initial-expansion="false">grey</li>

 

"data-expandable" attribute shows that this is supposed to be a group row of an expandable list. "id" will be used to collect the child elements of the group. A child element belonging to the group will carry the same ID:

 

<li data-expanded-by="grey">lightgrey - #D3D3D3</li>

 

It is really not very complicated. Here is how it looks like:

Attached file: 
Taxonomy upgrade extras: