by amisha pardasani

ByAmisha Pardasani

ContentsContents

• Introduction to Wireless Application Protocol• Introduction to Wireless Markup Language• WML Formatting• Links and Images• Input • Tasks• Timer• Forms • Variables• Entities• Template• Conclusion• References

What is WAPWhat is WAP

WAP ArchitechtureWAP Architechture

Does wireless internet really need a different protocol?

Does wireless internet really need a different protocol?

Issues:

• Transfer speed

• Size and Readability

• Navigation

Summarizing WAPSummarizing WAP

•WAP is an application communication protocol

•WAP is used to access services and information

•WAP is inherited from internet standards

•WAP is for handheld devices

•WAP is a protocol designed for micro browsers

•WAP enables the creating of web applications for mobile devices

•WAP uses the markup language WML

Examples of WAPExamples of WAP

• Checking train table information

• Ticket purchase

• Flight check in

• Viewing traffic information

• Checking weather conditions

• Looking up stock values

• Looking up addresses, phone numbers

What is WML?What is WML?

•Wireless Markup Language

•based on XML

•Purpose:

•to specify user interface behavior and

•display contents on wireless devices such as (phones), pagers, (PDAs)

•WAP, WML WWW, HTML

Is WML lean and mean?Is WML lean and mean?

WML is designed to support a range of devices which have the following characteristics:

•Small display size (relative to conventional personal computers)

•Limited memory and CPU size

•Low bandwidth

Due to these reasons WAP was designed to be lean and mean

WML FormattingWML Formatting

• WML tags• Decks and cards• Comments• Text formatting• Tables

WML TagsWML Tags

•Syntax: strict, conforms to XML 1.0 standard

•Restricted use of tags

•Restricted use of tables and images

•Tags are case-sensitive

WML Decks and CardsWML Decks and Cards

Deck

•WML page

•Consists of a set of cards

•All cards in a deck are downloaded at one time

•Must be small and contain logically pertaining cards

Cards

•Can contain text, markup, links, input-fields, tasks, images, etc.

•Can be related to each other with links

A Simple ExampleA Simple 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 id="no1" title="Card 1"> <p>Hello World!</p></card>

<card id="no2" title="Card 2"> <p>Welcome to WAP School!</p></card></wml>

------ Card 1 ------ Hello World!

WML Code

Only one card is displayed at a time

Result

CommentsComments

Comments are not displayed in the browser

<!--This is a comment-->

Text FormattingText 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 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>

----- Formatting -----

normalemphasizedstrongbolditalicunderlinebigsmall

WML Code

Result

TablesTables<?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="Table">

<p><table columns="3"><tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr></table></p>

</card></wml>

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

Cell 1 Cell 2 Cell 3

WML Links and ImagesWML Links and Images

• Links– <anchor> tag– <a> tag

• Images

Links - <anchor> TagLinks - <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> <p><anchor>Next page<go href="test.wml"/> </anchor></p></card></wml>

Links - <a> TagLinks - <a> 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> <p>Some links:<br/><a title="Link1"><go href="d1.wml"/>News</a><br/><a title="Link2"><go href="d2.wml"/>Sports</a> </p></card></wml>

ImageImage

<?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="Image">

<p>This is an image<img src="../images/hatman.wbmp”alt=”hatman" />in a paragraph</p>

</card></wml>

----- Image -----

This is an image

in a paragraph

WML InputWML Input

• Input fields

• Format Masks

• Select and Option

• Fieldset

Input FieldsInput 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 title="Input">

<p>

Name: <input name="Name" size="15"/><br/>

Age: <input name="Age" size="15” format="*N"/><br/>

Sex: <input name="Sex" size="15"/>

</p>

</card>

</wml>

----- Input ----------

Name: Age : Sex :

Syntax: text <input name="variable" title="label" type="type"value="value" default="default" format="specifier"emptyok="boolean" size="n" maxlength="n" tabindex="n"/>

Specifying a Format Mask Specifying a Format Mask

A: Any symbolic or uppercase alphabetic character (no numbers)

a: Any symbolic or lowercase alphabetic character (no numbers)

N: Any numeric character (no symbols or alphabetic characters)

X: Any symbolic, numeric, or uppercase alphabetic character (not changeable to lowercase)

x: Any symbolic, numeric, or lowercase alphabetic character (not changeable to uppercase) M: Any symbolic, numeric, or uppercase alphabetic character (changeable to lowercase)--for multiple character input, defaults to uppercase first character

m: Any symbolic, numeric, or lowercase alphabetic character (changeable to uppercase)--for multiple character input, defaults to lowercase first character

•To limit the number of characters users can enter, you can specify a single digit number before the character tag--for example, format="3X" lets user enter a maximum of three symbolic, numeric, or uppercase alphabetic characters.

•To let users enter an unlimited number of characters, specify an asterisk (*) before the character tag--for example, format="*a" lets the user enter any number of symbolic or lowercase alphabetic characters.

Select and OptionSelect 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 title="Selectable List 1">

<p>

<select multiple=“true”>

<option value="htm">HTML School</option>

<option value="xml">XML School</option>

<option value="wap">WAP School</option>

</select>

</p>

</card>

</wml>

--- Selectable List 1---

HTML School XML School WAP School

Select SyntaxSelect Syntaxtext

<select title="label"

multiple="boolean”

name="variable”

default="default"

iname="index_var”

ivalue="default”

tabindex="n">

content

</select>

Option SyntaxOption Syntax

The <option> element specifies a particular choice within a <select> element.

Syntax

<option title="label" value="value" onpick="url">content </option>

FieldsetFieldset

<?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="Fieldset">

<p> <fieldset title="CD Info">

Title: <input name="title" type="text"/><br/>

Prize: <input name="prize" type="text"/>

</fieldset>

</p>

</card>

</wml>

------- Fieldset--------

CD InfoTitle:

Prize:

WML TasksWML Tasks

• Go task• Prev task• Refresh task• Noop task

Task ElementsTask ElementsStart Tag Purpose WML<go> Represents the action of

switching to a new card1.1

<noop> Says that nothing should be done(noop stands for "no operation").Used to override deck-levelelements

1.1

<prev> Represents the action of goingback to the previous card

1.1

<refresh> Refreshes some specified cardvariables. If any of the variablesare shown on the screen, this taskalso refreshes the screen

1.1

Go TaskGo Task

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

<wml><card><p> <anchor> Go To Test <go href="test.wml"/> </anchor></p></card> </wml>

• The <go> element is a task element that instructs the device to open a specified URL.

• If the URL specifies a particular card, the device displays that card.

• If the URL specifies a deck, the device displays the first card in that deck.

Syntax:

<go href="url" sendreferer="boolean" method="method"accept-charset="charset" <postfield name="data" value="value"/>content </go>

where content represents the variables to set when opening the specified URL:

content You can optionally specify one or more variables in a <go> statement:

<setvar>

Prev TaskPrev Task

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

<wml>

<card>

<p>

<anchor>

Previous Page

<prev/>

</anchor>

</p>

</card>

</wml>

• The <prev> element is a task element that instructs the device to remove the current URL from the history stack and open the previous URL.

• If no previous URL exists on the history stack, specifying <prev> has no effect.

Syntax:

<prev>content</prev>

where content represents the variables to set when opening the previous URL:

content You can optionally specify one or more variables in a <prev> statement:

<setvar>

Noop TaskNoop Task

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

<wml>

<card>

<p>

<do type="prev" label="Back"> <noop/>

</do>

</p>

</card>

</wml>

Syntax

<noop/>

• The <noop> element is a task element that instructs the device to do nothing, i.e. "no operation."

• This element is useful for overriding deck-level <do> elements, called shadowing

Refresh TaskRefresh Task

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

Syntax

<refresh>content</refresh>

where content represents the variables to refresh:

content You must specify at least one variable in a <refresh> statement:

<var>

•The <refresh> element is a task element that instructs the device to refresh the specified card variables.

•The device also refreshes the display if any of those variables are currently shown.

<wml>

<card>

<p>

<anchor>

Refresh this page

<go href="thispage.wml"/>

<refresh>

<setvar name="x" value="30"/>

</refresh>

</anchor>

</p>

</card>

</wml>

TimerTimer

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

The <timer> element provides a method for invoking a task automatically after some period of user inactivity. Any task or user action that activates the card starts the timer, and executing any task element stops it. You can only associate one task per timer, and you can only define one timer per card.

<wml><card ontimer="#card2"><timer name="time" value="50"/><p>Hello, Unwired World!</p></card>

<card id="card2">...</card></wml>

Syntax

<timer name="variable" value="value"/>

FormsFormsA form is basically a do/go function

<do type="accept" label="Next">

<go method="post” href="http://mydomain.com/mycgiscript.cgi">

<postfield name="searchvalue" value="$(search)"/>

<postfield name="type" value="general"/>

</go>

</do>

<p>

Search for:

<input type="text" name="search"/>

</p>

VariablesVariables

Variables are used to proliferate status information or user entries from one card to another or to the server.

Variables consist of a letter or underscore character, followed by zero or more letters, numbers or underscore.

WML variables are case sensitive.

A WML variable can be specified in various ways:

• with a setvar command

• through an input element

• with a postfield command

The major use of variables is for forms.

Specifying a Variable with the Setvar Command

Specifying a Variable with the Setvar Command

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

Syntax:

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

When someone executes a task (like go, prev, and refresh), the setvar element can be used to set a variable with a specified value.

Specifying a Variable through an Input Element

Specifying 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 School</option><option value="XML">XML School</option></select></card>

To use the variable we created in the example above:

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

Character EntitiesCharacter EntitiesThe following are the only non-numeric entities supported by wml:

Result Description Entity Name Entity Number

& Ampersand &amp &#38

‘ Apostrophe &apos &#39

> Greater-than &gt &#62

< Less-than &lt &#60

Non-breakingspace

&nbsp &#160

“ Quotation mark &quot &#34

- Soft hyphen &shy &#173

TemplateTemplate

This element behaves like a function that is shared by all the cards of a deck.

Syntax

<template>

Task

</template>

<wml><template><do type="prev" name="previous” label="Previous"><prev/></do></template>

ConclusionConclusion

• WML offers software developers an entirely new, exciting platform on which to deploy their applications.

• With this new platform, however, there comes a host of tradeoffs and challenges.

• A new wrinkle will be added to the design process as things like server round-trips, bandwidth, and display sizes become issues to contend with.

• There is no doubt that WAP opens the door to a new era in application development and deployment.

ReferencesReferences

• www.w3schools.com/wap• devgate2.phone.com/htmldoc/32w/wmlref/• www.aitcom.net/wmltutor• www.Wap-UK.com• www.home-port.net/wml.htm• www.waptechinfo.com• www.wapdesign.org.uk/• www.nokiko.com/wap/wml-template.asp

Any Questions / Suggestions?Any Questions / Suggestions?

Please email me at amisha@csee.wvu.edu

Thank You!!!