Unit III: Fundamental of WML (AGM)

Unit III: Fundamental of WML

Introduction
What is WML?
WML Basics
WML Decks and Cards
Displaying Images & Tables
Working with user inputs
WML Script

3.1 Introduction:

The Wireless Markup Language (WML) is a simple markup language that was designed
exclusively for the purpose of creating applications to be sent over wireless networks to
WAP -enabled mobile devices. WML is an open standard and was developed by the
WAP forum and the WML specification forms a part of the broader WAP specification.
WML is an application of XML. WML has some distinct differences from other markup
languages, for instance HTML. WML looks quite like HTML, but there is a significant
difference between them. HTML is mainly used for creating documents, which in turn
are being designed to display information. But WML is being used for creating
applications, which are designed for user interaction.

There is one more important difference. Basically, Web contents are being accessed
from powerful desktop computing systems that have bigger displays and fast, cheap,
reliable wired network connections. The web browser is a sophisticated software
package that offers a number of flexible and convenient features for the viewers. But
wireless network connections are unreliable, slow and expensive and the micro
browsers that are fitted in WAP-enabled mobile devices have very small displays, which
in a way makes receiving and sending information inconvenient. Considering the
limitations of mobile devices and the wireless networks, WML has to be designed in
such a way that it offsets many of those limitations.

3.2 What is WML?

WML is an acronym for Wireless Markup Language. While the HTML language creates
web pages for the PCs, the WML creates web pages for the handheld devices. WML’s
similarity to HTML was not random. The structure, formatting, and syntax are
immediately recognizable to those familiar with HTML and XML. WML is a direct
descendent of Handheld Device Markup Language (HDML). WML, however, has been
optimized for the constraint wireless device. As a result, there is a prominent difference
between HTML and WML. Wireless Markup Language (WML), based on XML, is a
markup language intended for devices that implement the Wireless Application
Protocol (WAP) specification, such as mobile phones. It provides navigational support,
data input, hyperlinks, text and image presentation, and forms, much like HTML
(HyperText Markup Language). WML is a markup language designed especially for
specifying and displaying content on WAP (Wireless Application Protocol) devices.
WML is the wireless equivalent of HTML for the Web.

1|Page
 Unit III: Fundamental of WML (AGM)

WML is based on XML and derived from xHTML (the XML version of HTML). There
are many differences between WML and HTML. For example, WML has a different
mechanism for linking between its pages called “cards” as compared to linking between
HTML pages. WML browsers are stricter than HTML browsers by not being tolerant of
errors. WML browsers enforce the WML requirement of matching closing “tags”, an
XML characteristic.

WML works with the WAP micro browsers found on WAP devices. This browser is
cognizant of the limited capabilities of WAP devices such as
❖ small displays,
❖ limited processing power,
❖ limited memory,
❖ narrow bandwidth connection, and
❖ limited battery use without recharging.

To address the limitations of WAP devices, WML uses the metaphor of card decks, and
each page is referred to as a card. The card is the basic unit of navigation and user
interface. The user can view only card at a time. WML browsers read the whole deck
(complete document) from the server to minimize interaction with the server.
Consequently, when flipping (navigating) between the cards in a deck, the browser does
not contact the server. This eliminates delays (because each card contains very little text
and users are likely to move quickly from one card to another).

A WAP deck is the equivalent of a Web page, the card being the portion of the Web
page that can be seen on the screen. Navigation within the cards of a deck is done within
the WAP device just as scrolling a Web page is done within the Web device. (Without
contacting servers in both cases). An HTML writer does not worry about screen or
display boundaries. Instead, the Web browser manages issues relating to the screen
boundaries. But a WML writer must be aware of screen boundaries of WAP devices
when writing code for cards

3.3 WML Basics:

WML requires a micro browser to interpret the various commands necessary to render
a document, or “deck” as WML documents are called. These browsers are usually
embedded in the mobile device. Cards and Decks are the two main parts in an WML
application. WML applications are composed of one or more decks, which are
containers of collections of cards. Each card typically contains some content, such as
text and images that are displayed to the user, and some other content that is used by
the micro browser to control how the user moves from one card to the next. Also, a card
may contain input fields for the user to enter data as we have the form functionality
using HTML in web browsers. WAP-enabled devices will display a single card at a time.
If a card is too large to fit the display all at once, the device may split the card and show
it as a sequence of screens or use some mechanism such as scroll bars.

Normally, a WML card is similar to an HTML page, but there is no way in HTML for
bundling a collection of pages together. This distinct facility being offered by WML

2|Page
 Unit III: Fundamental of WML (AGM)

decks is more important for wireless Internet applications. That is, by combining related
cards, several cards can be sent to micro-browsers at the same time. This has the
potential of saving a great deal of time and by designing applications intelligently, it is
feasible to reduce the number of decks to be passed to devices. If deck is too large, the
wireless application developer has to split it up in the most logical way.

Since WML is an application of XML, it has to start with a document prolog. The prolog
states that the particular WML belongs to which version of XML and the gives the
location of the document type definition against which this document will be validated.
The DTD contains information about the syntax of the markup language. It defines what
elements and attributes can be used in the markup and the rules that they should be
used. There will be only one deck per document. The element defines a WML deck and
there will be beginning and ending tags for each deck. There should be at least one card
per deck. A deck also can contain elements and elements. The paragraph element <p>
is being used to mark data in WML for output. As it is a wireless network, the data
transfer size has to be very minimum. Towards this, WML documents from the content
server have to be compiled into smaller binary file. This process of compilation is being
accomplished by the intermediate WAP Gateway. The compiled binary file is called
WAP binary XML (WBXML). The compilation of WML files is mostly a process of
tokenization, in which the names of the tags and elements in the WML files are replaced
by predefined, single-character codes. This technique drastically reduces the size of
each WML document. When the compiled deck reaches the micro-browser, the reverse
process has to be done by the micro-browser to bring the original document in the
content server.

3.4 WML Decks and Cards

WML pages are called DECKS. They are constructed as a set of CARDS, related to each
other with links. When a WML page is accessed from a mobile phone, all the cards in
the page are downloaded from the WAP server.

The WML programming model offers for

❖ Application navigation (cards and decks)
❖ User interaction, events
❖ Definition of tasks, work to be performed

Writing WML Code and Data Formatting

<?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=”WML” title=”WML Tutorial”>
<p>Welcome to WML Tutorial.</p>
</card>
</wml>

3|Page
 Unit III: Fundamental of WML (AGM)

As it can be seen from the example, the WML document is an XML document. The
DOCTYPE is defined to be wml, and the DTD is accessed at
www.wapforum.org/DTD/wml_1.1.xml. The document content is inside the
<wml>...</wml> tags. Each card in the document is inside <card>...</card> tags, and
actual paragraphs are inside <p>...</p> tags. Each card element has an id and a title.

3.4.1 Creating First Card

The whole WML-page is called a Deck and it consists of one or more cards. Each card
contains the information that is displayed on the cellular devices in one screen. Cellular
device displays first card when it receives a Deck. And in first card using elements and
attributes we can define our navigational structure between different cards.

Let’s create our first application. So, here is the code of our 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=”Card1" title=”Learning WML “>
<p>Welcome to Mobile Computing! </p>
</card>
</wml>

In any WML application first three line is must and it contains the XML and document
type declaration. After XML and document type declaration WML deck start with
<wml> and ends with </wml> tags. Each deck may contain one or more cards. First card
of WML page is displayed by the cellular device and this card provides the links to other
cards of deck. WML card starts with <card>and ends with </card> tag.

Attribute “id” of card element gives the identity to the card and using this id we can
refer any card in the WML page. Next is <p> tag which we are using to display the
paragraph. We can use <p>, <b>, <i>, <br>, <a> in programming and these tags are
identical to the HTML tags.

4|Page
 Unit III: Fundamental of WML (AGM)

3.4.2 Building Decks of Cards

WML pages are often called “decks”. A deck contains a set of cards. A card element can
contain text, markup, links, input-fields, tasks, images and more. Cards can be related
to each other with links. When a WML page is accessed from a mobile phone, all the
cards in the page are downloaded from the WAP server. Navigation between the cards
is done by phone computer - inside the phone - without any extra access trips to server:

<?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="no1" title="Card 1">
<p>Hello World!</p>
</card>
<card id="no2" title="Card 2">
<p>Welcome to our WAP Tutorial!</p>
</card>
</wml>

The result MIGHT look like this in your mobile phone display (note that only one card
is displayed at a time):

——— Card 1 ———

Hello World!
Card

It is a single unit of WML navigation, which often directs to one screen of viewed
content but could work on a step that is not displayed.

Some important points about a deck are highlighted below.

❖ It is analogous to an HTML page in that it is the unit of content transmission.
❖ Decks are to WML identical as documents are to HTML.
❖ WML decks are XML documents.
❖ Decks send requests for services and/or to be carried out on servers.
❖ Decks comprises of component known as “cards”.
❖ Each deck must have at least one card.

The device browser accesses and open a deck and reads the cards within the deck.
Navigation traverses from card within a deck. Once loaded, the deck resides in device’s
memory. Each deck starts with the <wml> tag and ends with the </wml> tag. Within
these decks, every card starts with the <card> tag and ends with the </card> tag.

5|Page
 Unit III: Fundamental of WML (AGM)

3.4.3 Card Navigation

1. Using <a>…</a>
The <a> tag defines an anchor (a link), which allows you to jump from one card/deck to
another. Whenever it is possible, use the <a> tag instead of the <anchor> tag. It is not
allowed to nest anchors. Its Syntax is as follows:

<a href="somefile">
..text..
..image..
</a>

Examples
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="A Tag">
<p>
<a href="test.wml">Next page</a>
</p>
</card>
</wml>

2. Using <anchor>…</anchor>

The <anchor> tag defines an anchor (a link), which allows you to jump from one
card/deck to another. The <anchor> tag always has a task ("go", "prev", or "refresh")
specified. The task defines what to do when the user selects the link. The <go> element
is used to specify a navigation action that occurs as a result of an event. The <go>
supports a number of attributes. When used with the <anchor> element to perform
simple navigation, the <go> element has the following general form:

<anchor>
content
<go href=”destination” />
</anchor>

The <anchor> element offers the ability to navigate to the previous card. This is being
achieved by the <prev> element. The <card> element encloses a WML card within a
deck. Anchor links enable the navigation between different WML cards. If you select an
anchor link, you will be brought to another WML card in the current deck or in another
deck. The <anchor></anchor> tag pair is used to create an anchor link. It is used
together with tags such as <go/> and <prev/>, which tell WAP browsers what to do
when a user selects the anchor link. <go/> and <prev/> should be enclosed within the
<anchor></anchor> tags, like this:

6|Page
 Unit III: Fundamental of WML (AGM)

<anchor>
<go href=”...” ... />
</anchor>
<anchor>
<prev/>
</anchor>

Like HTML, WML uses a URL (Uniform Resource Locator) to refer to the location of a
WML file or a card in a deck. The href attribute of the <go/> tag is used to specify the
URL. Both absolute and relative URLs are accepted. URLs in WML have the same form
as those in HTML. The protocol used in WML URLs is HTTP. The reason is that WAP
gateways request WML files from ordinary web servers using the HTTP protocol,
although wireless devices communicate with WAP gateways using WAP protocols.

Example:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Anchor Tag">
<p>
<anchor>Next page
<go href="test.wml"/>
</anchor>
</p>
</card>
</wml>

3.5 Displaying Images & Tables

A] Images in WML:

The <img> tag is used to add an image to a WML card. This is the same as in HTML.
WAP browsers will display the text assigned to the alt attribute of the <img> tag if it
cannot display the image for reasons such as file not found or image format not
supported. The URL of the image file is specified with the src attribute. The height and
width attributes of the <img> tag, as their names suggested, are used to specify the
height and width of an image’s display area.

WAP browsers may reserve some space on the screen according to the values of these
two attributes when the image is still downloading, so that users can know the layout
of the card. Older WAP-enabled wireless devices can only display WBMP images. Newer
ones support image formats commonly used on the web such as GIF, JPG and PNG.

7|Page
 Unit III: Fundamental of WML (AGM)

Example: <!--Image in WML-->

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="WML Images">
<p>This is Thumb image
<img src="/images/thumb.wbmp" alt="Thumb Image"/>
</p>
<p>This is Heart image
<img src="/images/heart.wbmp" alt="Heart Image"/>
</p>
</card>
</wml>

B] Tables in WML

The <table> element along with <tr> and <td> is used to create a table in WML. WML
does not allow the nesting of tables. A <table> element should be put with-in <p>...</p>
elements. To create tables and place some data in them, you need the <table>, <tr> and
<td> WML tags. A table (<table>) has a number of rows (<tr>) and each row has a
number of cells (<td>). Data is placed in table cells. Markup structure should be :

<table>
<tr>
<td>Data is placed here</td>
</tr>
</table>

The columns attribute of the <table> tag specifies the number of columns of a table. It
is a mandatory attribute. The columns attribute value must match the number of
<td></td> tag pairs in a row. For example, if the columns attribute value is 3, then each
<tr></tr> must contain three <td></td> tag pairs.

WML allows you to set the horizontal text alignment of a column in a table. The align
attribute of the <table> tag is used for such purpose. If a table has three columns, to
specify the horizontal text alignment of the columns, you need to assign three letters to
the align attribute. Each letter represents the horizontal text alignment of a column.
The letter can be L (left alignment), C(center alignment), or R(right alignment).

If you want the following settings to be applied to your table:

1. First table column -- Left-aligned
2. Second table column -- Center-aligned
3. Third table column -- Right-aligned
Then you should set the value of the align attribute to LCR.

8|Page
 Unit III: Fundamental of WML (AGM)

Example:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="WML Tables">
<p><table columns="3" align="LCR">
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</p>
</card>
</wml>

3.6 Working with User input:

Input tag which enables information to be collected from users in the form of text fields,
the select element which gives a range of choices to the users to select from and the
option group contains a list of options that relate to the group, etc.

3.6.1 Using Variables

A variable is a named location in memory where data can be stored. A variable consists
of a name-value pair. Variables can be used in content. It can be used in some attribute
values. It cannot be used for element or attribute names. It can be used to store captured
user inputs. Variable value is set using <setvar> or control name attribute.
<setvar name =”first name” value=”ABC”/>
<input name =”firstname”/>

3.6.2 Using <input>

Entry fields <input> are used to collect information from the user in the form of text
fields. Selection lists <select> are used to give users a choice of several predetermined

9|Page
 Unit III: Fundamental of WML (AGM)

answers in the form of radio buttons or check boxes. The <input> element defines an
entry field. Information entered here can be referenced within our WML decks or can
be passed to our application server. The browser stores this in a named variable <input
name=”variable”>.

Example Code
<wml>
<card title=”Input”>
<p> Enter Following Information:<br/>
Name: <input name="name" size="12"/> <br/>
Age : <input name="age" size="12" format="*N"/> <br/>
Sex : <input name="gender" size="12"/>
</p>
</card>
</wml>

3.6.3 Select and Option

A WML card, can be set up to display the select and option functions of WML:

<?xml version=”1.0"?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
“http://www.wapforum.org/DTD/wml_1.1.xml”>
<wml>
<card title=”Selectable List 1">
<p>
<select>
<option value=”htm”>HTML Tutorial</option>
<option value=”xml”>XML Tutorial</option>
<option value=”wap”>WAP Tutorial</option>
</select>
</p>
</card>
</wml>

3.7 WML Script

WMLScript (Wireless Markup Language Script) is the client-side scripting language of

WML (Wireless Markup Language). A scripting language is similar to a programming
language, but is of lighter weight. With WMLScript, the wireless device can do some of
the processing and computation. This reduces the number of requests and responses
to/from the server. In the old days, fewer round-trips can improve the performance of
your WAP site significantly since data transmission over wireless networks is slow.
Today, the performance gained may not be so significant any more as data transmission
speed has improved a lot. However, you may still find WMLScript useful since putting
some operations at the client-side can reduce the load of your servers.

10 | P a g e
 Unit III: Fundamental of WML (AGM)

WMLScript is based on ECMAScript (European Computer Manufacturers Association

Script), which is JavaScript's standardized version. So, the syntax of WMLScript is very
similar to JavaScript. A major difference between JavaScript and WMLScript is that
JavaScript code can be embedded in the HTML markup, whereas WMLScript code is
always placed in a file separated from the WML markup. URLs are used to refer to the
actual WMLScript code in the WML document.

WMLScript has a number of standard libraries. WMLScript files have the extension
".wmls". An effective way to learn a new language is to go through examples. The
following "Hello World" WMLScript example shows you how a WMLScript file typically
looks like and demonstrates how to call WMLScript code in a WML document.

<?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="card1" title="WMLScript Tutorial">
<p>
<a href="helloWorldEg1.wmls#helloWorld()">Run WMLScript</a><br/>
$(message)
</p>
</card>
</wml>

Here is the file that contains the WMLScript code:

extern function helloWorld()

{
WMLBrowser.setVar("message", "Hello World. Welcome to WMLScript tutorial.");
WMLBrowser.refresh();
}

If you select "Run WMLScript" link, the WMLScript function helloWorld() is executed
and the line "Hello World. Welcome to our WMLScript tutorial." will appear in the
mobile phone browser. In the above example, the WMLScript code is not embedded in
the WML markup and they are kept in separate files. This is the rule of WMLScript and
you need to follow this when programming mobile Internet browsing applications.

There is only one function, helloWorld(), in the WMLScript file. The extern keyword is
used to specify that the helloWorld() function is allowed to be called from outside the
WMLScript file helloWorldEg1.wmls.

The extern keyword is necessary here since we want to call the function from the WML
file helloWorldEg1.wml. Inside the helloWorld() function, we use two functions of the
WMLBrowser standard library, setVar() and refresh().

11 | P a g e
 Unit III: Fundamental of WML (AGM)

The setVar() function is used to assign a value to a WML variable. We use the
WMLScript code:

WMLBrowser.setVar("message", "Hello World. Welcome to our WMLScript tutorial.");

to assign the value "Hello World. Welcome to our WMLScript tutorial." to a WML
variable named message.

The refresh() function is used to instruct the WAP browser to refresh the current WML
card. In the helloWorld() function, after we have assigned a value to the message
variable, we make use of the line: WMLBrowser.refresh(); to refresh the WML card so
that the change made to the message variable is shown on screen of the mobile device.

To call the WMLScript function helloWorld() in the WML document, we use the URL
below: helloWorldEg1.wmls#helloWorld(). helloWorldEg1.wmls is the file that contains
the WMLScript code and helloWorld() is the function to call.

WML Script Language Rules:

1. Semicolons at the End of WMLScript Statements:

A semicolon is required to end a statement in WMLScript. This is the same as C++ and
Java. Note that JavaScript does not have such requirement. In JavaScript, semicolons are
optional. The following code is taken from the earlier "Hello World" example. You can
see that the two WMLScript statements in this function are ended with semicolons.

extern function helloWorld()

{
WMLBrowser.setVar("message", "Hello World. Welcome to WMLScript tutorial.");
WMLBrowser.refresh();
}

2. Whitespaces in WMLScript
Except in string literals, WMLScript ignores extra whitespaces like spaces, tabs and
newlines. Hence, the code in the earlier "Hello World" example can be typed in the
following way and the result will remain the same:

extern function helloWorld()

{
WMLBrowser.setVar(
"message",
"Hello World. Welcome to our WMLScript tutorial.");
WMLBrowser.refresh();
}

12 | P a g e
 Unit III: Fundamental of WML (AGM)

3. Case Sensitivity in WMLScript

The WMLScript language is case-sensitive. For example, a WMLScript function with the
name WMLScript_Function is different from wmlscript_function. So, be careful of the
capitalization when defining or referring to a function or a variable in WMLScript.

4. Comments in WMLScript
There are two types of comments in WMLScript: single-line comment and multi-line
comment. To add a single-line comment, begin a line of text with the // characters. To
add a multi-line comment, enclose the text within /* and */. These rules are the same
in WMLScript, JavaScript, Java, and C++. The WMLScript engine will ignore all
comments. The following WMLScript example demonstrates the use of comments:

extern function helloWorld()

{
// This is a single-line comment.

/* This is a
multi-line comment. */

/* A multi-line comment can be placed on a single line. */

WMLBrowser.setVar("message", "Hello World. Welcome to our WMLScript tutorial.");

WMLBrowser.refresh(); // A comment can be placed at a statement's end.

Important Questions:

1. What is WML? Explain its basics.

2. Explain the concept of Card & Deck in WML programming.
3. Write a WML Code which illustrates various text formatting tags.
4. Write a WML code to display following table.

Roll No. Name Class

01 ABC Final
02 XYZ Third

5. How an image is displayed in WML? Explain with the help of program.

6. Describe the concept of WML Script using simple program.

13 | P a g e