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.