Menu Bar (SAP Library - Running an Enterprise Portal)

Menu Bar

Definition

A control to create a menu bar. The menu bar is combined with a hover menu to create a pull down command structure like in a desktop application.

· addMenuItem

Method to add items to the menu bar.

· id

Identification name of the menu bar.

· menuTrigger

Sets the trigger mechanism which will open the hover menu.

¡ ONCLICK

Hover menu is displayed when the mouse pointer is on the item linked to the hover menu and the left mouse button is clicked - like in a pop up menu. This option is default for web browser Netscape 4.

¡ ONCONTEXTMENU

Hover menu is displayed when the mouse pointer is on the item linked to the hover menu and the right mouse button is clicked - like for a context menu.

¡ ONLRCLICK

Hover menu is displayed when the mouse pointer is on the item linked to the hover menu and the right or left mouse button is clicked.

¡ ONMOUSEOVER

Hover menu is displayed when the mouse pointer is moved over the item linked to the hover menu. This option is default for web browsers IE5 and up and Netscape 6.

· width

Defines the width of the menu bar. The width of the button is automatically adjusted to the length and amount of the 'menuItem'. To see an effect of the 'width' attribute, 'width' has to be set higher as the width defined through the amount and length of the 'menuItem'.

Attributes	M	Values	Usage
addMenuItem		STANDARD (d) SMALL EMPHASIZED	Taglib No tag available Classlib addMenuItem (MenuItem.menuItem)
id	*	String (cs)	Taglib No tag available Classlib setId ("myMenuBar")
menuTrigger		ONCLICK ONCONTEXTMENU ONLRCLICK ONMOUSEOVER	Taglib No tag available Classlib setMenuTrigger (HoverMenuTrigger.ONCLICK)
width		Unit (10)	Taglib No tag available Classlib setWidth ("125px")

MenuItem

Defines the items for the menu bar.

· enabled

A boolean value to enable (=TRUE) or disable (=FALSE) the menu item. A disabled menu item is displayed but fires no event when the item is selected (and an event handling method has been defined for the menu item).

· hoverMenu

Sets the hover menu for the menu item. The hover menu is opened when the action defined by the menu trigger is performed on the menu item.

· id

Identification name of the menu item.

· text

A string that is displayed for the menu item. A text string must be defined and must not be empty.

Example

using the classlib

    Form form = (Form) this.getForm();
    MenuBar menuBar = new MenuBar("myMenu");
    menuBar.setWidth("100%");
    menuBar.setDesign(MenuBarDesign.TRANSPARENT);
    MenuItem item = new MenuItem("item1", "File");
    HoverMenu menufile = this.buildHoverMenuFile();
    item.setHoverMenu(menufile);
    menuBar.addMenuItem(item);
    MenuItem item2 = new MenuItem("item2", "Edit");
    HoverMenu menuedit = this.buildHoverMenuEdit();
    item2.setHoverMenu(menuedit);
    menuBar.addMenuItem(item2);
    form.addComponent(menuBar);

    //     Methods to define the FILE and EDIT hover menus (sub menus)
    public HoverMenu buildHoverMenuFile() {

        HoverMenu hover = new HoverMenu("hoverfile");

        HoverMenuItem file1 = hover.addMenuItem("file1", "New");
        HoverMenu menu = file1.addSubHoverMenu("filesub1");
        hover.setOnHoverMenuClick("onHoverClicked");
        menu.addMenuItem("file11", "Project");
        menu.addMenuItem("file12", "Folder");
        menu.addMenuItem("file13", "File");

        file1.setHoverItemDivider(true);
        hover.addMenuItem(new HoverMenuItem("file2", "Close"));
        hover.addMenuItem(new HoverMenuItem("file3", "Close All"));
        HoverMenuItem file4 = hover.addMenuItem("file4", "Save All");
        file4.setEnabled(false);
        file4.setHoverItemDivider(true);
        return hover;
    }

    public HoverMenu buildHoverMenuEdit() {
        HoverMenu hover = new HoverMenu("hoveredit");

        HoverMenuItem edit1 = hover.addMenuItem("edit1", "Undo");
        hover.addMenuItem(new HoverMenuItem("edit2", "Redo"));
        HoverMenuItem edit3 = hover.addMenuItem("edit3", "Preferences");

        edit3.setHoverItemDivider(true);
        HoverMenu editmenus3 = edit3.addSubHoverMenu("editsub3");
        HoverMenuItem edit31 = editmenus3.addMenuItem("edit31", "SAP");
        HoverMenu editmenus31 = edit31.addSubHoverMenu("editsub31");
        HoverMenuItem edit311 =
            editmenus31.addMenuItem("edit311", "Link to SAP");
        edit311.setOnItemClick("itemClicked");
        edit311.setLinkReference("http://www.sap.com");
        HoverMenuItem edit312 =
            editmenus31.addMenuItem("edit312", "Link to mySAP");
        edit312.setOnItemClick("itemClicked");
        edit312.setLinkReference("http://www.mysap.com");
        HoverMenuItem edit32 = editmenus3.addMenuItem("edit32", "About");

        return hover;
    }

Result

When page is loaded:

This graphic is explained in the accompanying text

Expanded view of all sub options:

This graphic is explained in the accompanying text