You are here: Creating a CheckBox Using a Constructor: voltmx.ui.CheckBoxGroup

CheckBoxGroup Widget

The CheckBoxGroup widget allows you to make one or more selections from a group of check boxes. If you select a check box, a check mark appears inside the check box to indicate the selection.

Few real-time scenarios using the CheckBoxGroup widget are as follows:

• Examinations: Checkboxes are widely used in tests that consist of multiple-choice questions. Students can select a single option or multiple options.

• Remember password: You can use a checkbox for a binary yes or no choice. For instance, consider a login page, you are given a choice to select the remember me? option. You can select the checkbox if you want the browser to remember your password.

• Terms of service agreement: The terms of service agreement while installing an application, employs a checkbox. The user must select the terms of agreement to proceed with installing the application.

• Configure settings: Configuring various settings in a device like selecting or deselecting airplane mode or auto-rotate.

• Provide feedback: CheckboxGroup widget is useful when you provide feedback on the services received. You can select an appropriate checkbox from the range of options provided. Options could be good, average, and bad.

• Filters: Checkboxes are used in applying filters. For instance, in a social network app, users can choose the subjects of their choice such as nature, technology, health, etc. Then the feed of the user can be customized as per their interests.

• Coupons: Applying coupons in shopping websites employ checkboxes.

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

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

• Layout
• UI Appearance
• Animations
• Data Management
• State Configurations
• 3D Touch
• User Input Handling
• Enabling RTL
• Miscellaneous
• Configurations common to all widgets

Layout

UI Appearance

Animations

Data Management

State Configurations

3D Touch

User Input Handling

Enabling RTL

Miscellaneous

Configurations common to all widgets

CheckBox Widget Basics

Note: To provide only a single selection option to the user, use a ComboBox widget or a RadioButtonGroup widget.

Creating a CheckBox Using a Constructor: voltmx.ui.CheckBoxGroup

var checkBox = new voltmx.ui.CheckBoxGroup(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 CheckBox with focusSkin:"chkFocusSkin", 
skin should be created with the same name through IDE or code.*/
var chkBasic = {
    id: "checkBox",
    isVisible: true,
    skin: "chkSkin",
    focusSkin: "chkFocusSkin"
};

var chkLayout = {
    containerWeight: 100
};

//Creating the CheckBox.
var checkBox = new voltmx.ui.CheckBoxGroup(chkBasic, chkLayout, {});

//Reading the focusSkin of CheckBox
alert("CheckBox focusSkin is ::" + checkBox.focusSkin);

Customizing Appearance

You can customize the appearance of the CheckBoxGroup widget using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around a widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• skin: Used to specify the skin.
• focusSkin: Used to specify the focus skin.

Important Considerations

The following are the important considerations for the CheckBoxGroup widget.

All Platforms

• CheckBoxGroup widget is always a group widget.
• Limit the number of choices in the widget. If you need to display several choices (above 15 choices), consider using a ListBox widget.

iPhone

• You cannot apply skins in the on-off switch view.
• When the viewType is set as CHECKBOX_VIEW_TYPE_ONSCREENWHEEL, the skin supports only backgroundcolor and style as one color.
• Multistep Gradient is not supported when groupCells property is set to true.