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.
Page	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.