User Input - Smartphone. Web Development. Beginning

So far, we have set static values for WML variables using the <setvar> tag. Values for WML variables can also be set with user input. WML supports list selection and text user input modes.

This WML <input> tag controls textual user input. Its name attribute sets the variable name. Its size attribute specifies the width in characters of the input field. Its maxlength attribute sets the maximum character length of the user input.

To shield user-entered characters from display, set the input type attribute to password:

To enforce formats at user text entry, which is helpful for keypad text entry, use the optional format and emptyok attributes, as in the example below.

The emptyok attribute is Boolean and indicates that the user is allowed to leave the text input blank.

The format attribute specifies a text format that user input must match. The *N attribute value indicates that an unlimited number of numeric characters may be entered. Text formats follow the syntax of an one-character optional modifier and an one-character descriptor , where valid descriptors are specified using the notation described in Table 3-8.

Table 3-8. Text Format Descriptors for the WML <input> Tag Token Description

A A symbol or uppercase alphabetic character.

a A symbol or lowercase alphabetic character.

N A numeric character.

X A symbol, uppercase alphabetic or numeric character.

x A symbol, lowercase alphabetic or numeric character.

M A symbol, uppercase alphabetic or numeric character. When multiple characters are entered, the browser keeps the first character as uppercase and changes the rest to lowercase.

m A symbol, lowercase alphabetic or numeric character. When multiple characters are entered, the browser keeps the first character as lowercase and changes the rest to uppercase.

Table 3-9 lists the two valid text format modifiers. The modifier is entered before the descriptor in the format attribute value.

Table 3-9. Text Format Modifiers for the WML <input> Tag Token Description

1…9 A single-digit number specifies the maximum characters to be entered.

* The asterisk modifier indicates that an unlimited number of characters may be entered.

Here are some examples of common text formats used in WML text input:

*N: Unlimited number of numeric characters.

10N: Up to ten numeric characters, used to enter a U.S. telephone number.

*A: Unlimited uppercase alphabetic characters.

*M: Unlimited mixed case characters. The first character is uppercase and all subsequent characters are lowercase.

An example WML document that captures user text entry, displays it in a card, and submits the values to a web server is shown in Listing 3-13. In the first card, the user inputs text into three fields. In the second card, the user-entered text is displayed on the screen. The user sends the values to the web server by activating the <anchor> link. This listing can be viewed in a browser at http://learnto.mobi/books/bmwd/03/3–13.wml.

Figure 3-10. WML Text Entry in Openwave V7 Emulator Listing 3-13. WML Text Entry

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"

"http://www.wapforum.org/DTD/wml13.dtd">

<wml>

<p>

Enter your information below.<br/>

Name: <input name="name" size="5"/><br/>

Age: <input name="age" size="5" format="*N"/><br/>

Password: <input type="password" name="pwd" size="5" format="*N"/><br/>

</p>

<p>

<anchor>Show Values<go href="#card2"/></anchor>

</p>

</card>

<p>

</go>

</anchor>

</p>

</card>

</wml>

User input for list selection in WML is accomplished using the <select> and <option> tags in a manner similar to HTML and XHTML-MP. The <select> tag identifies the list. Its name attribute sets the variable name. Its multiple attribute uses a Boolean value to indicate that the list allows multiple items to be selected.

This WML sample code allows the user to select a single favorite fruit option from a list:

<option value="blueberry">Blueberries</option>

<option value="apple">Apples</option>

<option value="peach">Peaches</option>

</select>

The similar WML code below allows the user to select many favorite fruits from the list.

Note the use of the multiple attribute to mark the list as accepting multiple selected items. The value of a multiple selection list is a semi-colon delimited list of all selected values.

<select name="fruit" multiple="true">

<option value="blueberry">Blueberries</option>

<option value="apple">Apples</option>

<option value="peach">Peaches</option>

</select>

WML browsers take liberties with rendering select lists. Single-select lists may be drawn as drop-down lists or displaying multiple items and allowing only one to be selected.

Multiple-select lists are usually drawn displaying multiple items.

Figures 3-11 and 3-12 display single-select and multiple-select lists, respectively, in the Openwave V7 Emulator.

Figure 3-11. Single-Select List in Openwave V7 Emulator

Figure 3-12. Multiple-Select List in Openwave V7 Emulator

Listing 3-14 is a WML document that lets the user select an item from a list and displays the selected value to the user. In the first card, the user selects their favorite fruit from a list. In the second card, the user-selected fruit is displayed on the screen. This listing can be viewed in a browser at http://learnto.mobi/books/bmwd/03/3–14.wml. View the example in a mobile browser or emulator to observe the user input behavior.

Listing 3-14. WML List Input

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"

"http://www.wapforum.org/DTD/wml13.dtd">

<wml>

<p>

What is your favorite fruit?

<option value="blueberry">Blueberries</option>

<option value="apple">Apples</option>

<option value="peach">Peaches</option>

</select>

</p>

<p>

<anchor>Show Values<go href="#card2"/></anchor>

</p>

</card>

<p>

Favorite Fruit: $(fruit)<br/>

</p>

</card>

</wml>

In document Smartphone. Web Development. Beginning (Page 106-111)