Приглашаем посетить
Гумилев (gumilev.lit-info.ru)

21.2 Mobile Internet pages with WML I

Table of Contents

Previous Next

21.2 Mobile Internet pages with WML I

21.2.1 Using the Mobile Internet Toolkit

It is believed that the first Mobile Internet Toolkit (MIT) was developed by big mobile phone companies to promote their products and take advantages of the Internet capabilities. Most of the MIT packages are free and available to anyone who wants to develop Mobile Internet applications (i.e., Mobile Internet pages). One of the original and successful packages is the Nokia MIT available from

www.nokia.com

or

www.forum.nokia.com


Nokia's MIT package used in this book is called "NokiaToolkit3_0.zip" and is a complete development suite for Mobile Internet applications. It also comes with mobile handset simulation software. You can pick the mobile phone handset you like and start to develop your WML pages for it.

When you activate the software, you will see a main window and the Nokia Mobile Browser appear on your screen. A mobile browser is in fact a simulation of a mobile phone. All WML pages developed by the MIT package can be displayed on this mobile browser.

If you have a WML page such as our example ex21-01.wml.wml stored on your computer, you can use File | Open to locate and import it into the toolkit. In this case, the toolkit will open an editor window to display it (see Figs 21.4 and 21.5).

Figure 21.4. Nokia's mobile toolkit main window

graphics/21fig04.jpg


Figure 21.5. Editor window

graphics/21fig05.jpg


From the editor window, you can modify any loaded WML page that you like. When you press the Show button, the WML page will be compiled, producing the byte code. The compilation process is shown in the lower window of Fig. 21.5. For this example, the compilation result (byte code) contains only 89 bytes.

As a result, the page is displayed in the mobile browser as illustrated in Fig. 21.6a. If you have a mobile phone simulator installed, you can see the WML page appear on it as demonstrated in Fig. 21.6b.

Figure 21.6a. Nokia Mobile Browser

graphics/21fig06.jpg


Figure 21.6b. Microsoft phone simulator

graphics/21fig06a.gif


If you have your WML page uploaded onto a Web server, you can enter the URL address from the main window (see Fig. 21.4) to browse it. You can also go to File | New | WML Deck to open a new editor window to type your WML page.

The main difference between a mobile browser and a phone simulator is that the phone simulator is a real simulation of the actual phone. For example, if the phone doesn't support some features of WML v1.x or v2.x, it will not display any such features. At the time of writing, still not many mobile phones support full WMLv2.0. The mobile browser on the other hand supports all WML features.

Whether you are using a browser, phone simulator, or real phone, they all have a common feature called navigation keys. Usually, you have "Up," "Down," and "Select" keys on your mobile handset, used to scroll the tiny screen so that more information can be displayed. The select key is used to make your selection or decision. Depending on your device, you may also have two soft keys called "Left" and "Right." They are called soft keys because they can be controlled and assigned by software programming using WML.

If you don't want the complete development suite, you can download a "Simulation Application" package such as

Nokia_SimApp2.0Install.exe

This package (SimApp2.0) displays the Nokia Mobile Browser or the phone simulator of your choice. The result is the same as that shown in Fig. 21.6a or 21.6b.

Another interesting MIT package is from Microsoft and called the Microsoft Mobile Internet Toolkit. This package is available from the download center of www.microsoft.com. You may need Windows NT, 2000, or XP Professional and the Microsoft .NET framework to make it work. When your system has the .NET framework installed, you can download the following packages from the Microsoft download center:

  • Microsoft Mobile Internet Toolkit, e.g., mobileit.exe

  • Microsoft Mobile Explorer, e.g., mme30.exe

Once you have installed these packages, you can use the toolkit or the Mobile Explorer to start your development. For example, if you have a WML page on your local machine or on a Web server, you can locate the page file from the Mobile Explorer to display the page. A screen shot of example ex21-01.wml.wml on the Mobile Explorer is shown in Fig. 21.6c.

Figure 21.6c. Microsoft Mobile Explorer

graphics/21fig06b.gif


The Mobile Explorer supports WML as well as HTML and therefore provides more features than most mobile phones or devices and the standard. On the other hand, if you want to develop real applications for real devices, Nokia's package is one of the popular choices. As a professional Web or WAP programmer, understanding the limitations of devices and backward compatibility is vital.

In general, we will use a Nokia mobile phone (similar to Fig. 21.6b) to display the results of many WML v1.x examples. Depending on the features of your mobile device, sometimes the key-in procedure and display arrangement may not be the same even from the same manufacturer. For some WML v2.0 functions or features not found in most mobile devices, we will use the Nokia Mobile Browser to display the results.

Before we concentrate on writing WML pages, let's consider how to configure a Web server to deliver a WML page.

21.2.2 Setting up a Web server to deliver WML pages

To configure a Web server to deliver WML pages is easy. All you have to do is to modify the configuration settings so that the content types used on WML pages are supported. The main settings you may need to consider are



MIME Types

Depending on your wireless device and applications, in most cases, you only need to modify the MIME type settings. In other words, the Web server only needs to know how to recognize the MIME type of the WML pages, i.e., all the file extensions of WML pages. The file extensions used for WML pages are listed in Table 21.2.

Table 21.2. File electronics used on WML applications

text/vnd.wap.wml

wml

WML source

application/vnd.wap.wmlc

wmlc

WML compiled

text/vnd.wap.wmlscript

wmls

WMLScript source

application/vnd.wap.wmlscriptc

wmlsc

WMLScript compiled

image/vnd.wap.wbmp

wbmp

Wirless bitmaps

text/html

xhtml

XHTML source

text/css

css

CSS source

text/x-vcard

vcf

Electronic Business Card (VCARD)

text/x-vCalendar

vcs

Electronic Calendar Event (VCAL)

text/vnd.wap.si

si

Service Indication (SI) source

application/vnd.wap.sic

sic

Service Indication (SI) encoded

text/vnd.wap.sl

sl

Service Loading (SL) source

application/vnd.wap.slc

slc

Service Loading (SL) encoded

text/vnd.wap.co

co

Cache Operation (CO) source

application/vnd.wap.coc

coc

Cache Operation (CO) encoded


In fact, you don't need to add any of these types to your Web server. To make matters clear, let's consider an example. Suppose you are using the Apache Web server and only want to support WML v1.x pages. You can perform the following tasks to configure Apache:

  • Edit the Apache configuration file httpd.conf.

  • Locate the strings

    #

    # AddType allows you to tweak mime.types without actually editing them, or to

    # make certain files into certain types.

    #

    AddType application/x-tar .tgz

  • Add the following statements right after the strings above:

    
    

    AddType text/vnd.wap.wml .wml
    AddType application/vnd.wap.wmlc .wmlc
    AddType text/vnd.wap.wmlscript .wmls
    AddType application/vnd.wap.wmlscriptc .wmlsc
    AddType image/vnd.wap.wbmp .wbmp
    

Now, your Apache server recognizes all file extensions used in the WML v1.x specification. If you want your Apache to support WML v2.0 or XHTML-Basic, you should add one more line:



AddType text/html                            .xhtml

Don't forget to relaunch Apache so that the new settings can take effect. If you are using the UNIX/LINUX system, you can relaunch Apache by the command "httpd." If you are using Windows, you may need to stop the Apache service and start it again by



net stop apache
net start apache

Now we can write another simple WML page to test our Web site www.pwt-ex.com with new settings. Consider the following WML page:



Example: ex21-03.wml - Contents Of Chapter 21

 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="Card1" title="www.pwt-ex.com">
 6:    <p>CHAPTER 21<br />
 7:       <b>21.1 Mobile Internet</b><br />
 8:       <b>21.2 WML Pages</b><br />
 9:       <b>21.3 WMLScript</b><br />
10:       <b>21.4 XHTML-Basic</b><br />
11:       <b>21.5 Practical Examples</b></p>
12:  </card>
13: </wml>
14:

This is a simple WML page with only one card. Inside this card, six messages are displayed, all of which are formatted by XHTML elements and easy to understand.

If you activate Nokia's Simulator Application "SimApp2.0," you will see the mobile browser on the screen. In addition, you will also have a small SimApp icon on your system tray. If you right click on the icon and select "Open File or URL…," you will activate the "Open File or URL…" window on screen. Now type the following in the input field as illustrated in Fig. 21.7.

http://www.pwt-ex.com/ex21-03.wml

Figure 21.7. The "Open File or URL…" window

graphics/21fig07.gif


If you click the OK button, you will see this WML page rendered on the mobile browser (see Fig. 21.8).

Figure 21.8. ex21-03.wml on the Nokia Mobile Browser

graphics/21fig08.jpg


Don't forget to put the WML page ex21-03.wml in the default directory (e.g., htdocs) of Apache.

If you are using Microsoft Mobile Explorer (MME), you can enter "http://www.pwt-ex.com/ex21-03.wml" at the URL bar to see the page. A screen shot is shown in Fig. 21.9.

Figure 21.9. ex21-03.wml on Microsoft Mobile Explorer

graphics/21fig09.gif


Once your mobile browser can see WML pages via "http://," you will have configured your Web server correctly. Your page should now be available for wireless devices such as mobile phones.

To configure the Microsoft IIS to support WML pages is also easy. For example, if you are using XP Professional, you can activate the IIS window by Start | Control Panel|Administrative Tools|Internet Information Services. Inside the IIS window, if you expand the Web Sites node, you will see the URL of our default Web site www.pwt-ex.com (see Fig. 21.10). Now, perform the following actions:

Figure 21.10. The IIS window

graphics/21fig10.gif


  • Right click on the Web site www.pwt-ex.com and select the "property" option to activate the property window.

  • From the menu of the property window, select "HTTP Headers" (see Fig. 21.10).

  • Click the file types and press the New Types button to open a "File Type" window (see Fig. 21.11).

    Figure 21.11. The file type window

    graphics/21fig11.gif


  • In the "File Type" window, enter the file extension and the MIME as illustrated in Fig. 21.11. Click the OK button to register the file type.

  • Open another "File Type" window to register another WML file type until all file types have been registered (see Figs 21.12 and 21.13).

    Figure 21.12. Select the HTTP headers

    graphics/21fig12.gif


    Figure 21.13. Register all WML file types

    graphics/21fig13.gif


Now your IIS Web server can deliver and support WML pages, let's start to write some Mobile Internet pages using WML.

21.2.3 The basic elements of WML

WML is a markup language based on XML. In fact, many people consider WML as a special implementation of XML with XHTML style and elements. WML is used to create WML pages (or Mobile Internet pages) that can be displayed on a WAP browser.

A WAP browser or micro-browser is a small piece of software usually installed on wireless devices and makes minimal demands on hardware, memory, and CPU power. Wireless devices with a micro-browser can display information written in WML.

A structural diagram of WML is shown in Fig. 21.14.

Figure 21.14. Development diagram of WML

graphics/21fig14.gif


WML was created by the industry association WAP Forum and has gone through two versions. Pages written by WML v1.x (version 1) are called decks, which are constructed as a set of cards using the <card> element. Together with some extensions, WML version 2 has adopted a special version of XHTML called XHTML-Basic as a default language to strengthen the capability of Web browsing. For backward compatibility, WML v2.0 also includes previous versions.

Since most mobile or wireless devices are still using WML v1.x, we will show you how to write version 1 WML pages in sections 21.3.1 to 21.3.4. XHTML-Basic will be discussed in section 21.3.5. If you want to develop all-singing and dancing Mobile Internet pages that work on all devices, WML v1.x may be your best (if not only) option.

On a WML page, after the WML header, the contents are defined by a series of cards. Each card is specified by the element <card> in XML syntax. Inside each card, you can have all kinds of ways of designing or formatting WML elements to control the display. In normal circumstances, only one card can be displayed at a time. Each card can be considered as a new page connected together by a link. Instead of having a large number of WML pages sitting on Web servers, related WML pages are implemented as cards so that the WAP gateway can compile them all together and send them to your mobile phone. Technically, this process is the same as sending a number of pages to your mobile device at the same time. Unless you want to activate an external link with other WML pages, cards can be navigated on your mobile. This feature is particularly useful to accommodate a small screen for small devices such as mobile phones.

A typical framework for a WML page is shown in the next example:



Example: ex21-04.wml - An Example Framework For WML Pages

 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 = "card1" title = "Card1 Title">
 6:   <p>
 7:     This is card1 <br />
 8:     WML Formatting Elements Are Here.
 9:   </p>
10:   </card>
11:
12:   <card id = "card2" title = "Card2 Title">
13:   <p>
14:     This is card2 <br />
15:     WML Formatting Elements Are Here.
16:   </p>
17:   </card>
18: </wml>

This example defines a WML page with two cards. However, an example like this is not very useful because, first, there is no link between card1 and card2 only card1 is displayed; and second, there are no formatting features or elements defined in the page.

21.2.4 The text formatting and table elements in WML

In order to make this page a bit more interesting, we need to add some formatting power to it. Unlike most of the markup languages or technologies on the Web such as HTML/XHTML, ASP, Perl, PHP, etc., the text formatting power of WML is very primitive. In most cases, you cannot even control the font face and size as you want. Some frequently used formatting elements in WML are listed in Table 21.3.

As we can see from the table, the elements are identical to XHTML. Bear in mind that the formatting elements used in WML are a special subset of XHTML. Also, not all mobile devices are capable of displaying all features of the formatting elements.

Table 21.3. WML elements

WML element

Purpose

WML element

Purpose

<b>

Defines bold text

<br>

Defines a line break

<big>

Defines big text

<p>

Defines a paragraph

<em>

Defines emphasized text

<a>

Defines an anchor (link)

<i>

Defines italic text

<img>

Defines an image

<small>

Defines small text

<table>

Defines a table

<strong>

Defines strong text

<td>

Defines a table cell (table data)

<u>

Defines underlined text

<tr>

Defines a table row


When you design your WML pages, knowing your target clients and the capabilities of the devices is important. Consider the following text formatting example (ex21-05.wml):



Example: ex21-05.wml - Text Formatting 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 title="Text Formatting">
 6:     <p align="center"> Center Text </p>
 7:     <p align="right"> Right Text   </p>
 8:     <p>        Normal Text <br />
 9:       <em>     Emphasized Text  </em>    <br />
10:       <strong> Strong Text      </strong><br />
11:       <b>      Bold Text        </b>     <br />
12:       <i>      Italic Text      </i>     <br />
13:       <u>      Underline Text   </u>     <br />
14:       <big>    Big Text         </big>   <br />
15:       <small>   Small Text      </small>
16:     </p>
17: </card>
18: </wml>

This WML page contains a number of text formatting features. For example, a string or message can be placed at the center, right, and left as illustrated in lines 68. Some other formatting elements are demonstrated in the rest of the example code. Since most screens of mobile devices are small, we don't have the luxury of control over the font face or font size (not until WML v2.0 and XHTML-Basic).

Also, CSS or more precisely the Wireless CSS is not supported in WML v1.x. We cannot use any CSS properties (at least not yet!). Instead, in order to place a string at the center of the screen, the "align" attribute is used in association with the paragraph element <p>. A screen shot of this example is shown in Fig. 21.15. Since not many mobile devices have the capability to display all text format features, we use the Nokia Mobile Browser to demonstrate the result.

Figure 21.15. WML text formatting (ex21-05.wml)

graphics/21fig15.jpg


The table element is an important formatting tool in XHTML and widely used in this book. The next example is to show you how to use the table element on a WML page. Consider the following example code:



Example: ex21-06.wml - Text Formatting 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="card1" title="WML Table" newcontext = "true">
 6: <p align="center">WAP Phone Prices
 7: <table columns="2">
 8:    <tr><td>Color Screen Phone </td><td> 80</td></tr>
 9:    <tr><td>Multi-function Phone </td><td> 50</td></tr>
10:    <tr><td>WAP Phone</td><td> 30</td></tr>
11: </table>
12: </p>
13: </card>
14: </wml>

This is a WML page to display a price list for WAP phones. The price listing is formatted by a table element with three rows and two columns. In order to format a table correctly and effectively, you may need to specify the number of columns at the beginning of the table element as illustrated in line 7. If the number of columns doesn't match the number of <td> elements in any one row (e.g., <tr>), an error will occur. A screen shot of this example is shown in Fig. 21.16.

Figure 21.16. WML table (ex21-06.wml)

graphics/21fig16.jpg


21.2.5 Displaying images on the Mobile Internet

To display an image on a WML page is easy: all you have to do is to define it with an image element <img>. However, due to the restrictions of wireless devices such as memory and CPU power, WML v1.x supports only one image format called Wireless BMP (or WBMP). Your favorite Web browser such as IE or NS may not support it. A WBMP file is specified by the WAP authority as the standard image format to be displayed on a wireless device. This format is in fact a black & white, uncompressed, simple BMP file.

You don't need to write programs for WBMP images. There is free software on the Internet that will allow you to convert an existing image file to WBMP format. Some of the software will even allow you to convert a large number of different image formats into WBMP.

The Nokia MIT also has a utility to convert other images instantly into WBMP format. For example, you can go to File | Open from the toolkit window and then select the JPEG image file dvd.jpg into the utility and save it as dvd.wbmp on your machine (see Fig. 21.17).

Figure 21.17. The pic2wbmp utility

graphics/21fig17.gif


Now you can develop a WML page to offer, say, entry to a lucky draw for a DVD player. Consider the example below:



Example: ex21-07.wml - Using WBMP Image

 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 = "Free Draw Today">
 6:   <p align="center">
 7:     A DVD Player.<br />
 8:     <img src="dvd.wbmp" alt="pic" />
 9:   </p>
10: </card>
11: </wml>

By Web browser standards, the WBMP image is a little short of impressive. However, when displayed on a mobile phone, it looks fine (see Fig. 21.18). Remember that until the full acceptance of WML version 2, WBMP may be the only available choice to display images across all mobile devices.

Figure 21.18. ex21-07.wml

graphics/21fig18.jpg


    Table of Contents

    Previous Next