uiCheckBox

uiCheckBox

The uiCheckBox component is a uiButton that toggles its selected property when it is clicked. This UI control is used to give the user an option, such as true/false or yes/no. Visually, the component is typically rendered as an empty square box when deselected, and with a check mark inside when selected.

Using uiCheckBox

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiBox;
import com.ghostwire.ui.controls.uiCheckBox;
import com.ghostwire.ui.controls.uiPushButton;
import com.ghostwire.ui.enums.ALIGN;
 
// ** create a box layout container **
var agreeBox:uiBox = new uiBox();
agreeBox.spacing = 10;
 
// ** create a checkbox **
var agreeBtn:uiCheckBox    = new uiCheckBox("I accept the agreement");
agreeBtn.alignY = ALIGN.CENTER;
agreeBox.addChild(agreeBtn);
 
// ** create a pushbutton **
var nextBtn:uiPushButton = new uiPushButton("Next >>");
nextBtn.alignY = ALIGN.CENTER;
nextBtn.enabled = false;
agreeBox.addChild(nextBtn);
 
// ** add to displaylist **
addChild(agreeBox);
 
// ** set up event handler **
agreeBtn.addEventListener(Event.CHANGE,on_agreeChange);
 
// ** the checkbox toggles the pushbutton enabled state **
function on_agreeChange(evt:Event):void
{
    nextBtn.enabled = uiCheckBox(evt.target).selected;
}

The uiCheckBox instance toggles the enabled state of the uiPushButton instance:

Label

A uiCheckBox instance can display next to itself a text, an image (icon), or both as its label.

For example, to insert an icon next to the text:

agreeBtn.image = "alert.png";

You can also set the text property to null if no text is intended (or simply not specify any text in the constructor when creating the uiCheckBox instance).

var agreeBtn:uiCheckBox    = new uiCheckBox(null,"alert.png");

The image “alert.png” specified above is an external PNG image file located in “assets/images/” (path relative to the SWF) loaded during run-time. If you have any image embedded into the SWF, you can also use the embedded asset by specifying its class name as the image source.

Label Position

The default behavior is to position the label (text and/or image) to the right of the check box. You can change this setting via the labelPosition property. Qualified values for the labelPosition property are POSITION.BOTTOM, POSITION.LEFT, POSITION.RIGHT, and POSITION.TOP¹⁾.

agreeBtn.labelPosition = POSITION.BOTTOM;

Text Position

When displaying both text and image as the label, it is possible that you may want to change the way the text is positioned vis-a-vis the image. The default behavior is to position the text to the right of the image. You can change this setting via the textPosition property. Qualified values for the textPosition property are POSITION.BOTTOM, POSITION.LEFT, POSITION.RIGHT, and POSITION.TOP²⁾.

agreeBtn.textPosition = POSITION.TOP;

User Interaction

When a uiCheckBox instance is focused, the user can use the following keys to interact with the control:

Key	Action
Shift+Tab	Moves focus to previous UI control in the tab focus chain.
Spacebar	Toggles the `selected` property value invoking a `change` event.
Tab	Moves focus to next UI control in the tab focus chain.

CheckBoxDemo

ActionScript 3.0 CheckBoxDemo class

 1: package
 2: {
 3:     import com.ghostwire.ui.containers.uiBox;
 4:     import com.ghostwire.ui.containers.uiForm;
 5:     import com.ghostwire.ui.controls.uiCheckBox;
 6:     import com.ghostwire.ui.controls.uiPushButton;
 7:     import com.ghostwire.ui.enums.ALIGN;
 8:     import com.ghostwire.ui.enums.POSITION;
 9:     import com.ghostwire.ui.managers.uiSkins;
10:
11:     import flash.display.Sprite;
12:     import flash.events.Event;
13:
14:     public class CheckBoxDemo extends Sprite
15:     {
16:         // ** dummy push button **
17:         private var nextBtn:uiPushButton;
18:
19:         public function CheckBoxDemo()
20:         {
21:             addEventListener(Event.ADDED_TO_STAGE,init);
22:         }
23:
24:         private function init(evt:Event):void
25:         {
26:             // ** optional but recommended **
27:             stage.scaleMode    = "noScale";
28:             stage.align        = "TL";
29:
30:             // ** uncomment to use "classic" theme **
31:             // uiSkins.initialize("classic");
32:
33:             // ** optional but recommended **
34:             // ** let assets preload before starting application **
35:             uiSkins.manager.addEventListener(Event.INIT,main);
36:         }
37:
38:         private function main(evt:Event):void
39:         {
40:             // ** main application code **
41:             // ** create a box layout container **
42:             var agreeBox:uiBox = new uiBox();
43:             agreeBox.spacing = 10;
44:
45:             // ** create a checkbox **
46:             var agreeBtn:uiCheckBox    = new uiCheckBox("I accept the agreement","alert.png");
47:             agreeBtn.alignY = ALIGN.CENTER;
48:             agreeBtn.labelPosition = POSITION.BOTTOM;
49:             agreeBtn.textPosition = POSITION.TOP;
50:             agreeBox.addChild(agreeBtn);
51:
52:             // ** create a pushbutton **
53:             nextBtn = new uiPushButton("Next >>");
54:             nextBtn.alignY = ALIGN.CENTER;
55:             nextBtn.enabled = false;
56:             agreeBox.addChild(nextBtn);
57:
58:             // ** top level container **
59:             var agreeForm:uiForm = new uiForm();
60:             agreeForm.addChild(agreeBox);
61:             agreeForm.defaultButton = nextBtn;
62:
63:             // ** add to displaylist **
64:             addChild(agreeForm);
65:
66:             // ** set up event handler **
67:             agreeBtn.addEventListener(Event.CHANGE,on_agreeChange);
68:         }
69:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
70:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
71:
72:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
73:         // EVENT HANDLERS
74:         // ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
75:         private function on_agreeChange(evt:Event):void
76:         {
77:             nextBtn.enabled = uiCheckBox(evt.target).selected;
78:         }
79:     }
80: }

CheckBoxDemo.as

API Reference

For more information on the members of the com.ghostwire.ui.controls.uiCheckBox class, please refer to the API Reference.

¹⁾ , ²⁾ Import com.ghostwire.ui.enums.POSITION