Tags Used in Navigation: <a>, <anchor>, and <go>
Now that we've covered the basics of navigation, we're going to explore some of the differences between the <a> tag, from the previous examples, and the <anchor> tag. The <anchor> tag is an extended version of the <a> tag, which provides additional functionality and additional complexity.
Both tags can be used with the <go> task—a processing instruction that tells the application to navigate to a URL. We will introduce the <go> tag here and its role in directing navigation as part of your application's processing instructions.
The <a> Element
Like in HTML, WML includes links to other code elements with anchors. The <a> element is an abbreviated form of the <anchor> element that only provides for hyperlinking. It's best used as a shorthand when all you need is a simple link. The following code represents a hyperlink to a card called jumbo.
<a href="#jumbo">Jumbo Fries Special!</a>
Note
In HTML, the user can visually see an anchor, because it's typically in a different color than static text and underlined. Although WAP-compatible devices are supposed to display anchors "differently" than static body text, the format of that display is left entirely up to the device manufacturer. Because there are no specific rules for displaying anchors, your anchors might appear very differently on different devices.
Caution
The <a> element is not supported inside the <do> element (explained in Chapter 3, "Writing for WAP in WML"). When writing a <do> command in your code, use the <go> tag instead of the <a> tag to create a hyperlink.
The <anchor> Element
If the <a> element is a shorthand for <anchor>, what is the longhand? In essence, the code
<a href="#jumbo">Jumbo Fries Special!</a>
would be identical in behavior to
<anchor>Jumbo Fries Special!
<go href="#jumbo"/>
</anchor>
The <anchor> tag defines what text will appear as a hyperlink, but it does not provide the mechanism to actually send the user to a different location. For that, we need a nested <go> element, which we'll talk about more a little later.
But for now, the <anchor> tag can be located any place within the text flow and can be modified by its attributes, shown here in the sample syntax below:
<anchor
title="VDATA"
accesskey="VDATA"
>
<br> | <img> | <go> | <prev> | <refresh>
</anchor>
The title attribute specifies a short text string which identifies the hyperlink. Particular devices might choose to display this title, whereas others might ignore it. The title attribute can even be displayed with a dynamic on-screen label for a button or with a voice prompt.
Tip
Keep your title values to six characters or fewer so they work on the widest variety of devices!
The accesskey attribute allows the user to initiate an action by using any single key or button on the device. The key will depend on the particular device; however, for most phones the keys will range from 0 to 9 and include the # and * keys. The following example demonstrates how you might use the accesskey attribute with the anchor tag:
<anchor title="Menu" accesskey="1"
<go href="http://wap.BurgerWorld.com/menu.wml"
<p>BurgerWorld Menu
</p>
/>
</anchor>
In the preceding example, we set the device's button 1 to hyperlink directly to the BurgerWorld Menu deck.
Caution
WAP device manufacturers are not required to support the accesskey attribute. Before you implement this attribute, be sure that your target users have devices that support this feature. With some devices, pressing the key will be enough to initiate the action; with others, you must press the accesskey and then a command key to initiate the action.
To use the <anchor> tag for navigation, we needed to nest a <go> element inside the tag. We did this because the <anchor> tag only marks text for an action. To actually define the action we needed to tell the browser where to go, and that's where the <go> element comes in.
The <go> Element
The <go> element instructs the device to navigate to a certain location but only does so in the context of some user action (clicking on the <anchor> hyperlink text, in this example).
A <go> tag is always executed within the context of another kind of action, typically dependant on user input. The <go> tag does not work like the <a> tag; it needs to be bound with another element, like <anchor> or, more commonly, <do> to work.
In the Jumbo Fries example, the <go> tag was used to navigate the user to the card jumbo when he clicked on the hyperlink text "Jumbo Fries Special".
<anchor>Jumbo Fries Special!
<go href="#jumbo"/>
</anchor>
In the following example, the <go> tag is used to navigate the user to the card main when he or she presses the soft key labeled "Menu".
<do type="options" label="Menu">
<go href="#main"/>
</do>
The <go> element is an example of a WML task—a subaction that occurs within an event. An event is a compound processing instruction that is initiated by some kind of user input (like pressing a soft key, or clicking on hyperlinked text).
<go> is not the only kind of action WML supports. Now, let's turn our attention to the other kinds of actions (tasks and events) that we can use to enhance our applications'navigation functionality.