Tutorial 16 - How to create Single choice picker

What you will learn in this Tutorial

How to create SIGLE_CHOICE_PICKER

Download Source Code - Tutorials - Source for this tutorial is in appemble-tutorial-single-sel-ctrl
Reference SINGLE_CHOICE_PICKER control
Other pickers: CHECKBOX, DATETIMEPICKER, NUMBER_PICKER, SINGLE_CHOICE_DIALOG

Introduction

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.

The fig below shows SINGLE_CHOICE_PICKER control for Android and iOS.

Android iOS
../_images/single_chioce_picker2.png ../_images/single_chioce_picker2_ios1.png
../_images/single_chioce_picker1.png ../_images/single_chioce_picker1_ios1.png

How to create SIGLE_CHOICE_PICKER

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.

In the tutorial single-sel-ctrl, the code below allows the user to select a category.

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.
  • 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.

Run the 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/iPad x.x simulator. Click on Product -> Run.