Sie sind auf Seite 1von 38

A

Seminar Report
On

“Wireless Markup Language”

Submitted in partial fulfillment of the requirement


For the award of the
Degree of
Bachelor of Technology
In
Computer Science
(Sir Padampat Singhania University)

Under the supervision of Submitted By


MR. AJAY PRASAD DIXIT
WADHWANI

Department of Computer Science and Engineering


SIR PADAMPAT SINGHANIA UNIVERSITY
UDAIPUR

Page 1 of 38
Department of Computer Science and Engineering
SIR PADAMPAT SINGHANIA UNIVERSITY
UDAIPUR

CERTIFICATE

This is to certify that Mr. DIXIT WADHWANI a student of B.Tech.


(Computer Science and Engineering) SIXTH (VI) semester has
submitted his Seminar entitled “Wireless Markup LAnguage” under my
guidance.

Guide

Page 2 of 38
Department of Computer Science and Engineering SIR
PADAMPAT SINGHANIA UNIVERSITY
UDAIPUR

CERTIFICATE OF COMPLETION

This is to certify that Mr. DIXIT WADHWANI a student of B.Tech.


(Computer Science and Engineering) SIXTH (VI) semester has
presented and have successfully completed his Seminar entitled
“Wireless Markup Language” in presence of the undersigned
dignitaries.

HOD External Evaluator(s)

Page 3 of 38
ACKNOWLEDGEMENT

I take immense pleasure in thanking Prof. Arun kumar,HOD(CSE), for having


permitted me to carry out this project work.
I wish to express my deep sense of gratitude to my Internal Guide, Ms. K Thulasi,
Scientific Staff, National Centre for Science Information, Indian Institute of Science
for hIS able guidance and useful suggestions, which helped me in completing the
project work, in time.

Needless to mention that Mr.Filber Minj, Scientific Officer, who had been a source
of inspiration and for his timely guidance in the conduct of our project work. I would
also like to thank Mr. Manu Rajan, Ms. K T Anuradha and Mr Francis Jayakanth of
National Centre for Science Information for all their valuable assistance in the project
work.

Words are inadequate in offering my thanks to the Project Trainees and Project
Assisatants, NCSI for their encouragement and cooperation in carrying out the project
work.

Finally, yet importantly, I would like to express my heartfelt thanks to my beloved


parents for their blessings, my friends/classmates for their help and wishes for the
successful completion of this project.

Page 4 of 38
Contents

1. Introduction to WML 8
1.1. Why use WML? 8
1.2. What is WAP? 9
1.2.1. How does WAP works? 10
1.2.2. WAP Micro Browsers 11
1.2.3. WAP Gateway 11
1.3. Overview of WML 12
1.3.1. WML Devices 12
1.3.2. WML Syntax rules 13
1.4. Difference between WML & HTML 15
1.5. What is WMLScript? 15
2. WML Decks, Templates and Cards 17
2.1. The <wml> Element 17
2.2. The <head> Element 18
2.3. The <meta> Element 19
2.4. The <access> Element 20
2.5. The <card> Element 20
2.6. The <template> Element 22
3. Basics of WML 24
3.1. Paragraphs, Line breaks and Comments 24
3.2. Text Formatting 25
3.3. WML Preformatted Text 26
3.4. Tables 28
3.5. WML Links and Images 29
3.6. WML variables 32
4. WML Timers, events and Tasks 34
4.1. Tasks 34
4.2. Events 35
4.3. The <ontimer> Element 35
4.4. Using Timers with WML 35
4.5. The <timer> Element 36
5. WML User Interaction 37
5.1. Problems with web interactions 37
5.2. Interaction in web 37

Page 5 of 38
5.3. The <input> Element 38
5.4. The <select> Element 39
5.5. The <do> Element 39

CHAPTER 1

INTRODUCTION TO WML

Page 6 of 38
1.1 Why use WML?
1.2 What is WAP?
1.3 Overview of WML
1.4 Difference between WML & HTML
1.5 What is WMLScript?

WML is a markup language based on Extensible Markup Language (XML). It is


designed for specifying user interface behavior and displaying content on wireless
devices such as phones, pagers, and personal digital assistants (PDAs).

1.1 Why use WML?

You might think that it's not necessary to come up with an entirely new
language and protocol, not HTTP - WAP (Wireless Application Protocol), when we
have one that works for the Web already (HTML). But there are specific problems
that are inherent in the mobile network that WAP was developed to take care of:

• variable display
mobile devices are like the frontier of the Internet, and they all display things
differently
• low bandwidth
mobile phones can only get up to 9600 bps or less - and you thought your 28.8
modem was slow
• high latency
it can often take several seconds for data to travel round trip over a wireless
phone
• unreliability

Page 7 of 38
WAP uses the Internet model, but it optimizes all the components for use in a
mobile environment. Data is compressed, the session is saved so that it can be
restored, and applications are displayed regardless of the input and output options.

1.2 What is WAP?

The Wireless Application Protocol is a global standard for bringing Internet


content and services to mobile phones and other wireless devices. The WAP standards
suite is maintained by an industry consortium called the WAP Forum. Founded by
Ericsson, Motorola, Nokia, and Openwave (then known as Unwired Planet) in June
1997, the WAP Forum now includes hundreds of member companies that are
infrastructure providers, software companies, and content providers. The goal of the
WAP Forum is to address the problems of wireless Internet access, ensuring that
access is not limited by vendor or underlying network technology. Since its creation,
the Wireless Application Protocol has passed through minor revisions (from 1.0 to
1.1, 1.2, and 1.2.1). WAP 2 is the first major revision since 1998.

The problems solved by WAP include the following:

• Protocol mismatch—Unlike the Internet, mobile networks (such as GSM and


TDMA) are not inherently IP-based; they do not support the protocol of the
Internet.
• Device limitations—Mobile devices (cellular phones, pagers, and palmtops)
are not ideal Web clients.
• Usability—Usability is an issue, particularly with the limited size of mobile
phones and pagers.

To address these issues, WAP defines a set of optimized protocols that can run
over a wide variety of underlying cellular networks. It also specifies an application
environment suited to small handled devices, including a display markup language
(Wireless Markup Language, WML) and associated scripting language (WMLScript).

The WAP protocol is the leading standard for information services on wireless
terminals like digital mobile phones.

Page 8 of 38
The WAP standard is based on Internet standards (HTML, XML and TCP/IP).
It consists of a WML language specification, a WMLScript specification, and a
Wireless Telephony Application Interface (WTAI) specification.

Examples of WAP use:

 Checking train table information


 Ticket purchase
 Flight check in
 Viewing traffic information
 Checking weather conditions
 Looking up stock values
 Looking up phone numbers
 Looking up addresses
 Looking up sport results

1.2.1 How does WAP works?

The delivery of many protocols and technologies takes the same route-namely,
through a proxy server that bridges the gap between the wired Internet and the wireless
service provider's network.

Figure: The WAP Gateway provides wireless networks with Internet access and
optional content translation and filtering.

The WAP browser in the figure can run on any supported device, from a cell
phone to a PDA. Generally, cell phones need to be designed to support WAP, but
most modern PDAs can be upgraded to support WAP simply by purchasing the

Page 9 of 38
browser software and installing it. PDAs need to be used with a cell phone to provide
the connectivity.
The origin server (on the far right of the figure) stores or generates the content
itself. In nearly all cases, the protocol used to communicate with the origin server is
standard HTTP, so this can be a standard web server. It's usually necessary to make a
couple of minor modifications1 to the server's configuration, so it can serve WAP
content. All the most popular web-server software can perform this task. An
interesting solution is to use a technology such as XSLT (XML Style sheet Language
Transformations), which allows both HTML and WML to be automatically generated
from the same raw data.
The origin server uses standard web technologies (such as CGI scripts or Java
servlets, for instance) to generate any required dynamic content. These scripts
probably need to communicate with a database to get the raw data to output. (This is
going beyond the scope of this book, however. All standard technique s for generating
web content on a server will also work for WAP, so you should read a book on one of
those.)

1.2.2 WAP Gateway:


The job of the WAP gateway is to convert between the browser's WAP
communication protocols (WSP, WTP, and so on) and the standard HTTP and
TCP/IP protocols required by the origin server. It's also responsible for converting the
content output by the origin server (formatted as text) into the compressed binary
formats of WML and WMLScript as required by the browser.

1.2.3 WAP Micro Browsers:


To fit into a small wireless terminal, WAP uses a Micro Browser.

A Micro Browser is a small piece of software that makes minimal demands on


hardware, memory and CPU. It can display information written in a restricted mark-
up language called WML.

The Micro Browser can also interpret a reduced version of JavaScript called
WMLScript.

Page 10 of 38
1.3 Overview of WML:
WML is a markup language based on Extensible Markup Language (XML). It
is designed for specifying user interface behavior and displaying content on wireless
devices such as phones, pagers, and personal digital assistants (PDAs).
The official WML specification is developed and maintained by the WAP
Forum, an industry-wide consortium founded by Nokia, Phone.com, Motorola, and
Ericsson. This specification, which includes the Document Type Definition(DTD) for
WML.
WML is used to create pages that can be displayed in a WAP browser. Pages in
WML are called DECKS. Decks are constructed as a set of CARDS.

1.3.1 WML Devices:


WML is designed to support a range of devices, which typically have the
following characteristics:
• Small display size (relative to conventional personal computers)
• Limited memory and CPU size
• Low bandwidth, high-latency wireless connectivity
The devices that WML currently supports fall into two main categories:
o Phones, which typically feature text displays of 4 to 10 lines
and support user input through numeric and function keys.
o Personal digital assistants (PDAs), which typically feature
display resolutions of 100 X 100 pixels (or better) and support
enhanced user input through keypads, pointers, or handwriting
recognition.

1.3.2 WML Syntax Rules:

1. Character Set:
WML uses the XML document character set—currently the Universal
Character Set of ISO/IEC-10646 (Unicode 2.0)—and supports any proper subset
of the Unicode character set (for example, US-ASCII, ISO-8859-1, or UTF-8).
You do not need to use full Unicode (UCS-4) encoding unless you are using a
character set other than UTF-8 or UTF-16.

Page 11 of 38
2. Case:

Unlike HTML, WML is case sensitive. You must specify elements, attributes,
and enumerated attribute values in lowercase characters. You should also keep
case sensitivity in mind when you name cards or variables. For example,
variable1, Variable1, and vaRiable1 are all different variables.

3. White Space:

In WML, white space is defined as any of the following:

Character 8-bit Value


decimal
Newline 10
Carriage return 13
Space 32
Tab 9

4. Document Prolog:
All WML decks must specify the following XML document type declaration
at the beginning of each file:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

5. Special Character:
WML reserves the <, >, ', ", and & characters. To display one of these
characters in formatted text, you must specify one of the following character
elements.

Character Character element


< &lt; (less than)
> &gt; (greater than)
‘ &apos; (apostrophe)
“ &quot; (quotation marks)

Page 12 of 38
& &amp; (ampersand)
$ $$ (dollar sign)
Non breaking space &nbsp;

Soft hyphen &shy;

The semicolon (;) is part of the character element and must be included. If you
omit it, the WML compiler generates an error message.

6. Content Type:
To create a valid WML message entity (MIME type), you must specify the
following content type header before the document prolog: Content-type:
text/vnd.wap.wml
IMPORTANT: You must leave at least one blank line between the content type
and the document prolog. If you omit this line, the compiler generates an error.

7. Attributes:

Most WML elements have one or more attributes, some of which are required
and some of which are optional. Attributes let you specify additional information
about how the device should handle the element. Although the exact syntax of a
WML statement depends on whether or not the element has content, attributes
always appear in the element start
tag:
<element a1="value1" a2="value2" ...> content </element>
<element a1="value1" a2="value2" .../>
You must enclose attribute values in single (') or double (") quotation marks
and separate each attribute-value pair with white space (as described earlier in this
section). White space is not allowed, however, between the attribute name, equal
sign, and attribute value.

1.4 Difference between WML & HTML:

There are several key differences between WML and standard HTML, including
the following:

Page 13 of 38
• WML is highly structured and very particular about syntax. Several current
HTML browsers allow for "messy" code such as missing tags and other
formatting snafus. Such mistakes are not allowed in WML; the mobile
browser will complain and generally won't display the page.
• WML is case sensitive. The tags <b> and <B> are treated as different tags,
although they accomplish the same purpose (bold text). Therefore, you must
be careful to match the case of your opening tags with your closing tags (for
example, <b>this is bold</B> will not work as expected).
• Many tags have required attributes. Developers accustomed to HTML may be
used to including only attributes they need-in some WML tags, you must
include a few attributes, even if they are blank or default.
• WML pages are structured in "decks" (see the next section), allowing for
multiple pages to be defined in each WML file.

WML also has a client-side scripting language, WMLScript, to help automate


particular tasks, validate input, and so on. WMLScript is a subset of JavaScript.

1.5 What is WMLScript?

WML uses WMLScript to run simple code on the client. WMLScript is a light
JavaScript language. However, WML scripts are not embedded in the WML pages.
WML pages only contain references to script URLs. WML scripts need to be
compiled into byte code on a server before they can run in a WAP browser.

Page 14 of 38
CHAPTER 2

WML Decks, Templates and Cards

2.1The <wml> Element


2.2The <head> Element
2.3The <meta> Element
2.4The <access> Element
2.5The <card> Element
2.6The <template> Element

WML is mostly about text. Tags that would slow down the communication with
handheld devices are not a part of the WML standard. The use of tables and images is
strongly restricted.

Since WML is an XML application, all tags are case sensitive (<wml> is not the same
as <WML>), and all tags must be properly closed.

2.1. The <wml> Element:

The <wml> element specifies a WML deck.


Syntax:
<wml xml:lang="lang">
<card>
content
</card>
</wml>
Content:
Represents the WML elements that define the actions of the deck.

Example of the <wml> Element

Page 15 of 38
<wml xml:lang="en-us">
<card>
...
...
</card>
</wml>

2.2. The <head> Element:

The <head> element specifies information about the deck as a whole, including
metadata and access control information.
Syntax:
<head>
content
</head>
where content represents deck-level header information:
Content:
You can optionally specify either of the following elements in a WML
deck header:
• <access>—one only
• <meta>—one or more

Example of the <head> Element


The following example illustrates how to specify the maximum age of a deck.
The WML definition includes a <meta> statement that uses cache-control within the
<head> element:

<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=3600" forua=”true”/>
</head>
<card>
...
...
</card>
<card>

Page 16 of 38
...
...
</card>
</wml>

2.3. The <meta> Element:

You can specify some generic metadata in your WML file using the <meta/>
tag. Metadata is placed at the document head. The <head> and </head> tags mark
the start and end of the document head respectively. A WAP browser will ignore the
metadata if it does not understand the metadata's meaning. You can specify metadata
of any sort in a WML file without affecting the cards' look.
Syntax:
<head>
<meta http-equiv="Cache-Control" content="max-age=time"
forua= true />
...
</head>
Example of the <meta> Element
For example, you may want to state the author name in your WML file
without displaying it on the screen. The following example illustrates how to do this:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<head>
<meta name="author" content="Andrew"/>
</head>

<card id="card1">
<p>Hello World</p>
</card>
</wml>

2.4. The <access> Element:

The <access> element specifies access control information for a WML deck.
You must specify this element within the deck header along with any Meta

Page 17 of 38
information for the deck. Each deck can have only one <access> element. All WML
decks are public by default.
Syntax:
<head>
<access domain="domain" path="path"/>
...
</head>

Attributes:
1. Domain: The URL domain of other decks that can access cards in the
deck. The default value is the domain of the current deck.
2. Path: The URL root of other decks that can access cards in the deck.
The default value is “/” (the root path of the current deck) which lets any deck
within the specified domain access this deck.

2.4. The <card> Element:

WML pages are called DECKS. They are constructed as a set of CARDS,
related to each other with links.

A major difference between HTML and WML is that the basic unit of
navigation in HTML is a page, while that in WML is a card. A WML file can contain
multiple cards and they form a deck. When a user goes to a WAP site, the mobile
browser loads a WML file that contains a deck of cards from the server. Only one
card will be shown on the screen of the wireless device each time. If the user goes to
another card of the same deck, the mobile browser does not have to send any requests
to the server since the file that contains the deck is already stored in the wireless
device.

WML is designed in this way because wireless devices have a high latency for
connecting to the server. Downloading a deck of cards at a time can lower the number
of round trips to the server.

You can put links, text, images, input fields, option boxes and many other
elements in a card.

Page 18 of 38
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 the
phone computer - inside the phone - without any extra access trips to the server:

Syntax:
<wml>
<card id="name" title="label" newcontext="boolean"
ordered="true" onenterforward="url" onenterbackward="url"
ontimer="url">
content
</card>
</wml>

Content:
You can specify any of the following elements in your card definition:
• <onevent>
• <timer>
• <do>
• <a>
• <fieldset>
• <img>
• <input>
• <select>
• <p>
Example of the <card> Element

Page 19 of 38
<?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</p>
</card>

</wml>

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

OUTPUT:

------ Card 1 ------

Hello World!

2.5. The <template> Element:

WML deck may contain a <template> element that defines deck-level event
bindings, for example, characteristics that apply to all cards in the deck. You can
override these characteristics for a particular card by specifying the same event
bindings within the <card> definition.
Syntax:
<wml>
<template onenterforward="url" onenterbackward="url"
ontimer="url">
content

Page 20 of 38
</template>
</wml>
Conten:t
You can specify either of the following elements in a template definition:
• <do>
• <onevent>

Page 21 of 38
CHAPTER 3

WML Basics

3.1Paragraphs, Line breaks and Comments


3.2Text Formatting
3.3WML Preformatted Text
3.4Tables
3.5WML Links and Images

3.1. Paragraphs, Line breaks and Comments:

<br/> is the line breaking tag in WML, which is the same as that in HTML.
The following WML example demonstrates the usage of line breaks:

Comments are placed inside <!-- --> in WML. This is the same as HTML. For
example, the following lines are comments. WAP browsers ignore all comments.

<! -- This is a comment in WML -->


<! -- This is a multi-line
comment -->

The <p> element specifies a new paragraph and has alignment and line-
wrapping attributes.
Syntax:
<p align="alignment" mode="wrapmode">
Content
</p>
Example of the <p> Element
Example demonstrates the usage of line breaks and paragraph:

Page 22 of 38
<?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="Paragraphs">
<p>
This is a paragraph
</p>
<p>
This is another<br/>with a line break
</p>
</card>
</wml>

The result MIGHT look like this in your mobile phone display:

------ Paragraphs ------

This is a paragraph

This is another
with a line break

3.2. Text Formatting:

WML includes a number of tags that can be used to change the font size and
style of the text. However, some older WAP browsers do not support these tags or
only support a subset of these tags, even though these tags are defined by the WML
specification. Unsupported WML tags will be ignored by WAP browsers but will not
cause any errors.

Example of the Text Formatting

Page 23 of 38
<?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="Formatting">

<p>
normal<br/>
<em>emphasized</em><br/>
<strong>strong</strong><br/>
<b>bold</b><br/>
<i>italic</i><br/>
<u>underline</u><br/>
<big>big</big><br/>
<small>small</small>
</p>

</card>
</wml>

OUTPUT:

----- Formatting -----

normal
emphasized
strong
bold
italic
underline
big
small

3.3. WML Preformatted Text:

The <pre> tag is used to specify preformatted text in WML. Preformatted text
is text of which the format follows the way it is typed in the WML document.

Page 24 of 38
In WML, leading and trailing whitespaces (i.e. spaces, tabs and newlines) of a
paragraph are not displayed. Furthermore, two or more whitespaces in a paragraph are
shown as one whitespace on the screen of mobile devices.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="card1" title="WML">
<p> Hello, welcome
to
our
WML World .</p>
</card>
</wml>

The result MIGHT look like this in your mobile phone display:

------ WML ------


Hello, welcome to our WML
World.

To preserve the formatting of the text, you have to use the <pre> element.
WAP browsers treat the content enclosed in the <pre></pre> tag pair as
preformatted and whitespaces are left intact.

Example of the <pre> Element

Page 25 of 38
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">

<wml>
<card id="card1" title="WML">
<pre> Hello, welcome
to
our
WML World .</pre>
</card>
</wml>

The result MIGHT look like this in your mobile phone display:

------ WML ------


Hello, welcome
to
our
WML World .

3.4. Tables:

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. The markup structure should be
like this:

<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

Page 26 of 38
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.

Example of the <table> Element

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"
"http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<card id="page1" title="Table">
<p>
<table columns="3">
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>

<tr>
<td>Cell D</td>
<td>Cell E</td>
<td>Cell F</td>
</tr>
</table>
</p>
</card>
</wml>

The result MIGHT look like this in your mobile phone display:

------ Table ------

Cell A Cell B Cell C


Cell D Cell E Cell F

3.5. WML Links and Images:

3.5.1 Links:

The <anchor> tag

Page 27 of 38
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:

<anchor>
<go href="..." ... />
</anchor>

The <anchor> tag always has a task ("go", "prev", or "refresh") specified. The
task defines what to do when the user selects the link.

Example of the <anchor> Element:


In this example, when the user selects the "Next page" link, the task says "go
to the file test.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="Anchor Tag">
<p><anchor>Next page <go href="test.wml"/></anchor></p>
</card>
</wml>

The <a> tag

Example of the <a> Element


The <a> tag always performs a "go" task, with no variables. The example below
does the same as the <anchor> tag example:

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

Page 28 of 38
<wml>
<card title="A Tag">
<p><a href="test.wml">Next page</a></p>
</card>
</wml>

3.5.1 WML Images:


Wireless Bitmap (WBMP)

WML cards can contain images. In the early days, WAP-enabled wireless
devices only supported the Wireless Bitmap (WBMP) image format. WBMP images
can only contain two colors: black and white. Also, WBMP is not a compressible
format, since the processor of wireless devices in the old days did not have enough
computation power and decompression would result in a long delay. The file
extension and the MIME type of WBMP are ".wbmp" and "image/vnd.wap.wbmp"
respectively.

To draw WBMP images, a WBMP image editor is needed. Besides drawing


WBMP images, you can use it to convert other image formats to WBMP. Just open a
GIF or JPG image file with the editor and it will be converted automatically. Free
tools such as ImageMagick can also do such kind of thing. However, remember that
WBMP images can only contain black and white colors, which means there will have
detail loss during the conversion of a colorful image to the WBMP format.

A colorful picture The picture after


before conversion to conversion to WBMP.
WBMP.

Can a WML Browser Display Color Images?

A WML browser can display color images if the image format used is
supported by the wireless device. Currently, most mobile phone models on the market

Page 29 of 38
have color screens and support color images. Commonly supported image formats are
GIF 87a, GIF 89a (animated GIF), JPG and PNG. Note that the image formats
supported are device-specific. Some wireless devices can only support a subset of the
above image formats.

3.6. WML Variables:

A significant difference between WML and HTML is that WML supports


variables. WML variables contain strings, and these strings can be inserted into the
body text of the WML document or into the values of certain attributes. The values of
variables can be changed under the control of the WML itself.

The names of WML variables can consist of any combination of letters, digits,
and underscores, except that the first character must not be a digit. Like most things in
WML, variable names are case-sensitive. When a user switches from card to card in a
deck, we need to store data in variables.

The following are all examples of legal variable names:


a
foo
__name_with_underscores__ _
ThisVariableNameIsImpracticalBecauseItIsTooLong
xy17
The following are examples of invalid variable names:
17xy
(starts with a digit)
name with spaces
(space is not a letter, digit, or underscore)

Although WML doesn't impose a limit on the length of variable names,


remember that the full name needs to be transmitted over a low-bandwidth link and
then stored in the (possibly limited) memory on the device running the browser. As a
result, it's a good idea to keep your variable names short.

Page 30 of 38
Specify a Variable with the Setvar Command
This element must be placed within a task element. Its purpose is to represent
an assignment to a WML variable. This assignment takes place when the task is
executed.

The following example will create a variable named i with a value of 500:

<setvar name="i" value="500"/>

The name and value attributes are required.

Specify a Variable through an Input Element


Variables can also be set through an input element (like input, select, option,
etc.).

The following example will create a variable named schoolname:

<card id="card1">
<select name="schoolname">
<option value="HTML">HTML Tutorial</option>
<option value="XML">XML Tutorial</option>
</select>
</card>

To use the variable we created in the example above:

<card id="card2">
<p>You selected: $(schoolname)</p>
</card>

Page 31 of 38
CHAPTER 4

WML User Interactions

4.1Problems with user interactions


4.2Interaction in WAP
4.3The <input> element
4.4The <select> element
4.5The <do> element

The previous chapters described how to interact with users in WML.


Sometimes, however, you may want something to happen without the user explicitly
having to activate a control.
To take a common example, suppose you want to display a company logo
when the user connects to your WAP service. On a web page, you'd keep the image
for the logo on screen the whole time, but WAP devices have limited screen sizes, and
you can't afford to waste the space.
You could put the image at the top of the first page and let the user scroll
down, but cell phone keypads are fiddly(difficult), and you'd prefer that the user didn't
have to mess around to see the rest of the service. The same thing rules out a "click to
enter" type of control.
What you really want is for the logo to be displayed for a second or two so
that the user sees it, and for him to then be transported automatically to the main card.
This can be done with a WML timer.

4.1 Tasks

A WML task is an element that specifies an action to be performed by the


browser, rather than something to be displayed. For example, the action of changing
to a new card is represented by a <go> task element and the action of returning to the
previous card visited is represented by a <prev> task element. Task elements
encapsulate all the information required to perform the action.
There are four types of tasks in WML.

Page 32 of 38
<go> Task: As the name suggests, the <go> task represents the action of going to a
new card.
<prev> Task: The <prev> task represents the action of returning to the previously
visited card on the history stack. When this action is performed, the top entry is
removed from the history stack, and that card is displayed again.
<noop> Task: The <refresh> task is the simplest task that actually does something.
Its effect is simply to perform the variable assignments specified by its <setvar>
elements, and then redisplay the current card with the new values. The <go> and
<prev> tasks perform the same action just before displaying the new card.
<refresh> Task: The purpose of the <noop> task is to do nothing (no operation).

4.2 Events
An event in WML is simply something that can happen to some element from
time to time. For example, entering a <card> element triggers an event on the
<card>, and selecting an <option> from a selection list triggers an event on the
<option>.

4.3 The ontimer event

The ontimer event is triggered when a card's timer counts down from one to
zero, which means that it doesn't occur if the timer is initialized to a timeout of zero.
You can bind a task to this event with the <onevent> element.
For example, here's a way to return to the previous card when the timer expires:
<onevent type="ontimer">
<prev/>
</onevent>
4.4 Using Timers with WML

A WML card may have a timer. Whenever the card is entered (whether
forwards, as the result of a <go> task, or backwards, as the result of a <prev> task),
the timer is initialized with a timeout value and started (unless the timeout is zero, in
which case the timer never starts).
Once the timer has started, it counts down either until the count reaches zero
or until a task is executed. If a task is executed, the timer is simply stopped
Page 33 of 38
beforehand. The time unit is 1/10 second. (Note, however, that a <noop> task doesn't
affect the timer at all.) If the count reaches zero, however, an ontimer event is
triggered on the card containing the timer. This event should be bound to a task, either
with an <onevent> element or with the ontimer attribute of the <card> element.
Example of the timer
Example shows the simplest way to display a logo for a short time and then go
to the main card. The image is displayed for one second, and then the second card is
displayed. There is also a <do> element that allows the user to go directly to the
second card without having to wait for the timer.

<?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="Welcome" ontimer="#main">
<!-- Timer waits 10 tenths of a second. -->
<timer value="10"/>
<p><img src="logo.wbmp"/></p>
<do type="accept"><go href="#main"/></do>
</card>
<card title="Main" id="main">
<p>Welcome to the main page!</p>
</card>
</wml>

4.5 The <timer> element

A timer is declared inside a WML card with the <timer> element. It must
follow the <onevent> elements if they are present. (If there are no <onevent>
elements, the <timer> must be the first element inside the <card>.) No more than one
<timer> may be present in a card.

Page 34 of 38
CHAPTER 5

WML User Interactions

5.1Problems with user interactions


5.2Interaction in WAP
5.3The <input> element
5.4The <select> element
5.5The <do> element

5.1 Problem with User Interaction:


Using HTML forms for this purpose suffers from one major problem: the
processing has to be done on the server. The client displays the controls, collects their
results, packages them, and sends them to the server, but that's it. Apart from some
simple constraints such as the maximum length of the text in an input box, you can't
even check the input for validity before sending it off. This results in a lot of extra
network connections, slowing things down a lot, even on a fast Internet link. Imagine
how slow all those extra network connections are on a much slower link, as WAP has
to contend with.
Another, subtler problem with the Web's way of doing these things is that
there are multiple ways to declare the controls. Suppose you want to display a text
input box. Using a form, you can use something like:
<INPUT TYPE="TEXT" NAME="ip1">
Using JavaScript with the HTML, possibly:
<INPUT TYPE="TEXT" NAME="ip1" ONCHANGE="ip1_chg( );">

5.2 WAP Interaction:

For comparison, here is how the same text input box is described in WML,
where its result is sent directly to the server:
<input name="IP1"/>

Page 35 of 38
Here, its result is passed to some WMLScript to check it for validity before
passing it to the server:
<INPUT NAME="IP1"/>
Here, it's displayed to the user in another card for confirmation purposes,
without any server transactions involved:
<input name="ip1"/>
These three examples are identical because the same control is always written
in the same way in WML. Doing it this way works because none of the controls ever
perform any direct action. They are instead linked to the lower-level layers of WML,
such as variables and tasks.

5.3 The <input> element:


This element is used whenever the user needs to enter a string or some other
piece of text. The <input> element can also be used to enter passwords or other
sensitive information. This element (as with all user interaction elements) may be put
anywhere in normal paragraph text (namely, inside a <p> element). It takes several
attributes, most of which are optional.
Example of the <input> Element
It shows how a typical login page asking for a username and password can be
constructed. The username is forced to consist entirely of lowercase letters, and the
password is obscured when it's entered. Then there is a <do> element, containing a
<go> task. The effect of these last two is to add a button or similar control to the
card, which sends the browser to the URL from the href attribute of the go task when
it's activated.

<? 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="Login">
<p>Username:
<input name="user" format="*x"/></p>
<p>Password:
<input name="pass" type="password"/></p>
<do type="accept" title="Log In">

Page 36 of 38
<go href="login?u=$(user:e)&amp;p=$(pass:e)"/>
</do>
</card>
</wml>

5.4 The <select> element:

The other high-level control that WML provides is one allowing selection
from a list of items. Inside the <select> is a list of <option> elements.
When a <select> item has a multiple="true" attribute, it allows more than one item to
be selected from the list simultaneously.
Example of the <input> Element
For example, a WAP pizza delivery service to let people choose the toppings
for their pizza. Note that this doesn't allow people to select the same topping more
than once. If they want that, they can phone in the order!

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC
"-//WAPFORUM//DTD WML 1.1//EN"
"http">
<wml>
<card title="Pizza Toppings">
<p>Choose your toppings:
<select name="toppings" multiple="true">
<option value="p">Pepperoni</option>
<option value="h">Ham</option>
<option value="b">Spicy Beef</option>
<option value="a">Anchovies</option>
<option value="c">Chillies</option>
<option value="o">Olives</option>
<option value="m">Mushrooms</option>
<!-- ...lots more toppings here... -->
</select></p>
<do type="accept" label="Order">
<go href="order?toppings=$(toppings:e)"/>
</do>
</card>
</wml>

5.5 The <do> element:

Page 37 of 38
The <input> and <select> elements provide high-level user controls, but
sometimes all you want is a simple button or menu item. In these cases, the <do>
element is exactly what you need.
A <do> element is simply a way to specify some arbitrary type of control for
the browser to make available to the user.
A <do> element contains nothing but the task to be performed when the
element is activated.

Page 38 of 38

Das könnte Ihnen auch gefallen