Using Menubar

A new feature in Morfik 3 is the ability to create sophisticated menus using the powerful built-in MenuBar control. With this control it is possible to design multi-level menus that contain not just menu items, submenus and seperators but also other Morfik controls.


Creating Menus Using the MenuBar Control

Morfik provides for the creation of sophisticated menus through the MenuBar. The MenuBar component can be used to create multilevel, vertically descending or horizontally expanding menus that can have any number of menu items and unlimited submenus. Each menu, menu item and submenu can be assigned an icon, be linked to a web page or handle an OnClick event. Font and color information can be set for each separate menu item as well as the size of the item. In addition, Menu and SubmMenu objects can contain other controls such as TextEdit boxes, DateTime edit controls and even subforms. Support for subforms means that database-drive menus are supported. Figure 1 shows two samples of the same basic menu in both a vertical and horizontal configuration, with the horizontal menu expanded to reveal lower level menu items and submenus. The numbers identify some of the different elements of a menu:

  1. A Menu object
  2. A MenuItem object
  3. A SubMenu object
  4. Another MenuItem object.

The collection of all the objects together constitutes a MenuBar object.

Menu_Screenshot_Green_1a.png
Figure 1: Morfik Menu Samples

Creating a Menu

To create a menu, start by dropping a MenuBar object on a form. The Property Inspector can be used to define many of the important aspects of the menu before any items are added but can also be changed at any time to instantly alter the menu’s appearance. Some of the important properties that can be set are:

  • Auto Size: Set this to true to have the caption area for the menu items automatically adjust to the length of the caption. Set it to false to be able to manually adjust the caption area.
  • Color: The menubar base color can be set and visual effects applied in the same manner as for any button object.
  • Layout: Set this property to IHorzFlow to create a horizontal menu bar or to IVertFlow to create a vertical menu bar.

Adding Menu Objects

Because a menu is a complex collection of objects, often times it is difficult to select the desired object by clicking on it in the visual designer. Selection can be easier using the Property Inspector drop-down list box to select the desired object.

Clicking on the settings intellitag at the top-right of the menubar object allows the addition of two different objects to the menubar: a Menu object or a Separator object. Selecting the New Menu item, will add a menu object to the right of the last menu object if the flow is horizontal or below the last menu object if the flow is vertical. Once the menu object is added it can be dragged to change its’ location. The same can be done if a new Separator object is created.

Some of the important properties of the Menu object are listed below:

  • Arrow Icon: Specify an icon to indicate that the menu contains subitems that can be revealed.
  • Auto Size: Set this to true to have the caption area for the menu items automatically adjust to the length of the caption. Set it to false to be able to manually adjust the caption area.
  • Button Style: Set this to bsDropDown to have the menu expand when the mouse hovers over the menu or the user clicks on the menu button. When the style is set to bsButton, the menu is treated as a simple button object and when set to bsSplitButton, the Caption part is treated as a bsButton and the Arrow Icon part is treated as a bsDropDown. Please refer to the discussion below for the Drop On Mouse Over property.
  • Caption: Sets the text displayed for the menu object.
  • Drop On Mouse Over: This property, when set to True, controls the behavior of the menu with regard to automatic expansion when the mouse is over the menu object. If the Button Style is bsDropDown then the menu will automatically expand when the mouse is above the menu object. When the Button Style is bsSplitButton the menu will automatically expand when the mouse is over the Arrow Icon part of the menu object. If set to False, the menu object must be clicked to expand if the Button Style is set to bsDropDown or bsSplitButton.
  • Hyperlink: If the Hyperlink property is set then the linked page will open when the menu object is clicked. Note that if Drop On Mouse Over is True and the Button Style is bsDropDown, the menu button will not be clickable.
  • Icon: Set this property to an image that would be displayed as part of the menu.
  • Layout: If this property is set to IVertFlow the expanded menu will be arranged in a vertical direction and if set to IHorzFlow will be arranged in a horizontal direction.
  • Name: Set the name for this menu. Since a menu bar may consist of many menu objects it is recommended that each menu be given a descriptive name to make it easier to locate in the Property Inspector object drop-down list box.
  • Popup Alignment: This property provides fine tuning to control where the menu expands in relation to the menu object. The options are paPopupNear, paPopupCenter and paPopupFar. Since the effects of this property depend upon both the Layout and Popup Position properties, please experiment to view the effects.
  • Popup Position: This property can be set to any of the four options ppRight, ppLeft, ppTop or ppBottom to control where, in relation to the menu object, the menu expands.

When a Menu object is selected, clicking on the settings intellitag pops up a menu which allows New Menu Item, New SubMenu and New Separator items to be selected among other options (that are also available in the Property Inspector). Once added these items can be dragged to a new location. The MenuItem and SubMenu objects are discussed below. To show items previously added to a Menu object, select the Menu object and click on Edit Parts or Open..

Some of the important events of the Menu object are listed below:

Listing 1—Browser-side MenuBar Events.

Procedure Form1.Menu1BeforeDrop(Sender: TObject; Var X, Y: Integer);          {On Before Drop}     
Procedure Form1.Menu1AfterDrop(Sender: TObject);                              {On After Drop}      
Procedure Form1.Menu1CloseUp(Sender: TObject);                                {On Close Up}        
Procedure Form1.Menu1Click(Event: TDOMEvent);                                 {On Click}            
Procedure Form1.Menu1HyperlinkClick(Var Url: string; Var Handled: Boolean);   {On Hyperlink Click}



Runtime Properties and Methods

Some of the important runtime properties and methods of the Menu object are listed below:

  • IsDroppedDown: returns True if the Menu is currently expanded or False if it is not.
  • Drop: Expand the Menu.
  • CloseDropped: Unexpand the Menu.

MenuItems

A MenuItem is an object that displays a caption and can be connected to other pages or actions when clicked. A sample menu item is shown in Figure 1 next to number 2. Some of the properties of the MenuItem object that are displayed in the Property Inspector are listed below.

  • Auto Size: Set this to true to have the caption area for the menu items automatically adjust to the length of the caption. Set it to false to be able to manually adjust the caption area.
  • Caption: Sets the text displayed for the MenuItem object.
  • Color: The MenuItem color can be set and visual effects applied in the same manner as for any button object.
  • Hyperlink: If the Hyperlink property is set then the linked page will open when the menu object is clicked.
  • Icon: Set this property to an image that would be displayed as part of the menuitem.

MenuItem objects support a number of events, including both the On Click and On Hyperlink Click events.

SubMenus

A SubMenu is an object that can contain other MenuItems, SubMenus and Separators. To add these items to a submenu, click on the settings intellitag when the submenu has been selected. Some of the properties of the SubMenu are discussed below.

  • Arrow Icon: Specify an icon to indicate that the SunMenu contains subitems that can be revealed.
  • Auto Size: Set this to true to have the caption area for the SubMenu automatically adjust to the length of the caption. Set it to false to be able to manually adjust the caption area.
  • Button Style: Set this to bsDropDown to have the SubMenu expand when the mouse hovers over the SubMenu or the user clicks on the SubMenu button. When the style is set to bsButton, the SubMenu is treated as a simple button object and when set to bsSplitButton, the Caption part is treated as a bsButton and the Arrow Icon part is treated as a bsDropDown. Please refer to the discussion below for the Drop On Mouse Over property.
  • Caption: Sets the text displayed for the MenuItem object.Caption
  • Color: The SubMenu base color can be set and visual effects applied in the same manner as for any button object.
  • Drop On Mouse Over: This property, when set to True, controls the behavior of the SubMenu with regard to automatic expansion when the mouse is over the SubMenu object. If the Button Style is bsDropDown then the SubMenu will automatically expand when the mouse is above the SubMenu object. When the Button Style is bsSplitButton the SubMenu will automatically expand when the mouse is over the Arrow Icon part of the SubMenu object. If set to False, the SubMenu object must be clicked to expand if the Button Style is set to bsDropDown or bsSplitButton.
  • Hyperlink: If the Hyperlink property is set then the linked page will open when the SubMenu object is clicked. Note that if Drop On Mouse Over is True and the Button Style is bsDropDown, the SubMenu button will not be clickable.
  • Icon: Set this property to an image that would be displayed as part of the SubMenu.
  • Layout: If this property is set to IVertFlow the expanded SubMenu will be arranged in a vertical direction and if set to IHorzFlow will be arranged in a horizontal direction.
  • Name: Set the name for this SubMenu.
  • Popup Alignment: This property provides fine tuning to control where the SubMenu expands in relation to the SubMenu object. The options are paPopupNear, paPopupCenter and paPopupFar. Since the effects of this property depend upon both the Layout and Popup Position properties, please experiment to view the effects.
  • Popup Position: This property can be set to any of the four options ppRight, ppLeft, ppTop or ppBottom to control where, in relation to the SubMenu object, the Submenu expands.

SubMenu objects support the same events as Menu objects.

To add other MenuItems or SubMenus to a SubMenu, click on the settings intellitag and select one of the New Menu Item, New SubMenu and New Separator items. To reveal currently added items, click on either the Edit Parts or Open selections.

Adding Other Controls to Menus and SubMenus

Most Morfik controls may be added to a Menu or SubMenu by the standard methods. To prepare a Menu or SubMenu to receive controls, select either a Menu or SubMenu object, click on the settings intellitag and select Open, which will reveal a container for the Menu/SubMenu. Click on the newly available settings intellitag again and uncheck Auto Size then click on Edit Parts. In the Property Inspector, the Height and Width properties can now be adjusted to increase the dimensions of the design surface on which other controls may be placed. (In the Property Inspector the surface will be identified as something like Menu1.SubMenuBar1.) Other controls, including subforms, can now be placed on the Menu or SubMenu by standard methods. When finished designing the Menu, click on the settings intellitag and select the Close item to be sure the menu is displayed correctly at runtime.

The image below show a sample menu used to filter a view of customer invoices on a web page and includes TextLabels, a ComboBox, TextEdits and DateTime edits.

Menu_Filter_Sample.png
Figure 2: A Sample Menu Containing Filter Element Controls

Menu Demonstration

For a sample application of a complex menu please click here.

MenuBar Details

For a list of properties and methods of the MenuBar control refer to this page.

Related Topics


Back to top