Um das MenuControl auf einer JSP Seite einzusetzen, muss am Anfang der Seite die entsprechende Tag Library deklariert werden. Anschließend können die Formularelemente mit dem Präfix <menu:tagname /> verwendet werden. [Zudem muss die Aufnahme der Tag Bibliothek im Deployment-Deskriptor, der WEB-INF/web.xml Datei, erfolgen].

In unserem Beispiel setzen wir zur Darstellung der Hauptmenüpunkte Grafiken ein. Daher definieren wir zu Begin eine ImageMap, die wir dem Menu über das Attribut imagemap zuordnen. In der ImageMap werden für die Zustände "selected" und "unselected" jeweils entsprechende Images zu einem Menüpunkt hinterlegt.

Um die Grafik in der Imagemap zu referenzieren, wird zu jedem Menüpunkt ein imageref Attribut definiert, das mit der Selektionsregel in der ImageMap übereinstimmt. Wird keine ImageMap angegeben, so werden die zu den Menüpunkten erfassten Texte ausgegeben.

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

zurück   |   weiter zu Schritt 3