JSCook_Menu

<t:jscookMenu>

Description

Renders a Javascript Menu based on the excellent JSCookMenu; by Heng Yuan, the nested NavigationMenuItem(s) are rendered as Javascript Menu.

Screen Shot

Not a Visual Component

API

Usage

Syntax

<t:jscookMenu>
      [ui_component_attributes]
      [user_role_attributes]
      [alt_location_attributes]
      [faces_immediate_attribute]
      [tomahawk_js_cook_menu_attributes]
   … inner tags … (navigationMenuItem, navigationMenuItems, …)
</t:jscookMenu>

Instructions

Attributes

Configuration

Don't need any extra configuration.

Notes and Known issues

Java Script Sources

The official docs seem to be out of date. You no longer have to include the javascript, as that is now handled by the extensions filter. Now by default, javascript is retrieved from the extentionFilter. The filter is defined in web.xml in order for <t:jscookMenu> to work.

Place of Menu tag in relation to Forms

Menus must be placed inside forms starting with Tomahawk 1.1.3.

<h:form>
    <t:jscookMenu >
    ...
    </t:jscookMen>
</h:form> 

Menus should not be placed inside forms before Tomahawk 1.1.3.

<t:jscookMenu >
...
</t:jscookMen>

<h:form>
...
</h:form> 

Problem with JSF 1.2 and Facelets 1.2

Using with JSF 1.2 RI and Facelets 1.2 the component does not work correctly, being necessary to insert the following code manually in the page:

<h:form>
  ...
    <input type="hidden" name="jscook_action" />
    <t:jscookMenu>
        ...
    </t:jscookMenu>
</h:form>

Examples

Example 1

A simple menu with navigation rules.

Note: This example uses an external link action. This is only available in nightly builds (as of 3 Dec 2005).

<t:jscookMenu layout="hbr" theme="ThemeOffice" styleLocation="css/jscookmenu">
        <%/* Availaible jscookMenu themes: ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel
     Availaible jscookMenu layout: hbr, hbl, hur, hul, vbr, vbl, vur, vul
      respect to Heng Yuan http://www.cs.ucla.edu/~heng/JSCookMenu
*/%>

    <t:navigationMenuItem id="nav_2"
            itemLabel="Examples">
            <t:navigationMenuItem id="nav_2_1"
                    itemLabel="Sample 1" action="go_sample1" />
            <t:navigationMenuItem split="true"> </t:navigationMenuItem> 
            <t:navigationMenuItem id="nav_2_2"
                    itemLabel="Sample 2" action="go_sample2"
                    icon="images/myfaces.gif" />
            <t:navigationMenuItem id="nav_2_4"
                    itemLabel="Components"
                    icon="images/component.gif" split="true">
                    <t:navigationMenuItem id="nav_2_4_1"
                            itemLabel="Sort Table"
                            action="go_sortTable" icon="images/myfaces.gif" />
                    <t:navigationMenuItem id="nav_2_4_2"
                            itemLabel="Select Box"
                            action="go_selectbox" icon="images/myfaces.gif" />
                    <t:navigationMenuItem id="nav_2_4_3"
                            itemLabel="File upload"
                            action="go_fileupload" icon="images/myfaces.gif" />
            </t:navigationMenuItem>
    </t:navigationMenuItem>

    <%/* Need a new version of MyFaces for this external link action to function */%>
    <t:navigationMenuItem id="nav_53"
        itemLabel="Apache MyFaces Home" action="http://myfaces.apache.org" />

</t:jscookMenu>

Example 2

A menu calling backing bean functions

JSP page

<t:jscookMenu layout="hbr" theme="ThemeOffice" styleLocation="css/jscookmenu">
    <t:navigationMenuItem id="nav_2" itemLabel="Example 2">
        <t:navigationMenuItem id="nav_2_1"
                itemLabel="Sample 1" action="#{mybean.someActionA}" />
        <t:navigationMenuItem id="nav_2_1"
                itemLabel="Sample 1" action="#{mybean.someActionB}" />
    </t:navigationMenuItem>
</t:jscookMenu>  

Backing bean

class MyBean {
    public void someActionA() {
        System.out.println("************ IN someActionA");
        // @TODO codeme
    }

    public void someActionB() {
        System.out.println("************ IN someActionB");
        // @TODO codeme
    }
}

Example 3

A dynamic menu. The menu structure is obtained by calling a function in a backing bean. See also Dynamic Menus with JSCookMenu

JSP page

<t:jscookMenu layout="hbr" theme="ThemeOffice">
    <t:navigationMenuItems value="#{myBean.menu}" />
</t:jscookMenu>

Backing bean

class MyBean {

    public List<NavigationMenuItem> getMenu() {
        
        // Workflow menu
        List<NavigationMenuItem> workflowItems = new ArrayList<NavigationMenuItem>();
        workflowItems.add( new NavigationMenuItem("Ready For Approval", "#{myBean.actionA}") );
        workflowItems.add( new NavigationMenuItem("Approve", "#{myBean.actionB}") );
        
        NavigationMenuItem workflowMenu = new NavigationMenuItem("Work Flow", "", "iconUrl", false);
        workflowMenu.setNavigationMenuItems(workflowItems);  

        // Print menu 
        List<NavigationMenuItem> printItems = new ArrayList<NavigationMenuItem>();
        printItems.add( new NavigationMenuItem("Purchase Order", "#{myBean.actionA}") );
        printItems.add( new NavigationMenuItem("Goods In form", "#{myBean.actionB}") );
        
        NavigationMenuItem printMenu = new NavigationMenuItem( "Print", "" );
        printMenu.setNavigationMenuItems( printItems );
        
        
        List<NavigationMenuItem> menu = new ArrayList<NavigationMenuItem>();
        menu.add( printMenu );
        menu.add( workflowMenu );
        
        return menu;
    }

    public void someActionA() {
        System.out.println("************ IN someActionA");
        // @TODO codeme
    }

    public void someActionB() {
        System.out.println("************ IN someActionB");
        // @TODO codeme
    }
}

FAQ

Additional Information