WML PROGRAMMING
TUTORIAL PART - 1
Bharghavi Shree
Mansi Modak
&
Lahary Ravuri
Guided By
Dr. Jerry Gao
Introduction
•
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
What is WML?
•
Optimized for small screens and limited size memory.
• HTML type formatting language,defined as XML
document type.
• Uses card and deck metaphor while creating documents.
• Has a built in hierarchy that allows individual document to
work both in a mobile phone and a handheld computer.
• Current version is 1.1
Differences between WML and other
markup languages
•
Original ASCII based WML code is converted to binary
code in the gateway server, before being forwarded to
WAP device.
•
The option of passing parameters using card and deck
variables.
Structure of WML documentcont.
WML Terminology
In WAP development, a screen is known as a card. A collection of cards is
known as a deck.
WML Decks
•
Smallest unit that a server can send to a browser program.
•
Delivers 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
•
Provide the structure of a WAP application.
•
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.
Structure of a WML document –
cont.
WML document prologue
1.
2.
3.
<?xml version=”1.0>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML
1.1//EN”
“http://www.wapforum.org/DTD/wml_1.1.xml”>
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.
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.
Line-by-line explanation of the
document prologue
1.
<?xml version=”1.0>
•
Designates the XML version of the WAP server and WML compiler.
WAP servers and WML compilers use XML to interpret your code
compilers and then transform this to WML.
WAP device can display the information.
•
•
2.
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML
1.1//EN”
The second line defines the version of WML used.
3.
“http://www.wapforum.org/DTD/wml_1.1.xml”>
This is XML-specified Document Type Definition.
Structure of a WML document –
cont.
•
•
•
•
•
WML is Case-Sensitive.
WML supports the character set of ISO-10646 (Unicode 2.0).
Contains symbols that require start and end tag.
<wml>
…
</wml>
To add variables to a card or deck : $identifier
$(identifier)
Supports both Alphanumeric and Numeric character entities.
Symbol
Alphanumeric
Numeric
<
&lt
&#60
Structure of a WML Document –
cont.
•
•
•
•
•
Structure of a ‘comment’.
<!-- …………-- >
Two core attributes:
1. id :- Allocates an individual name to elements inside a
deck.
2. Class :- links elements to one or several groups.
<wml>….</wml> command.
<card>….</card> command.
Its attributes :id :- gives special identity to a card in a deck.
title :- displays a title on a title bar of the browser.
newcontext :- can be either TRUE or FALSE.
The use of the card element and
its attributes
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<!-- wml CARD BEGINS WITH CARD COMMAND: -->
<card id="mycard" title="first" newcontext="true">
<p>
HELLO!
</p>
<!-- WML card ends: -->
</card>
</wml>
The above example will show
you this on display
WML-Text Formatting
• Creating paragraphs with the p element
• Align and mode options in the p element
• Line Breaks
• Displaying Special Characters
• Text Styles
Creating Paragraphs with the p
Element
•
•
•
•
•
The p element is an important aspect of WAP development.
The p element uses two attributes.
align - Specifies the line alignment relative to the display area.
mode - Specifies whether the display should automatically wrap or
split text so that it is always viewable from the display.
Wrapping spills extra text onto subsequent lines in the display.
Scrolling the line from left to right is not necessary.
Once you specify a mode, it applies to all subsequent lines until you
reset it
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=“mode and align">
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>
Expected Output
Setting Text Alignment
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>
Expected Output
Incorporating Line Breaks with br
Element
• The br element forces the insertion of line breaks into the
text.
• It contains no attributes.
1.
2.
3.
4.
5.
6.
7.
8.
9.
<?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=”break” title=”Break”>
<p>Welcome to San Jose State University <br/>
This will be on a new line </p>
</card>
</wml>
Expected Output
Displaying Special Characters
•WML reserves the <, >, ', ", and & characters.
To display one of these characters in formatted text, you must
specify one of the following character elements.
Character
>
<
‘
“
&
$
Nonbreaking space
Soft Hyphen
Element
&gt;
&lt;
&apos;
&quot;
&amp;
$$;
&nbsp;
&shy;
Incorporating Text Styles
• WML offers a number of elements that enable you to define the font
style like bold, italic, and underline effects to your text.
Element
B
BIG
EM
I
SMALL
STRONG
U
Description
Creates a bold font
Creates a big font
Creates emphasis on the
font
Creates italicized text
Creates a small font
Creates a strong
emphasis on the font
Syntax
<b> content </b>
<big> content </big>
<em> content </em>
<i> content </i>
<small> content </small
<strong>content</strong>
Creates an underlined text <u> content </u>
Incorporating Text Styles-cont.
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>
16. </card>
17. </wml>
Expected Output
Working with Images
• Bandwidth
• Screen size
• The Wireless Bitmap Format
• The IMG Element
• Creating an Application with the WBMP format
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.
Transferring data to WAP devices is slower than
transferring data to PCs.
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 won’t 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.
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
(WBMP)
•
•
•
•
Wireless bitmap format is the only graphical format
supported by wireless devices.
To create (or convert) an image into the WMBP format, an
image conversion tool is required.
The conversion of any graphical format is made possible by
a process called dithering.
With image conversion desktop tools, you must first
download the software from the Internet.
Examples of desktop image conversion programs are:
Image Magick (http://www.imagemagick.org )
WAPDraw (http://www.hit-solutions.fi/wapdraw/)
WAPPictus (http://www.checkit.cz/engl)
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 WBMP format, allowing you to
save this new format wherever you want.
Advantage: The software isn’t required for installation onto your PC.
Disadvantage: You must be online to use these tools.
Examples of online image converters:



Applepie Online Image Converter (http://www.applepiesolutions.com)
Dwbmp (http://www.morpheme.co.uk)
WAP Tiger Online Converter (http://www.waptiger.de/bmp2wbmp/
Image Plug-ins
• Image plug-ins are additional pieces of software added to a
larger software product.
• They add image conversion functionality for the WBMP
format.
• Examples of image conversion plug-ins:
• Photoshop and/or paintshop plug-ins (for Windows)
(http://www.rcp.co.uk)
• Photoshop plug-ins (for Macintosh)
(http://www.creationflux.com)
•
Image conversion plug-ins requires a base software such as
Photoshop on your machine.
The IMG Element
Has several attributes that are used to display images on a WAP device.
Attribute
Req.
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.
ht
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 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.
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.
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 wbmp 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.
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.
Creating an Application with a
WBMP – cont.
Creating 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.wbmp" alt="sjsu.wbmp" />
8.
</p>
9. </card>
10. </wml>
The above example will show
you this on the display
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/devg
uide/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.