Controls: CHECKBOX

What you will learn in this chapter
CHECKBOX control
Attributes
Reference Tutorials:
Other pickers: DATETIMEPICKER, NUMBER_PICKER, RADIOGROUP, SINGLE_CHOICE_DIALOG, SINGLE_CHOICE_PICKER
Reference: Actions, Data Sourcing, appearance

CHECKBOX control

The Checkbox control is used to display a checkbox on a screen. Checkboxes let a user select one or more options from a set of choices.

Attributes

Attribute Description / Value Mandatory
type CHECKBOX Yes
x Defines the starting x position of the control Yes
y Defines the starting x position of the control Yes
width Defines the width of the control. Yes
height Defines the height of the control. Yes
appearance_name Defines the appearance of the control. Yes
data_type BOOLEAN or STRING. default is BOOLEAN
default_value Value of a check box can be set by “true/false”, “1/0”, “yes/no”, “y/n”, “on/off” No
field_name Place holder for user input Yes
label Label of checkbox can be given in this attribute No
on_checked_appearance_name Can be used to change the background, when checked No
on_pressed_appearance_name Can be used to change the background, when pressed No

Note

  • The selection value is captured by the attribute “field_name”.
  • width and height of Checkbox depends on the OS and device (the size will vary for iOS and for different Android devices)
../_images/checkbox2_small.png

See figure on left:

  • Choice 1 to Choice 4 use label attribute for CHECKBOX control.
  • In Choice 5, CHECKBOX (without label attribute) and TEXT controls have been used to display checkbox and its label
  • Choice 3 displays a change in background for the whole control (checkbox with label attribute) when the checkbox is checked by using attribute on_checked_appearance_name
  • Choice 5 displays a change in background for checkbox control when the checkbox is checked by using attribute on_checked_appearance_name. label attribute has not been used in this CHECKBOX control

Example: The code below shows the use of CHECKBOX control as shown in the screen above:

<controls>
    <!-- Vertical -->
            <control type="CHECKBOX" appearance_name="black" label="Choice 1" default_value="OFF" field_name="get_choice1"
                            size="1" height="9.0" width="30.0" x="2.0" y="5.0" data_type="BOOLEAN"/>
            <control type="CHECKBOX" appearance_name="black" label="Choice 2" default_value="OFF" field_name="get_choice2"
                            size="1" height="9.0" width="30.0" x="2.0" y="14.0" data_type="BOOLEAN"
                            on_checked_appearance_name="yellow" />
            <control type="CHECKBOX" appearance_name="black" label="Choice 3" default_value="OFF" field_name="get_choice3"
                            size="1" height="9.0" width="30.0" x="2.0" y="23.0" data_type="BOOLEAN"
                            on_checked_appearance_name="yellow" />
            <control type="CHECKBOX" appearance_name="black" label="Choice 4" default_value="OFF" field_name="get_choice4"
                            size="1" height="9.0" width="30.0" x="2.0" y="32.0" data_type="BOOLEAN"
                            on_checked_appearance_name="yellow" />

    <!-- Checkbox without label attribute. A separate TEXT control is used to give label  -->
    <control type="CHECKBOX" appearance_name="black" default_value="OFF" field_name="get_choice4"
                            size="1" height="9.0" width="12" x="2.0" y="41.0" data_type="BOOLEAN"
                            on_checked_appearance_name="yellow" />
            <control type="TEXT" appearance_name="black" default_value="Choice 5" field_name="get_choice5"
                            size="1" height="9.0" width="20" x="15.0" y="43.0" />

    <!-- Horizontal -->
    <control type="CHECKBOX" appearance_name="black" label="Choice 1" default_value="OFF" field_name="get_choice1"
                            size="1" height="9.0" width="30.0" x="2.0" y="54.0" data_type="BOOLEAN"/>
            <control type="CHECKBOX" appearance_name="black" label="Choice 2" default_value="OFF" field_name="get_choice2"
                            size="1" height="9.0" width="30.0" x="32.0" y="54.0" data_type="BOOLEAN"/>
            <control type="CHECKBOX" appearance_name="black" label="Choice 3" default_value="OFF" field_name="get_choice3"
                            size="1" height="9.0" width="30.0" x="62.0" y="54.0" data_type="BOOLEAN"/>
</controls>