You are here: Creating a ListBox Using a Constructor: voltmx.ui.ListBox

ListBox Widget

The ListBox widget displays a list of items as a drop-down box and allows you to select a one or more items from the list.

The data model for the ListBox widget is a key value pair. The key is hidden part of the model while value is displayed to the user.

Following are the real-time use cases of ListBox widget:

• To select your nationality while creating a user account in a travel application.

• To choose a department of an employee in the employee profile.

• To select your city name while providing the delivery address in shopping applications.

• To apply filters. For instance, in social networking applications, users can choose the subjects of their choice such as nature, technology, health. User’s feed can then be customized as per the interests.

• You can add or modify the UI of an application based on the option that you select from the list of identity services.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the ListBox widget see the ListBox topic in the Volt MX Iris User Guide.

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

• Layout
• Data Management
• Animations
• User Input Handling
• State Configurations
• UI Appearance
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

Data Management

User Input Handling

Animations

State Configurations

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

ListBox Widget Basics

Note: ListBox does not support multiple selection from Release 3.0 onwards. However, if you have upgraded from a version prior to Release 3.0 and used multiple selection, the backward compatibility will be maintained. If you require multiple selection capability, use either a CheckBox or a Segment with multiple selection enabled.

Creating a ListBox Using a Constructor: voltmx.ui.ListBox

var listbox1 = new voltmx.ui.ListBox (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 properties for a listbox.
var listBasic = {
    id: "listbox",
    isVisible: true,
    masterData: [
        ["key1", "value1"],
        ["key2", "value2"],
        ["key3", "value3"]
    ],
    skin: "listSkin",
    focusSkin: "listFSkin"
};

var listLayout = {
    widgetAlignment: constants.WIDGET_ALIGN_CENTER,
    padding: [0, 0, 0, 0],
    margin: [0, 0, 0, 0],
    containerWeight: 100,
    hExpand: false
};

var listPSP = {
    applySkinsToPopup: true,
    nativeListFieldSkin: "nativeListSkin",
    viewType: constants.LISTBOX_VIEW_TYPE_SPINNER
};
//Creating the ListBox.
var listbx = new voltmx.ui.ListBox(listBasic, listLayout, listPSP);

//Reading the containerWeight of the listbox		
alert("listbox containerWeight ::" + listbx.containerWeight);

Important Considerations

• Shows dynamic set of data in a fixed space.
• The master data of choices should be limited and fetched in a separate service call.
• On iOS platform, when the viewType is set as LISTBOX_VIEW_TYPE_ONSCREENWHEEL, the skin supports only backgroundcolor and style as one color.
• On iOS platform, Multistep Gradient is not supported when groupCells property is set to true.
• On iOS , when the viewType is set as LISTBOX_VIEW_TYPE_LISTVIEW and the ListBox widget is in focus, if the orientation of the device is changed, the list is dismissed.