- Wireless Markup Language
- A Deck of Cards
- Layout and Presentation
- Navigation
- Links
- Input
- A Note on Examples
Layout and Presentation
WML provides several alternatives for card layout. The <p></p> tags define a standard paragraph with attributes providing options for word wrap (mode="wrap" or "nowrap") and paragraph alignment (align="left," "right," or "center"). The default text alignment is left, and default word wrap is that of the previous paragraph. Just about anything goes within a paragraph, including text, line breaks, text emphasis (e.g., bold and italic), tables, images, and various navigation tags.
Text may be any character data except XML-reserved characters, such as angle brackets and ampersands. Because WML makes use of the dollar sign ($), it must be escaped with a second dollar sign ($$) in order for a dollar sign character to appear in text.
Placing the Right Emphasis
Text can be spiced up by using emphasis tags and line breaks. Line breaks are inserted into text using the <br/> tag. Note that this is an empty tag; unlike HTML, WML requires you to explicitly terminate the "br" with a forward slash. Emphasis tags enable you to change the appearance of text. These tags are similar to those available in HTML and include <em> for emphasis, <I> for italics, and so on. The WML specification recommends the use of <strong> and <em> elements because these are likely to be supported on most devices.
Additional Layout
Let's extend our first deck by adding some text, paragraph alignment, line feeds, and emphasis:
<wml>
<card>
<p align="center">
<strong>Health Inspection</strong><br/>
<em>*Notices*</em><br/>
<i>Note that the annual
charity bake sale will
be held next Friday at
noon.</i>
</p>
</card>
</wml>
Figure 2 shows our WML rendered by the Phone.com user agent. Note that it supports italic emphasis, but doesn't distinguish between <em> and <strong>.
){kind=link}
Some Text Emphasis and Layout
Tables
WML, like HTML, supports tables. But before you get too excited, remember that the average mobile phone has a screen size of less than one percent of desktop displays. This limits tables to 2-3 columns on most devices. Of course, it's possible to send wider tables to these devices, but the end result will be device-dependent. Some user agents may scramble large tables and older browsers may not support tables at all, so beware.
Tables also have limits not encountered in HTML. Table nesting is not allowed, and each table must explicitly define its column size via the columns attribute (e.g., columns="2") where the number of columns must be greater than zero.
As in HTML, table rows and columns are specified using <tr> and <td>. A table must contain at least one row, and each row must contain at least one column. Figure 3 displays a card with a simple two-column table that lists some inspection categories that a health inspector might encounter and provides a code for each.
){kind=link}
<wml>
<card>
<p mode="nowrap">
<strong>Categories</strong>
<table columns="2">
<tr><td>Code</td><td>Description</td></tr>
<tr><td>S</td><td>Staff</td></tr>
<tr><td>F</td><td>Food</td></tr>
<tr><td>P</td><td>Premises</td></tr>
<tr><td>A</td><td>Animals and Pests</td></tr>
</table>
</p>
</card>
</wml>
A Two-Column Table
Note in Figure 3 that the last table row is not completely displayed. Because we did not specify word wrapping, the description of "Animals and Pests" exceeds the display. Our Phone.com user agent resolves this by presenting the data using a banner-like display, alternating the text that makes up the row content. It is important to note that had we omitted the columns table attribute, the WML deck would be invalid and we'd get a WML syntax error message.
Picture Perfect
WAP supports images, but not the good-looking JPEGs and GIFs we've grown accustomed to on the Web. Instead, the current version of WAP supports Wireless Bitmaps (WBMP), which provide basic monochrome image display.
Images may be inserted into paragraphs, table columns, or links using the <img> tag. Attributes specify image location, layout options, and what text to display if images are not supported. The alternate attribute (e.g., alt="My Image") must be provided both for user agents that do not support images and to provide backup in case there's an error in retrieving an image.
Two possible sources exist for wireless bitmaps[md]a server URL and a client-side "local source" URL. The server-side URL is specified in the form src="my_image.wbmp" and is a required attribute. The client-side URL is specified using the localsrc attribute (e.g., localsrc="paperclip") If supplied, this vendor-dependent attribute overrides the src attribute.
Image layout options include physical size, surrounding white space (relative to the display size), and image alignment relative to the card. Images can appear above, below, or in the middle of an insertion point. Size is defined by height and width attributes defined as percentage of screen size (e.g., height="50%" width="80%").
<wml>
<card>
<p>
<strong>Health Inspection</strong><br/>
<img src="health.wbmp" alt="Health" align="middle"/>
</p>
</card>
</wml>
){kind=link}
Use of an Image
Converters are available, both online and stand-alone, to transform BMPs, JPEGs, and GIFs into the wireless bitmap format. An online converter may be found at www.teraflops.com/wbmp. In addition, a program called Bmp2wbmp.exe is available for Windows, and plug-ins for Adobe Photoshop and JASC Paint Shop Pro are freely downloadable.