WML Template and Menu
In this section, we will introduce to you a new WML tag -- <template>. It is used to apply <do> and <onevent> elements to all cards in a deck. (We will discuss the <onevent> element in detail when we cover events later in this WML tutorial.)
In many web sites, the most commonly used links are grouped together in a menu and placed on the left side or at the top of the web pages. Users can navigate between the web pages conveniently with such kind of menu.
In WML, we can use the <do> element to create similar menus, which contain the most important and commonly used links of a mobile Internet site. What we need to do is to make the <do> elements accessible on all cards. One way is to include the same <do> elements in every card, like this:
<card id="card1">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
<card id="card2">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
<card id="card3">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
<card id="card2">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
<card id="card3">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>
Obviously, the above way has many drawbacks. For example, it increases the size of the WML document rapidly and thus increases the download time. Also, if we want to change the menu, we need to make changes to every WML card.
A better way is to define deck-level <do> elements using the <template> element. Deck-level <do> elements are enclosed within <template></template>. WAP browsers will apply the <do> elements in a template to all cards in a deck.
With the <template> tag, the previous WML markup can be rewritten as follows:
<template>
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</template>
<card id="card1">
...
</card>
<card id="card2">
...
</card>
<card id="card3">
...
</card>
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</template>
<card id="card1">
...
</card>
<card id="card2">
...
</card>
<card id="card3">
...
</card>
You can override a <do> element of a template by defining another <do> element with the same nameattribute value in a WML card.
WML Events and the <onevent> Tag
WML supports events and it provides a tag pair, <onevent></onevent>, for handling events. You can specify an action to be taken whenever an event occurs. Four events are supported in WML.
- ontimer -- This event occurs when a timer expires.
- onenterbackward -- This event occurs when a user goes back to a card through the WAP browser's URL history.
- onenterforward -- This event occurs when a user goes to a card in the forward direction. For example, if a user goes to a card by entering its URL directly in the WAP browser, theonenterforward event will be triggered.
- onpick -- This event occurs when an item of a selection list is selected or deselected.
The <onevent></onevent> tags are used to create event handlers. Its usage takes the following form:
<onevent type="event_type">
A single task to be done whenever the event occurs
</onevent>
A single task to be done whenever the event occurs
</onevent>
Tasks that are allowed to be placed between the <onevent> and </onevent> tags include <go>, <prev> and <refresh>. You have seen the <go> and <prev> elements before. We will describe how to use the <refresh> element when we cover variables in this tutorial.
Free Template Blogger collection template Hot Deals BERITA_wongANteng SEO theproperty-developer
0 komentar:
Posting Komentar