- Creating a Wireless Web Application
- A Brief Introduction to WML
- Detecting Wireless Clients in a JSP or Servlet
A Brief Introduction to WML
As you now know, WML is based on XML and is optimized for low-bandwidth transactions. One of the optimizations in WAP and WML is that a server can return multiple display pages in a single request. These display pages are referred to as cards. When you return a response to a WAP phone (or other device), the response can contain a series of <card> tags. The phone displays the first card in the response, and it is up to you to provide navigation to the other cards.
Navigating Between Cards
There are two main ways to navigate between cards. You can use the <a> tag, which creates a hyperlink just like in HTML, or you can use the <do> tag which lets you perform an action when the user presses a particular key or activates some other feature of the device.
The following listing shows an example page with four cards. The main card contains three hyperlinks to the other cards. In a WML hyperlink, the text after the # in a URL indicates the card name. For example, href=”#moe” refers to the card with an ID of moe.
<%@ page language="java" contentType="text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="main">
<p>
<a href="#moe" title="Moe">Moe Howard</a>
<a href="#larry" title="Larry">Larry Fine</a>
<a href="#curly" title="Curly">Curly Howard</a>
</p>
</card>
<card id="moe">
<p>
Moe Howard<br/>
Why I oughta...
</p>
</card>
<card id="larry">
<p>
Larry Fine<br/>
Ow! Ow! Ow!
</p>
</card>
<card id="curly">
<p>
Curly Howard<br/>
Woob woob woob woob<br/>
Nyuk nyuk nyuk
</p>
</card >
</wml>
In addition to hyperlinks, you can control navigation based on the keys the user presses. When you control navigation by key presses, you can look for the keys either within a particular card or within the entire deck.
TIP
A WML page is referred to as a deck because it usually consists of a number of cards.
The following listing shows a Web page similar to Hyperlinks.jsp, except that you use the Accept keys to navigate forwards through the list.
<%@ page language="java" contentType="text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="moe">
<!-- If the user presses Accept, display the Larry card -->
<do type="accept" label="Larry">
<go href="#larry"/>
</do>
<p>
Moe Howard<br/>
Why I oughta...
</p>
</card>
<card id="larry">
<!-- If the user presses Accept, display the Curly card -->
<do type="accept" label="Curly">
<go href="#curly"/>
</do>
<p>
Larry Fine<br/>
Ow! Ow! Ow!
</p>
</card>
<card id="curly">
<!-- If the user presses Accept, display the Moe card -->
<do type="accept" label="Moe">
<go href="#moe"/>
</do>
<p>
Curly Howard<br/>
Woob woob woob woob<br/>
Nyuk nyuk nyuk
</p>
</card >
</wml>
NOTE
The Accept key is usually right below the display. On some phones, it's on the right; on others, it's on the left. The phone usually gives you a clue by placing the label string on the side where the Accept key is.
Remember, too, that not all phones have a Back key. You need to make sure that the user can navigate around from whatever card he is on. For example, in the Hyperlinks example, you can't get back from any of the specific cards unless you have a Back key.
Creating Input Forms
Although WML doesn't have a <form> tag like HTML, you can still create input forms and process them as if they were HTML forms. The <input> tag creates an input field much like its HTML equivalent. When you create an input field, you must give the field a name, but all other attributes of the tag are optional. You may specify size and maxlength, just like in HTML. The type attribute may be text or password, with text being the default. One of the interesting options is that you can specify a format.
The format is a list of characters indicating what kinds of values can be entered at each position in the field. The format characters are A, a, M, m, N, X, and x.
A format of A permits any uppercase character except a number. A format of a allows any lowercase character except a number. A format of M allows any character (including symbols and numbers) and defaults the first character to upper case. A format of m allows any character and defaults the first character to lower case. The N format allows only numbers. The X and x formats allow any uppercase or lowercase characters, respectively, plus any symbols or numbers.
Normally, a format character represents a single position in the field. For example, if you specify a format of NANA, you require the first and third characters to be numbers, and the second and fourth to be letters.
If you put an asterisk before a character, you allow any number of those characters. For example, if you want a format that allows a single letter followed by any number of digits, use A*N. If you want a format that allows any character but requires at least one, use M*M. Remember, the * can represent 0 characters.
TIP
When creating format strings for an input field, remember that the * is associated with the character to its right, not its left. In most other wildcard formats, the * is associated with the character to its left.
You can also use a specific count instead of the *. For example, if you want to require exactly four letters, you could use either AAAA as a format, or simply 4A.
NOTE
The * and the count format options can be applied only to the last format character. In other words, you can't do something like A*AN.
The following <input> tag allows only letters and requires at least two letters:
<input name=”atleasttwo” format=”AA*A”>
You can also insert fixed characters in the format text by preceding that character with a \. For example, a field that allows you to enter a Social Security number looks like this:
<input name=”ssn” format=”NNN\-NN\-NNNN”>
You can also create select lists using the <select> and <option> tags like you do in HTML. Here is a select list that allows you to pick a color:
<select name=”color”>
<option value=”r”>Red</option>
<option value=”g”>Green</option>
<option value=”b”>Blue</option>
</select>
Processing Form Input
One of the unique things about WML is that it makes the values of input and select fields available within the deck. You can reference the value of a field by putting a $ in front of the field name. The following listing shows a single-card deck with a text input field and a select list. Between the input field and the select list, it prints out the value from the input field.
<%@ page language="java" contentType="text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="fieldfun">
<p>Type something:
<input name="ssn" format="NNN\-NN\-NNNN"/>
$ssn
<select name="colors">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
</p>
</card>
</wml>
The $ssn symbol right before the <select> tag inserts the value from the text field into the output from the card.
NOTE
Notice that the phone image in the Phone.com simulator is different than the one you saw before. The Phone.com simulator comes with different configurations so that you can see what a page would look like in several different phones.
To post a form to a Web server, use the <do> tag to define an action for a keypress and a <go> tag to define the action to be taken. Within the <go> tag, you use <postfield> tags to specify the values you want to send. The following listing shows how you would post the values from Input.jsp back to a Web page called HandleInput.jsp.
<%@ page language="java" contentType="text/vnd.wap.wml" %>
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="fieldfun">
<do type="accept">
<go href="HandleInput.jsp" method="post">
<postfield name="ssn" value="$(ssn)"/>
<postfield name="colors" value="$(colors)"/>
</go>
</do>
<p>Type something:
<input name="ssn" format="NNN\-NN\-NNNN"/>
$ssn
<select name="colors">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
</p>
</card>
</wml>
The form input is delivered to your servlet or JSP exactly the same way is it is when it comes from a browser.