WML PROGRAMMING TUTORIAL – PART 1 OF 3

Prepared for

CmpE 296A – Design of Mobile Based Software Systems

Guided by

Dr. Jerry Gao

Prepared By

Bharghavi Shree
Lahary Ravuri
Mansi Modak

1 WML Programming
Tutorial - Part 1 of 3
Upon completion of the first tutorial you will familiar with the following:

• Introduction to WML

• What WML is about and how to use it within the WAP applications

• Similarities and differences between WML and other markup languages

• WML terminology

• WML structure and syntax

• WAP Design Considerations

• Text Formatting

• Creating paragraphs with the p Element

• Setting line wrap mode

• Setting text alignment

• Incorporating Line Breaks with br Element

• Incorporating Text Styles

• Working with Images

• Bandwidth

• Screen size

• The wireless bitmap format

• The IMG Element

• Creating an application with the WBMP format

• Practice Questions

• Screen shots of the Examples and the Practice Questions

2 WML Programming
Tutorial - Part 1 of 3
 Introduction to WML

What is WML?

WML is a markup language. It is compact, works quickly and efficiently. These

attributes make WML a perfect language for WAP development. The WAP Forum
(http://www.wapforum.org) originally developed the WML language. WML is an
HTML type formatting language that has been defined as XML document type and
which is optimized for small screens and limited memory capacity.

Similarities and differences between WML and other markup

languages

A major difference between the implementations of WML and HTML languages is that
the original ASCII based WML code is converted to binary code in the gateway
server, before being forwarded to WAP device. The syntax of WML language is very
similar to the first versions of HTML language except for the option of passing
parameters using card and deck variables.

WML Terminology

In WAP development, a screen is known as a card. A collection of cards is known as

a deck.

WML Decks

The purpose of the WML deck is to deliver more than one card to a WAP device at
one time. Users can then navigate small portions of the WML enabled applications
without waiting for each individual navigation action.

WML Cards

WML cards provide the structure of a WAP application. WML cards define how
information displays on a device and how the user can navigate through an
application. Because of this responsibility, a WML card can never be empty. WML
cards must contain at least one WML element.

WML Structure and Syntax

The following are three important areas in regard to WML syntax:

• WML document prologue

• WML character sets
• WML case sensitivity

3 WML Programming
Tutorial - Part 1 of 3
WML Document Prologue

Every WML deck you write must contain a document prologue. Compilers on the
device, WAP gateways, and remote servers all use document prologues to interpret
your code. Developers must include the XML document prologue at the top of every
WML deck:

1. <?xml version=”1.0>
2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
3. “http://www.wapforum.org/DTD/wml_1.1.xml”>

Be aware of the use of spaces in the document prologue. A WML deck

produces errors if the document prologue does not include correct use of spacing and
punctuation.

The following is a line-by-line explanation of the document prologue:

The first line designates the XML version of the WAP server and WML compiler. WAP
servers and WML compilers use XML to interpret your code. These servers and
compilers then transform this information back into WML, so that a WAP device can
display the information.
The second line defines the version of WML used. This states that you will use WML
version 1.1 within your applications.

In the document protocol the XML and WML versions are not the most
current. The reason for this is that not all WAP enabled devices support the latest
versions of these languages. Unless you are writing an application for specific device,
use the language versions specified in this prologue.

The third line specifies the location of the WML document type definition (DTD). Any
additional extensions or information for the WAP server or compiler are available
from this site.

WML Character Sets

Character sets are the built-in methods for handling text characters. They represent
letters and symbols specific to several languages. WML supports the character set of
ISO-10646 (Unicode 2.0). Because this character set is the default for WML, you
don’t need to declare it within your WML decks.

WML Case Sensitivity

4 WML Programming
Tutorial - Part 1 of 3
WML is a precise language when it comes to case sensitivity. Character case does
matter in WML. The basic rule of WML case sensitivity is that all tags and attributes
must be lower case. For example, name1 and NAME1 are different variables.

Most programming errors tend to deal with problems with character case. As a
rule of thumb if your code doesn’t work check for the correct use of character case.

WAP Design Considerations

When developing any type of WAP applications, keep in mind that WAP devices
contain limited network bandwidth capabilities and memory compared to a PC.

The following are few tips to keep in mind when creating WAP applications:

• Keep WML decks and images to less than 1.5KB

• Avoid overuse of images
• Use simple and brief text within the applications if possible

WML Text Formatting

WML provides the capability to control the look and feel of how text displays for
users.

Creating Paragraphs with the p Element

The p element is an important aspect of WAP development because it controls how

all text displays on a WAP device screen. The p element uses two attributes that
enable you to define the alignment of the text as well as its wrapping properties.

Although all WAP applications require some amount of text you must use
caution. Large amounts of text result in a lot of scrolling and frustration for users.

5 WML Programming
Tutorial - Part 1 of 3
The table below summarizes the attributes:

Attribute Required Description

align No Specifies the line
alignment relative to the
display area. If no value
is specified the align
attribute defaults the line
to left alignment. This
attribute can be equal to
left, right and center.
mode No Specifies whether the
display should
automatically wrap or
split text so that it is
always viewable from the
display. The “no wrap”
value uses another
mechanism such as
horizontal scrolling to
display long lines of text.
The default value is
“wrap”.

Wrapping means the device spills extra text onto subsequent lines in the
display. Scrolling the line from left to right is not necessary.

Setting Line Wrap Mode

1. <? xml version="1.0"?>

2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
3."http://www.wapforum.org/DTD/wml_1.1.xml">
4. <wml>
5. <card id="para" title="para">
6. <p>Welcome to WML Programming tutorial part1 </p>
7. <p mode="nowrap">
8. This text will not wrap hence requires scrolling
9. </p>
10. </card>
11. </wml>

6 WML Programming
Tutorial - Part 1 of 3
The sixth line uses the p element to begin the paragraph of the text. By default, the
text aligns left and wraps, since no other attributes have been set.
The line seven uses the p element to begin the paragraph of the text, the attribute
mode has been set to “nowrap” hence the lines of the text will not wrap rather the
device automatically scrolls horizontally to display the entire line of text.

Setting Text Alignment

The line attribute enables you to set your text alignment either to left, center or
right. The default text alignment is to the left.

1. <?xml version = "1.0"?>

2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
3. "http://www.wapforum.org//DTD/wml_1.1.xml">
4. <wml>
5. <card id="align" title="Align">
6. <p > Line 1 uses the default left alignment </p>
7. <p align="center" > Line 2 uses the center alignment </p>
8. <p align="right" > Line 3 uses the right alignment </p>
9. </card>
10. </wml>

In the sixth line we haven’t the set align attribute, hence by default it is aligned left.
In the seventh line we have set the align attribute to center so the text is aligned to
the center.
In the eight line we have set the align attribute to right so the text is aligned to the
left.

Incorporating Line Breaks with br Element

The br element forces the insertion of line breaks into the text. The br element is
easy to use since it contains no attributes.

1. <?xml version = “1.0”?>

2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
3. “http://www.wapforum.org//DTD/wml_1.1.xml”>
4. <wml>
5. <card id=”break” title=”Break”>
6. <p>Welcome to San Jose State University <br/>
7. This will be on a new line </p>
8. </card>
9. </wml>

The sixth line uses br element hence the text on the seventh line will be displayed on
a new line.

7 WML Programming
Tutorial - Part 1 of 3
 In the above example line 6 ,7 and 8 could have also been written as
follows:

<p>Welcome to San Jose State University <br/> This will be on a new line
</p>

Writing lines 6-8 this manner would have produced the same result because the only
way to force the text to separate into lines is through the br element. If you do not
use br to designate where the lines should break, the text wraps as defined by the
confines of the device screen.

Incorporating Text Styles

In this section we discuss how WML offers a number of elements that enable you to
define the font style of your text. The font styles include bold, italic, and underline
effects.

Element Description Syntax

B Creates a bold font <b> content </b>
BIG Creates a big font <big> content </big>
EM Creates emphasis on the <em> content </em>
font
I Creates italicized text <i> content </i>
SMALL Creates a small font <small> content
</small>
STRONG Creates a strong <strong> content
emphasis on the font </strong>
U Creates an underlined <u> content </u>
text

None of these elements contain attributes. However you can combine several of
these elements to create combinations of styles.

1.<?xml version = “1.0”?>

2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
3. “http://www.wapforum.org//DTD/wml_1.1.xml”>
4. <wml>
5. <card id=”style” title=”Styles”>
6. <p>
7. Regular font style <br/>
8. <b> Bold font style </b><br/>
9. <big> Big font style </big><br/>
10. <em> Emphasize font style </em><br/>
11. <i> Italicized text </i><br/>
12. <small> Small font style </small><br/>
13. <strong> Strong font style </strong><br/>
14. <u> Underlined font style </u><br/>
15. </p>

8 WML Programming
Tutorial - Part 1 of 3
 16. </card>
17. </wml>

Lines 7 to 13 designate the use of font style elements within a p element.

If a device does not recognize a style, it usually ignores the unrecognizable

style and uses the default style in its place.

Working with Images

Because text space is limited with WAP devices, images are useful means to
communicate ideas in the smallest space possible. Most microbrowsers support
bitmap (.bmp) images, but some support only wireless bitmap (.wmbp) images. In
application development, the first law of using images is use images only to enhance
an application. If an image looks great but ends up limiting the application in some
way you should not use the image.

Developmental Limitations of WAP Devices

In case of WAP devices, too main limitations must be taken into consideration. These
limitations are bandwidth and screen size.

Bandwidth

WAP device bandwidth is expressed in bits per second (bps). The average bandwidth
for wireless devices in the United States is around 9600 KBps.

One Kbps is 1000 bits per second, whereas one KBps (kilobyte) 1024 bytes
per second. We are talking in terms of KBps.

Transferring data to WAP devices is slower than transferring data to PCs. Because of
this data transferred to wireless devices should be small – text data being the
smallest and easiest type of data to transfer.

If you do decide that images are right for your application and you have determined
that they wont affect application efficiency, its time to consider the second factor of
images: screen size.

Screen Size

Most WAP devices allow only 4 to 10 lines of text to display without scrolling. Ideally,
users should need to scroll as little as possible.

Wireless applications and WML do not yet provide the functionality to set image
sizes, although the specifications have been set in the language.

9 WML Programming
Tutorial - Part 1 of 3
 A good rule of thumb for your images is 96 x 14 metrics on a WAP phone.
However, if you are developing WAP applications for other types of WAP devices, the
size and shape of your images might differ.

The Wireless Bitmap Format

Currently, the wireless bitmap format (also known as WBMP) is the only graphical
format supported by wireless devices. Most WAP browsers support images. If a
browser does not support images, it won’t display the image. In other words, the
browser will ignore the image.
To create (or convert) an image into the WMBP format, an image conversion tool is
required.

Image Conversion Options

The conversion of any graphical format is made possible by a process called

dithering. Essentially, dithering changes the way a user device interprets
monochrome colors. Several tools are available for converting existing graphics into
the WMBP format, ranging from desktop software to plug-ins available for popular
graphic software programs, to online sites that provide the necessary tools.

Image Conversion Desktop Tools

With image conversion desktop tools, you must first download the software from the
Internet. WAPPictus is an excellent product produced by Check It. WAPPictus is an
excellent freeware program that enables users to convert existing standard graphics
into a WBMP format.

Examples of desktop image conversion programs are:

1. Image Magick (http://www.imagemagick.org)

2. WAPDraw (http://www.hit-solutions.fi/wapdraw/)
3. WAPPictus (http://www.checkit.cz/engl)
4. Wap Tiger (http://wap.infotiger.de/download.html)

Online Image Converters

Online converters are web pages that enable you to select an image from your
computer. The web page then converts the image into a WMBP format, allowing you
to save this new format wherever you want. The advantage of using online image
converters is that the software isn’t required for installation onto your PC. The
disadvantage though, is that you must be online to use these tools.

Examples of online image converters:

1. Applepie Online Image Converter (http://www.applepiesolutions.com)

2. Dwbmp (http://www.morpheme.co.uk)
3. WAP Tiger Online Converter (http://www.waptiger.de/bmp2wbmp/)

10 WML Programming
Tutorial - Part 1 of 3
Image Conversion Plug-Ins

Image plug-ins are additional pieces of software added to a larger software product.
In the case of these plug-ins, they add image conversion functionality for the WMBP
format.

Examples of image conversion plug-ins:

1. Photoshop and/or paintshop plug-ins (for Windows) (http://www.rcp.co.uk)

2. Photoshop plug-ins (for Macintosh) (http://www.creationflux.com)

Image conversion plug-ins requires a base commercial software program

such as Photoshop installed on your computer.

The IMG Element

To display images within your WAP applications, you must use the IMG element,
which contains several attributes used to enhance the way images display on a WAP
device.

Not all device browsers support all the attributes of the IMG element.

The attributes of the IMG Element:

Attribute Required? Description

align No Represents where the
image is aligned. The
available entries are top,
middle, and bottom.
alt Yes Specifies the text that
displays if the device has
a problem displaying the
image
height No Represents a height
setting for the image.
Several devices do not
support this attribute
hspace No Represents the amount of
empty space to the left or
right of the image. The
default setting for this
attribute is 0
localsrc No Represents the name of a
known icon that exits

11 WML Programming
Tutorial - Part 1 of 3
 within the device’s
browser. If a localsrc icon
is used, users must
include the localsrc
attribute in their code
src Yes Specifies the URL of the
image displayed.
vspace No Represents the amount of
empty space above or
below the image. Several
devices do not support
this attribute.
width No Represents width setting
for the image. Several
images do not support
this attribute.

When using images or icons you should test their appearance on a variety of
devices. Different devices display both icons and images differently.

Creating an Application with the WBMP format

Creating a Logo Image

You can perform the following steps to create a logo in the BMP format:

1. Go to the Start menu, and select Start, Programs, Accessories, Paint. The
Microsoft Paint program executes.

The path to select the Microsoft Paint program can offer depends on the
operating system.

2. After Microsoft Paint is open, create a logo that you want.

3. Save the image. Be sure the image file type is set to some sort of BMP
format. You should try to save the BMP as a 16-color bitmap, a 256-color
bitmap, or a 24-bit bitmap for good resolution.

Converting the Image into a WBMP Format

We have chosen to use the wmbp converter from Applepie Solutions. The following
are the steps for converting an online gif to the wmbp format. You can choose to use
any logo you have on your desktop or any other .gif file or .bmp. We have chosen to
use the SJSU logo.

12 WML Programming
Tutorial - Part 1 of 3
 1. Go to: http://www.applepiesolutions.com/image2.wbmp/
2. Enter URL for image as
http://www.sjsu.edu/graphics/sjsu_100.gif
3. Save the wbmp file in htdocs folder.

Configuring Apache

You may need to configure your Apache server to see the images in the wbmp
format images. Recent versions of Apache can be entirely configured through the file
httpd.conf, which is typically located in the apache/conf/ directory, wherever Apache
is installed on the server. If you open httpd.conf in a text editor, you can scroll
through and view the many, many Apache configuration directives. Ultimately, you
will find a section where MIME types are declared. In the default Apache httpd.conf
file, this section begins as follows (though it may vary slightly depending on the
installation):

#
# AddType allows you to tweak mime.types without actually editing it, or to
# make certain files to be certain types.
#
# For example, the PHP3 module (not part of the Apache distribution)
# will typically use:
#
#AddType application/x-httpd-php3 .phtml
#AddType application/x-httpd-php3-source .phps

AddType application/x-tar .tgz

While not strictly necessary, this is a good and logical place to add WML types to
Apache. So, we simply pasted the following lines to our httpd.conf file just after the
last line above:

#WML/WAP types
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

The basic WML file is delivered to the browser with MIME type text/vnd.wap.wml. In
the statement above, we have told Apache to delivery this MIME type whenever the
filename ends in the extension .wml. Similarly, appropriate MIME types are passed
for other WML variants. The .wmlc files would be compressed WML files, while .wmls
and .wmlsc represent WMLScript (a wireless scripting language) and compressed
WMLScript, respectively. Furthermore, .wbmp files represent wireless bitmap files or
WBMP, the graphic format that wireless devices support (as opposed to, for example,
.gif or .jpg on desktop browsers).

Changes to the Apache httpd.conf file take effect only when the server is launched,
so the server must be restarted to save the above changes for the new MIME types

13 WML Programming
Tutorial - Part 1 of 3
to apply. Once done though, Apache is ready to go, and will happily deliver WML and
related files to a wireless device.

Creating an application with the wmbp format

To get an idea of how to incorporate images into your WAP applications, let us create
a title page (also known in the development world as a splash page).

1. <?xml version = "1.0"?>

2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
3. "http://www.wapforum.org//DTD/wml_1.1.xml">
4. <wml>
5. <card id="title" title="title">
6. <p align="center"> Tutorial part-1
7. <img src="sjsu.wmbp" alt="sjsu.wmbp" />
8. </p>
9. </card>
10. </wml>

The fifth line begins card that acts as the applications title page.
The sixth line begins a paragraph that holds the logo image and additional text
included within the splash page.
The seventh line uses the IMG element to include a logo image within this card.
The IMG element uses the src attribute, set equal to a file named logo.wbmp. This
image is to be included within the same location as our wml file.
The IMG element also includes the required alt attribute. This attribute must be text,
and it displays if the device can’t display the image.

Practice Exercises

1. Display a formatted text using the text formatting elements discussed in

this tutorial.

What is WML?
WML stands for Wireless Markup Language.
It is a mark-up language inherited from HTML, but WML is based on XML,
so it is much stricter than HTML.
WML is used to create pages that can be displayed in a WAP browser.

The above five lines of text is to be displayed as follows:

• All sentences should begin on a new line.
• Line 1 should be italicized and aligned right.
• Line 2 should be aligned center and should be in bold.
• Line 3 should be aligned left and should not be in wrapped format.
• Line 4 should be wrapped and text should have small font style and
underlined.

14 WML Programming
Tutorial - Part 1 of 3
 2. Write a WML programming to display Applepie Solution’s logo in the
center of the Nokia browser using elements such as hspace, vspace, and
align wherever necessary.

Use the following URL for the image:

http://www.applepiesolutions.com/pics/applepielogo85.gif

Screen Shots of the Examples in the Tutorial

Example 1:

15 WML Programming
Tutorial - Part 1 of 3
Example 2:

16 WML Programming
Tutorial - Part 1 of 3
Example 3:

17 WML Programming
Tutorial - Part 1 of 3
Example 4:

18 WML Programming
Tutorial - Part 1 of 3
Example 5:

19 WML Programming
Tutorial - Part 1 of 3
 Screen Shots of the Practice Questions

Practice Question 1:

20 WML Programming
Tutorial - Part 1 of 3
Practice Question 2:

21 WML Programming
Tutorial - Part 1 of 3
References:

• Deitel, Deitel, Neito, and Steinbuhler, Wireless Internet and

Mobile Business-How to Program, Prentice Hall, 2002.
• LinuxMAX 2000, http://www.linuxmax.net/news/00133.html
• OpenWave Systems , December 2000,
http://developer.openwave.com/htmldoc/41/devguide/index.html
• Pekka, Nishkanen, Inside WAP Programming Applications with
WML and WML Script, Addison-Wesley, November 2000.
• Tull, Chris, WAP 2.0 Development, QUE, Indiana, 2002.

22 WML Programming
Tutorial - Part 1 of 3