Control API for Hover Menu (hoverMenu)

A control to create a hover menu. A hover menu works like a pop up menu in a desktop application. The hover menu can be activated on mouse click (pull down menu), on mouse over (pop up menu, help context) or on right mouse button click (context menu). The screen content under the hover menu is not destroyed. The hover menu disappears when you select an item from the menu. Every hover menu entry can have a sub hover menu. You can define a stand alone hover menu or associate a hover menu with following controls:

treeNode
textView
image

 

  • id
    Identification name of the hoverMenu.
  • menuTrigger
    Sets the trigger mechanism which will open the 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.
  • onHoverMenuClick
    Defines the event handling method that will be processed when the user clicks on an item in the hover menu.
  • standAlone
    A boolean value.

    standAlone=TRUE
    Creates a hover menu that is not linked to another control (image, tree node or text view). The first level of the hover menu is visible immediately without any trigger actions.

    standAlone=FALSE
    Creates a hover menu that has to be linked to another control (image, tree node or text view) in order to get displayed. The defined trigger method applies.

Attribute Req. Values Default Case sens. JSP Taglib Classlib
menuTrigger no ONCLICK
ONCONTEXTMENU
ONLRCLICK
ONMOUSEOVER
 ONMOUSEOVER
with IE5 >, N6
ONCLICK
with N4 		yes   setMenuTrigger
(HoverMenuTrigger.ONCLICK)
id yes String none yes id="hover"  
standAlone no FALSE
TRUE 		FALSE yes standAlone="FALSE"  

 

Events Req. Values Default Case sens. JSP Taglib Classlib
onHoverMenuClick yes String none yes onHoverMenuClick="hoverEv" setOnHoverMenuClick("hoverEv")

 

hoverMenuItem

Defines the items in a hoverMenu.

  • 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).
  • id
    A string which is passed on to the event handling routine when the event occurs. A id string must be defined and must not be empty. Each hoverMenuItem must have an unique id. The id is not displayed.
  • hoverItemDevider
    A boolean value that defines a divider for actual item. Depending on the style sheets used the divider is displayed as separation line or an empty row. The divider is displayed before the visible item.
    Example
    HoverMenu hover = new HoverMenu("hover");
HoverMenuItem item1 = hover.addMenuItem("key1", "1st line");
hover.addMenuItem(new HoverMenuItem("key2", "2nd line"));
hover.addMenuItem(new HoverMenuItem("key3", "3rd line"));
HoverMenuItem item2 = hover.addMenuItem("key4", "4th line");
item2.setHoverItemDivider(true);

    Result
  • linkRef
    A text string that defines the URL of a page/document that will be opened when the user clicks on this item.
  • linkTarget
    Specifies the name of the frame where the document is to be opened. The following values refer to w3c HTML-standard.

    • _blank
      The web client should load the designated document in a new, unnamed window.
    • _self
      The web client should load the document in the same frame as the element that refers to the target.
    • _parent
      The web client should load the document into the immediate FRAMESET parent of the current frame. This value is equivalent to _self if the current frame has no parent.
    • _top
      The web client should load the document into the full, original window (thus canceling all other frames). This value is equivalent to _self if the current frame has no parent.
  • onItemClick
    Defines the event handling method that will be processed when the user clicks on this item.
  • subMenu
    Sets an existing hover menu as the sub hover menu of this item.
  • text
    A string that is displayed in the hover menu. A text string must be defined and must not be empty.
Attribute Req. Values Default Case sens. JSP Taglib Classlib
enabled no FALSE
TRUE 		TRUE yes   setEnabled(true)
id yes String none yes id="entry1" setId("entry1");
hoverItemDevider no FALSE
TRUE 		FALSE yes hoverItemDevider="TRUE" setHoverItemDevider(true)
linkRef no String none - linkRef="http://www.sap.com" setLinkReference("http://www.sap.com")
linkTarget no _blank
_self
_parent
_top 		none - linkTarget="_blank" setLinkTarget("_blank")
subMenu no String none yes subMenu="sub4" setSubHoverMenu(sub4)
text yes String none - text="1st line" addMenuItem("entry1", "1st line")

 

Events Req. Values Default Case sens. JSP Taglib Classlib
onItemClick yes String none yes onItemClick("onEntry1Click") setOnItemClick("onEntry1Click")

 

Example using the taglib
<hbj:hoverMenu id="hover" standAlone="false" >
    <hbj:hoverMenuItem id="1" text="Location" onItemClick="itemClicked" >
      <hbj:hoverMenu id="hoversub1">
        <hbj:hoverMenuItem id="111" text="Kruger National Park" />
        <hbj:hoverMenuItem id="112" text="Other African Regions" />
      </hbj:hoverMenu>
    </hbj:hoverMenuItem>
    <hbj:hoverMenuItem id="2" text="Size" />
    <hbj:hoverMenuItem id="3" text="Properties" hoverItemDevider="true" />
  <% hover.setMenuTrigger(com.sapportals.htmlb.enum.HoverMenuTrigger.ONLRCLICK); %>
</hbj:hoverMenu>
<hbj:image id="image_logo"
     alt="Image not available"
     hoverMenuId="hover"
     src="" >
     <%
        IResource rs = componentRequest.getResource(IResource.IMAGE, "images/rhino.gif");
        image_logo.setSrc(rs.getResourceInformation().getURL(componentRequest));
     %>
</hbj:image>
Example using the classlib
Form form = (Form)this.getForm();
HoverMenu hover = new HoverMenu("hover");
hover.setMenuTrigger(com.sapportals.htmlb.enum.HoverMenuTrigger.ONLRCLICK);
HoverMenuItem item1 = hover.addMenuItem("1", "Location");
HoverMenu item1s = item1.addSubHoverMenu("sub1");
HoverMenuItem item111 = item1s.addMenuItem("111", "Kruger National Park");
HoverMenuItem item112 = item1s.addMenuItem("112", "Other African Regions");
HoverMenuItem item2 = hover.addMenuItem("2", "Size");
HoverMenuItem item3 = hover.addMenuItem("3", "Properties");
item3.setHoverItemDivider(true);

Image image = new Image(request.getPublicResourcePath()+"/images/rhino.gif",
   "picture rhino.gif");
image.setHoverMenu(hover);

form.addComponent(hover);
Result (when the left or right mouse button has been clicked on the image)