wml

26
Wireless Markup Language WML was designed to describe content and format for presenting data on devices with limited bandwidth, limited screen size and limited user input capability. WML is a tagged language similar to HTML. Features of WML: Text and Image support: Formatting and layout commands are provided for text and image support. Deck/card organizational metaphor: WML documents are subdivided into well-defined cards. Users navigate by moving back and forth between card s. Support for navigation among cards and decks: WML documents provide support for event handling which is used for navigation. WML Tags: Tag Description Deck Structure <access> Access control <card> Card Definition <head> Deck level Information <template> Deck level event bindings <wml> Deck definition Content <img> Image <p> Paragraph <table> Table <td> Table data <tr> Table row Formatting <b> Bold <big> Large font <br> Next line <small> Small font <strong> Strong font User Input <input> Data entry Page 1 of 26

Upload: aepatil74

Post on 24-Nov-2014

139 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: WML

Wireless Markup Language

WML was designed to describe content and format for presenting data on devices with limited bandwidth, limited screen size and limited user input capability. WML is a tagged language similar to HTML.Features of WML:

Text and Image support: Formatting and layout commands are provided for text and image support. Deck/card organizational metaphor: WML documents are subdivided into well-defined cards. Users navigate by moving back and forth between card s. Support for navigation among cards and decks: WML documents provide support for event handling which is used for navigation.

WML Tags:Tag Description

Deck Structure<access> Access control<card> Card Definition<head> Deck level Information<template> Deck level event bindings<wml> Deck definition

Content<img> Image<p> Paragraph<table> Table<td> Table data<tr> Table row

Formatting<b> Bold<big> Large font<br> Next line<small> Small font<strong> Strong font

User Input<input> Data entry<option> Single choice in a List<select> Choice List

Variables<post field> Set an http request variable<setvar> Set a variable in task

Page 1 of 23

Page 2: WML

Tasks<go> Go to a URL<noop> No action<prev> Go to previous card<refresh> Screen redraw

Tasks/Event Bindings<a> Abbreviated anchor<anchor> Anchor<do> Response to user button press

WMLScript:

It is similar to javascript. It is designed for defining script-type programs in a user device with limited processing power and memory.

Features of WMLScript:

Javascript based scripting language: WMLscript is a subset of javascript. Procedural Logic: It adds power of procedural logic to Wireless Application Environment. Event Based: WMLScript may be invoked in response to certain user environmental events. Compiled implementation: It can be compiled down to a more efficient byte code that is transported to client.

WMLScript Stataments:

Statement Description= AssignmentBreak Terminate current loopContinue Current loop iterationFor Indexed loopfunction Function declarationreturn Exit the current functionvar Variable declaration

Page 2 of 23

Page 3: WML

Program 1: Write a program for card Navigation.

WML Code:

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

<do type="accept" label="Home"><go href="#index"/></do>

</template>

<card id="index" title="Welcome"> <p align="center"> <big><b>Welcome</b></big> </p> <p> <anchor> <go href="#card2"/> Go to card 2 </anchor> </p><do type="accept">

<noop/></do> </card>

<card id = "card2" title="aditya"><p> <big><b>This is card 2</b></big>

<br></br><a href="#index">Home</a><br></br><a href="#card3">go to card3</a><br></br><a href="#card4">go to card4</a><br></br>

</p></card><card id="card3" title="aditya"> <p> <big><b>This is card 3</b></big>

Page 3 of 23

Page 4: WML

<br></br><a href="#index">Home</a><br></br><a href="#card2">go to card2</a><br></br><a href="#card4">go to card4</a><br></br>

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

<card id="card4" title="aditya"> <p> <big><b>This is card 4</b></big>

<br></br><a href="#index">Home</a><br></br><a href="#card2">go to Card 2</a><br></br><a href="#card3">go to Card 3</a><br></br>

</p>

<p>

<img src="image001.gif" alt="Smile" height="5" width="5" /><br/>

Welcome

</p>

</card>

</wml>

Page 4 of 23

Page 5: WML

Output:

Page 5 of 23

Page 6: WML

Page 6 of 23

Page 7: WML

Program 2: Write a Program to make an interactive interface asking user to enter details and show that details in the next card.

First Name Last Name Password Gender Hobbies Qualification

WML Code:<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> <wml> <card id="card1" title="aditya"> <p align="left"> <big><b>First Name </b></big>

<input name="fn" size="15"/> <big><b>Last Name </b></big>

<input name="ln" size="15"/> <big><b>Password </b></big>

<input name="ps" size="15" type="password"/> <big><b>Gender </b></big>

<select name="gn"><option value="Male">Male</option><option value="Female">Female</option>

</select> <big><b>Hobbies </b></big>

<select name="hb" multiple="true"><option value="Tenis">Tenis</option><option value="cricket">cricket</option><option value="Hocky">Hocky</option>

</select> <big><b>Qualification</b></big> <select name="qn">

<option value="BE">BE</option><option value="MCA">MCA</option>

</select> <a href="#card2">Submit</a> </p> </card> <card id="card2" title="aditya">

Page 7 of 23

Page 8: WML

<p><b>First name:</b> $(fn)<br></br> <b>Last name:</b> $(ln)<br></br><b>Password:</b> $(ps)<br></br><b>Gender:</b> $(gn)<br></br> <b>Qualification:</b> $(qn)<br></br><b>Hobbies:</b> $(hb)<br></br>

</p></card> </wml>

Output:

Page 8 of 23

Page 9: WML

Program 3: Write a Program to validate Password. It should have following fields: Login Password Country

Display error message if any of the fields is empty or length of password is less than 6 characters.

WML code:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> <wml> <card id="card1" title="LOGIN"> <do type="accept" label="Login"> <go href="valid.wmls#validate()"/> </do> <p align="left">

Login:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="login" size="10"/>Password:<input name="password" type="password" size="10"/>Country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="country" size="10"/>

</p> </card> <card id="card2" title="Username Empty"> <p>User field is empty..</p> </card> <card id="card3" title="Password Empty"> <p>Password field is empty..</p> </card> <card id="card4" title="Password length"> <p>Password size at least 6</p> </card> <card id="card5" title="Country Empty"> <p>Country field is empty..</p> </card> <card id="card6" title="Login Successful"> <p>Login Successful..</p> </card></wml>

Page 9 of 23

Page 10: WML

WML Script:

extern function validate(){

var log = WMLBrowser.getVar("login");var pass = WMLBrowser.getVar("password");var ctry = WMLBrowser.getVar("country");var temp = String.length(pass);if(String.isEmpty(log))

WMLBrowser.go("P3Validation.wml#card2");else if(String.isEmpty(pass))

WMLBrowser.go("P3Validation.wml#card3");else if(temp<6)

WMLBrowser.go("P3Validation.wml#card4");else if(String.isEmpty(ctry))

WMLBrowser.go("P3Validation.wml#card5");else

WMLBrowser.go("P3Validation.wml#card6");}

Output:

Page 10 of 23

Page 11: WML

Page 11 of 23

Page 12: WML

Program 4: Write a Program to validate a Date.

WML Code:

<wml> <card id="card1" title="DateValidation"> <p>

<big><b>Date</b></big> <input name="dt" size="15"/>

<do type="Accept" label="OK"><go href="validation.wmls#valid()"/>

</do> </p>

<p align="center"> Date Should be in dd-mm-yyyy format

</p> </card> </wml>

WML Script:

extern function valid()Page 12 of 23

Page 13: WML

{ var date1=WMLBrowser.getVar("dt");

var day=String.elementAt(date1,0,"-");var mo=String.elementAt(date1,1,"-");var year=String.elementAt(date1,2,"-");

var d=Lang.parseInt(day);var m=Lang.parseInt(mo);var y=Lang.parseInt(year);

if(m<1||m>12){

Dialogs.alert("Invalid Date");}else if(y%4==0&&m==2&&(d<1||d>29)){

Dialogs.alert("Invalid Date");}else if(y%4!=0&&m==2&&(d<1||d>28)){

Dialogs.alert("Invalid Date");}else if((m==1||m==3||m==5||m==7||m==8||m==10||m==12)&&(d>31||d<1)){

Dialogs.alert("Invalid Date");}else if((m==4||m==6||m==9||m==11)&&(d>30||d<1)){

Dialogs.alert("Invalid Date");}else{

Dialogs.alert("Valid Date");}

}

Output:

Page 13 of 23

Page 14: WML

Page 14 of 23

Page 15: WML

Page 15 of 23

Page 16: WML

Program 5: Write a Program to design a Registration Form.

WML Code:

<wml> <template> <do type="prev"><prev/></do> </template> <card id="card1" title="RegistrationForm"> <do type="unknown" label="REGISTER"> <go href="regVal.wmls#validate()"/> </do>

<p align="left"> <big><b>$(err1)</b></big>

<br></br> <big><b>First Name * </b></big> <input name="fname" size="8"/> <big><b>Last Name * </b></big>

<input name="lname" size="8"/>

Page 16 of 23

Page 17: WML

<big><b>Gender * </b></big> <select name="gender" multiple="false"> <option value="Male">Male</option> <option value="Female">Female</option> </select> <big><b>DOB * </b></big>

<input name="dob" size="8"/> <big><b>Email * </b></big> <input name="email" size="8"/> <big><b>User ID * </b></big> <input name="uid" size="8"/> <big><b>Password * </b></big> <input name="pass" size="8" type="password" /> </p> </card> <card id="card2" title="Card #2"> <p> <big><b>Successfully Registered</b></big> </p> </card> </wml>WML script:extern function validate() { var Login= WMLBrowser.getVar("dob"); var m = String.elementAt(Login,1,"-"); var d = String.elementAt(Login,0,"-"); var y = String.elementAt(Login,2,"-"); WMLBrowser.setVar("mon",m); WMLBrowser.setVar("day",d); WMLBrowser.setVar("yy",y); var mm=Lang.parseInt(m); var dd=Lang.parseInt(d); var yr=Lang.parseInt(y);

var fn=WMLBrowser.getVar("fname"); var ln=WMLBrowser.getVar("lname");

Page 17 of 23

Page 18: WML

var gr=WMLBrowser.getVar("gender"); var db=WMLBrowser.getVar("dob"); var em=WMLBrowser.getVar("email"); var ud=WMLBrowser.getVar("uid"); var ps=WMLBrowser.getVar("pass"); if(noEmptyField(fn,ln,gr,db,em,ud,ps)) { if(isEmailValid(em))

{ }

else { } if(date_validate(mm,dd,yr)) { } else { } if(((isEmailValid(em)))&&((date_validate(mm,dd,yr)))) { WMLBrowser.go("regVal.wml#card2"); } }}function date_validate(mm,dd,yr){ if(mm >= 1 && mm <= 12) { if(mm==2) { if(yr%4 == 0) { if(dd > 29 || dd < 1) { WMLBrowser.setVar("err1","Invalid Date"); return false; } } if(yr%4 != 0) {

Page 18 of 23

Page 19: WML

if(dd > 28 || dd < 1) { WMLBrowser.setVar("err1","Invalid Date"); return false; } } } if(mm==1 || mm==3 || mm==5|| mm==7 || mm==8 || mm==10 || mm==12) { if(dd > 31 || dd < 1) { WMLBrowser.setVar("err1","Invalid Date"); return false; } } if(mm==4 || mm==6 || mm==9|| mm==11) { if(dd > 30 || dd < 1) { WMLBrowser.setVar("err1","Invalid Date"); return false; } } else { return true; } } else { WMLBrowser.setVar("err1","Invalid Date"); return false; } return true;}

function noEmptyField(fn,ln,gr,db,em,ud,ps){ if(String.isEmpty(fn) || String.isEmpty(ln) || String.isEmpty(gr) || String.isEmpty(db) || String.isEmpty(em) || String.isEmpty(ud) || String.isEmpty(ps) ) { WMLBrowser.setVar("err1","Empty Fields");

Page 19 of 23

Page 20: WML

return false; } else if(String.length(ps) < 6) { WMLBrowser.setVar("err1","Password Length should be greater than 6 char"); return false; } else { return true; } return true;}

function isEmailValid(em){ if(String.elements(em,"@")!=2) { WMLBrowser.setVar("err1","Invalid Email ID"); return false; } else

{ return true; }return true;}

Output:Validation for Empty Fields:

Page 20 of 23

Page 21: WML

Validation for Date:

Page 21 of 23

Page 22: WML

Validation for E-mail-ID:

Validation for Password Length:

Page 22 of 23

Page 23: WML

Valid Input:

Page 23 of 23