January 27, 2021
Hot Topics:

Learning WML - Tools and Structure

  • By Steve Schafer
  • Send Email »
  • More Articles »

Card Navigation

Now let's consider how to navigate between cards within a deck. As an example, we'll use a riddle, having the user navigate between the question and answer.

Take the following riddle:

Q: You cannot see it, you cannot touch it, it isn't a liquid, it isn't a solid, it isn't a gas, but it can be broken. What is it?

A: Silence.

We'll put the question in one card, the answer in another, and define links to move between the two. For the sake of variety, let's define the link forward (to the answer) as a button and the link backward (back to the question) as an in-text link. Consider the following code:

<?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="Question"><do type="accept" label="Answer"><go href="#card2" /></do><p mode="wrap">You cannot see it, you cannot touch it, it isn't a liquid, it isn't asolid, it isn't a gas, but it can be broken. <br/>What is it?</p></card><card id="card2" title="Answer"><p mode="nowrap">Silence.<br/><br/><br/><anchor><prev></prev>Back to Question</anchor></p></card></wml>

Card 1

The first card is simply text, enclosed in paragraph tags. However, we've added a <do> element to change the behavior of the Accept key - one of the default navigation keys on most mobile devices (see the next section on keys for more information). This <do> element has type and label attributes. The type attribute tells the browser how the <do> is called. In this case it's by remapping the Accept key's function. The label supplies a label for the key, namely "Answer" in this example.

Note: This label bends one of the UI suggestions of using a maximum of five letters for key labels.

Within the <do> element is a <go> instruction, supplying the address (href) to "go" to when the key is pressed. The href is in the following form:


Since the destination is in the same deck, the deck name can be omitted and only the CardID is necessary.

Note: The order of the <do> and <p> elements is arbitrary. I prefer to put my navigation directives before my text wherever possible. It would be acceptable to reverse their order. Whichever you choose it pays to be consistent.

Card 2

The second card also uses a paragraph element, but incorporates a link within the element by using the <anchor> tag. The form of the <anchor> tag is as follows:

<anchor title="label">typetext</anchor>

The label attribute supplies an optional label to the Accept button when the link is selected. We've omitted this attribute in the example, allowing the default "Link" (or other device default) to be displayed.

The type of anchor can be <go>, <prev>, or <refresh> - you simply add the appropriate element to define the type. We've used <prev> to return to the previous card.

The text is the actual text shown for the link, in this case "Back to Question".

Note that the <anchor> is enclosed in the paragraph and that the paragraph is set to nowrap. This will prevent the link from wrapping to several lines. We aren't worried about the plain text ("Silence") wrapping in this example, but we could easily enclose the <anchor> in its own nowrap <p> tag and change the text paragraph to wrap.


The above code has the following result:

Figure 2-3 - The left display is Card1, the right is Card2. Notice that the emulator displays a check mark instead of the standard "Link" text for the Accept button.

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

Expanding the Example

You might have noticed that our second navigation method - mapping the <prev> command to the Accept key - is superfluous. Most devices incorporate a standard "Back" button that could be used to return to the question without the overhead of remapping a key. With that in mind, let's put the key to a better purpose: moving to another question.

Change the <anchor> to the following:

<anchor><go href="#card3" />Next Question</anchor>

Then, duplicate cards 1 and 2 and re-label them as 3 and 4. You also need to change the link in card 3 (to card 4) and supply a new question and answer. The result would be similar to the following:

<?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="Question"><do type="accept" label="Answer"><go href="#card2" /></do><p mode="wrap">You cannot see it, you cannot touch it, it isn't a liquid, it isn't asolid, it isn't a gas, but it can be broken. <br/>What is it?</p></card><card id="card2" title="Answer"><p mode="nowrap">Silence.<br/><br/><br/><anchor><go href="#card3" />Next Question</anchor></p></card><card id="card3" title="Question"><do type="accept" label="Answer"><go href="#card4" /></do><p mode="wrap">What is greater than God, more evil than the devil, poor people have it,rich people want it, and if you eat it you will die?</p></card><card id="card4" title="Answer"><p mode="wrap">Nothing. Nothing's greater than God, nothing's more evil than the devil, poorpeople have nothing, rich people want nothing more than they alreadyhave, and if you eat nothing you will die.</p><p mode="nowrap"><br/><br/><anchor><go href="#card5" />Next Question</anchor></p></card></wml>

Note: Because the answer to the second question is lengthy, I moved the <anchor> to its own nowrap paragraph, as discussed earlier. Also, I set up the last link to a nonexistent "card5," assuming that we would add more questions and answers.

Understanding Device Keys

Most mobile devices have a limited number of keys to aid in navigation. Many have a default Back key (my Samsung cell phone uses the CLR key), as well as Accept and Options keys (my Samsung uses OK and MENU, respectively).

Note: See the WAP documentation for a particular device to determine which keys perform which default purposes.

The Accept and Option keys are referred to as soft keys because you can redefine their meaning and default labels with the software, in this case WML code. Many of the navigation elements allow you to specify which keys you want the soft keys to interact with. For example, in our riddle example we specified "accept" to modify the Accept key. We could have used "options" to redefine the other soft key (on the lower right side of the display).

Tip: When defining multiple <do> elements on the same card, the affected soft key will be labeled "MENU" and allow access to a menu of defined <do> elements.

Unfortunately, there are few firm standards for default keys. Some device manufacturers map different keys to the WAP interface, while some have more proprietary solutions such as a jog wheel to move between options and functions. The best thing to do before planning an interface is to read the UI and application style guides and test your target devices.

Next Time

The next article in this series will cover additional navigation options such as select lists, user input, and graphical display of bitmaps and icons.

About the Author

Steve Schafer is president and CEO of Progeny Linux Systems, a Linux-based consulting company in Indianapolis, Indiana. He has written several technical books and articles and can be reached at sschafer@synergy-tech.com.

# # #

Page 3 of 3

This article was originally published on June 30, 2002

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date