< Previous | Next >

Lesson 6: Set up a Web site's dynamic navigation

This lesson illustrates how to set up the Web site's dynamic navigation.

When you designed the structure of your Web site in Lesson 2, you made some decisions about the relationships between the pages. Recall the way you laid out the page icons with lines connecting them:

page icons graphic

There are several different ways that one page can be related to another. These relationships are referred to like the relationships in a family. In this example, View All Classifieds is the parent page and the other three pages are its child pages. Also, these three pages are sibling pages to each other.

These page relationships are used to generate navigation links like navigation bars and tabs. Each page automatically creates its navigation links based on the pages to which it is related. This process is called dynamic navigation.

Checking site structure

You want to ensure that your site structure has been set up to specify which pages should be included in navigation. You can specify in Web Site Designer which pages should be included as links in dynamic navigation, which pages should be included in site maps, as well as some other navigation options that are based on the structure of your site and your page relationships. This is useful when you may have pages that need to be included in the site, but would not make sense as part of your navigation features. For example, you might have an error page that appears when the site encounters a problem; however, you would not want to show the error page as part of the navigation.
  1. Double-click Web Site Navigation in the Project Explorer view to view your site structure.
  2. You can see that all of your pages have the Show in Navigation option selected by default because the Show in Navigation icon (Show in Navigation icon) is visible. This option must be selected for each page that you want to appear in a navigation bar. You can also disable a page, so it will not appear in the navigation. You need to disable the search results page, Filtered Listings, from the navigation because the user will be sent there from the search option on the View All Classifieds page.
    1. Right-click the Filtered Listings page icon.
    2. Select Set Navigation > Show in Navigation to uncheck it. The Show in Navigation icon should now be unavailable on the Filtered Listings page icon.
  3. You also need to disable your Update Listing page because the user will be sent there from the update option on the View All Classifieds page. Right-click the Update Listing page icon. Next select Set Navigation > Show in Navigation to uncheck it. The Show in Navigation icon should now be unavailable on the Update Listing page icon.
  4. You need to set a Navigation Root for your site. The top page, usually the first page created in the site, is often set as the Navigation Root. Right-click the View All Classifieds page icon and click Set Navigation > Set Navigation Root. The icon (Root icon) at the top of the page icon is the Root icon. The navigation root is important because it determines the link levels used when generating Web site navigation, such as navigation bars. Note: The default options set by the site navigation for the View all Classifieds page and the Post a Listing page should remain selected.
  5. Press Ctrl+S to save your changes.

Adding a navigation component to your page template

  1. Return to your page template by double-clicking template.jtpl in the Project Explorer view.
  2. In the Palette view, click Web Site Navigation to open the drawer that contains the navigation components. There are many different types of dynamic navigation components that you can add to your Web site, including a site map. The most basic component is the Horizontal Bar, which comprises of a row of links based on the site structure.
  3. Though you know you need a row of links at the top of each page allowing users to access the other pages in the site, you also want to add some visual interest to the navigation. Drag the Horizontal Tabs component to the second row in your page template; this component creates the dynamic links in a tabbed row. The Insert Horizontal Tabs wizard opens.
  4. Accept the default to use a Sample navigation component.
  5. Accept the default in the Thumbnail images (horizontal-tab01.jsp) and notice that the File name field is automatically populated. Click Next.
  6. Select the type of links that you want to appear in the navigation bar, based on page relationships. To specify that the top page of your site, and all of each page's siblings and children will appear in the navigation, ensure that the following pages are selected:
    • Top page
    • Children of top page
    • Sibling pages
    • Current page
    Notice that if you select previous or next links, you can supply a label to appear for those links, such as Back and Forward.
  7. Click Next. Accept the defaults on the Optional Settings for Specification File page of the wizard. If you want to generate the links at runtime using JSP custom tags, you would select JSP Navigation. If you want to generate the links at design time using HTML custom tags, select HTML Navigation. If you are adding an HTML custom tag in a Faces JSP page click the Use Faces link check box to create an outputLink tag for Faces.
  8. Click Finish. The Navigation Component icon (navigation component icon) displays on the page template.
  9. Save your changes to the page template. When you save the page template, the dynamic navigation changes are applied to all of the pages in your site.
  10. Double-click Web Site Navigation in the Project Explorer view to view your site structure. Because your Web pages now have a navigation component, the icon (no nav icon ) indicating that the page does not have a Web site navigation does not appear on the page icon.

The navigation component adds several files to your Web project. After saving your template, notice that your Project Explorer view contains a new .jsp and several .jpg files. These files display the tabs in your pages:

Previewing your navigation

If you want to see an instance of how the navigation looks on the pages rather than in the template, double-click all_records.jsp in the Project Explorer view and then click the Preview tab in Page Designer. You can see that the names that appear on the tabs are the navigation labels for the pages, rather than the file names. Also, notice that the current page is displayed as the highlighted tab; as you navigate through the site, the current page will always be the highlighted tab on top.

Tip: If you change the structure of your site in the Navigation view, the dynamic navigation links will automatically update to reflect the new structure.

navtab graphic

Now that you have set up the dynamic navigation, continue to the next lesson by clicking on Next.