You are here: Deprecated Widgets > Creating a MenuContainer Using a Constructor: kony.ui.MenuContainer

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:

The MenuContainer widget capabilities can be broadly categorized into the following:

 

Data Management

MethodsDescription
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.
 
PropertiesDescription
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

MethodsDescription
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

EventsDescription
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.
 
MethodsDescription
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

PropertiesDescription
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.
marginDefines the space around a widget.
marginInPixelIndicates 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

MethodsDescription
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

MethodsDescription
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
 
PropertiesDescription
isVisible Controls the visibility of a widget on the form.
idid is a unique identifier of MenuContainer consisting of alpha numeric characters.
infoA 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:

Creating a MenuContainer Using a Constructor: kony.ui.MenuContainer


var menuContainer = new kony.ui.MenuContainer(basicConf, layoutConf, pspConf);

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 kony.ui.MenuContainer(mnuBasic, mnuLayout, mnuPSP);

    //addAll method call
    menu1.addAll([{
        template: hbox2,
        label2: {
            text: "Politics"
        },
        image2: "btn.png",
        children: []
    }]);

premCopyright © 2012 Kony, Inc. All rights reserved.
premCopyright © 2012 Kony, Inc. All rights reserved.