Licensed to the Apache Software Foundation (ASF) under one or more

contributor license agreements. See the NOTICE file distributed with

this work for additional information regarding copyright ownership.

The ASF licenses this file to You under the Apache License, Version 2.0

(the “License”); you may not use this file except in compliance with

the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software

distributed under the License is distributed on an “AS IS” BASIS,

WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and

limitations under the License.

layout: docpage title: Jewel CheckBox description: The Jewel CheckBox consists of a selectable box that can contain a check mark and an optional label. permalink: /component-sets/jewel/checkbox

< Jewel Components list

Jewel CheckBox

Reference

Available since version 0.9.4.

Class	Extends
org.apache.royale.jewel.CheckBox{:target=‘_blank’}	org.apache.royale.jewel.supportClasses.button.SelectableButtonBase{:target=‘_blank’}

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{:target=‘_blank’}

Relevant Properties and Methods

Check the Reference of org.apache.royale.jewel.CheckBox{:target=‘_blank’} for a more detailed list of properties and methods.

Properties

PROPERTY	Type	Description
selected	Boolean	`true` if the check mark is displayed, `false` otherwise.
text	String	The string used as a label.
value	String	The associated value.

Methods

None.

Relevant Events

The CheckBox has a change event of type org.apache.royale.events.Event{:target=‘_blank’}. 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

Bead Type	Implementation	Description
Disabled{:target=‘_blank’}	org.apache.royale.core.IBead{:target=‘_blank’}	This bead lets you disable and enable a Jewel control.

More examples

Selecting options from a group of Jewel CheckBox controls{:target=‘_blank’}

Related controls

Other related Jewel components are:

RadioButton