Application Page Layout

In the Tizen wearable 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.

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.

As the Tizen wearable device screen size is small, avoid using the header element.
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>

Options

Option Input type Default value Description
enablePageScroll boolean false (in rectangular UI)
true (in circular UI)		 When it is set to true, scroll area is page.
Note
Only the content becomes scrollable when enablePageScroll is set "false". But if you set it to "true", the page(which may include header, content and footer) becomes scrollable.

Related Document pages

In your application, you can:

Where to Go Next