(Preview)
| Package | spark.components |
| Class | public class CheckBox |
| Inheritance | CheckBox  ToggleButtonBase ButtonBase SkinnableComponent UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object |
| Language Version: | ActionScript 3.0 |
| Product Version: | Flex 4 |
| Runtime Versions: | Flash Player 10, AIR 1.5 |
When a user clicks a CheckBox component or its associated text,
the CheckBox component sets its selected property
to true for checked, and to false for unchecked.
To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers.
The CheckBox control has the following default characteristics:
| Characteristic | Description |
|---|---|
| Default size | Wide enough to display the text label of the control |
| Minimum size | 18 pixels wide and 18 pixels high |
| Maximum size | 10000 pixels wide and 10000 pixels high |
| Default skin class | spark.skins.spark.CheckBoxSkin |
Show MXML Syntax
Hide MXML SyntaxThe <s:CheckBox> tag inherits all of the tag
attributes of its superclass and adds the following attributes:
<s:CheckBox
Properties
symbolColor="0x000000"
/>
Default MXML Propertylabel
More examples
Related API Elements
Public Properties
Protected Properties
Public Methods
| Method | Defined By | ||
|---|---|---|---|
 | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event. | EventDispatcher | |
|
Indicates whether the security restrictions
would cause any display objects to be omitted from the list returned by calling
the DisplayObjectContainer.getObjectsUnderPoint() method
with the specified point point. | DisplayObjectContainer | |
|
Determines whether the specified display object is a child of the DisplayObjectContainer instance or
the instance itself. | DisplayObjectContainer | |
|
Returns a rectangle that defines the area of the display object relative to the coordinate system
of the targetCoordinateSpace object. | DisplayObject | |
|
Returns the child display object that exists with the specified name. | DisplayObjectContainer | |
|
Returns an array of objects that lie under the specified point and are children
(or grandchildren, and so on) of this DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Returns a rectangle that defines the boundary of the display object,
based on the coordinate system defined by the targetCoordinateSpace
parameter, excluding any strokes on shapes. | DisplayObject | |
|
Converts the point object from the Stage (global) coordinates
to the display object's (local) coordinates. | DisplayObject | |
|
Converts a two-dimensional point from the Stage (global) coordinates to a
three-dimensional display object's (local) coordinates. | DisplayObject | |
|
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event. | EventDispatcher | |
|
Indicates whether an object has a specified property defined. | Object | |
|
Evaluates the bounding box of the display object to see if it overlaps or intersects with the
bounding box of the obj display object. | DisplayObject | |
|
Evaluates the display object to see if it overlaps or intersects with the
point specified by the x and y parameters. | DisplayObject | |
|
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter. | Object | |
|
Converts a three-dimensional point of the three-dimensional display
object's (local) coordinates to a two-dimensional point in the Stage (global) coordinates. | DisplayObject | |
|
Converts the point object from the display object's (local) coordinates to the
Stage (global) coordinates. | DisplayObject | |
|
Indicates whether the specified property exists and is enumerable. | Object | |
|
Removes all child DisplayObject instances from the child list of the DisplayObjectContainer instance. | DisplayObjectContainer | |
|
Removes a listener from the EventDispatcher object. | EventDispatcher | |
|
Raises a virtual keyboard. | InteractiveObject | |
|
Sets the availability of a dynamic property for loop operations. | Object | |
|
Lets the user drag the specified sprite. | Sprite | |
|
Lets the user drag the specified sprite on a touch-enabled device. | Sprite | |
|
Recursively stops the timeline execution of all MovieClips rooted at this object. | DisplayObjectContainer | |
|
Ends the startDrag() method. | Sprite | |
|
Ends the startTouchDrag() method, for use with touch-enabled devices. | Sprite | |
|
Returns the string representation of this object, formatted according to locale-specific conventions. | Object | |
|
Returns the primitive value of the specified object. | Object | |
|
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type. | EventDispatcher | |
Protected Methods
Styles
Styles are either common or associated with a specific theme. If the style is common, it can be used with any theme. If a style is associated with a specific theme, it can only be used if your application uses that theme.
Common Styles
Spark Theme Styles
| Style | Description | Defined By | ||
|---|---|---|---|---|
| Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The main color for a component. | SkinnableComponent | ||
| Type: Number CSS Inheritance: No Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The alpha of the focus ring for this component. | ButtonBase | ||
| Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 Color of focus ring when the component is in focus. | ButtonBase | ||
symbolColor | Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 Color of any symbol of a component. Examples include the check mark of a CheckBox or the arrow of a scroll button. The default value is 0x000000. | CheckBox | ||
Mobile Theme Styles
| Style | Description | Defined By | ||
|---|---|---|---|---|
| Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The main color for a component. | SkinnableComponent | ||
| Type: Number CSS Inheritance: No Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The alpha of the focus ring for this component. | ButtonBase | ||
| Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 Color of focus ring when the component is in focus. | ButtonBase | ||
iconPlacement | Type: String CSS Inheritance: No Theme: mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 Orientation of the icon in relation to the label. Valid MXML values are right, left,
bottom, and top.
In ActionScript, you can use the following constants
to set this property:
IconPlacement.LEFT. | CheckBox | ||
| Type: Number Format: Length CSS Inheritance: Yes Theme: mobile Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10.1, AIR 2.0 Additional vertical space between lines of text. | ButtonBase | ||
| Type: Number CSS Inheritance: Yes Theme: mobile Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10.1, AIR 2.0 The number of additional pixels to appear between each character. | ButtonBase | ||
symbolColor | Type: uint Format: Color CSS Inheritance: Yes Theme: spark, mobile Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 Color of any symbol of a component. Examples include the check mark of a CheckBox or the arrow of a scroll button. The default value is 0x000000. | CheckBox | ||
Skin Parts
This component uses skins made up of skin parts. Do not set the skin parts directly. The component's skin sets the skin parts.
Skin States
To skin the component, implement a skin that defines the following states. Although you must implement all skin states, a skin state can be empty. An empty skin state specifies no changes to the default skin state.
Public Constants
Constructor Detail
Examples How to use this example
CheckBoxExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Spark CheckBox control -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[Bindable]
public var totalCost:Number = 4.50;
// This event handler adds/removes the cost of condiments to/from the total cost.
private function modifyBurger(evt:MouseEvent):void {
// Add 0.25 to the total cost for every condiment. Delete 0.25 for
// every condiment removed.
if(CheckBox(evt.target).selected) {
totalCost += 0.25;
} else {
totalCost -= 0.25;
}
// Format the totalCost and then display it in a label.
totalString.text = usdFormatter.format(totalCost);
}
]]>
</fx:Script>
<fx:Declarations>
<mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
useThousandsSeparator="true" alignSymbol="left"/>
</fx:Declarations>
<s:Panel title="Spark CheckBox Control Example"
width="75%" height="75%"
horizontalCenter="0" verticalCenter="0">
<s:VGroup left="10" right="10" top="10" bottom="10">
<s:Label text="Hamburger Base Price: $4.50" />
<s:Label text="Select condiments for your hamburger (0.25 each):" />
<s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event);"/>
<s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event);"/>
<s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event);"/>
<s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event);"/>
<mx:Spacer height="20" />
<s:HGroup>
<s:Label text="Total Price: " />
<s:Label id="totalString" text="$4.50"/>
</s:HGroup>
</s:VGroup>
</s:Panel>
</s:Application>
Wed Nov 21 2018, 06:34 AM -08:00