Menu bar

Menu bar

This compound component is used to layout other components. It usually contains hyperlinks, buttons and separators and arranges them to look and behave like a action or navigation bar. It can also contain other menu bar components, in which case it creates nested structures with collapsible/expandable sub menus.

Properties and All Attributes views

The Properties view for a component shows the most common set of attributes you can set on a component, and, depending on the component, you might also see options for adding controls, actions, or other components. To open the Properties view, click

Window | Show View | Properties.

These common attributes for the Meun Bar component display on the hx:panelMenu tab in the Properties view. See the All Meun Bar attributes table for a complete list of attributes. Additional configuration options for panel items are on the hx:panelMenu > Items tab:
Table 1. Meun Bar configuration options

Configuration option

Description

Add items to the control

Allows you to view the items in the menu bar, as well as add hyperlinks, command buttons, sub-panels, and separators. You may also remove items using the Remove button and change their order in the panel using the Move Up and Move Down buttons.

The All Attributes view shows a table of all the attributes you can set on a component, which includes those attributes you can access from the Properties view. To switch to the All Attributes view, click the
All Attributes icon in the upper right corner of the Properties view.

Table 2. All Meun Bar attributes

Attribute name

Description

binding

An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).

flyOpen

When you mouse over a menu-item in the top-level menu that has children, the child menu is displayed, if set to true or omitted. If it is set to false, click on a menu-item in the top-level menu that has children in order to see the child menu.

flyOpenBody

When you mouse over a menu-item in the top-level menu that has children, the child menu is displayed, if set to true or omitted. If it is set to false, click on a menu-item in the top-level menu that has children in order to see the child menu.

id

Assigns a name to a component. Should be a unique name within a JSP.

initialSelection

The ID of a menu item that is initially displayed as "selected" (selected is a different CSS defined visual state).

onchange

If provided, the function is called whenever an action is taken.

openInPlace

If false or omitted, child menus are displayed in a "separate window" (that is, they float above the page content). If true, the child menus open "in place", that is, space opens up in the menu bar after the parent menu item and the child menu is displayed in that space. This allows a menu to be "tree-style" (like Windows® Explorer). Only one child menu at each level of the menu tree is displayed "in place". When a different child menu is displayed, any other menu that is displayed "in place" is "closed" (hidden) before the new menu is displayed. If a menu is openInPlace, it is also sticky.

Note: If openInPlace is used in a horizontal menu it may not render properly. Note:

openSticky

If omitted or false, child menus are displayed as a "pop-ups" that are only on display when they are "active" (they parent menu item has been moused-over or clicked on). If true, for each level below the top-level menu, the last child menu that is moused/clicked at that level is left on display.

Note: The top-level menu is always sticky. This property affects only child menus.

rendered

Can be set to true or false:

false - Component will not be rendered to the browser at runtime.

true - Component will get rendered. This is the default value.

selectAll

If an initial selection is provided (or if one is set via JavaScript™), specifies if only the child item is shown selected (false or omitted) or if all items from the containing parent menu down to the child item are shown as selected.

styleClass

Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.

tabindex

Specifies the position of the component in the tabbing order in the JSP. This value must be a number between 0 and 32767.

vertical

If true, the top-level menu is displayed vertically. If false or omitted, it is drawn horizontally.

verticalBody

If true or omitted, the child-menus (all menus other than the top-level menu) are displayed vertically. If false, they are drawn horizontally.

For any child tag of the menu bar (except <hx:panelMenu>), the following <f:attribute> defined attributes may be added to the child to control how it behaves in the menu bar:
Table 3. Child tag attributes

Attribute name

Description

altClass

If true, this menu item is styled via the "alt class" CSS classes. If false or omitted, the item is styled using the "normal" CSS classes.

itemDisabled

If true, this menu item is disabled. If false or omitted, the menu item is not disabled.

actionClick

If true, clicking on this menu item executes both the tag associated with the item (e.g., executes the requestLink) and displays the child menu associated with this item. This attribute is only meanigful when applied to the child tag in a header facet, that is, to a menu item which has a child menu associated with it. By default, clicking on any menu item that does not have children, executes the menu item. Eqaully, clicking on any menu item that does have an associated child menu only displays the child menu. In certain cases (usually when building a navigation structure) clicking on a menu item that has an associated child menu needs to both execute the action (e.g., get a page, targetted to a different frame) and display the child menu.

Note: Components used as menu items in a <hx:panelMenu> cannot be reliably activated via a JavaScript click function. For example the following line of Javascript is intended to activate (click) a link component:
function func_1(thisObj, thisEvent) {
	document.getElementById('form1:link1').click();
}
If link1 represents a component in a <hx:panelMenu> this code will not reliably work. If, however, the component is an <hx:requestLink> tag then you can work around this limitation by implementing something similar to the following:
function func_1(thisObj, thisEvent) {
	var obj = document.getElementById("form1:link1");
	if (obj && obj.href)  window.location.href = obj.href;
}

Attribute name	Description
binding	An expression that binds the component's instance (usually a user interface component) to a bean property (usually in the backing file).
flyOpen	When you mouse over a menu-item in the top-level menu that has children, the child menu is displayed, if set to true or omitted. If it is set to false, click on a menu-item in the top-level menu that has children in order to see the child menu.
flyOpenBody	When you mouse over a menu-item in the top-level menu that has children, the child menu is displayed, if set to true or omitted. If it is set to false, click on a menu-item in the top-level menu that has children in order to see the child menu.
id	Assigns a name to a component. Should be a unique name within a JSP.
initialSelection	The ID of a menu item that is initially displayed as "selected" (selected is a different CSS defined visual state).
onchange	If provided, the function is called whenever an action is taken.
openInPlace	If false or omitted, child menus are displayed in a "separate window" (that is, they float above the page content). If true, the child menus open "in place", that is, space opens up in the menu bar after the parent menu item and the child menu is displayed in that space. This allows a menu to be "tree-style" (like Windows® Explorer). Only one child menu at each level of the menu tree is displayed "in place". When a different child menu is displayed, any other menu that is displayed "in place" is "closed" (hidden) before the new menu is displayed. If a menu is openInPlace, it is also sticky. Note: If openInPlace is used in a horizontal menu it may not render properly. Note:
openSticky	If omitted or false, child menus are displayed as a "pop-ups" that are only on display when they are "active" (they parent menu item has been moused-over or clicked on). If true, for each level below the top-level menu, the last child menu that is moused/clicked at that level is left on display. Note: The top-level menu is always sticky. This property affects only child menus.
rendered	Can be set to true or false: false - Component will not be rendered to the browser at runtime. true - Component will get rendered. This is the default value.
selectAll	If an initial selection is provided (or if one is set via JavaScript™), specifies if only the child item is shown selected (false or omitted) or if all items from the containing parent menu down to the child item are shown as selected.
styleClass	Space-separated list of CSS style classes to be applied when this element is rendered. This value must be passed through as the class attribute on generated markup. Defines the classes (such as style sheets) of the selected component. This may be done manually, or by clicking the button and selecting the desired Classes from within the window.
tabindex	Specifies the position of the component in the tabbing order in the JSP. This value must be a number between 0 and 32767.
vertical	If true, the top-level menu is displayed vertically. If false or omitted, it is drawn horizontally.
verticalBody	If true or omitted, the child-menus (all menus other than the top-level menu) are displayed vertically. If false, they are drawn horizontally.

Attribute name	Description
altClass	If true, this menu item is styled via the "alt class" CSS classes. If false or omitted, the item is styled using the "normal" CSS classes.
itemDisabled	If true, this menu item is disabled. If false or omitted, the menu item is not disabled.
actionClick	If true, clicking on this menu item executes both the tag associated with the item (e.g., executes the requestLink) and displays the child menu associated with this item. This attribute is only meanigful when applied to the child tag in a header facet, that is, to a menu item which has a child menu associated with it. By default, clicking on any menu item that does not have children, executes the menu item. Eqaully, clicking on any menu item that does have an associated child menu only displays the child menu. In certain cases (usually when building a navigation structure) clicking on a menu item that has an associated child menu needs to both execute the action (e.g., get a page, targetted to a different frame) and display the child menu.