Page Handling
In the Tizen Web UI framework, the application page structure is based on a header and content elements:
-
The header is placed at the top, and displays the page title.
The content is the section below the header, showing the main content of the page.
The footer is placed at the bottom, and can include buttons.
Basic Layout
The following table describes the specific information for each section.
| Section | Class | Mandatory | Description |
|---|---|---|---|
| Page | ui-page | Yes | Defines the element as a page. The page component is used to manage a single item in a page-based architecture. A page is composed of header (optional), content (mandatory), and footer (optional) elements. |
| ui-page-active | No | If an application has a static start page, insert the ui-page-active class in the page element to speed up the application launch. The start page with the ui-page-active class can be displayed before the framework is fully loaded.
If this class is not used, the framework inserts the class automatically to the first page of the application. However, this has a slowing effect on the application launch, because the page is displayed only after the framework is fully loaded. |
|
| Header | ui-header | No | Defines the element as a header. |
| Content | ui-content | Yes | Defines the element as content. |
| Footer | ui-footer | No | Defines the element as a footer. The footer section is mostly used to include option buttons. |
To add a page to the application, use the following code:
<!--Page layout--> <div class="ui-page ui-page-active"> <header class="ui-header"></header> <div class="ui-content"></div> <footer class="ui-footer"></footer> </div> <!--Page layout with more button in header--> <div class="ui-page ui-page-active"> <header class="ui-header ui-has-more"> <h2 class="ui-title">Call menu</h2> <button type="button" class="ui-more ui-icon-overflow">More Options</button> </header> <div class="ui-content">Content message</div> <footer class="ui-footer"> <button type="button" class="ui-btn">Footer Button</button> </footer> </div>
Changing Pages
The following table lists the methods you can use to change the active page.
| Method | Description |
|---|---|
| tau.changePage(to) | Programmatically change to another page. The to argument is a page object or string. |
| tau.back() | Loads the previous page in the history list. |
Page Events
The following table lists the events related to pages.
| Event | Description |
|---|---|
| pagebeforechange | Triggered before switching from the current page. |
| pagebeforecreate | Triggered before the new page component is created and initialized. |
| pagebeforehide | Triggered before the current page is about to be closed. |
| pagebeforeload | Triggered before an external page is loaded. |
| pagebeforeshow | Triggered before the new page is displayed. |
| pagechange | Triggered after switching from the current page to the new page. |
| pagechangefailed | Triggered when the page switching fails. |
| pagecreate | Triggered after the new page component creation. |
| pagehide | Triggered after the current page is hidden. |
| pageinit | Triggered after the page component initialization occurs. |
| pageload | Triggered after an external page is loaded. |
| pageremove | Triggered after an external page is removed from the DOM. |
| pageshow | Triggered after the new page is displayed. |