MenuContainer Widget
A MenuContainer is a horizontal strip that can contain any number of Menus and MenuItems. The menus provide the access to functions such as navigate to a specified form, access to an external link, or a specific user action.
This widget is available for the Desktop Web platform only.
Following are the real-time use cases of MenuContainer widget:
-
Menu container in banking applications contain menu items such as: Accounts, Payments, Transfers and Services.
-
Some social media applications have a menu bar at the bottom, that contains menu container for each of the menu items like search, post, and profile.
The MenuContainer widget capabilities can be broadly categorized into the following:
- Data Management
- 3D Touch
- User Input Handling
- UI Appearance
- Miscellaneous
- Configurations Common To All Widgets
Data Management
| Methods | Description |
|---|---|
| addAll | Allows you to add new data to the menu container widget. |
| addDataAt | Allows you to add an array of menu items at a given index. |
| removeAll | Used to remove all the menu items and sub menus from the menu container. |
| removeAt | Used to remove the menu item from hierarchy based on the index provided. |
| setData | Allows you to set new data to the menuContainer widget. |
| setDataAt | Allows you to set/modify the menu item at a particular index in the hierarchy with in the menuContainer. |
| Properties | Description |
|---|---|
| data | Specifies the menu items that must be displayed in the Menu. |
| selectedMenuIndex | Indicates the selected Menu Item. The index starts from 0. |
| selectedMenuItem | Returns the selected menu item present at the selectedMenuIndex. |
| widgetDataMap | Specifies the mapping information between the widget id’s and the keys in the data. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
User Input Handling
| Events | Description |
|---|---|
| onClick | An event callback is invoked by the platform when the user performs a click action on the MenuContainer. |
| onRightClick | An event callback is invoked by the platform when the user performs a right-click action on the MenuContainer. |
| Methods | Description |
|---|---|
| addGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
| removeGestureRecognizer | Allows you to remove the specified gesture recognizer for the specified widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
UI Appearance
| Properties | Description |
|---|---|
| activeSkin | Specifies the skin for a menu item that is currently selected. |
| collapsedImage | Specifies the image to collapse an extended menu. |
| contextMenu | The context specific menu will be displayed with the array of menu items (appropriate to the widget in focus) on right-click mouse. |
| expandedImage | Specifies the image to expand a collapsed menu. |
| hoverSkin | Specifies the look and feel of a widget when the cursor hovers on the widget. |
| margin | Defines the space around a widget. |
| marginInPixel | Indicates if the margin is to be applied in pixels or in percentage. |
| menuItemTemplate | Indicates a common template to be used for each menuItem while creating the menu items and filling the data. |
| orientation | Specifies how you can stack the widgets within the MenuContainer. |
| padding | Defines the space between the content of the widget and the widget boundaries. |
| paddingInPixel | Indicates if the padding is to be applied in pixels or in percentage. |
| viewType | Specifies the view of the MenuContainer when expanded. |
| widgetAlignment | Indicates how a widget is to be anchored with respect to its parent. |
Miscellaneous
| Methods | Description |
|---|---|
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
Configurations Common To All Widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver’s coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a point (receiver’s coordinate system) to a widget. |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Use this method to set the visibility of the widget. Default : true |
| Properties | Description |
|---|---|
| isVisible | Controls the visibility of a widget on the form. |
| id | id is a unique identifier of MenuContainer consisting of alpha numeric characters. |
| info | A custom JSObject with the key value pairs that a developer can use to store the context with the widget. |
MenuContainer Widget Basics
Note: MenuContainer is supported in Desktop Web platform only.
When do I use a MenuContainer?
You can use a MenuContainer in the following scenario:
- to navigate to other forms in the application.
- to perform an action on an onClick event of a menu.
-
to provide customized options in the Menu for a Form.
For example, in a Retail Application, you can have menus showing various segments of products. You can add number of menu items on a MenuContainer.
Creating a MenuContainer Using a Constructor: voltmx.ui.MenuContainer
var menuContainer = new voltmx.ui.MenuContainer(basicConf, layoutConf, pspConf);- basicConf is an object with basic properties.
- layoutConf is an object with layout properties.
- pspConf is an object with platform specific properties.
Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.
Example
//Defining the properties for a MenuContainer.
var mnuBasic = {
id: "menu1",
hoverSkin: "mnuhovSkin",
activeSkin: "mnuactSkin",
data: [{
template: hbox2,
label2: {
text: "News",
isVisble: false
},
image2: "btn.png",
children: []
}, {
template: hbox2,
label2: {
text: "Science"
},
image2: "btn.png",
children: []
}, {
template: hbox2,
label2: {
text: "Sports"
},
image2: "btn.png",
children: [{
template: hbox2,
label2: {
text: "Football"
},
image2: "btn.png"
}, {
template: hbox2,
label2: {
text: "Cricket"
},
image2: "btn.png",
children: [{
template: hbox2,
label2: {
text: "India"
},
image2: "btn.png",
children: [{
template: hbox2,
label2: {
text: "Test Match"
},
image2: "btn.png"
}, {
template: hbox2,
label2: {
text: "One Day Match"
},
image2: "btn.png"
}]
}, {
template: hbox2,
label2: {
text: "England"
},
image2: "btn.png"
}, {
template: hbox2,
label2: {
text: "Australia"
},
image2: "btn.png"
}
}]
}],
isVisible: true,
menuItemTemplate: hbox2,
skin: "mnuSkin",
isVisible: true,
widgetDataMap: {
label2: "label2",
image2: "image2"
}
};
var mnuLayout = {
padding: [5, 5, 5, 5],
margin: [5, 5, 5, 5],
containerWeight: 100,
paddingInPixel: true,
marginInPixel: true,
widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT
};
var mnuPSP = {
viewType: constants.MENU_CONTAINER_VIEW_DROPDOWNVIEW
};
//Creating the MenuContainer.
var menu1 = new voltmx.ui.MenuContainer(mnuBasic, mnuLayout, mnuPSP);
//addAll method call
menu1.addAll([{
template: hbox2,
label2: {
text: "Politics"
},
image2: "btn.png",
children: []
}]);