Control: EDIT

What you will learn in this chapter
EDIT Control, Keyboard types for EDIT field
PASSWORD Control
Reference Tutorial: How to create a form and store data locally on the device
Reference: appearance, Data Sourcing

Example screen which has same XMADL code for displaying a form with EDIT controls on Android and iOS.

AndroidiOS

EDIT

EDIT control is used to take user inputs. An edit control can have font styling, effects, color, background color.

Example - The following code shows 4 edit fields and their labels

<controls>
        <control name="labelfirstname" type="TEXT" x="2" y="3" width="30" height="8"
                                 appearance_name="black" data_type="VARCHAR"
                                 default_value="First Name"/>
        <control name="editfirstname" type="EDIT" x="35" y="2" width="50" height="8"
                                 appearance_name="edit_box" data_type="VARCHAR" field_name="firstname"
                                 default_value="" size="80" keyboard_type="CAP_WORDS"/>
        <control name="labellastname" type="TEXT" x="2" y="12" width="30" height="8"
                                 appearance_name="black" data_type="VARCHAR"
                                 default_value="Last Name"/>
        <control name="editlastname" type="EDIT" x="35" y="12" width="50" height="8"
                                 appearance_name="edit_box" data_type="VARCHAR" field_name="lastname"
                                 default_value="" size="80" keyboard_type="CAP_WORDS"/>
    <control name="labelemail" type="TEXT" x="2" y="22" width="30" height="8"
                                 appearance_name="black" data_type="VARCHAR"
                                 default_value="Email"/>
        <control name="editemail" type="EDIT" x="35" y="22" width="50" height="8"
                                 appearance_name="edit_box" data_type="VARCHAR" field_name="email"
                                 default_value="" size="80" hint="Enter email" keyboard_type="EMAIL_ADDRESS"/>
</controls>

Note

Important attributes

  • type = “EDIT”
  • field_name - When the data is fetched from the previous action, local or remote data source, field_name is used to identify the data relevant for the control.
  • hint - This attribute is used to give hint to the user about what to enter. In the above example, hint=”Enter email”.
  • keyboard_type - This attribute is used to display different types of keyboards, described in Keyboard types

Keyboard types

Every EDIT control expects a certain type of text input, such as an name, email address, phone number, or just plain text. So in order to be user friendly, it is important that you specify the keyboard_type for every EDIT control in your app. This will enable the app to display appropriate on-screen keyboard. For any EDIT control different types for on screen keyboards can be specified by using keyboard_type attribute. To display a number keyboard, keyboard_type=”NUMBER”.To display a keyboard that has @ and .com, for entering email address, keyboard_type=”EMAIL_ADDRESS”. The table below shows the types supported.

Note

Soft keyboards may look different on different devices.

keyboard_type=”TEXT”

This is the default keyboard type and the following keyboard will be displayed whether or not the keyboard_type=”TEXT” is specified in the code.

In the code below for both controls, the same on-screen keyboard will be displayed.

../_images/keyboard_text1.png

<control name="keyboard_text1" type="EDIT" ... keyboard_type="TEXT"/>

<control name="keyboard_text2" type="EDIT" .../>

keyboard_type=”CAP_CHARACTERS”

When all the letters of word(s) need to be displayed in capital for example in an abbreviation, then keyboard_type=”CAP_CHARACTERS” is very useful.

../_images/keyboard_capchars1.png <control name="abbreviation" ....keyboard_type="CAP_CHARACTERS"/>

keyboard_type=”CAP_WORDS”

When first letter of each word needs to be displayed in capital for example in a name, then keyboard_type=”CAP_WORDS” is very useful. Caps keyboard is displayed for the fist letter and then the keyboard displays the small case letters for the rest of the characters.

<control name="personname" ...keyboard_type="CAP_WORDS"/>

keyboard_type=”CAP_SENTENCES”

To ensure that the first letter of an sentence is displayed in capital, for example in a message or notes, then keyboard_type=”CAP_SENTENCES” is very useful. Caps keyboard is displayed for the fist letter and then the keyboard displays the small case letters for the rest of the characters.

<control name="message1" ...keyboard_type="CAP_SENTENCES"/>

keyboard_type=”NUMBER”

When a user is expected to input only number, keyboard_type=”NUMBER” is useful. ., -, / are disabled.

../_images/keyboard_number1.png <control name="value" type="EDIT" ... keyboard_type="NUMBER"/>

keyboard_type=”PHONE”, DATE, DECIMAL

When a user is expected to input a phone number or decimal value or date, keyboard_type=”PHONE” , keyboard_type=”DATE”, keyboard_type=”DECIMAL” are useful. ., -, / are enabled.

In the code below for all 3 controls the same on-screen keyboard will be displayed.

../_images/keyboard_phone1.png

<control name="phone_no" type="EDIT" ... keyboard_type="PHONE"/>

<control name="date" type="EDIT" ... keyboard_type="DATE"/>

<control name="val" type="EDIT" ... keyboard_type="DECIMAL"/>

keyboard_type=”EMAIL_ADDRESS”, URI

When a user is expected to input an email address or url, keyboard_type=”EMAIL_ADDRESS” , keyboard_type=”URI” are useful. .com, @ will be displayed in the keyboard.

../_images/keyboard_email1.png

<control name="email" type="EDIT" ... keyboard_type="EMAIL_ADDRESS"/>

<control name="url" type="EDIT" ... keyboard_type="URI"/>

keyboard_type=”PASSWORD”

When a user is expected to input a password, keyboard_type=”PASSWORD” hides the suggestions. Text keyboard is displayed

<control name="pwd" type="PASSWORD" ...  keyboard_type="PASSWORD"/>

keyboard_type=”AUTO_CORRECT”

Auto correct option can be turned on by using keyboard_type=”AUTO_CORRECT”

../_images/keyboard_autocorrect1.png <control name="notes" type="EDIT" ... keyboard_type="AUTO_CORRECT"/>

keyboard_type=”NO_SUGGESTIONS”

Suggestions can be turned off by using keyboard_type=”NO_SUGGESTIONS”

<control name="text" type="EDIT" ... keyboard_type="NO_SUGGESTIONS"/>

PASSWORD

PASSWORD control is an extension of EDIT control. When control type=”PASSWORD” is used instead of “EDIT”, the characters are masked by ***. By using keyboard_type=”PASSWORD” the suggestions are not displayed. For security reasons it is better to do the following

<control name="editpassword" type="PASSWORD" x="35" y="32" width="50" height="8"
            appearance_name="edit_box" data_type="VARCHAR" field_name="password" size="80"
        keyboard_type="PASSWORD"/>

In the fig below, see the password field.

Android iOS
../_images/regform_small.png ../_images/ios_formfilled.png

Reference tutorial

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

Android - Right click on appemble-tutorial-form and click on Run as Android application.

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