MenuControl

Diese Übung demonstriert den Einsatz des MenuControls. Mit dem Kontrollelement lassen sich innerhalb einer Applikation unterschiedliche Menüs erzeugen.

Beispieldarstellung - Horizontales Hauptmenü

Beispieldarstellung - Vertikales Untermenü

Folgende Schritte sind zur Integration des MenuControls notwendig:

1. Auswahl des Designs für die Benutzeroberfläche
2. Festlegung des Menüaufbaus in der JSP-Seite
3. Selektion eines Menüpunkts zur Laufzeit

Zuerst erfolgt die Registrierung der Painterfactory. Sie legt fest, welches Design die Benutzeroberfläche erhält. Dies kann anwendungsweit in der init()-Methode des Frontcontroler-Servlets geschehen.1 Wir wählen hier das Standarddesign, welches uns der DefaultPainter bereitstellt.2

import javax.servlet.ServletExceptionimport org.apache.struts.action.ActionServlet;import com.cc.framework.ui.painter.PainterFactoryimport com.cc.framework.ui.painter.def.DefPainterFactory;import com.cc.framework.ui.painter.html.HtmlPainterFactory;public class MyFrontController extends ActionServlet {    public void init() throws ServletException {        super.init();        // Register all Painter Factories        // with the preferred GUI-Layout        // In this case we only use the Default-Layout.        PainterFactory.registerApplicationPainter (            getServletContext(), DefPainterFactory.instance());        PainterFactory.registerApplicationPainter (            getServletContext(), HtmlPainterFactory.instance());    }}

*1) Wenn der einzelne Benutzer zwischen verschiedenen Oberflächendesigns wählen können soll, dann werden zusätzliche PainterFactorys in der Benutzersession registriert. Dies erfolgt meist in der LoginAction mit PainterFactory.registerSessionPainter() im Session Scope.

*2) Weitere Designs (PainterFactories) sind im Lieferumfang der Professional Edition enthalten, oder können selbst entwickelt werden.

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>

Der Default-Painter unterstützt für das vertikale Menü im Gegensatz zum horizontalen Menü keine grafischen Elemente. Die Menüpunkte werden als Texte ausgegeben und über StyleSheets entsprechend formatiert.

Die Referenzierung eines Menüpunktes erfolgt später anhand eines Pfadausdruckes, der sich aus den Ids der einzelnen Menüpunkte innerhalb der Hierarchie zusammensetzt. Zu dem Menüpunkt "sample101" würde etwa folgender Pfadausdruck gehören: list/samples/standard/samples101.

Für das korrekte Zusammenspiel der einzelnen Menü Elemente ist die Festlegung der Menüpfade genau zu beachten. Da unser Hauptmenü einen Menüpunkt mit der id="list" definiert, wird gleichzeitig der entsprechende Hauptmenüpunkt selektiert.

<%@ taglib uri="/WEB-INF/tlds/cc-menu.tld" prefix="menu" %><menu:menu id="list" type="sidebar" width="135">    <menu:menuitem        id="overview"        text="Overview"        action="listcontrol/features.do">        <menu:menuitem            id="features"            text="Features"            action="listcontrol/features.do"/>    </menu:menuitem>        <menu:menuitem            id="samples"            text="Samples"            action="listcontrol/sample101/userBrowse.do">        <menu:menuitem            id="standard"            text="Standard"            action="listcontrol/sample101/userBrowse.do">            <menu:menuitem                id="sample101"                text="Browsing"                action="listcontrol/sample101/userBrowse.do"/>            <menu:menuitem                id="sample102"                text="Check-Column"                action="listcontrol/sample102/carBrowse.do"/>            <menu:menuitem                id="sample103"                text="Using ImageMap's"                action="listcontrol/sample103/userRoleBrowse.do"/>            <menu:menuitem                id="sample104"                text="Filtering Data"                action="listcontrol/sample104/manufacturerBrowse.do"/>        </menu:menuitem>        <menu:menuitem            id="advanced"            text="Advanced"            action="listcontrol/sample121/addressBrowse.do">            <menu:menuitem                id="sample121"                text="ServerSide DesignModel"                action="listcontrol/sample121/addressBrowse.do"/>            <menu:menuitem                id="sample131"                text="Dynamic DataModel"                action="listcontrol/sample131/dynamicListBrowse.do"/>        </menu:menuitem>    </menu:menuitem></menu:menu>

Zur Selektion eines Menüpunktes dient der Menükontext, welcher zur Laufzeit in einer Action oder direkt in einer JSP-Seite gesetzt werden kann. Der selektierte Menüpunkt wird dabei über einen Pfadausdruck festgelegt. Im folgenden Beispiel wird das im vorigen Kapitel definierte Untermenü über ein Template eingebunden (ListSideBar.jsp). Wird die JSP-Seite aufgerufen, wird der Menükontext gesetzt und der über den Pfad spezifizierte Menüpunkt selektiert.

<%@ taglib uri="/WEB-INF/tlds/cc-template.tld"  prefix="template" %><%@ taglib uri="/WEB-INF/tlds/cc-menu.tld"  prefix="menu" %><menu:ctx path="list/samples/standard/sample101"/><template:insert template="/jsp/template/Main.jsp">    <template:put        name="title"        content="User List Common-Controls (Sample101)"        direct="true"/>    <template:put        name="header"        content="/jsp/template/Header.jsp"/>    <template:put        name="sidebar"        content="/jsp/include/ListSideBar.jsp"/>    <template:put        name="about"        content="/jsp/list/sample101/About.jsp"/>    <template:put        name="content"        content="/jsp/list/sample101/UserBrowseContent.jsp"/></template:insert>

Dies führt dazu dass in allen Menüs diejenigen Menüpunkte selektiert dargestellt werden, welche vollständig in den Kontextpfad passen:

• Im vertikalen Menü wird der Menüpunkt "list" selektiert dargestellt.
• Im horizontalen Menü werden die Menügruppe "list/samples" auf Ebene 1, die Menügruppe "list/samples/standard" auf Ebene 2 und der Menüpunkt "list/samples/standard/sample101" auf Ebene 3 selektiert dargestellt.

Das Beispiel hat gezeigt, wie sich Menüs ohne großen Aufwand erzeugen lassen. Der Default Painter unterstützt vertikale Untermenüs mit bis zu drei Ebenen. Wird eine tiefere Navigationsstruktur benötigt, kann das TreeControl eingesetzt werden. Andere Designs lassen sich durch Anpassung oder Integration eigener Painter realisieren.

Features MenuControl:

• Einfache Selektion des Haupt- und Untermenüpunktes anhand eines Pfadausdruckes über den Menükontext.
• Hauptmenü als Text oder mit grafischen Elementen darstellbar.
• Unterstützt Filter zur kontextabhängigen Anzeige von Menüpunkten, die nicht berechtigungsabhängig sind.
• Unterstützt die berechtigungsabhängige Anzeige von Menüpunkten
• Design durch Painterfactory an eigenen StyleGuide (Corporate Identity) anpassbar.
• Optimierter HTML-Code.
• Gleiches Look and Feel in Microsoft InternetExplorer > 5.x und Netscape Navigator > 7.x.

Das Hauptmenü bietet die Möglichkeit, die Menüpunkte als Text oder als Grafiken darzustellen. Bei der Verwendung von Grafiken lassen sich auch Hover-Effekte nutzen. Dazu müssen die Grafiken der nachfolgend beschriebenen Namenskonvention folgen.

Namenskonventionen und Zustände für Menüpunkte:

• Unselektiert: btnXXX1.gif
• Unselektiert mit Hover: btnXXX3.gif
• Selektiert: btnXXX5.gif
• Selektiert mit Hover: btnXXX6.gif