| Oracle® HTML DB User's Guide Release 1.6 Part Number B14303-02 |
|
|
View PDF |
| Oracle® HTML DB User's Guide Release 1.6 Part Number B14303-02 |
|
|
View PDF |
When you build an application you can include a number of different types of navigation controls, including navigation bars, tabs, menus, lists, and trees. This section describes how to implement navigation in your application.
Navigation controls are shared components. Once you create them, you can add them to any page within your application. You add a specific type of navigation control at the application level on the Shared Components page.
This section contains the following topics:
Navigation bars (see Figure 10-1) offer an easy way for users to move between pages in an application. The location of a navigation bar depends upon the associated page template. A navigation bar icon enables you to display a link from an image or text. A navigation bar entry can be an image, an image with text beneath it, or text. You must supply navigation bar entry images and text. When you create a navigation bar entry, you can specify an image, text, a display sequence, or a URL.
Navigation bars are different from other shared components in that you not need to reference them on a page by page basis. If your page template includes the #NAVIGATION_BAR# substitution string, the HTML DB engine automatically includes any defined navigation bars when it renders the page.
|
See Also: "Supported Page Template Substitution Strings" on using the#NAVIGATION_BAR# substitution string |
Before you can add a navigation bar, you must create a navigation bar entry on the Navigation Bar page. You can access the Navigation Bar page from either the Page Definition or from the Shared Components page.
To create a navigation bar entry referencing an icon:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
The Page Definition appears.
Under Shared Components, scroll down to Navigation Bar.
Under Navigation Bar, click Create.
Specify the following NavBar entry attributes:
Sequence
Alt Tag Text
Icon Image Name
Image Height and Image Width
Text
Specify the target location.
If the target location is a URL:
From Target is a, select URL.
In URL Target, type a URL.
If the target location is a page:
From Target is a, select Page in this application.
In Page, specify the page number.
If the navigation bar entry will display conditionally, specify the appropriate conditional information and click Create.
To create a navigation bar entry without icons:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
The Page Definition appears.
Under Shared Components, scroll down to Navigation Bar.
Under Navigation Bar, click Create.
Specify the following icon attributes:
Sequence
Text
If the target location is a page:
From Target is a, select Page in this application
In Page, specify the page number
If the navigation bar entry will display conditionally, specify the appropriate conditional information and click Create.
To manage navigation bar entries:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Select the heading Navigation Bar.
The Navigation Bar page appears.
On the Navigation Bar page you can:
View details about a specific entry by clicking the Edit icon
Access an editable summary view, by clicking Edit selected attributes.
View navigation bar entries that are subscribed to by clicking Subscriptions.
View a history of recently changed navigation bar entries by clicking History.
Create a new navigation bar entry, by clicking Create
Tabs are an effective way to navigate users between pages of an application. You can create a tabbed application look by using parent tabs, standard tabs, and Oracle HTML DB lists.
Application Builder includes two different types of tabs:
Standard tabs
Parent tabs
An application having only one level of tabs uses a standard tab set. A standard tab set is associated with a specific page and page number. You can use standard tabs to link users to a specific page. A parent tab set functions as a container to hold a group of standard tabs. Parent tabs give users another level of navigation as well as a context (or sense of place) within the application. You can use parent tabs link users to a specific URL associated with a specific page.
Topics in this section include:
|
Note: When running the Create Application Wizard, you have the option of creating an application with tabs. The following procedures assume you have already created an application that does not have any tabs. |
Before you can create parent and standard tabs, you need to check that your default template has positions defined for both standard and parent tabs using the appropriate substitution strings. You also need to make sure you do not override this template at the page level.
|
See Also:
|
You manage tab information using Tab Manager. You can access Tab Manager from the Shared Components page, or by clicking either the Parent Tabs or Standard Tabs heading on the Page Definition.
To access Tab Manager from the Shared Components page:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Tabs.
Tab Manager appears displaying a graphical representation of the tabs defined in your application.
To make another tab current, click the tab.
Notice the two Add buttons. Use the Add button on the upper right side of the graphic to add Parent tabs. Use the Add button at the lower left side of the graphic to add standard tabs.
To add a new tab, click Add adjacent to the appropriate tab type.
Think of parent tabs as a container to hold standard tabs. For example, in order to add two levels of tabs you first create a parent tab and then add standard tabs to it.
To access Tab Manager from the Page Definition:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
The Page Definition appears.
Under Shared Components, select one of the following headings:
Parent Tabs
Standard Tabs
Tab Manager appears displaying a graphical representation of the tabs defined in your application. The currently selected standard or parent tab is highlighted.
To make another tab current, click the tab.
Notice the two Add buttons. Use the Add button on the upper right side of the graphic to add Parent tabs. Use the Add button at the lower left side of the graphic to add standard tabs.
To add a new tab, click Add adjacent to the appropriate tab type.
Think of parent tabs as a container to hold standard tabs. For example, in order to add two levels of tabs you first create a parent tab and then add standard tabs to it.
To create a new tab from the Page Definition:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Tabs, click the Create icon.
Create Tab Wizard appears.
Follow the on-screen instructions.
You can edit multiple tabs at once by clicking Edit all standard tabs and Edit all parent tabs on the Tab Manager page.
To edit multiple tabs at once:
Navigate to Tab Manager. (See "Using Tab Manager".)
Click one of the following to edit tab attributes in a summary view:
Edit all standard tabs
Edit all parent tabs
Application Builder includes the following tab reports
You can access these reports by clicking the appropriate button at the top of the Tab Manager page.
Click Utilization to access the Standard Tab Utilization report. This report lists the standard tabs used in the current application.
A branch is an instruction to link to a specific page, procedure, or URL. For example you can branch from page 1 to page 2 after page 1 is submitted.
|
Note: If a page has a select list and a submit button, it can submit itself. However, you must create a branch to call the page or the submit will fail. |
You create a new branch by running the Create Branch Wizard and specifying Branch Point and Branch Type. The Branch Type defines the type of branch you are creating.
To create a branch:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Branching, click the Create icon to run the Create Branch Wizard.
Select a Branch Point:
On Submit: Before Computation - Occurs before computations, validations, or processing. Use this option for a Cancel button.
On Submit: Before Validation - Occurs after computations, but before validations or processing. Typically not used. If a validation fails, page processing stops, a rollback is issued, and the page displays the error. Because of this default behavior, you do not need to create branches to accommodate validations. However, you might want to branch based on the result of a computation (for example, to the previous branch point).
On Submit: Before Processing - Occurs after computations and validations, but before processing. Use this option to branch based on a validated session state, but before performing any page processing.
On Submit: After Processing - Occurs after computations, validations, and processing. This option branches to a URL or page after performing computations, validations, and processing. When using this option, remember to sequence your branches if you have multiple branches for a given branch point.
On Load: Before Header - Occurs before a page rendered. This option displays another page instead of the current page or redirects the user to another URL or procedure.
Select a Branch Type.
Depending upon the Branch Type, specify the following types of information on the pages that follows:
A page number of the page you wish to branch to
PL/SQL code
A URL address
Follow the on-screen instructions.
Menus provide users with hierarchical navigation. A menu is a hierarchical list of links that display using templates. You can display menus as a list of links, or as a breadcrumb path.
Topics in this section include:
|
See Also: "Creating a New Template" and "Menu Templates" for more information on changing menu display |
As shown in Figure 10-2, a breadcrumb style menu indicates where the user is within the application from a hierarchical perspective. In addition, users can click a specific page to instantly view it. You can include a breadcrumb menu that functions as second level of navigation and displays beneath the standard tabs at the top of each page.
To add a menu to a page in your application you must:
Add options to it
Add the menu to a page by creating a menu region
To create a menu from the Shared Components page:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Menus.
The Menus page appears.
To create a new menu, click Create.
Follow the on-screen instructions.
To create a menu from a Page Definition:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Shared Components, scroll down to Menu and click Create.
The Menus page appears.
To create a new menu, click Create.
Follow the on-screen instructions.
Once your menu has been created, you need to add options to it.
To add options to a menu:
Navigate to the Menus page.
Select a menu and click Create Menu Option.
Under Menu Identification, specify the page on which this menu will be current
Under Menu Option, specify the following:
Sequence - Indicate the order in which menu options appear.
Parent Menu Option - Identify the parent of this menu entry.
Short Name - Specify the short name of this menu option (referenced in the menu template).
Long Name - Specify the long name of this menu option (referenced in the menu template).
Specify a target location.
If the target location is a URL:
From Target is a, select URL.
In URL Target, type a URL.
If the target location is a page:
From Target is a, select Page in this Application
In Page, specify the page number
To make the menu conditional:
Make a selection from the Condition Type list.
Enter an expression in the fields provided.
When you are finished defining menu attributes, click Create at the top of the page.
Repeat these procedures for each menu option you need to create.
Once you create a menu and a menu template, the next step is to add it a page by creating a region and specifying the region type as Menu.
|
See Also: "Creating a New Template" and "Menu Templates" for more information on changing menu display |
To add a menu to a page:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Regions, click Create.
Under Regions, click Create.
While running the Create Region Wizard:
Select Menu for the region type.
Enter a title.
Select a menu and menu template.
Click Create Menu Region.
Repeat these procedures for each page on which you would like to add a menu.
To give users a more exact context, you may include session state in a menu, making your menus dynamic. For example, suppose a page in your application displays a list of orders for a particular company and you want to include the following breadcrumb menu:
Home > Orders > Orders for ACME Inc
In this example, ACME Inc not only indicates the page a user is on, but also the navigation path. The HTML DB engine stores the value of ACME Inc. in session state.
To create this type of dynamic menu, you must include a reference to a session state item in the menu's short name or long name, for example:
&COMPANY_NAME.
You can edit multiple menu entries at once by clicking Edit multiple menu entries text at the top of the Menus page.
To edit menu entries at once:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Menus.
The Menus page appears.
Click Edit multiple menu entries text.
Edit the appropriate menu name and click Apply Changes.
Application Builder includes the following menu reports:
You can access these reports by clicking the appropriate button at the top of the Menus page.
Click Utilization to access the Menu Utilization Report. This report lists menus by page. Click the page number to link to a specific page.
As shown in Figure 10-3, a list is a shared collection of links. You control the appearance of a list through list templates. Each list element has a display condition which enables you to control when it displays. You can define a list element to be either current or non current for a specific page. You further specify what current looks like using template attributes. You add a list to a page by creating a region and specifying the region type as List.
Topics in this section include:
|
See Also: "Creating a New Template" and "List Templates" for more information on altering list display |
To add a list to a page in your application you must:
Add items to the list.
Add the list to a page by creating a List region.
To create a list from the Shared Components page:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Lists.
The Lists page appears.
To create a new list, click Create List.
Follow the on-screen instructions.
To create a list from a Page Definition:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Shared Components, scroll down to Lists and click Create.
The Create / Edit List Object page appears.
To create a new list, click Create.
Follow the on-screen instructions.
Once your list has been created, you need to add items to it.
To add items to a list:
Navigate to the Lists page.
Select a list
Click Create List Entry to add entries to it.
The List Entry Attributes page appears.
Under Label and Sequence, edit the appropriate attributes. In List Entry Label (required), enter the label text for this link.
Use Target to specify a target location.
If the target location is a page:
From Target Type, select Page in this Application.
In Page, specify the target page number.
To reset pagination for this page, select reset pagination for this page.
In Request, specify the request to be used.
In Clear Cache, specify the pages (that is, the page numbers) on which to clear cache. Specify multiple pages by listing the page numbers in a comma delimited list.
You can set session state (that is, give a listed item a value) using the next two attributes:
To set session state:
In Set these items, enter a comma delimited list of item names for which you would like to set session state.
In With these values, enter a comma delimited list of values for the items specified in the previous step.
You can specify static values, or substitution syntax (for example, &APP_ITEM_NAME.). Note that item values passed to f?p= in the URL may not contain a colon (:). Additionally, item values may not contain commas unless you enclose the entire value in backslash characters (for example, \1234,56\).
If the target location is a URL:
From Target type, select URL.
In URL Target, type a URL.
If the target location is a page:
From Target type, select Page in this Application.
In Page, specify the page number.
If the target location is a URL:
From Target type, select URL.
In URL Target, type a URL.
To make the list entry conditional:
Make a selection from the Condition Type list.
Enter an expression in the fields provided.
When you are finished defining list attributes, click Create or Create and Create Another.
Once you created a list, the next step is to add it a page by creating a region and specifying the region type as List.
To add a list to a page:
Navigate to the appropriate Page Definition. (See "Viewing a Page Definition".)
Under Regions, click Create to run the Create Region Wizard.
Select List as the region type.
Specify region attributes:
Enter a title
Select a region template
Specify a display point
Specify a sequence
From List, select the list you want to add.
Click Create List Region.
Repeat these procedures for each page on which you would like to add a list.
You can edit multiple list entries at once by clicking Grid Edit on the List Entries page.
To edit menu entries at once:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Lists.
The Lists page appears.
Select a list name.
The List Entries page appears.
Click Grid Edit.
Edit the appropriate items and click Apply Changes.
Application Builder includes the following list reports:
You can access these reports by clicking the appropriate button at the top of the Lists page.
You can use a tree in your application to effectively communicate hierarchical or multiple level data.
To create a tree:
Navigate to the Workspace home page.
From the Applications list, select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, click Trees.
The Trees page appears.
To create a new tree, click Create.
Enter basic page information.
Enter a Tree Name and specify the Default Expanded Levels.
Specify how tabs should be implemented.
Identify tree attributes:
Enter a tree name.
Under Start Tree, specify how the starting tree node is created:
Based on new item with popup list of values - Creates a tree based on a new item with a popup list of values (LOV). Requires an LOV query that selects, displays, and returns values from a tree table. Use this method to select a different starting point each time you visit a page.
Based on a SQL Query - Creates a tree based on a SQL query. Requires a SQL query that selects a primary key from a tree table.
Static value - Creates a tree based on a static value.
Keep in mind that the option Based on new item with popup list of values enables you to select a different starting point each time you visit a page. The starting point for the last two options always remains the same.
You build a tree based on a table that contains the node data. This base table must have an ID (a primary key) and a parent ID that functions as a foreign key of the table. These IDs determine the number of tree levels.
Select a tree template.
Follow the on-screen instructions and specify the owner and name of the table on which the tree will be based.
Under Identify Query:
In ID, enter the column you want to use as the ID.
In Parent ID, enter the Parent ID.
In Leaf Node Text, specify the text that should appear on the leaf nodes.
Under Link Option, select Existing Application Item to make the leaf node text a link.
Application Builder includes the following tree reports:
You can access these reports by clicking the appropriate button at the top of the Lists page.
Click Utilization to access the Tree Utilization report. This report displays all trees included in the current application. To edit a tree, select the tree name.
