< Jewel Components list

Jewel CheckBox

Reference

Available since version 0.9.4.

^{Note: This component is currently only available for JavaScript.}

Overview

The Jewel CheckBox consists of a selectable box that can contain a check mark and an optional label. When a user clicks or touches this control or its associated text, the CheckBox changes its state from checked to unchecked or from unchecked to checked, communicating clearly a binary condition. CheckBoxes can appear alone or in groups, and can be selected and deselected individually.

Example of use

In MXML declare a CheckBox like this:

<j:CheckBox/>

In ActionScript we can do the same in the following way:

var checkBox:CheckBox = new CheckBox();
parent.addElement(checkBox);

where parent is the container where the control will be added.

Here is an example for this control:

code here

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.CheckBox for a more detailed list of properties and methods.

Properties

Methods

None.

Relevant Events

The CheckBox has a change event of type org.apache.royale.events.Event. This event is dispatched when the control is selected or deselected by the user. Notice that programmatic changes will not trigger this event.

Since this component is in essence a button, it has a click event as well. When the user clicks the control it dispatches a normal click event.

You can attach callback listeners to the change event in MXML as follows:

<j:CheckBox text="A Checkbox" value="50" change="changeHandler(event)"/>

the change event will use the changeHandler callback function you provide in ActionScript:

<fx:Script>
    <![CDATA[
        private function changeHandler(event:Event):void {
            trace('CheckBox value is: ' + event.target.value, ' and selected state is: ' + event.target.selected);
        }
    ]]>
</fx:Script>

When the user clicks or presses the CheckBox a message will be logged in the console showing the value and selected property values.

In ActionScript we can add an event handler this way:

var checkBox:CheckBox = new CheckBox();
checkBox.text = "A CheckBox";
checkBox.value = 50;
checkBox.addEventListener('change', changeHandler);
parent.addElement(checkBox);

Relevant Beads

Unlike other components in Royale, the Jewel CheckBox does not have beads for View, Controller or Model in the JavaScript platform.

On the other hand, you can add to it other common Jewel control beads to provide more functionality. Many Jewel controls share these beads.

Common Beads

More examples

• Selecting options from a group of Jewel CheckBox controls

Related controls

Other related Jewel components are:

• RadioButton