The Panel Navigation tags allow you to create navigation menus.

<t:panelNavigation2>

The panelNavigation2 tag is the newer panel navigation tag. You can create a menu from a list of NavigationMenuItem's created by a backing bean. Here is an example:

    <t:panelNavigation2 id="nav1" layout="list" itemClass="leftMenu" 
            activeItemClass="leftMenuActive" openItemClass="leftSubMenu">
        <t:navigationMenuItems id="navitems" value="${navigationMenu.items}" />
    </t:panelNavigation2>

The above code references three classes found in a stylesheet and it references a managed-bean called navigationMenu that has a property called items. You can create menus and submenus in your backing bean using code similar to the following:

public class NavigationBean {
  private List items;
    
  public NavigationBean() {
    setItems(new ArrayList());
    items.add(getMenuNavigationItem("Home", "Home"));

    NavigationMenuItem menu1 = getMenuNavigationItem("Menu 1", "Menu1");
    menu1.add(getMenuNavigationItem("Sub Menu 1", "SubMenu1"));
    menu1.add(getMenuNavigationItem("Sub Menu 2", "SubMenu2"));
    items.add(menu1);
        
    NavigationMenuItem menu2 = getMenuNavigationItem("Menu 2", "Menu2");
    menu2.add(getMenuNavigationItem("Sub Menu 3", "SubMenu3"));
    menu2.add(getMenuNavigationItem("Sub Menu 4", "SubMenu4"));
    items.add(menu2);
  }

  public List getItems() {
    return items;
  }
}

This code uses JSF navigation to activate pages. You will need to define the navigation in your JSF configuration file (faces-config.xml). For exmple, you might structure the above menu like this:

<navigation-rule>
  <from-view-id>/*</from-view-id>
  <navigation-case>
    <from-outcome>Home</from-outcome>
    <to-view-id>/home.jsp</to-view-id>
  </navigation-case>
  <navigation-case>
    <from-outcome>Menu1</from-outcome>
    <to-view-id>/page1.jsp</to-view-id>
  </navigation-case>
  <navigation-case>
    <from-outcome>Menu2</from-outcome>
    <to-view-id>/page2.jsp</to-view-id>
  </navigation-case>
  <navigation-case>
    <from-outcome>SubMenu1</from-outcome>
    <to-view-id>/page3.jsp</to-view-id>
  </navigation-case>
  ...
</navigation-rule

Of course you could also use actions to control your navigation. In the above example, instead of coding outcomes into your menu items you might code action expressions:

  NavigationMenuItem menu2 = getMenuNavigationItem("Menu 2", "${someBean.someAction}");
  ...
  items.add(menu2);

Tag Attributes

See the TagLib Documentation for a complete list of attributes. This section will give a quick overview of some of the tag attributes.

itemClass

Specifies the CSS class for all menu items that are not selected and for which no child list is being displayed.

openItemClass

Specifies the CSS class for child menu items and the parent of child menu items when the child menu is open.

Let's suppose you have the following menu structure:

Link 1
Link 2

Link 3

If you click Link 2 you will get output like this:

<li class="itemClass">... Link 1 ...</li>
<li class="openItemClass">... Link 2 ...<ul>
<li class="openItemClass">... Sub Link 1 ...</li>
<li class="openItemClass">... Sub Link 2 ...</li>
</ul></li>
<li class="itemClass">... Link 3 ...</li>

So Link 2, Sub Link 1, and Sub Link 2 will all have the same CSS style. The <li> for Link 1 will have a nested <ul> tag with the submenu.

activeItemClass

Specifies the CSS class of menu items that are currently selected. The same class covers both parent and child menu items.

separatorClass

Specifies the CSS class of a menu separator.

Panel_Navigation (last edited 2009-09-20 23:01:48 by localhost)