The t:jscookMenu tag can be used to define a menu-bar with pull-down items (and various other menu layouts).

Defining a static menu

If your menu items are fixed, then they can simply be defined using t:navigationMenuItem. Here's an example. Note that this approach also supports limited "dynamic" menu building by defining the "rendered" attribute for menu items.

   <t:jscookMenu layout="hbr" theme="ThemeOffice">
      <t:navigationMenuItem itemLabel="File">
        <t:navigationMenuItem action="new-file" itemLabel="New"/>
        <t:navigationMenuItem action="open-file" itemLabel="Open"/>
        <t:navigationMenuItem action="open-file" itemLabel="Close" rendered="#{menuBean.closeFileAvailable}"/>
      </t:navigationMenuItem>
      
      <t:navigationMenuItem itemLabel="Edit">
        ....
      </t:navigationMenuItem>

Defining a dynamic menu

When menu items must be added dynamically, or rearranged at runtime, then use the t:navigationMenuItems tag.

1. In your jsp use this code to call to a backing bean to generate the menu layout:

   <t:jscookMenu layout="hbr" theme="ThemeOffice">
     <%
       /* Available jscookMenu themes: ThemeIE, ThemeMiniBlack,ThemeOffice, ThemePanel
          Available jscookMenu layouts: hbr, hbl, hur, hul, vbr,vbl, vur, vul
          respect to Heng Yuan http://www.cs.ucla.edu/~heng/JSCookMenu
        */
     %>
     <t:navigationMenuItems value="#{dynMenu.navItems}" />
   </t:jscookMenu>

2. Create a backing bean (in this example, named 'dynMenu') with the code to generate a NavigationMenuItem[]:

import org.apache.myfaces.custom.navmenu.NavigationMenuItem;

public class DynamicMenuTest {

    private NavigationMenuItem[] navItems;

    public DynamicMenuTest() {
        // children for item 2
        NavigationMenuItem[] subItems = new NavigationMenuItem[2];
        subItems[0] = new NavigationMenuItem("Subitem 2_1 Label","action2_1", "iconUrl", false);
        subItems[1] = new NavigationMenuItem("Subitem 2_2 Label","action2_2", "iconUrl", false);
        
        // item 2
        NavigationMenuItem itemWithChildren = new NavigationMenuItem("Item 2 Label", "action2", "iconUrl", false);
        itemWithChildren.setNavigationMenuItems(subItems);
        
        // root items
        navItems = new NavigationMenuItem[3];
        navItems[0] = new NavigationMenuItem("Item 1 Label","action1", "iconUrl", false);
        navItems[1] = itemWithChildren;
        navItems[2] = new NavigationMenuItem("Item 3 Label","action3", "iconUrl", false);
    }
    
    public NavigationMenuItem[] getNavItems() {
        return navItems;
    }

    public void setNavItems(NavigationMenuItem[] navItems) {
        this.navItems = navItems;
    }

}

NOTE: If you want to have menu items without graphics, use the NavigationMenuItem constructor with only 2 parameters:

NavigationMenuItem itemWithChildren = new NavigationMenuItem("Item 2 Label", "action2");

See JavaDoc for more info. It would be nice to have a NavigationMenuItem without a link that just takes a Label for it's constuctor, so a parent of sub-menu items will not have a link (as is usually the case).

Defining Menu Items

Invoking a URL

When the action attribute of a NavigationMenuItem object is of form "protocol:/something" (eg "http://www.apache.org") then this is assumed to be a url; selecting that menu item will open the specified url in a new window. Note that the URL must be absolute; if there is no protocol then the value is assumed to be a JSF navigation string (see below).

The NavigationMenuItem tag has a "target" attribute defined for it. However this attribute is completely ignored (in tomahawk 1.1.4 and earlier at least); the selected URL is always opened in an anonymous window.

Invoking Javascript

When the action attribute is of form "command:text" (eg "javascript:doSomething();") then selecting that menu item causes the value to be passed to the javascript interpreter for evaluation.

Invoking JSF Navigation

If the action attribute value does not fall into any other category then it is assumed to be a JSF "navigation string"; the current page is submitted to the server and the jscookmenu component causes navigation to occur to the specified value, ie what page gets rendered depends upon what the mapping for that "navigation string" is in the JSF navigation definitions for the webapp.

Q: it appears that support for "value binding" expressions is present. What happens in this case?

Invoking Action Listeners

A NavigationMenuItem can have action-listeners attached to it. When the menu item is selected and the page is submitted these listeners will be executed.

Dynamic_Menus_with_JSCookMenu (last edited 2009-09-20 23:01:49 by localhost)