Selecting Page Types
When developing applications for fluid mode, you can create multiple page types for simultaneous display, each page serving a different role in accordance with HTML 5 specifications. The main page is referred to as the fluid page, which is a standard page that has been designated a Fluid Page on the Use tab of the Page Properties. The fluid page definition contains the bulk of the transaction fields and controls. For more information on setting page properties for fluid pages, see Setting Properties for Fluid Pages.
When creating a new fluid page or opening an existing fluid page, you can select Page (Fluid) from the definition list in Application Designer.
Image: New Definition dialog box
The following example shows the Page and Page (Fluid) definition types in the definition list in Application Designer.
You select the remaining page types for fluid mode, from the Page Type drop-down list on the Use tab of the Page Properties dialog.
Image: Page Properties dialog box
This example shows the fluid page types listed in the Page Type drop-down list on the Page Properties, Use tab.
The following table provides a brief description of each fluid page type.
|
Page Type |
Description |
|---|---|
|
Header Page |
Page displayed in <header> section of the HTML acting as the banner area fixed at the top of every page. It does not scroll with the page). The header page appears at the top of the browser interface over the main page, containing elements used for basic navigation and orientation, like a back button, page title, home button, search button, and so on. PeopleTools supplies a default header page, PT_HEADERPAGE, but this can be overridden for a custom header page to be used by selecting No System Header Page in the Component Properties dialog box. |
|
Side Page 1 |
Page displayed on the left side off the screen, often containing left-side navigational constructs. Users can slide it open and shut. |
|
Footer Page |
Page displayed in the <footer> section of the HTML at the bottom of the main page, containing elements related to the end of a transaction, such as a Save button. The footer page is fixed at the bottom of the content page and does not scroll. |
|
Search Page |
Page generated in <aside> section containing search pages, which include Find an Existing Value and Keyword Search. Note: An Add a New Value page is not provided by the search page definitions provided by PeopleTools. |
|
Layout Page |
You can designate a page definition as a layout page for use as a template for development reuse or for testing purposes, such as finalizing CSS work. Note: This is a base layout page, which can be used when selecting a new Page (Fluid). At that time you can select a layout page where the structure will be copied into your new page. You cannot apply a layout page after you have created a page or if you create a new a new page (regular). |
|
Master&Detail Target page |
Displays the transactional fluid page for use within the master/detail component, in which the master provides the navigation and the detail displays the target content. For more information on the master/detail approach, see Working with Master/Detail Components. |
|
Side Page 2 |
A side page that appears from the right side of the screen. Users can slide it open and shut. Typically used to contain related content. |
Image: Fluid Screen Layout
The following diagram illustrates the general layout of the various fluid page types.
Note: Not all page types are required to be used. The application content area displays the content presented by the primary fluid page.