Page

amx:panelPage

The Page component is an important building block in AMX. It defines the content area in a page that will scroll up and down between header and footer areas. It is the parent container for all AMX applications built using AMX.

The panel page consists of the following elements:

Header: This is a facet or bar fixed to the top section of the application screen.
Primary Facet: This displays on the right of the page title in the header facet.
Secondary Facet: This displays on the left of the page title in the header facet.
Content: This is the main body of the page.
Footer: This is a facet or bar fixed to the bottom section of the application screen.

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Page: The page that AMX components can display on.
Header: The Header facet appears at the top edge of the application screen with page title, buttons and other components as necessary.
Action Bar: On Android, header elements are aligned differently. An application icon is aligned left, followed by the page title and then icons or buttons to the right.
Title: The page title is centered in the Header facet.
Primary Facet: Displays on the right of the page title in the Header facet.
Secondary Facet: Displays on the left of the page title in the Header facet.
Content Area: Displays between the Header and Footer on the application screen.
Footer: The Footer facet appears at the bottom edge of the application screen.

Behavior

Common behaviors for this component.

Fixed: Header and Footer facets will display fixed as the content area scrolls.

Usage

Usage guidelines for this component.

On the Phone

Phone based Headers and Footers should be fairly simple due to limited amount of space.
The Header facet typically contains the "page title" and 1 to 2 Buttons.
Show short and descriptive page titles in the header that represent that current view.
The Footer facet can contain Buttons.
Do not include too many controls in the header or footer.

On the Tablet

The Header facet contains a more complex combination of 'page title', Buttons, logo, icons, etc...
The Footer facet contains a more complex combination of Buttons and other components.

Sample

AMX sample code for this component.

 <amx:panelPage>

    <amx:facet name="header">

    <amx:outputText id="ot1" value="Welcome"/>

    </amx:facet>

    </amx:panelPage>

Used On: Phone, Tablet
Also Called: Container, Page
Related Components: List View, Form, Panel
Resources: None

Fig 1. iOS Page

Fig 2. Android Page