Add Navigation within a Page
After reviewing this How-To, you should be able to add navigation within a page to your application.
The sections include:
Oracle HTML DB provides navigation within pages that contain vertical content that scrolls off the screen. This is implemented as a list of sections at the top of the page with links to the appropriate region within the page. Each region then contains a link back to the top of the page. This type of navigation is very useful for users.
The discussion below walks you through creating the necessary templates and then using those in a page to provide vertical page navigation. This navigation employs simple html anchors.Necessary Template Changes
To implement navigation within a page, you need specific code within your page template, region template and list template. This code can be added to any application theme, whether custom or standard. The Theme being used for this example is Theme 5, Opal Look.Page Template
Each theme has several page templates. If you are only using the default Page Template in your application, only that template needs to be modified. To find out which Page Template is the default:
To include page navigation, you need to include an anchor at the top of the page. Make the following change to any page template referenced by a page where you want to include navigation.
Next, you need to modify the region templates you will use on the pages to include a reference in the title bar to the anchor. You can use the word "Top" or an image for the link. The example below uses an image.
Lastly, you need a list template that will display the list entries as references, side-by-side. Each theme from the HTML DB Repository includes a list template named 'Horizontal Links List'. The template displays list entries horizontally but does not include a separator. To include a separator, you need to modify the template. You can either modify the 'Horizontal Links List' List template or copy it, and then modify the copy. To modify the existing template:
This is just one example where the separator is just a dash. You can use any separator you want.
Creating the List
The navigation will be created as a list. First, you create a list and reference your new modified list template. Then you create list entries within the list, one for each region on your page that will include a link. These list entries will be of type URL and the target will be the anchor name that will be defined in each region.
Now that you have the list created, you will create a list entry for each region on the page.
Adding to a Page
For navigation to be displayed on a page, you need to have the following things:
To add the anchors to the region titles:
Next, you will create the List region. The example below has the region without a region template. Although page navigation typically does not have a region template, it is your design preference whether or not to include one.
Lastly, if your page does not already reference the page template that you modified to include the PAGETOP anchor, you will need to change the page template reference.
Running the Page
The page displayed below has a region containing the page navigation and three regions of content. The first image shows the page, as it would initially display. To run a specific page, you can click the run icon ( ) in the upper right of the Page Definition.Image 7 - Top of New Page
Below is the page after the Third Region link is selected. It scrolls the screen so that the Third Region is displayed. To navigate back to the top, the user just needs to click on the up arrow image ( ) in the right of the title bar.Image 8 - Scrolling Down
Now you should be able to include page navigation within your applications.
Discuss this how-to in the OTN HTML DB Discussion Forum.