Flex - CheckBox Control

Introduction

The CheckBox component represents a checkbox and an optional label.When a user clicks a CheckBox component or its text, then CheckBox component sets its selected property to true for checked, and to false for unchecked.

Class declaration

Following is the declaration for spark.components.CheckBox class:

public class CheckBox 
   extends ToggleButtonBase

Public methods

S.N.	Method & Description
1	CheckBox() Constructor.

Methods inherited

This class inherits methods from the following classes:

spark.components.supportClasses.ToggleButtonBase
spark.components.supportClasses.ButtonBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Flex CheckBox Control Example

Let us follow the following steps to check usage of CheckBox control in a Flex application by creating a test application:

Step	Description
1	Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<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"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <s:BorderContainer width="550" height="400" id="mainContainer" 
   styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" 
      horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Form Controls Demonstration" 
         fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel id="checkBoxPanel" title="Using CheckBox" width="420" 
         height="200" >			
            <s:layout>   
               <s:VerticalLayout  gap="10" verticalAlign="middle" 
               horizontalAlign="center"/>	
            </s:layout>
            <s:CheckBox id="chkBox" label="Checked by default" 
            selected="true" width="50%"/>
            <s:CheckBox id="chkBox1" label="Checked,Disabled" 
            selected="true" enabled="false" width="50%"/>
            <s:CheckBox id="chkBox2" label="UnChecked" width="50%"/>
            <s:CheckBox id="chkBox3" label="UnChecked,Disabled" 
            enabled="false" width="50%"/>
         </s:Panel >
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Print Version

PDF Version