myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <>
Subject [Myfaces Wiki] Update of "Panel Navigation" by GregReddin
Date Wed, 02 Aug 2006 14:58:46 GMT
Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by GregReddin:

The comment on the change is:
Created page for panelNavigation2

New page:
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}" />

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"));
    NavigationMenuItem menu2 = getMenuNavigationItem("Menu 2", "Menu2");
    menu2.add(getMenuNavigationItem("Sub Menu 3", "SubMenu3"));
    menu2.add(getMenuNavigationItem("Sub Menu 4", "SubMenu4"));

  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:


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}");

= 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 [[BR]]
Link 2 [[BR]]
  * Sub Link 1
  * Sub Link 2
Link 3 [[BR]]

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>
<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.

View raw message