| Oracle® HTML DB User's Guide Release 2.0 Part Number B16373-01 |
|
|
View PDF |
| Oracle® HTML DB User's Guide Release 2.0 Part Number B16373-01 |
|
|
View PDF |
When you build an application you can include different types of navigation controls, including navigation bar entries, tabs, breadcrumbs, 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 bar entries offer an easy way to move users between pages in an application. The location of a navigation bar depends upon the associated page template. A navigation bar entry enables you to display a link from an image or text.
Topics in this section include:
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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, scroll down to Navigation Bar.
Under Navigation Bar, click the Create icon.
Specify the following Navigation Bar Entry attributes:
Sequence - Specify the order of evaluation for this component.
Alt Tag Text - Enter ALT text for navigation icons that are images. If you do not specify an image name, then this text displays.
Icon Image Name - Defines the name of the image that displays.
Image Height - Defines the height of the image.
Image Width - Defines the width of the image.
Text - Enter additional text to display with the image. You can include text or use icons with no text. This attribute is optional and can be translated.
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 ID.
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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, scroll down to Navigation Bar.
Under Navigation Bar, click the Create icon.
Specify the following icon attributes:
Sequence - Specify the order of evaluation for this component.
Text - Enter additional text to display with the image. You can include text or use icons with no text. This attribute is optional and can be translated.
Specify the target location.
If the target location is a URL:
From Target is a, select URL.
In URL Target, type a URL. For example:
http://www.yahoo.com
If the target location is a page:
From Target is a, select Page in this Application.
In Page, specify the page ID.
If the navigation bar entry will display conditionally, specify the appropriate conditional information and click Create.
Once you create a navigation bar entry you can edit it on the Navigation Bar Entries page.
To edit a navigation bar entry:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Applications home page, click Shared Components.
Under Navigation, select Navigation Bar Entries.
The Navigation Bar Entries page appears.
You can change the appearance of the page by making a selection from the View list and clicking Go. Available options include:
Icons (the default) displays each navigation bar entry as a large icon. To edit a navigation bar entry, click the icon.
Details displays each navigation bar as a line in a report. To edit a navigation bar, click the appropriate sequence number.
The Edit Navigation Bar Entry page appears.
Make the appropriate edits and click Apply Changes.
To edit multiple navigation bar entries at once:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Applications home page, click Shared Components.
Under Navigation, select Navigation Bar Entries.
The Navigation Bar Entries page appears.
C lick Grid Edit.
Edit the appropriate attributes and click Apply Changes.
You can view the Navigation Bar Entry Subscription and Navigation Bar Entry History reports by clicking the appropriate tab at the top of the Navigation Bar Entries page.
|
Note: The Subscription and History buttons only appear after you create a navigation bar. |
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 ID. 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:
|
The Tabs page displays a graphical representation of the tabs defined in your application. You access the Tabs page from the Shared Components page, or by clicking the heading Tabs on the Page Definition.
Topics in this section include:
To access the Tabs page from the Shared Components page:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select Tabs.
The Tabs page 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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, select the heading Tabs.
The Tabs page 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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Tabs, click the Create icon.
The Create Tab Wizard appears.
Follow the on-screen instructions.
The Standard Tab Task list displays on the right side of the Tabs page. You can access the links on this list to rename a standard tab set, resequence the display order, associate pages with a tab set, create a new standard tab, or create a new standard tab set.
To access the Standard Tab Task list:
Navigate to the Tabs page:
Click the Application Builder icon on the Workspace home page.
Select an application.
Click Shared Components.
Under Navigation, select Tabs.
Make a selection from the Standard Tab Task list. Available options include:
Rename Standard Tab Set
Resequence Display Order
Associate Page(s) with Selected Standard Tab
Create New Standard Tab
Create New Standard Tab Set
You can edit multiple tabs at once by clicking Edit Standard Tabs and Edit Parent Tabs on the Tabs page.
To edit multiple tabs at once:
Navigate to Tab Manager. See "About the Tabs Page".
Click one of the following buttons:
Edit Standard Tabs
Edit Parent Tabs
You can view the Tab Utilization and Tab History reports by clicking the appropriate tab 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 a 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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Branches, click the Create icon.
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 ID of the page you want to branch to
PL/SQL code
A URL address
Follow the on-screen instructions.
Breadcrumbs provide users with hierarchical navigation. A breadcrumb is a hierarchical list of links that display using templates. You can display a breadcrumb as a list of links, or as a breadcrumb path.
Topics in this section include:
|
See Also: "Creating a New Template" and "Breadcrumb Templates" for information about changing menu display |
A breadcrumb trail 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 that functions as second level of navigation and displays beneath the standard tabs at the top of each page.
To add a breadcrumb to a page in your application you must:
Create the breadcrumb by running the Create Breadcrumb Wizard.
Add entries to it
Add the breadcrumb to a page by creating a region
To create breadcrumbs from the Shared Components page:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select Breadcrumbs.
The Breadcrumbs page appears.
Click Create.
Enter a name and click Create.
To create breadcrumbs from a Page Definition:
Navigate to the appropriate Page Definition:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, scroll down to Breadcrumbs and click the Create icon.
Enter a name and click Create.
After you create a breadcrumb, you add entries to it.
To add a breadcrumb entry:
Navigate to the Breadcrumbs page:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select Breadcrumbs.
The Breadcrumbs page appears.
Select a breadcrumb to add entries to.
Click Create Breadcrumb Entry.
Under Breadcrumb Identification, specify the page on which this menu will be current
Under Entry:
Sequence - Indicate the order in which breadcrumb entries appear.
Parent Bread Entry - Identify the parent of this entry.
Short Name - Specify the short name of this entry (referenced in the breadcrumb template).
Long Name - Specify the long name of this entry (referenced in the breadcrumb template).
Under Target:
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 ID
You can make a breadcrumb conditional by making selections under Conditions.
To make the breadcrumb 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 breadcrumb entry you need to create.
A region is a area on a page that serves as a container for content. Once you create a breadcrumb and a breadcrumb template, the next step is to create a region. Once you create a region you can add a breadcrumb to page.
|
See Also: "Creating a New Template" and "Breadcrumb Templates" for information about changing menu display |
To create a breadcrumb region:
Navigate to the appropriate Page Definition:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Regions, click the Create icon.
For the region type, select Breadcrumb.
Enter a title and select a region template.
Select a breadcrumb and a breadcrumb template.
Optional. Identify the breadcrumb entry used to identify this page:
Breadcrumb Entry Label - Enter a label for the breadcrumb entry.
Parent Breadcrumb Entry - Select the appropriate hierarchical parent.
Click Finish.
Repeat these procedures for each page where you would like to add breadcrumb navigation.
To give users a more exact context, you may include session state in breadcrumbs, making your breadcrumbs 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:
Home > Orders > Orders for ACME Inc
In this example, ACME Inc not only indicates the page a user is on and 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 breadcrumb's short name or long name, for example:
&COMPANY_NAME.
Once you create a breadcrumb you can edit it on the Breadcrumbs page.
To edit a breadcrumb:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select Breadcrumbs.
The Breadcrumbs page appears.
You can change the appearance of the page by making a selection from the View list. Available options include:
Icons (the default) displays each breadcrumb as a large icon. To edit a breadcrumb, click the icon.
Details displays each breadcrumb as a line in a report. To edit a breadcrumb, select the appropriate name.
You can view the Breadcrumb Utilization and Breadcrumb History reports by clicking the appropriate tab at the top of the Breadcrumbs page.
|
Note: The Utilization and History buttons only appear after you create a breadcrumb. |
Click Utilization to access the Breadcrumb Utilization report. This report lists breadcrumbs by page. Click the page ID to link to a specific page.
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 information about 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.
Click the Application Builder icon.
Select an application.
On the Applications home page, click Shared Components.
Under Navigation, select Lists.
The Lists page appears.
To create a new list, click Create.
In the fields provided:
Enter a name for the list.
Select a list template.
If applicable, select a build option for this component. Build options are predefined settings that determine whether or not components within an application are enabled.
Click Create.
To create a list from a Page Definition:
Navigate to the appropriate Page Definition:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Shared Components, scroll down to Lists and click the Create icon.
In the fields provided:
Enter a name for the list.
Select a list template.
If applicable, select a build option for this component. Build options are predefined settings that determine whether or not components within an application are enabled.
Click Create.
Once your list has been created, you need to add entries to it.
You can create hierarchical lists that contain sublists. To create a hierarchical list, you must:
Select a list template that supports hierarchical lists. To determine which list templates support hierarchical lists, look for templates having the naming convention "with Sublist."
Select a Parent List Item when you create each list entry.
To add an entry to a list:
Navigate to the Lists page.
Select a list.
Click Create List Entry.
The Create / Edit List Entry page appears.
Under Label and Sequence:
Parent List Item - Identify the parent for this list entry. Use this attribute if you are creating a hierarchical list that will contain a sublist.
Sequence - Indicate the order in which list entries appear.
Image - Identify the file name for the image used to display this list entry. Control over this attribute is provided by list templates.
Image Attributes - Identify the image attributes (such as width="12" height="12") for the list element image.
Use the #LIST_LABEL# substitution string to reference the list label text. This substitution string allows for the title image attribute to be automatically set based on the value of the list label text. For example:
title="#LIST_LABEL#"
List Entry Label (required) - Enter the label text for this link (required).
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 ID.
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 IDs) on which to clear cache. Specify multiple pages by listing the page IDs 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.
Under Current List Entry Identification:
List Entry Current for Pages Type - Specify when this list entry should be current based on the page type.
List items can be current or non-current. Current list items use the current template, non current list items use the non current list item template. The actual condition and templates are defined in subsequent attributes.
List Entry Current for Condition - Based on the selection above, define a condition to evaluate. When this condition is true then the list item becomes current.
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:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
The Page Definition appears.
Under Regions, click the Create icon.
Select List as the region type.
Specify the following display attributes:
Title - Enter a title for the region. This title will display if the region template you choose displays the region title.
Region Template - Choose a template to control the look of the region.
Display Point - Identify a display point for this region.
Two types of display points exist: page template positions and page body positions. Page template positions are controlled by page template substitution strings (#REGION_POSITION_01#..#REGION_POSITION_08#). Page template positions allow for exact placement of a region within a page template. Page body positions are displayed where the #BODY# substitution string in the page template indicates.
Sequence - Specify the sequence for this component. The sequence determines the order of evaluation.
Column - Indicate the column in which this region is to be displayed. A page can have multiple regions, these regions can be displayed in different columns. Please note that this attribute only applies to regions that are displayed in a Page Template Body position.
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.
Once you create a list you can edit it on the Lists page.
To edit a list:
Navigate to the Lists page.
From the Page Definition:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
Select a page.
Under Shared Components, select the title Lists.
From the Shared Components page:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Applications home page, click Shared Components.
Under Navigation, select Lists.
The Lists page appears.
You can change the appearance of the page by making a selection from the View list. Available options include:
Icons (the default) displays each list as a large icon. To edit a list, click the appropriate icon.
Details displays each list as a line in a report. To edit a list, click the list name.
You can edit multiple list entries at once by clicking Grid Edit on the List Entries page.
To edit multiple list entries at once:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select 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.
You can view the List Utilization by Page, Unused Lists, and List History reports by clicking the appropriate tab at the top of the Lists page.
|
Note: The List Utilization, Unused Lists, and History buttons only appear after you create a list. |
You can use a tree in your application to effectively communicate hierarchical or multiple level data.
Topics in this section include:
To create a tree:
Navigate to the Shared Components page:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Application Builder home page, click Shared Components.
Under Navigation, select Trees.
The Trees page appears.
To create a new tree, click Create.
Enter basic page information.
Specify how tabs should be implemented.
Enter a Tree Name and specify number of default expanded levels.
Select a tree template.
To display a tree, you need to specify a starting point. Depending on your Start Tree selection, enter either a query or a single value.
Identify whether to include Collapse All, Expand All, or Reset Tree buttons.
Specify the owner and name of the table on which the tree will be based.
A tree is based on a query and returns data that can be represented in a hierarchy. Identify the column you want to use as the ID, the Parent ID, and specify the text that should appear on the leaf nodes.
I D - Enter the column you want to use as the ID.
Parent ID - Enter the Parent ID.
Leaf Node Text - Specify the text that should appear on the leaf nodes.
Link Option - Select Existing Application Item to make the leaf node text a link. If you select this option, specify a page to link to.
Optional. Identify an optional where and order by clause to add to your query.
Specify the display text for the Go button.
Identify the page you want to branch to when the user clicks a button.
Click Finish.
Once you create a tree you can edit it on the Trees page.
To edit a tree:
Navigate to the Workspace home page.
Click the Application Builder icon.
Select an application.
On the Applications home page, click Shared Components.
Under Navigation, select Trees.
The Trees page appears.
You can change the appearance of the page by making a selection from the View list. Available options include:
Icons (the default) displays each tree as a large icon. To edit a tree, click the icon.
Details displays each tree as a line in a report. To edit a tree, click the appropriate name.
You can view the Trees Utilization and Tree History reports by clicking the appropriate tab at the top of the Trees page.
|
Note: The Utilization and History buttons only appear after you have created a tree. |
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.
