21.3 Mobile Internet pages with WML II

21.3 Mobile Internet pages with WML II

21.3.1 Controlling WML cards

As we mentioned earlier, every WML page is similar to a deck of cards. Some people may refer to WML pages as deck or card applications. Cards can be considered as a tiny page displayed on your mobile device. In fact, for some mobile phones, the internal operations in the Options menu are implemented as cards.

Although the WAP gateway compiles all the cards and sends them to your mobile phone, the micro-browser only displays one card at a time. Therefore navigation among cards is an important characteristic of WML pages.

In general, all WML v1.x pages consist of cards. Each card is defined by the following format:

<card id="CardId" title="CardTitle" >
   Some WML Formatting Elements
</card>

You can have as many cards as you like (in theory). The id attribute is used to identify the individual card so that navigating among cards is possible. One simple way to navigate among cards is to use the anchor element. Consider the following example:

Example: ex21-08.wml - Navigating Among Cards

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5: <card id="Index" title="Mobile Shopping">
 6:  <p>
 7:   <a href="#Card2">Buy A New Phone?</a> <br />
 8:   <a href="http://www.pwt-ex.com/ex21-07.wml#Index">Free Draw?</a><br />
 9: </p>
10: </card>
11:
12: <card id="Card2" title="MM128 Color Phone">
13:  <p>
14:     Large Color Screen<br />
15:     Full WML Features <br />
16:     Price xx (50% Discount)<br />
17:     Call 0800-12345678
18:  </p>
19: </card>
20: </wml>

This is a WML page with two cards. The identity of the first card is "Index" and that of the second card is "Card2." You can use the following anchor element to jump from the first card to the second one (see line 7):

<a href="#Card2">Buy A New Phone?</a>

As usual, your mobile device will underline the text between the <a> tags. When you select the underlined text using the navigation keys on your mobile, the href action will jump to the "Card2" identified by the id value. Line 8 is another example of using the anchor element to jump to another WML page and card on that page.

In fact, this page is a product promotion to sell color screen mobile phones. The second card contains some details of the phone. Suppose your device has some navigation keys such as "Up," "Down," "Left," "Right," and "Select." If you press the Select button on your mobile phone or device, you will see "Card2" on your screen. Some screen shots are shown in Figs 21.19 and 21.20.

Now you can navigate from one card to another using the anchor element, you may want to add a jump from "Card2" to the previous one by using another anchor element. Another way to do this is to use the element <do> to trigger a task. For example, consider the following example ex21-09.wml:

Example: ex21-09.wml - The Use Of <do> Element

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5: <card id="Index" title="Mobile Shopping">
 6:  <p>
 7:   <a href="#Card2">Buy A New Phone?</a> <br />
 8:   <a href="http://www.pwt-ex.com/ex21-07.wml#Index">Free Draw?</a><br />
 9: </p>
10: </card>
11:
12: <card id="Card2" title="MM128 Color Phone">
13: <do type="accept" label="Back"> <prev/> </do>
14:  <p>
15:     Large Color Screen<br />
16:     Full WML Features <br />
17:     Price xx (50% Discount)<br />
18:     Call 0800-12345678
19:  </p>
20: </card>
21: </wml>

This page is basically the same as ex21-08.wml but with a do statement added in line 13:

<do type="accept" label="Back"> <prev/> </do>

This is a do element with type="accept" and label="Back". As a result, this will force your mobile device to accept "Back" as a new option assigned to a soft key. For some mobile phones, you can find the "Back" option in the Options menu (see Fig. 21.20). Some mobile devices may display this "Back" option at the bottom right corner of screen. When this option is selected, the element <prev /> will bring you back to the previous card.

As a more practical example, let's consider a WML page to report the weather in some cities. Our weather report page is a simple one containing four cities: London, New York, Tokyo, and Paris. You can pick one city and jump to the weather report for that city. Each weather report has a Back button so that you can go back to the main page. Some screen shots of this example are shown in Figs 21.21 and 21.22.

Sometimes, a WML page like this is quite handy. You can check the weather anywhere in the world with your mobile device. Furthermore, the page can also be used as a warning page for holiday makers and travelers. For example, if there is a violent storm about to hit a city, you would not recommend that people travel there. Even better, you could modify this page to become a last-minute "Travel Warning" page by putting on it all cities with severe weather conditions.

The coding of this page is listed below:

Example: ex21-10.wml - A WML Page For Weather Report

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5:   <card id="Index" title="City Weather">
 6:      <p>
 7:       <a href="#London">London</a>
 8:       <a href="#NewYork">New York</a>
 9:       <a href="#Tokyo">Tokyo</a>
10:       <a href="#Paris">Paris</a>
11:     </p>
12:   </card>
13:
14:  <card id="London" title="London Weather">
15:       <do type="accept" label="Back"> <prev/> </do>
16:       <p>
17:          Rainy Day<br/>Temp: Max. 8C, Min. 1C <br />
18:          Air Pollution (Med)
19:       </p>
20:    </card>
21:    <card id="NewYork" title="New York Weather">
22:      <do type="accept" label="Back"> <prev/> </do>
23:      <p>
24:          Sunny Day<br/>temp: Max. 4C, Min. -4C <br />
25:          Air Pollution (Med)
26:      </p>
27:    </card>
28:    <card id="Tokyo" title="Tokyo Weather">
29:      <do type="accept" label="Back"> <prev/> </do>
30:      <p>
31:          Sunny Day<br/>Temp: Max. 7C, Min. 0C <br />
32:          Air Pollution (Med)
33:      </p>
34:    </card>
35:    <card id="Paris" title="Paris Weather">
36:      <do type="accept" label="Back"> <prev/> </do>
37:      <p>
38:          Very Windy<br/>Temp: Max. 4C, Min. -3C <br />
39:          Air Pollution (Med)
40:      </p>
41:    </card>
42: </wml>

With the explanations above, this page is easy to read. Although the screen of a mobile device is black and white and usually small, it doesn't mean we cannot do something interesting. Let's see how to animate a WBMP picture using WML cards.

21.3.2 Creating animated pictures (WBMP) on WML pages

The idea of how to animate a WBMP image is straightforward. The whole process can be summarized in two steps:

Step 1. Use one card to store one image using the usual <img> element.

Step 2. Install a timer on each card so that it will switch from one card to another.

A typical and simple code fragment to perform these steps is illustrated as follows:

<card id="image1" ontimer="#image2">
    <timer value="10" />
    <p align="center">
       <img src="img01.wbmp" alt="img01" />
    </p></card>
<card id="image2">
    <p align="center">
      <img src="img02.wbmp" alt="img02" />
    </p></card>

The first line of this code fragment defines a card with identity image1. Along with the identity, we have installed a timer using the attribute ontimer="#image2". It says that once the time is up, jump to the card with id="#image2". The second line of this code fragment defines the value of the timer and in this case it is 1 second. By switching a series of cards and images, we have animated effects even on a tiny mobile screen.

As a practical example, we consider an animated WBMP sequence to deliver email. This example can be used to notify a user when a new email has arrived.

Example: ex21-11.wml - An Animated WBMP Image To Deliver Email

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5:   <card id="image1" ontimer="#image2" title="WML Email">
 6:       <timer value="10" />
 7:       <p align="center">
 8:          <img src="img1.wbmp" alt="img1" />
 9:       </p></card>
10:   <card id="image2" ontimer="#image3" title="WML Email">
11:       <timer value="5" />
12:       <p align="center">
13:         <img src="img2.wbmp" alt="img2" />
14:       </p></card>
15:   <card id="image3" ontimer="#image4" title="WML Email">
16:       <timer value="5" />
17:       <p align="center">
18:         <img src="img3.wbmp" alt="img3" />
19:       </p></card>
20:   <card id="image4" ontimer="#image5" title="WML Email">
21:       <timer value="5" />
22:       <p align="center">
23:         <img src="img4.wbmp" alt="img4" />
24:       </p></card>
25:   <card id="image5" ontimer="#image6" title="WML Email">
26:       <timer value="10" />
27:       <p align="center">
28:         <img src="img5.wbmp" alt="img5" />
29:       </p></card>
30:   <card id="image6" ontimer="#card2" title="WML Email">
31:       <timer value="10" />
32:       <p align="center">
33:         <img src="img6.wbmp" alt="img6" />
34:       </p></card>
35:
36:   <card id="card2" title="WML Email" ontimer="#image1">
37:       <timer value="15" />
38:       <p align="center">
39:         You Have Email<br /><br />
40:         <a href="#card3">Save Email</a>
41:       </p></card>
42:   <card id="card3" title="WML Email">
43:       <p align="center"><br />
44:         Email Saved!<br />
45:       </p></card>
46: </wml>

This page contains six WBMP images from img1.wbmp to img6.wmp. They are hardwired into a series of WML cards with identities from image1 to image6 (see lines 534). Each card has a timer installed so that control will switch from one card to another forming an animated sequence.

After the animated image, there is a card called card2 (lines 36-41) to output a text message to let you know you have a new email. Inside this card, there is also an action text (line 40) defined by an anchor element <a> so that you have a choice whether to save the email. If the action text "Save Email" is not pressed within the timer limit, the animated sequence will start again. If the action text is activated, control jumps to the next card to display "Email Saved."

Some screen shots of this example are shown in Figs 21.2321.25.

21.3.3 Obtaining user input with text boxes

Now we have some experience of the structure and style of WML, it's time to learn more about how to use them in real applications.

Similar to XHTML, WML also contains input elements to allow a user to enter information. For example, the following input element is used to define a text box:

<input name="MyText" value="" maxlength="20" />

This element defines a text box called "MyText" with a maximum length of 20 characters. Unlike XHTML, the type attribute is not used to define a text box here. The value attribute is used to predefine a string for the text box value.

The name attribute is important if you want to gain access to the value of this text box. For example, if you give the name of the box as "MyText," you can access the value of the box or the input information by using the variable

$MyText

By putting a dollar sign in front of the name, you can use it anywhere on the page. Consider a simple example to send short email messages below:

Example: ex21-12.wml - Obtain User Input With Text Boxes

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5:  <card id="index" title="Short Email" newcontext = "true">
 6:   <p>
 7:     From: <input name="From" value="jo@pwt-ex.com" maxlength="20"/>
 8:     To:   <input name="To"   value="" maxlength="20"/>
 9:     Msg:  <input name="Msg"  value="" maxlength="40"/>
10:     <a href="#Card2">Send</a>
11:   </p>
12:  </card>
13:  <card id="Card2" title="Sent Email">
14:   <p>
15:      From: $From <br/>
16:      To: $To <br/>
17:      Mg: $Msg<br />
18:   </p>
19:  </card>
20: </wml>

This example can be used as an interface to send short email messages to someone on the Internet. The page contains two cards. The first card has three input boxes (lines 78) and one anchor element (line 9). The first two input fields (lines 78) specify the email address of the sender and receiver. You can put a default address into the "From" field so that you don't need to enter the information. The third input field (line 9) is where you can enter your message.

In fact, when you define three text boxes as in lines 79, you create three WML variables, namely, $From, $To, and $Msg. They are used to store the data corresponding to the "From," "To," and "Msg" boxes.

Once the information has been filled in and the Send button is selected, Card2 is activated to display the variables and hence the input result. Some screen shots are shown in Figs 21.26Figs 21.28.

The Send button in Fig. 21.27 was created by an anchor element in line 10. When you press this button, Card2 is activated to display the input data.

Unlike your computer, most mobile devices don't have the luxury of a full-size keyboard and therefore entering lots of information using the handset may be an uncomfortable task. Another popular feature for Mobile Internet pages is the select element <select>.

21.3.4 Single and multiple selections

Similar to XHTML, select boxes on a WML page are defined by the select element. The options inside the selection are specified by the option element <option>. The only difference is that the value of the selected item is stored in the variable defined as the name of the select element. Consider the following example:

Example: ex21-13.wml - Using Select Element In WML

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5:  <card id="index" title="Occupation Info" newcontext = "true">
 6:   <p>Please Select One:
 7:     <select name="Occupation">
 8:      <option value="Student">Student</option>
 9:      <option value="Engineer">Engineer</option>
10:      <option value="Programmer">Programmer</option>
11:      <option value="Others">Others</option>
12:     </select>
13:     <a href="#Card2">Send</a>
14:   </p>
15:  </card>
16:
17:  <card id="Card2" title="Your Occupation">
18:  <do type="accept" label="Back"><prev /></do>
19:   <p>
20:      ==> $Occupation <br/>
21:   </p>
22:  </card>
23: </wml>

Again, this page contains two cards. The first card contains a select element <select> and four options. The select element creates a selection framework and the four options form the selectable items. In this case, you can pick one item as your occupation. Your selection is stored in the variable $Occupation which is specified in the name attribute. After you have picked the item and pressed the Send button, Card2 is activated and your selection is output to the screen. Some screen shots are shown in Figs 21.2921.31.

If your device has a tiny screen, you may see a form similar to Fig. 21.29. The first option "Student" (see line 8) appears in the brackets. When you activate the selection, your device will open another window to display all selectable items or options as illustrated in Fig. 21.30. You may use your navigation keys to select your choice. Your choice will appear in the bracket area in Fig. 21.29. When you press the "Send" underlined text, Card2 is activated and your new selection will appear on your screen as in Fig. 21.31.

This arrangement may look strange, but it is useful for displaying a number of select elements on a tiny screen. By ignoring all other selectable items on the main card, more select boxes can be allocated to one screen for particular information.

If your device has a bigger screen (compared to a mobile phone) such as a PDA or smart phone, this example ex21-13.wml may have the display as in Figs 21.3221.34.

As you can see from Fig. 21.32, all options are displayed when the page is loaded. In other words, WML is a language for Mobile Internet pages, but it doesn't specify every detail on how individual devices should act or behave.

Another frequently used input element on the Mobile Internet is the multiple select. If you operate a shop on the Mobile Internet, you will be delighted when your customers buy more than one or all of the items you offer. Consider the following example:

Example: ex21-14.wml - Multiple Selections Using WML

 1: <?xml version="1.0"?>
 2: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
 3: "http://www.wapforum.org/DTD/wml_1.3.xml">
 4: <wml>
 5:  <card id="index" title="Shopping By Phone" newcontext = "true">
 6:   <p>Product Catalog:
 7:     <select name="buy" multiple="true">
 8:      <option value="PDA">Color PDA(100)</option>
 9:      <option value="DVD">DVD Player(100)</option>
10:      <option value="Cam">Digital Camera(60)</option>
11:      <option value="pho">Smart Phone(120)</option>
12:     </select>
13:     <a href="#Card2">Send</a>
14:   </p>
15:  </card>
16:  <card id="Card2" title="Thank you">
17:  <do type="accept" label="Back"><prev /></do>
18:   <p>You have picked:<br/>
19:        $buy <br/>
20:   </p>
21:  </card>
22: </wml>

This is a "Shopping By Phone" example. The product catalog has four items to sell. They are arranged by a select element in lines 712. The multiple attribute used in line 7 indicates that this is a multiple select box and therefore more than one choice can be made. After some selections have been made, the Send button will call Card2 to display the result. Some screen shots are shown in Figs 21.3521.37.

For a mobile phone with a tiny screen, the opening window (Fig. 21.35) may not show any of the multiple choices. The multiple options are shown in another window instead (see Fig. 21.36) so that you can mark or unmark the items. When Done is pressed, you will return to Fig. 21.35 with all the choices. If you press the Send button, your multiple selections will be displayed as in Fig. 21.37. If you have a large-screen mobile phone, your display may be different.

While WML v1.x functions well and is a global standard for mobile applications, the WAP Forum has released a major specification called version 2 of WML dedicated to the next generation of WAP and wireless devices.

21.3.5 WML v2.x and XHTML-Basic

The technology is advancing daily. It is believed that the next generation of mobile phone or wireless devices will no longer be restricted by the processing power, memory, and screen size architecture. Mobile devices such as large color screen phones, PDAs, and smart phones (PDA + mobile phone) are already on the market. We can see that higher user demand and functionalities are inevitable. In fact, according to the WAP Forum, the future of WAP lies in its close alignment with the Internet standard and community such as the Web. This is why the WAP Forum and the World Wide Web Consortium (W3C) have joined together to define the next Mobile Internet standard called WML v2.x. In fact, the WAP Forum has adopted the XHTML-Basic standard from W3C as the basis for WML and WAP 2.0.

According to W3C, XHTML-Basic is a special version of XHTML to define a document type which is rich enough to format pages across different classes of device such as desktop computers, PDAs, TVs, and mobile handsets. Essentially, XHTML-Basic is an adaptation of XHTML 1.0 containing every element of it except those not appropriate for devices with small screens such as frames. Also, WML version 2 supports a subset of CSS1 called Wireless CSS (or WCSS) as an extension of XHTML-Basic so that WML pages can use styles. In order to maintain services and support for millions of mobile devices around the world, WML v2.x also includes full support for WML v1.x.

To have XHTML capability on mobile devices is great. However, when designing Mobile Internet pages, certain differences between mobile devices and PCs need to be considered. Apart from the physical differences such as screen size and power, the main issue is that a Mobile Internet page is designed for people with mobility. A typical WML page should offer brief, exact, and quick information to the client rather than to the browser. Based on this, the following are some guidelines for designing Mobile Internet pages with XHTML-Basic:

• Try to avoid messages longer than the display.

• Try to keep the length of your page to a minimum (four or five lines).

• Try to avoid excessive use of colors on one page.

• Always target your mobile device and test it before uploading it to the server.

It is true that XHTML-Basic can deliver the full features of a Web page. However, it would upset most (if not all) of your mobile users. Don't forget that most mobile device users are paying the cost per minute. Try your best to reduce your clients' airtime costs.

Instead of providing a full account of what elements are available on XHTML-Basic, we will provide a simple table of elements and features not supported by XHTML-Basic or WML2.x, as in Table 21.4.

Table 21.4. Elements and features not supported by XHTML-Basic

Element	Features not supported
<body>	bgcolor, text, or link
<frame>	Frames are not supported
Text related	<center>, <font>, <s>, <tt>, <b>, <big>, <i>, <small>, and <u>
Form related	<button> or <input type="button" ..>
Table related	align, cellpadding, cellspacing, width, height, and border
<img>	align, border, usemap, hspace, and vspace
<script>	Scripts are not supported

As we can see from this table, most of the XHTML pages developed in this book are characterized as XHTML-Basic standard. To develop an XHTML-Basic page is easy. Consider the example below:

Example: ex21-15.xhtml - XHTML-Basic Used On WAP

 1: <?xml version="1.0"?>
 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
 3: "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd" >
 4: <html xmlns="http://www.w3.org/1999/xhtml">
 5: <head>
 6:   <title>XHTML-Basic</title>
 7: </head>
 8: <body style="font-family:arial">
 9:
10: <h1 style="text-align:center">Header Demo</h1>
11: <div class="h">
12:   <h1>Heading H1 &lt;h1&gt;</h1>
13:   <h2>Heading H2 &lt;h2&gt;</h2>
14:   <h3>Heading H3 &lt;h3&gt;</h3>
15:   <h4>Heading H4 &lt;h4&gt;</h4>
16:   <h5>Heading H5 &lt;h5&gt;</h5>
17: </div>
18:
19: <h1 style="text-align:center">Table Demo &lt;table&gt;</h1>
20: <table>
21:  <tr><td>Name</td><td>Phone No.</td>
22:      <td>Name</td><td>Phone No.</td></tr>
23:  <tr><td>Tom</td><td>1892-5312</td>
24:      <td>Mary</td><td>1891-3344</td></tr>
25:  <tr><td>John</td><td>1892-1234</td>
26:      <td>Anna</td><td>1891-3456</td></tr>
27:  <tr><td>Peter</td><td>1892-5432</td>
28:      <td>Susan</td><td>1891-2133</td></tr>
29: </table><br />
30:
31: <h1 style="text-align:center">Image Demo &lt;img&gt;</h1>
32:    <img src="logo01.gif" alt="pic" />
33: <br /><br />
34:
35: </body>
36: </html>

This is a simple page to demonstrate some frequently used features of XHTML-Basic. Three basic features are illustrated: the text formatting (lines 1017), table (lines 2029), and the use of image (lines 3133). All features are identical to XHTML. Some screen shots of this example are shown in Figs 21.3821.40.

The inline style of the page is not a part of the XHTML-Basic standard. In fact, the WAP Forum includes the inline style as an XHTML-extension and is a part of WML v2.0.

Now we know that we are fully prepared for the next generation of wireless devices and the markup language (XHTML-Basic) for them.

For the Web environment, ECMAScript is a powerful tool and the engine on the Web browser for client-side functions and data processing. For the WAP environment, the counterpart is called Wireless Markup Language Script (or WMLScript).