Overview

This article demostrates the code to create a List View UI pattern that follows the Tizen UX Guidelines, and it is based on the master-detail application template generated by Tizen Web UI Framework. The master-detail application template includes a header, content and footer with back functionality.

• HTML for List Menu
• JavaScript for List Menu
• CSS for List Menu
• Screenshots

HTML for List Menu

The application's homepage consists of a header with title and a button, a Tizen ListView widget and footer. Each list item contains a reference link, corresponding title, sub text and an icon.

<div data-role="header" data-position="fixed">
  <h1>Bienvenida</h1>
  <a data-role="button" href="second.html" data-icon="forward"
    data-style="circle">Second</a>
</div>

data-add-back-btn comes handy in adding a back button to the page.

<div id="mainPage" data-role="page" data-add-back-btn="true">

The Tizen ListView widget provides a list with an icon, title, sub text and button.

<ul id="mainList" data-role="listview">
  <li id="0" class="ui-li-has-multiline"><a href=""
    class="ui-link-inherit"> <img src="WebContent/icons/transport.png"
    class="ui-li-bigicon" /> Transport <span class="ui-li-text-sub">Most
    Economical</span> <div data-role="button" data-inline="true" data-icon="arrow-r"
    data-style="circle"></div></a></li>
  <li id="1" class="ui-li-has-multiline"><a href=""
    class="ui-link-inherit"> <img src="WebContent/icons/car.png"
    class="ui-li-bigicon" /> Rent 'a' Car <span class="ui-li-text-sub">Trip
    to the county's</span><div data-role="button" data-inline="true" data-icon="arrow-r"
    data-style="circle"></div></a></li>
</ul>

The footer provides a back button to exit the application.

<div id="foot" data-role="footer" data-position="fixed"></div>

The second view of the application displays a list view built only with an icon and title.

<div id="listContent" data-role="fieldcontain">
    <nav id="secondNav" class="listItems">
	<ul id="secondList" data-role="listview">
	    <li id="7"><a href="details.html" class="ui-link-inherit"> <img
		src="WebContent/icons/animals.png" class="ui-li-bigicon" /> zoo park
		</a></li>
	    <li id="9"><a href="details.html" class="ui-link-inherit"> <img
		src="WebContent/icons/movies.png" class="ui-li-bigicon" /> movie theater
		</a></li>
	</ul>
    </nav>
</div>

JavaScript for List Menu

The application uses java script functionality to navigate to a different view, when an item is selected in the list.

$('#mainList').bind('click', function () {
	$.mobile.changePage("details.html", {transition: "slide"} );
});

When the application is running the homepage, clicking on the back button in the footer shall close the application. This can be achieved using the below function.

$('div[data-role="page"]#mainPage .ui-btn-back').bind("click", function(event) {
        var currentApp = tizen.application.getCurrentApplication();
        currentApp.exit();
    });

CSS for List Menu

The properties of the title and sub text of the Tizen Lisview widget are modified in the style.css file.

.myHeader.ui-li-heading {
    color: #cc0000;
}

.ui-li-text-sub {
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: clip;
    white-space: normal;
    text-overflow: ellipsis;
}

Snapshot:

Below are the snapshots of the List Based Navigation sample application.

Note: The List Based Navigation sample application is available for reference (See under File Information section for attachment).