In order to use the Menu-Tag on a JSP page, the corresponding tag library must be declared at the start of the page. Then, the Common-Controls can be used with the prefix <menu:tagname />. [In addition, the incorporation of the tag libraries must be included in the Deployment descriptor, the WEB-INF/web.xml file].

In our example, we use graphics to depict the main menu options. Therefore, at the beginning, we define an ImageMap, which we assign to the menu using the attribute imagemap. In the ImageMap, for the sates "selected" and "unselected", the corresponding relevant images are saved mapped to a menu option. To reference the graphics in the Imagemap, an imageref attribute is defined for every menu option, which matches with the selection rule in the ImageMap.

If no ImageMap is specified, the text recorded for the menu options is output.

<util:imagemap name="im_menu">
    <util:imagemapping rule="tree.unsel"   src="images/btnTree1.gif"/>
    <util:imagemapping rule="tree.sel" src="images/btnTree5.gif"/>

    <util:imagemapping rule="list.unsel"   src="images/btnList1.gif"/>
    <util:imagemapping rule="list.sel" src="images/btnList5.gif"/>

    <util:imagemapping rule="main.unsel"   src="images/btnMain1.gif"/>
    <util:imagemapping rule="main.sel" src="images/btnMain5.gif"/>

    <util:imagemapping rule="about.unsel"  src="images/btnAbout1.gif"/>
    <util:imagemapping rule="about.sel"    src="images/btnAbout5.gif"/>
</util:imagemap>


<menu:menu id="main" type="main" imagemap="im_menu">

    <menu:menuitem
        id="list"
        text="List Control"
        imageref="list"
        action="listcontrol/features.do"/>

    <menu:menuitem
        id="tree"
        text="Tree Control"
        imageref="tree"
        action="treecontrol/features.do"/>

</menu:menu>

<menu:menu id="tools" type="tools" imagemap="im_menu">

    <menu:menuitem
        id="main"
        text="Main"
        imageref="main"
        action="main.do"/>

    <menu:menuitem
        id="about"
        text="About"
        imageref="about"
        action="about.do"/>

</menu:menu>

back   |   continue to step 3