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.

Table: Page sections
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.

Table: Page changing methods
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.