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

PickerView Widget

A PickerView widget uses a spinning wheel metaphor to display multiple sets of values, and allows you to select a single combination of values. You can select a single combination of values by rotating the wheels, and aligning the desired row of values with the selection indicator.

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

• Widely used in alarm settings. You can choose the specific time and days of week while setting an alarm.

• Used in flight bookings where the you select a date and time or a range of dates including the From date and the To date.

• Used in selecting your birthday and year in a sign up form.

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 PickerView widget see the PickerView topic in the Volt MX Iris User Guide.

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

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

Layout

Animations

Data Management

3D Touch

Gestures

UI Appearance

Enabling RTL

Miscellaneous

State Configurations

Configurations Common To All Widgets

PickerView Widget Basics

PickerView can have multiple components and each component comprises of keys. Users can choose the keys from different components and make the choices useful in grouping the multiple choices that user can make in different categories related to concept. For example: color, model, year of manufacturing all these three can be modeled as components with different possible values so that user can make his choice using this single widget.

Note: PickerView widget is not supported in SPA. To implement PickerView in Desktop Web platform, the developer is expected to make use of multiple list boxes to achieve similar functionality.

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

var picker = new voltmx.ui.PickerView(basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout specific 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

//The following function is the callback function for onSelect event.
function onSelectCalBck(picker) {
    /*write your logic here*/
}

//Defining the properties for PickerView with onSelect:onSelectCalBck.
var pickerBasic = {
    id: "picker",
    info: {
        key: "PickerView"
    },
    skin: "pickerSkin",
    focusSkin: "pickerFSkin",
    masterData: [
        [
            ["y1", "2009"],
            ["y2", "2010"],
            ["y3", "2011"], 40
        ],
        [
            ["m1", "Jan"],
            ["m2", "Feb"],
            ["m3", "Mar"],
            ["m4", "Apr"],
            ["m5", "May"],
            ["m6", "Jun"],
            ["m7", "Jul"], 60
        ]
    ],
    isVisible: true,
    selectedKeys: ["y2", "m1"],
    onSelect: onSelectCalBck
};

var pickerLayout = {
    margin: [5, 5, 5, 5],
    marginInPixel: true,
    widgetAlignment: constants.WIDGET_ALIGN_CENTER,
    hExpand: true,
    containerWeight: 99
};

//Creating the PickerView.
var picker = new voltmx.ui.PickerView(pickerBasic, pickerLayout, {});

//Reading onSelect of the pickerView.
voltmx.print("pickerView onSelect event::" + picker.onSelect);

Limitations

The following are the limitations of a PickerView widget:

• You must avoid resizing a PickerView widget or placing multiple PickerView widgets side- by- side in the horizontal direction.
  You must avoid doing so because, by resizing or placing multiple PickerView widgets side- by- side in the horizontal direction, when the PickerView widget is rendered, the PickerView widget alignment might not be confined to the screen width and results in a bad user experience.