Hover Menu

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

firstLevelVisible
Boolean value that defines if the first leve of the hovermenu is displayed.
id
Identification name of the hoverMenu.
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.
onHoverMenuClick
Defines the event handling method that will be processed when the user clicks on an item in the hover menu.
parentItem
Sets the parent item for the hover menu.
renderer
Sets the renderer for the hover menu .
requiresForm
Boolean value that defines if a form is required for the hover menu. The hoverMenu does not require a form and is not placed in one. The Javascript interface is rendered with forms which influences the ID generation.
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.

Attributes	M	Values	Usage
firstLevelVisible		FALSE TRUE (d)	Taglib No tag available Classlib setFirstLevelVisible (false)
id	*	String (cs)	Taglib `id="hover"` Classlib Id is defined by the hovermenu object itself.
menutrigger		ONCLICK (d for N4) ONCONTEXTMENU ONLRCLICK ONMOUSEOVER (d)	Taglib No tag available Classlib setMenuTrigger (HoverMenuTrigger.ONCLICK)
parentitem			Taglib No tag available Classlib setParentitem (HoverMenuItem pItem)
renderer			Taglib No tag available Classlib setRenderer (HoverMenuRenderer rend)
requiresForm			Taglib `requiresForm="FALSE"` Classlib setRequiresForm (false)
standalone		FALSE (d) TRUE	Taglib `standAlone="FALSE"` Classlib No method available.

Events

Values

Usage

onHoverMenuClick

String (cs)

Taglib

onHoverMenuClick="hoverEv"

Classlib

setOnHoverMenuClick("hoverEv")

hoverMenuItem

Defines the items in a hoverMenu.

altTextForImage
Sets an alternative text for an image which is displayed as tooltip when the image is found or as text instead of the image when the image can not be found. To set the image to be displayed when the hover menu item is enabled use attribute 'imgSrc'. When the hover menu item is disabled use attribute 'disabledImgSrc'.
checkable
Sets the hover menu item as checkable. A checkable hover menu item displays a check mark on the left side of the item when the hover menu item is checked.
checked
A boolean value to check (=TRUE) or uncheck (=FALSE) the hover menu item.
clientSideScript
Sets a Javascript program that is started when the hover menu item is clicked.
disabledImgSrc
Sets the image which is displayed when the hover menu item is disabled.
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.
imgSrc
Sets the image which is displayed when the hover menu item is enabled.

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.

Syntax Syntax

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

End of the code.

Result

This graphic is explained in the accompanying text.

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.
parentMenu
Sets the parent menu for the hover menu 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.

Attributes	M	Values	Usage
altTextForImage		String	Taglib No tag available Classlib setAltTextForImage ("SAP Logo")
checkable		FALSE (d) TRUE	Taglib No tag available Classlib setCheckable(true))
checked		FALSE (d) TRUE	Taglib No tag available Classlib setChecked(true))
clientSideScript		String	Taglib clientSideScript="alert('Click')" Classlib setClientSideScript ("alert('Click')")
disabledImgSrc		String	Taglib No tag available Classlib setDisabledImgSrc ("disImg.gif")
enabled		FALSE TRUE (d)	Taglib No tag available Classlib setEnabled (true)
id	*	String (cs)	Taglib id="entry1" Classlib setId ("entry1")
imgSrc		String (cs)	Taglib No tag available Classlib setImgSrc ("Img.gif")
hoverItemDevider		FALSE (d) TRUE	Taglib hoverItemDevider="TRUE" Classlib setHoverItemDevider (true)
linkRef		String	Taglib linkRef="http://www.sap.com" Classlib setLinkReference ("http://www.sap.com ")
linkTarget		_blank _self _parent _top	Taglib linkTarget="_blank" Classlib setLinkTarget ("_blank")
parentMenu		Component	Taglib No tag available Classlib setParentMenu (HoverMenu parent)
submenu		String (cs)	Taglib subMenu="sub4" Classlib setSubHoverMenu (HoverMenu sub)
text	*	String	Taglib text="First line" Classlib addMenuItem ("entry1", "First line")

Events	M	Values	Usage
onItemClick	*	String (cs)	Taglib onItemClick="onEntry1Click" Classlib setOnItemClick("onEntry1Click ")

Events

Values

Usage

onItemClick

String (cs)

Taglib

onItemClick="onEntry1Click"

Classlib

setOnItemClick("onEntry1Click ")

Example

using the taglib

Syntax Syntax

  <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, 
    "../mimes/rhino.gif"); 
    image_logo.setSrc
          (rs.getResourceInformation().getURL(componentRequest)); 
    %>
  <hbj:image>

End of the code.

using the classlib

Syntax Syntax

    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() + "/../mimes/rhino.gif",
            "picture rhino.gif");
    image.setHoverMenu(hover);

    form.addComponent(hover);

End of the code.

Result (when the left or right mouse button has been clicked on the image)

This graphic is explained in the accompanying text.