Learning WML - Navigation, User Input, and Graphics
This series of articles describes how to provide Web content to mobile devices through WML (Wireless Markup Language). This article covers more advanced navigation, accepting user input, and displaying graphics. Future articles will cover advanced WML language, tips and tricks to provide content, and how to integrate other technologies such as PHP to make your pages more flexible.
Note: These articles cover WML version 1.1, which is supported by the majority of mobile devices in use today. The articles assume a working knowledge of HTML and general Web technologies, and further assume that you have read the previous article(s) in this series.
More Navigation Between Cards and Decks
In the previous article ("Learning WML - WML Tools and Coding Basics"), we covered basic navigation using <anchor> and <do> elements. These basic navigation constructs enable you to map links to the soft keys or place standard HTML-style hyperlinks into your cards. There are a few more useful navigation methods we should also cover.
The select list provides an easy way for the user to select between several predetermined values. Each value is enclosed within an <option> tag, much like an HTML list:
<select> <option>First option</option> <option>Second option</option></select>
Each option is automatically assigned a shortcut number, displayed next to it by the browser, as shown in the following figure.
Each <option> element is assigned a shortcut number which is displayed next to the element's text.
Image courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)
The user can either press the shortcut number associated with the option or use the standard navigation (arrow) keys to select the appropriate option and then press the Accept key.
Tip: The shortcut keys are only useful if you have 10 or fewer options, since there are only 10 numeric keys (0-9) that can be used to quickly select an option. If you have more than 10 options, consider adding a "More" option that displays the options in groups of 10 or fewer.
The "onpick" parameter can be used to select a deck/card to navigate to if the user selects that option. For example, the following code will navigate the user to the appropriate "color" card within the current deck:
<select> <option onpick="#red">Red</option> <option onpick="#green">Green</option> <option onpick="#blue">Blue</option></select>
A full deck example follows:
<?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="card1" title="Select example"><p><select> <option title="Red" onpick="#red">Red</option> <option title="Green" onpick="#green">Green</option> <option title="Blue" onpick="#blue">Blue</option></select></p></card><card id="red" title="Red"><p>Your choice was Red.</p></card><card id="green" title="Green"><p>Your choice was Green.</p></card><card id="blue" title="Blue"><p>Your choice was Blue.</p></card></wml>
Tip: Notice the addition of the "title" parameter in each <option> tag. The text provided with this parameter is displayed as the Accept soft key's label when the option is selected.
We used the options to navigate to cards within the current deck. However, you could just as easily navigate to other decks or specific cards within those decks.