Mojo.Widget.RadioButton
Namespace Detail
Overview
If you need a single widget to switch between multiple states while revealing all the state options on the screen, then a RadioButton may fit your needs. Mojo provides a classic RadioButton that presents each button as a labeled selection option in a horizontal array, where only one option can be selected at at time. The number of options is variable, constrained only by the width of the display and the minimum button size that can be pleasingly presented or selected. You can expect to handle between two and five states given the typical screen size for a webOS device, but the framework won't limit you.
Declaration
<div x-mojo-element="RadioButton" id="radiobuttonId" class="radiobuttonClass" name="radiobuttonName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | RadioButton | Declares the widget as type 'RadioButton'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
class | Optional | Any String | RadioButton uses .palm-radiobutton-container by default, but you can override this setting. |
name | Optional | Any String | Adds a unique name to the RadioButton widget; generally used in templates. |
Events
Mojo.Event.listen(this.controller.get("radiobuttonId"), Mojo.Event.propertyChange, this.handleUpdate);
Event Type | Value | Event Handling |
---|---|---|
Mojo.Event.propertyChange | { property: this.valueName, value: this.choices[clicked._mojoListIndex].value, model: this.controller.model } |
Instantiation
this.controller.setupWidget("myRadioBtn", this.attributes = { choices: [ {label: "One", value: 1}, {label: "Two", value: 2} ] }, this.model = { value: 1, disabled: false } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
modelProperty | String | Optional | value | Model property name for RadioButton state |
disabledProperty | String | Optional | disabled | Model property name for disabled boolean |
choices | Array | Required | null | Array of button descriptions, each of which is a {label: 'string', value: value} entry; number of entries defines scope of widget. |
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
value | User-defined | Required | none | value of widget |
disabled | Boolean | Optional | false | If true, RadioButton is inactive. |
Methods
The RadioButton widget does not have any methods.