January 19, 2021
Hot Topics:

Learning WML - Navigation, User Input, and Graphics

  • By Steve Schafer
  • Send Email »
  • More Articles »

Graphics and Icons

The current generation of mobile devices includes very limited graphics capability. Most mobile browsers only support black-and-white bitmapped images, although a few recent browsers have added support for color and even animated formats (GIF, PNG, JPG). Some mobile gateways also perform on-the-fly conversions of graphics, most notably from BMP to WBMP.

Tip: Unless you are developing for a particular platform where you know the capabilities, use only small black-and-white WBMP graphics. Most graphics applications do not support the WBMP format, but several converters exist, including a Web-based converter at Teraflops (http://www.teraflops.com/wbmp/).

Note: Refrain from using graphics whenever possible; using graphics breaks the mobile application development rules of "fast" and "simple."

To create a graphic for mobile use you will need a graphics application that supports the WBMP format, or at least black-and-white bitmap format and a suitable converter. Drawing upon our earlier splash screen example, let's create a graphical logo for ACME.

To start, we need to choose a suitable size for the graphic. It's advisable to stick with a small size such as 100 x 100 pixels. The graphic shown in the following figure was created with the following steps (note that the options and procedure might differ in your graphics application):

  1. Create a new graphic, sized 80 x 80 pixels.
  2. Convert the graphic to black-and-white, or "line art."
  3. Select the appropriate background color (black or white) and fill the entire graphic.
  4. Use the text tool to create text in appropriate sizes and fonts (using the opposite color of the background).
  5. Save the results in GIF format.
  6. Use the online tool at Teraflops.com to convert the GIF to WBMP format.
  7. Upload the resulting graphic (acme.wbmp) to the Web server.

Tip: We advise using a graphics program that supports objects instead of straight bitmapped images. Graphics programs allow you to work with individual objectsmoving, sizing, etcbefore committing them to the electronic canvas.

The ACME Incorporated logo.

Images are added to WML cards using the <img> tag. This tag has the following syntax:

<img alt="alt-text" src="url" />

Note that the "alt" and "src" parameters are mandatory in all <img> tags. The <img> tag also supports the following optional parameters:

Parameter Use
localsrc Specifies an icon. (See the later section on icons.)
align Aligns the image relative to the current line of text. Supports "top," "middle," and "bottom."
height Specifies the exact height of the displayed image.
width Specifies the exact width of the displayed image.
hspace Specifies how much white space should be displayed at each side of the image (horizontal space).
vspace Specifies how much white space should be displayed above and below the image (vertical space).

Note: Not all mobile browsers support the sizing and spacing parameters.

Incorporating the logo into our previous splash screen example, we get the following result (see figure):

<?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="splash" title="Welcome!" ontimer="#main"><timer name="delay" value="50"/><p mode="wrap" align="center">     Welcome to<br/>     <img alt="ACME Incorporated" src="acme.wbmp" /></p></card><card id="main" title="Main Menu"><p>Main menu here...</p></card></wml>

Our new splash screen.

Image courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)

Icons are very small graphics to be used as highlights or ornamentation. Most mobile browsers support at least a limited number of icons. For the purposes of this discussion we will use icons supported by the Openwave browser. A full list of these icons can be found in the WML Language Reference documents on the Openwave developer site (http://developer.openwave.com).

Icons are placed as graphics, using the <img> tag and its "localsrc" attribute, along with the appropriate icon number(s). For example, a smiley face is icon number 68; it would be placed in the contents of a card with the following tag:

<img alt=":-)" src="" localsrc="68" />

Note that the "alt" and "src" tags are mandatory, even if left blank.

Tip: When using icons for ornamentation, be sure to specify alternate text that can serve the same purpose or that resembles the icon.

Let's suppose that ACME is a travel agency. We could add an airplane icon to the bottom of the splash screen with this tag (see figure):

<img alt="airplane" src="" localsrc="168" />

Our new splash screen complete with airplane icon.

Image courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)

Tip: Because the WML language is fairly limited for emphasizing text, consider using icons such as triangles (icons 5-8) to draw attention to specific text. For example, this code is used to call attention to the fact that the user has reached the end of an article:

  <img alt="--" src="" localsrc="righttri1" />  End  <img alt="--" src="" localsrc="lefttri1" />

Next Time

The next article in this series will cover variables, passing values between decks, and beginning WMLScript coding.

About the Author

Steve Schafer is president and CEO of Progeny Linux Systems, a Linux-based consulting company in Indianapolis, Indiana. He has written several technical books and articles and can be reached at sschafer@synergy-tech.com.

# # #

Page 4 of 4

This article was originally published on July 24, 2002

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date