What Is WML?

only for RuBoard

WML is a generalized markup language that's optimized for limited capability devices and networks. WML documents are based on the XML format. It borrowed some functionality and tags from HDML 2.0 and from HTML.

WML is the most popular mobile development technology used at the time of this writing; however, it might soon be exceeded by the XHTML standard in the future.

XHTML is outlined in this section on WML.

A Deck of Cards

WML follows the well- formed rules of XML, where each tag must have a closing tag, and only one root element is allowed.

WML is based on the metaphor of a deck of cards. A .wml document is referred to as a deck of cards, and a specific card is directly related to a specific area of functionality within the deck (normally UI elements, but sometimes this can be pure script).

The basic WML document structure is shown here:

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"  "http://www.wapforum.org/DTD/wml_1.1.xml">  <!--Deck Declaration-->  <wml>  <!--Card Declaration-->       <card>  <!--Content of card goes here-->       </card>  </wml>

WML focuses on the actual use of an element. By separating the rendering from the actual use allows the rendering and implementation on the device to be based on the abilities of the device being used.

In general, it is best to limit the number of cards to less than five per deck.

An example of a .wml file is shown in Listing 13.1

Listing 13.1 A Simple .wml File ( 1501.wml )

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"  "http://www.phone.com/dtd/wml11.dtd" >  <wml>       <card id="card1">            <p>            Card 1 - Displayed              <anchor title="Card2">                  <go  href="#card2"/>                  Show Card 2              </anchor>              <br/>          </p>       </card>       <card id="card2">            <p>            Card 2 - Displayed            <anchor title="Card2">                  <go  href="#card1"/>                  Show Card 1              </anchor>              <br/>          </p>       </card>  </wml>

In the Listing 13.1, the XML version and namespace information is set up first:

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//PHONE.COM//DTD WML 1.1//EN"  "http://www.phone.com/dtd/wml11.dtd" >

After this, Deck is defined, which holds two separate cards.

The next line contains the declaration of the first card. All information between the <card></card> tags apply to that specific card.

Note

The WML code looks similar to a standard XML document.

After declaring the card, you must assign it an ID of card1 . To do this, simply display a text label that states the name of the card being displayed. All output on a WML card must be between the <p></p> tags; these tags are required for any output to a mobile device display:

 <anchor title="Card2">      <go  href="#card2"/>      Show Card 2  </anchor>

Next, create a simple <anchor> element to act like an <a> tag from HTML. The only major difference between the WML <anchor> and that of HTML is that <anchor> has a title attribute that's used by the mobile device (normally, the text shown at the lower part of a mobile device display) and a sub element, <go> . The <go> element navigates to another URI. For now, note that the href value has a # in front of it, which tells the WML device to find another card with that name in the current deck and to display it.

The second card is the same as the first card, with one difference. It states that you are on the second card and enables you to navigate back to the first card.

WML Areas of Functionality

WML supports various elements that cover the following areas of functionality: presentation, navigation, and data entry.

Presentation

Presentation directions can be included with text and images; however, the microbrowser decides how to render the content.

The tags used for text and image presentation are outlined in Table 13.1.

Table 13.1. WML Presentation Tags

Basic WML Text Presentation Elements	Description
`<b></b>`	Adds a bold format
`<big></big>`	Increases font size
`<br/>`	Adds a line break
`<em></em>`	Adds emphasis; recommended over <b>
`<i></i>`	Adds italics
`<small></small>`	Decreases font size
`<strong></strong>`	Adds strong emphasis
`<u></u>`	Adds an underline
`<p></p>`	Paragraph text; required for text that's to be rendered onscreen
`<img></img>`	Renders an image to the mobile device display area
`<table />`
`<tr />`
`<td />`	Renders tables to a mobile device (not recommended)

The WML <p> Element

Of all the elements in Table 13.1, the most important presentation element is <p></p> . This element is required to be around any free text rendering on a mobile device.

The <p></p> element has two attributes:

Align ” Sets up the text alignment inside the control. Possible values are left, right, and center (left is the default).
Mode ” An important attribute for mobile phone development, mode tells the mobile device to either wrap text on the display or to disable line wrapping on a mobile display. Most mobile devices allow you to scroll horizontally when wrapping is disabled. The possible values for this attribute are wrap and nowrap (wrap is the default).

The WML Image Element

The <img /> tag displays an image to the device screen.

Note that although most mobile devices can display images, it is not advised because images can take up much space on the screen and slow the download speed of a mobile device page. And you know that is not a good thing.

More on the <img /> Element

If the <img /> element is nested within a <p> element, the image is displayed on its own line; otherwise , the mobile device displays the image as it sees fit (on its own line also, most of the time).

Using Tables for Presentation

Although some mobile devices support the use of tables for presentation purposes, it is not recommended because most mobile devices decide how to render the table, if at all. Therefore, the table looks different on different devices.

If you are developing for only a single mobile device, however, tables can help organize your content. But be aware that if you create a table with more than two columns, you are asking for trouble. Most mobile devices have small screens that have no room for more than two columns .

Tables are also supported through the <table> , <tr> , and <td> elements. The number of columns in the table is specified as an attribute of the <table> element. The <tr> element contains a row of the table, and the <td> element contains a cell within the table; some browsers, however, do not support tables.

Navigation with WML

Generally, anchors link items to other cards in the form of menus or commands.

A URL references the first card in a deck, although other cards within the deck can be referenced by using fragment anchors .

For example, here's how to navigate to a new deck of cards by using <anchor>:

 <anchor>       <go href="card2.wml"/>       Next  </anchor>

The <go> element navigates to a specified URI that is required and then pushes the current URI onto the history stack.

You can also specify the HTTP Post or Get method used to send variables that are to be transmitted to the server as part of the URI request.

Here's the same example, the <a> element is used instead:

 <a href="card2.wml">Next</a>j

Here's how you can navigate to a card within the current deck by using the <anchor> element:

 <anchor>       <go href="#cardname"/>       Next  </anchor>

The # symbol refers to the name of an existing card in the current deck. (The card name itself doesn't have a # symbol).

Here's the same example, but the <a> element is used instead:

 <a href="#cardname">Next</a>

<a> Versus <anchor>

One of the main differences between <anchor> and <a> is that <anchor> must have an event or task assigned to it, but <a> can only have a URL for navigation.

Generally, if you are using a link for navigation purposes only, you should use the more compact <a> element; if, however, you need to do some processing after the link is selected, <anchor> must be used.

Remember that one of the goals in WML is to minimize the amount of data being sent to the client device. Because of this, you need to keep card names as small as possible.

Instead of using the <anchor> and <go> element pair, whenever possible, use the <a> element. WML also supports the HTML anchor tag, <a> , as a shortcut.

Listing 13.2 creates a simple <anchor> -based menu system that displays a new card based on the selection made. The new card being displayed is navigated by the <go> task element that references another card in the deck.

Listing 13.2 Creating a Simple <anchor> -Based Menu System

 <?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="SimpleMenu" title="Simple Menu">     <p>        <anchor>Option One  <go href="#OptionOne"/>        </anchor><br/>        <anchor>Option Two  <go href="#OptionTwo"/>        </anchor><br/>        <anchor>Option Three  <go href="#OptionThree"/>        </anchor><br/>     </p>  </card>  <card id="OptionOne">       <p>       Option One Selected!  </p>  </card>  <card id="OptionTwo">       <p>       Option Two Selected!  </p>  </card>  <card id="OptionThree">       <p>       Option Three Selected!  </p>  </card>  </wml>

Data Entry in WML

Data entry is handled by using the <input> and <select> elements.

Input elements enable the user to enter data. Listing 13.3 creates two input fields: one field takes some text and the other requires a password. The password is obscured by asterisks onscreen. The card is also bound to a <go> task element that links it to a card that displays the card contents using a <do> element.

Listing 13.3 Simple Example of a WML Data Entry Application

 <?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="Login" title="Login">    <p>    Email:<br/>    <input type="text" name="email"/><br/>    Password:<br/>    <input type="password" name="password"/><br/>    </p>    <do type="accept" label="Login">      <go href="#logmein"/>    </do>  </card>  <card id="logmein">    <p>    Email is: $(email)<br/>    Password is: $(password)<br/>    </p>  </card>  </wml>

Enter XHTML Basic

XHTML Basic is a vastly cut-down version of XHTML. It's been designed with the more limited abilities of mobile devices in mind.

One of the biggest weaknesses with existing mobile device development technologies is that they are either propriety and tied to a specific device (Palm OS or Windows CE, for example), or they do not provide much control over the rendering of a UI to a client browser (such as WML).

To deal with the growing amount of mobile devices in use and the complexity of their UIs, not to mention the ever-increasing difficulty in developing for more than one device type, and taking into account screen and user input restrictions, W3C submitted and got approval for the XHTML Basic Standard, which, according to the W3C Specification, states that:

"XHTML Basic defines a document type that is rich enough to be used for content authoring and precise document layout yet can be shared across different classes of device ”desktop, PDA, TV, and mobile handset. XHTML Basic is the mobile adaptation of XHTML 1.0, and includes everything in XHTML 1.0 except those capabilities that are not appropriate for devices with small screens, such as frames and the nesting of tables."

XHTML itself, according to the W3C, is the first big change to HTML since HTML 4.0 was released in 1997. Because the latest version of HTML (v.4.1) is the basis of XHTML, all common tag definitions and syntax are the same.

All XHTML does is simply add modularity and enforce strict XML-based language rules. XHTML brings a cleaner structure to web-page creation and content, which is important when you're developing for smaller screens and the limited power of mobile devices.

W3C is actively recommending XHTML for all future web development for desktop clients and all other devices, including mobile handsets.

W3C Activity on XHTML

According to the W3C's activity sheet on XHTML (www.w3.org/MarkUp/#xhtml- modularization ):

The first step was to reformulate HTML 4 in XML, which resulted in XHTML 1.0. By following the HTML Compatibility Guidelines set forth in Appendix C of the XHTML 1.0 Specification, XHTML 1.0 documents could be compatible with existing HTML user agents .

The next step is to modularize the elements and attributes into convenient collections for use in documents that combine XHTML with other tag sets. The modules are defined in Modularization of XHTML. XHTML Basic is an example of fairly minimal build of these modules and is targeted at mobile applications.

XHTML 1.1 is an example of a larger build of the modules, and avoids many of the presentation features. Although XHTML 1.1 looks similar to XHTML 1.0 Strict, it is designed to serve as the basis for future extended XHTML Family document types, and its modular design makes it easier to add other modules as needed or integrate itself into other markup languages. XHTML 1.1 plus MathML 2.0 document type is an example of such XHTML Family document type.

Because XHTML is one of the major incentives of W3C's effort to create standards, web developers can provide richer content on more platforms than ever.

By using XHTML Basic, content is easier to provide on various platforms and with more success in creating uniform (expected) content rendering.

In contrast, WML never guarantees a consistent look and feel to its applications because the mobile devices decide how to render its content in almost all cases. This causes many issues for mobile device developers for content, layout, and manipulation ( specifically those developing for mobile phones).

It's no surprise to discover that most mobile phone applications written in WML are no more than a collection of pages displaying raw text that use anchor links to navigate from page to page, and simple data entry based on either links or text-entry fields. Even then, the interface can differ substantially.

With XHTML Basic, there's a better solution. It's easier to get a more consistent UI with controls that are supported on most XHTML Basic-compliant devices (at the time of this writing, very few are on the market but plenty are planned).

What will happen to WML? Not much, probably, because XHTML Basic supports extensions that enable it to emulate WML. Also, newer versions of WML will have XHTML extensions. This is due to the fact that the W3C and the WAP Forum sanctioned XHTML Basic, which makes it a key part of the overall Internet standards. It also guarantees its widespread success in the market.

XHTML and Stylesheets

The key to XHTML Basics' ability to render UIs in a consistent manner lies in its support of Wireless Cascading Stylesheets (WCSS). XHTML Basic has no formatting ability; no <b> , <I> , <em> , or <u> elements exist, so you can only use simple-text rendering and layout options, such as tables. All other effects must be defined in a stylesheet that is linked to a main XHTML Basic file.

The W3C has actively promoted the use of CSS on the web for use with all desktop and mobile browsers. Through the usage of WCSS, XHTML Basic document developers can control the presentation of documents on a mobile device without loosing the ability to take advantage of each device's special characteristics.

WCSS is the mobile version of CSS, as defined by the WAP Forum. It is a subset of CSS that omits features inappropriate for small devices.

By using WCSS, a document developer can specify the presentation of an entire web application in one place: the stylesheet. If the developer needs to change the presentation at any time, the change is made once in the stylesheet and the modification is immediately applied throughout all the pages in the site that refer to that stylesheet. This enables web developers to easily create browser-specific versions of the same content by simply creating the appropriate stylesheet.

Using XHTML Basic

Now that you have an overview of XHTML Basic, it's time to see it in action.

Before going any further, look at Listing 13.4. It shows the basic structure of an XHTML Basic document.

Listing 13.4 The Basic Structure of an XHTML Basic Document

 <?xml version="1.0"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"  "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">      <head>          <title>XHTML Basic Document</title>        <!--         <link rel="stylesheet" href="style.css" type="text/css"/>          -->          <!-         <style> document-wide styles would go here </style>          -->      </head>      <body>          <p>       Body Text          </p>      </body>  </html>

The top two lines of code in Listing 13.4 are the document declarations for the XML version that's used and the stylesheet for the XHTML Basic document.

 <?xml version="1.0"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"       "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

The next line in the code is also important in XHTML Basic documents ”the <html> element:

 <html xmlns="http://www.w3.org/1999/xhtml">

The <html> element has an xmlns attribute defining the XHTML namespace. Without this namespace, the XHTML document is not valid.

The rest of the document is exactly the same as a regular HTML document, with one main difference: It is XML-compliant. This means that every tag must have a closing tag.

Tag Closings

Closing certain tags on some browsers can cause errors. For example,

<br> ” Becomes <br/>
<img> ” Becomes <img/>

Both of these instances cause errors on Netscape browsers. This can be easily fixed by inserting a space before the / on the closing tag. Here's the result of doing this:

<br> ”Becomes <br />
<img> ”Becomes <img />

To summarize, XHTML Basic is a subset of XHTML 1.0. XHTML Basic borrows syntax from HTML while following XML's well-formed rules. This creates a subset of HTML 4.0 that's targeted for mobile user agents. As such, the <script> tag and frames are not supported, as well as other features of HTML 4.0 that a desktop-based browser can support.