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

RadioButtonGroup Widget

A RadioButtonGroup widget allows you to make one selection when you have many choices. When you make a selection, a dot appears in the radio button to indicate your selection.

All the properties of the CheckBoxGroup widget apply to RadioButtonGroup widget. However, you can make only one option in case of radio buttons while you can select multiple options in checkboxes.

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

• Examinations: Radio buttons are used in tests that consist of multiple-choice questions. Students choose one of the available options as their answer.

• Remember password: You can use a RadioButton widget 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 RadioButton widgetif you want the browser to remember your password.

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

• Modify UI: Modify the UI based on the selection of an option from the list. For instance, while configuring an identity service, the type of provider details and the UI is changed is based on the type of identity selected.

• Creating profile: You can use radio buttons for selecting gender while creating your profile in an application.

• Coupons: coupons in food and shopping applications use radio buttons as well.

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

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

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

Layout

Animations

Data Management

3D Touch

User Input Handling

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

RadioButtonGroup Widget Basics

• RadioButtonGroup is a group widget that returns the current selected value.
• On iPhone platform, use a single select list.

RadioButtonGroup is a widget that allows you to define a set of radio buttons and the user can choose one of it as an option.

A radio button usually contains a small circle with text next to it. When you make a selection, a dot appears in the circle to indicate your selection.

If you select one button in the set, the previously selected button is deselected. Only one of the options is selected at a time.

You can use a RadioButtonGroup widget to choose one option from a set of mutually exclusive choices.

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

Note: To provide a multiple selection option, use the CheckBoxGroup Widget.

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

Creating RadioButtonGroup object instance:

var radiobutton1 = new voltmx.ui.RadioButtonGroup (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 RadioButtonGroup
var radioBasic = {
    id: "RadioButton",
    isVisible: true,
    masterData: [
        ["key1", "value1"],
        ["key2", "value2"],
        ["key3", "value3"]
    ],
    skin: "radSkin",
    focusSkin: "radFSkin"
};

var radioLayout = {
    widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT,
    padding: [0, 0, 0, 0],
    margin: [0, 0, 0, 0],
    containerWeight: 40,
    hExpand: false
};

var radioPSP = {
    tickedImage: "tickdImg.png",
    untickedImage: "unTickdImg.png",
    focusTickedImage: "tickdFImg.png",
    viewType: constants.RADIOGROUP_VIEW_TYPE_TABLEVIEW
};
//Creating the RadioButtonGroup
radioBtn = new voltmx.ui.RadioButtonGroup(radioBasic, radioLayout, radioPSP);

//Reading the id of the RadioButtonGroup		
alert("RadioButtonGroup Id ::" + radioBtn.id);

Customizing Appearance

You can customize the appearance of the RadioButtonGroup 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: Specifies the skin.
• focusSkin: Specifies the focus skin.

Important Considerations

The following are the important considerations for the RadioButtonGroup widget.

All Platforms

• RadioButtonGroup widget is always a group widget.
• Limit the number of choices in the widget. If you need to display several choices, consider using a CheckBoxGroup widget.

iOS

• When the viewType is set as RADIOGROUP_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.

Windows

• The focusSkin property, background color is not be applied to the selected item, only font color is be applied. For example, if you define a skin for focusSkin property as background as red and font color as yellow, then only the font color is applied ignoring the background color.

SPA

• Focus skin is not supported.