Controls: SINGLE_CHOICE_PICKER

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

SINGLE_CHOICE_PICKER control

SINGLE_CHOICE_PICKER control allows a user to select one of many values. The list of possible values are displayed in a list. When the item is selected, an image usually a check is displayed (though you could provide another control types). When the user taps on another item, the previous value is unselected and the new item is selected. If the current item tapped is already selected, then its selection will be removed and no value would show as selected.

../_images/single_choice_picker2.png ../_images/single_choice_picker1.png ../_images/single_chioce_picker2_ios.png ../_images/single_chioce_picker1_ios.png

In XMADL SINGLE_CHOICE_PICKER control is defined as follows

<!-- Parent Control-->
<control type="SINGLE_CHOICE_PICKER"......selection_control="control1" checkable_control="checkable".........>
    <control name="control1" type="..".........../>
    <control name="checkable" type="IMAGE" ....default_value="IMAGE:check.png"......./>
</control>

Note

  • The attributes selection_control and checkable_control are mandatory.
  • The selection_control and checkable_control MUST be defined as child of the LIST.

In the above example, see how control1 and checkable are defined as child controls of the LIST.

Attributes

Attribute Description / Value Mandatory
type SINGLE_CHOICE_PICKER 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
field_name Place holder for user input Yes
data_type VARCHAR Yes
selection_control Specifies control who value is used to show the checkable control. If the value of this control is “1” or “true” or “y” or “yes” then the checkable control is made visible otherwise the checkable control is made invisible. Yes
checkable_control Specifies control that will be made visible when the item is selected and is made invisible when deselected. Yes
default_value   No
local_data_source   No
remote_data_source   No

Note

  • Either local_data_source OR remote_data_source must be defined to show the list of values of which one will be selected. The data set must contain a field “ischecked” that will be used to show / hide the checkable control.

Example:

The code below allows the user to select a category.

<control type="SINGLE_CHOICE_PICKER" x="0" y="20" width="100" height="100"
    appearance_name="black" data_type="VARCHAR" selection_control="category" checkable_control="checkable"
    local_data_source="select distinct category, category as _id, (select 0) as ischecked from myshopping_list order by category"
    field_name="category">
    <!-- child controls of SINGLE_CHOICE_PICKER -->
    <control name="category" type="TEXT" x="3" y="2" width="50" height="7"
                     appearance_name="black" data_type="VARCHAR" field_name="category" />
    <control name="checkable" type="IMAGE" x="85" y="1" width="15" height="7"
                     appearance_name="black" data_type="VARCHAR" field_name="ischecked" default_value="IMAGE:check.png"/>
</control>

Note

The local_data_source MUST return only one row whose ischecked = 1. Otherwise, the SINGLE_CHOICE_PICKER will show multiple values selected which is contrary to the working of SINGLE_CHOICE_PICKER.

Reference tutorial

This chapter uses source code from appemble-tutorial-single-sel-ctrl. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-single-sel-ctrl and click on Run as Android application.

iOS - Select scheme appemble-tutorial-single-sel-ctrl and iPhone x.x simulator. Click on Product -> Run.