Show TOC

Menu BarLocate this document in the navigation structure

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.

See also hoverMenu .

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:

Expanded view of all sub options: