myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Apache Wiki <wikidi...@apache.org>
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:
http://wiki.apache.org/myfaces/Panel_Navigation

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}" />
    </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 [http://myfaces.apache.org/tomahawk/tlddoc/index.html 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>
</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.

Mime
View raw message