Wireless Markup Language

ByEr. Balwinder Singh

How to open the WAP toolkit

WML and WMLScript languages• WML is an XML language derived from HDML

specification (version 2) by Unwired Planet.• WML is designed for wireless Web environment and it

does not take care of any specific device type.• The language is compact and the user interface model

of WML is dedicated to small screens with few press buttons.

• WML can be said to be a display language.• WMLScript is a scripting language that can be mixed

with WML to provide functionalities in the WAP application like JavaScript in HTML

Card and Deck

• WML data is structured as a collection of cards.

• A single collection of cards is referred to as a WML deck.

• Each card contains structured content and navigation specifications.

Card and Deck

Cards and decks

Type of WML cards. • There are three basic types of cards that

you will construct in WML: -• Choice Card: Generally presents a set of

menu options to the user. • Data Entry card: Request data from the

user for use within the application.• Display card: Displays or presents the

result data to the user

Document Prologue

• A valid WML deck is a valid XML document and therefore must contain an XML declaration and a document type declaration.

• The first two lines define the document prologue that identifies the XML subset. This prologue must be included at the beginning of every WML deck, that is, before each <wml> tag..

Document Prologue

1. <?xml version="1.0"?> 2. <!DOCTYPE wml PUBLIC

"-//WAPFORUM//DTD WML 1.1//EN“ "http://www.wapforum.org/DTD/wml_1.1.xml">

CardsTo declare a card, insert the following:

<card id="index" title="My WAP Site" newcontext="true">

This will make a card with the ID index (used for linking) and will display the text:

My WAP Site

at the top of the screen.

CardsClosing Tags

Unlike with HTML, it is extremely important to close WML tags. If you do not, a page will certainly not work. You must close both the <card> and <wml> tags:

</card></wml>

The <p> Tag

Just like in HTML the <p> tag is used to show where a paragraph begins and ends. Unlike HTML, though, all text on a WML page must be inside these tags.

As with HTML you use the tags as follows:

<p>information</p>

Aligning Text

Aligning text in WML is nearly exactly the same as in HTML.

All aligning must be done using the following <p> tags:

Center:<p align="center">

Right:<p align="right">

HOW TO CREATE A CARD<?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="Title"> <p>

THIS IS THE FIRST CARD.</p>

</card>

</wml>

Output of the Program

Align<?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="calc" ><p align="center">This is center alignment.</p></card></wml>

Output of the Program

Right Align

Break • The <br/> Tag

In WML (as mentioned earlier) all tags must be closed. This causes problems when using old HTML tags (like <Br>) which have no closing tag. To get around this, some tags have had a / put on the end e.g.

<Br />

This, like in HTML will make a line break

Break <?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="calc" ><p align="right">This Break Here.<br/>after Break</p></card></wml>

Output of the program

Text 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="First_Card"> <p align="left"> <b>BOLD</b><br/><i>ITALIC</i><br/><u>UNDERLINE</u><br/></p> </card></wml>

Output of the Program

Images1. WAP phones only have

monochrome screens, images do not work very well on WML pages.

2. They also use their own image format: WBMP.

3. Images in WML are inserted using the <img> tag, just like in HTML:

Image

<img src="logo.wbmp" alt="Logo" />

Again, you can see that a / has been added at the end as the <img> tag has no closing tag. Note:It is very important that you also include the alt text as it will be displayed while the image is being downloaded

Image <?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="calc" ><p><img src="cloudy.wbmp" alt="balli"/></p></card></wml>

Output of the Program

Add Another Card• To add another card, all you need to do is put in

another <card> tag with a different ID to the others. For example:

<card title="About Me" id="about">information</card>

would be added below the first card but before the </wml> tag.

Linking1. There are three ways to link to another WAP site, file or

card. 2. Just like in HTML these can either be the full path to a

file or a relative link.

To link to a WAP site you use the following:

<a href="http://gowansnet.waphosts.net/">Gowansnet</a>

To link to another file on your site you would use:

<a href="links.wml">My Links</a>

To link to another card in the same page you use:

<a href="#about">About Me</a>

Do Element

• The do element gives the user a general mechanism for performing actions on the

current card, that is, a card-level user interface element.

Go Task

The go element declares a go task, indicating navigation to an URL. If the URL

names a WML card or deck, it is displayed. A go executes a push operation on the history stack.

syntax• href=href This attribute specifies the destination

URI, for• example, the URI of the card to display.• This attribute is required.

Linking of Two Cards1. <?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"2. "http://www.wapforum.org/DTD/wml_1.1.xml"> 3. <wml> 4. <card id="First_Card"> 5. <do type="accept" label="Next"> 6. <go href="#Second_Card"/> 7. </do> 8. <p> 9. Select <b>Next</b> to display the next card. 10. </p> 11. </card> 12. <card id="Second_Card"> 13. <p> 14. This card contains the following:... 15. </p> 16. </card>

</wml>

Line-by-Line Explanation

• The first two lines define the document prologue that identifies the XMLsubset.

• This prologue must be included at the beginning of every WML deck, that is, before each <wml> tag..

Line-by-Line Explanation• The third line defines the header of the

WML deck.• All WML decks must begin with a <wml>

tag and end with a </wml> tag. • The fourth line of the deck specifies the

header of the first card. • Like decks, cards require begin and end

tags, for example, <card> and </card>.

Line-by-Line Explanation• The fifth line defines an action, which specifies

what the user agent should do when the user presses a specified function key.

• The type attribute identifies the key (ACCEPT) and the label attribute a label name (Next) for the specified key.

• The sixth line specifies the action related to the specified key. The href attribute identifies the target URI destination,

• for example, the card named Second_Card.

Output Of The Program

Output of the program

Two Cards

Anchor tag<?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="First_Card"> <p align="left"> <anchor>Linkage<go href="MultiCard.wml"/></anchor></p> </card></wml>

Output of the Program

<Input > element / input tag<?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="First_Card"> <p align="left"> Name:<input name="user" size="25"/></p> </card></wml>

Output of the program

Select and option <?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="First_Card"> <p align="left"> <select name="tutorial"><option value="HTML">HTML TUTORIAL</option><option value="XML">XML TUTORIAL</option><option value="WAP">WAP TUTORIAL</option></select></p> </card></wml>

Output of the Program

Select option with multiple line<?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="First_Card"> <p align="left"> <select name="tutorial" multiple="true"><option value="HTML">HTML TUTORIAL</option><option value="XML">XML TUTORIAL</option><option value="WAP">WAP TUTORIAL</option></select></p> </card></wml>

Output of the Program

Input fields<?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="First_Card"> <p align="left"> Name:<input name="name" type="text"/><br/>Age:<input name="age" type="text" format="*N"/>Sex:<input name="Sex" size="15"/></p> </card></wml>

Output of the program

Fieldset <?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="First_Card"> <p align="left"> <fieldset title="cd info">Title:<input name="title" type="text"/><br/>Prize:<input name="prize" type="text"/></fieldset></p> </card></wml>

Output of the Program

The ends

Thanks