Multipage documents and lists

Gabor Paller's picture

In this part we are going to see a bit more complicated example of Tizen Web UI widgets and page manipulation. The functionality of the example program is the same as here: instead of cycling through the words, we are going to select one from a list and its meaning will be displayed on a second page.

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

First let's see the structure of an UI with multiple pages because that may be mildly surprising. In order to generate a multipage application, choose the Multi-Page application option when creating the Tizen Web UI Framework project. Multiple pages are actually incorporated into a single HTML file with the following structure:

<html>
...
<body>
    <!-- Start of first page: #one -->
    <div data-role="page" id="one">
    ...
    </div>
    <!-- End of first page: #one -->
    ...
    <!-- Start of second page: #two -->
    <div data-role="page" id="two">
    ...
    </div>
    <!-- End of second page: #two -->
</body>
</html>

 

This structure conforms to jQuery Mobile specification.

 

Is there anyone here who remembers WAP cards and decks? The same concept is resuscitated in jQuery Mobile with these specially annotated <div> sections. Navigation among the pages can be accomplished with normal internal links.

<a href="#one">....</a>

It must be noted that jQuery still considers this multipage document as one HTML page. This means that e.g. document events (like the document ready event) are generated only once for the entire page. It is also possible to manipulate DOM elements of another "page" inside this multipage document. The reason is that from the browser's point of view, this multipage document is one HTML page, even though some parts of this document are not visible to the user.

The other new element of this example application is the list widget. Tizen list widgets conform to jQuery Mobile too. The list is placed with the following tag:

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

List items could have been placed with <li> elements inside the <ul> element but I chose to initialize the list programmatically, from JavaScript code in this example program (initList function in main.js).

 

 

Attached file: 
Taxonomy upgrade extras: