Exercise_1 Installation And Configuration of Toolkit.

Problem Statement

The aim of this exercise is to install, configure and execute Nokia WAP Toolkit on your local
machine.

Figure 1 shows the first face of the Installation process

Figure 2 shows the second t step of the installation Process

1
 Figure 3: this shows the selection of the various languages (WML and XHTML

Figure 4 showing the Window of the emulator

2
 Figure 5 The above screen shows the final installation of the Nokia WAP Toolkit.

Exercise_2 Hello World

Problem Statement/Aim
The aim of this exercise is to display the string message Hello World in the Wireless
Application Protocol (WAP) emulator.
Source Code/ The process involve.
<?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=" title="WML EXERCISE 1">
<p>
Hello My Dear World!!!
</p>

3
 </card>
<card id="card2" title="EXE 1">
<p>Welcome to the World of WML</p>
</card>
</wml>

Sample Output:

Exercise_3 Hello World

Problem Statement/Aim
The aim of this exercise is to format the paragraphs and use line breaks. in the Wireless
Application Protocol (WAP) emulator.

Source Code/ The process involve.

<?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="Pargraphs">
<p>
A paragraph Tutorial
</p>
<p>
Another Paragraph <br/>with WML practical lesson. <br/>Good Bye!!!
</p>
</card>
</wml>

Sample Output:

4
Exercise_4 Text Formatting

Problem Statement/Aim
The aim of this exercise is to use the various text formatting tags. in the Wireless Application
Protocol (WAP) emulator.

Source Code/ The process involve.

<?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>

5
Sample Output:

Exercise_5 WML Tables.

Problem Statement/Aim
The aim of this exercise is to design tables using WML in Wireless Application Protocol
(WAP) emulator.

Source Code/ The process involve.

<?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="page1" title="Table in WML">
<p>
<table columns="3" align="LCR">
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</p>
</card>

6
 </wml>

Example 2 codes
<?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="page1" title="Table in WML">
<p>
<table columns="3" align="LCR">
<tr>
<td>Mark 1</td>
<td>Mark 2</td>
<td>Mark 3</td>
</tr>
<tr>
<td>60%</td>
<td>80%</td>
<td>50%</td>
</tr>
<tr>
<td>70%</td>
<td>85%</td>
<td>75%</td>
</tr>
</table>
</p>
</card>
</wml>

Sample Output:

Sample Output for Example 2:

7
Exercise_6LINKS.

Problem Statement/Aim
The aim of this exercise is to create links in WML.
Source Code/ The process involve.
<?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= "WML Tutorial Ch1" id= "tutorial_ch1" >
<p>
<em>Chpater 1:WMLIntroduction</em><br/><br/>
...<br/><br/>
<anchor>
<go href="#tutorial_ch2"/>
Next chapter:WML Deck and Card
</anchor>
</p>
</card>

<card id="tutorial_chp2" title="WML Tutorials Ch2">

<p>
<em>Chapter 2: WML Deck and Card</em><br/><br/>
...<br/><br/>
<anchor>
<go href="#tutorial_ch3"/>
Next chapter: WML Document Structure
</anchor>
</p>
</card>
<card id="tutorial_chp3" title="WML Tutorial Ch3">
<p>
<em>Chapter 3: WML Document Structure</em><br/><br/>
...<br/><br/>

8
<anchor>
<go href="#tutorial_ch4"/>
Next chapter: WML Generic Metadata
</anchor>
</p>
</card>

<card id="tutorial_chp4" title="WML Tutorial Ch4">

<p>
<em>Chapter 4: WML Generic Metadata</em><br/><br/>
...<br/><br/>
<anchor>
<go href="#tutorial_ch1"/>
Back to chapter 1: WML Introduction
</anchor>
</p>
</card>
</wml>

Sample Output:

Exercise_7 WML Events (onenterbackward).

Problem Statement/Aim
The aim of this exercise is to demonstrate a WML events(onenterbackward).
Source Code.

<?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="tutorial_tc" title="WML Tutorial">
<p>
Hello, welcome to our WML tutorial.<br/><br/> Table of Contents:<br/>
<a href="#tutorial_ch1_ad">Chapter 1: WML Introduction</a><br/>

9
<a href="#tutorial_ch2_ad">Chapter 2: WML Deck and Card</a><br/><br/>
...
</p>
</card>
<card id="tutorial_ch1_ad" title="Advertisement">
<onevent type="onenterbackward">
<prev/>
</onevent>
<onevent type="ontimer">
<go href="#tutorial_ch1"/>
</onevent>
<timer value="30"/>
<p>
<a href="http://12345site.com/">Click here to download our free ringtones, wallpapers, mobile
games and MP3 songs now.</a><br/><br/>
<a href="#tutorial_ch1">Skip</a>
</p>
</card>
<card id="tutorial_ch2_ad" title="Advertisement">
<onevent type="onenterbackward">
<prev/>
</onevent>
<onevent type="ontimer">
<go href="#tutorial_ch2"/>
</onevent>
<timer value="30"/>
<p>
<a href="http://67890site.com/">Click here to buy WAP-enabled cell phones online now. Free
shipping.</a><br/><br/>
<a href="#tutorial_ch2">Skip</a>
</p>
</card>
<card id="tutorial_ch1" title="WML Tutorial Ch1">
<p>
<em>Chapter 1: WML Introduction</em><br/><br/>
...<br/>
<anchor>
<prev/> Go Back
</anchor>
</p></card>
<card id="tutorial_ch2" title="WML Tutorial Ch2">
<p>
<em>Chapter 2: WML Deck and Card</em><br/><br/>
...<br/>
<anchor>
<prev/> Go Back
</anchor>
</p>
</card>

10
</wml>

Sample Output:

Ifyouselectthe"Chapter1:WMLIntroduction"anchorlink,youwillseean advertisement in
themobile phone browser,like this:

Whenthe"Skip"anchorlink is not selected,themobilephonebrowserwill displayChapter1 of

thetutorial automaticallyafter 3 seconds:

11
If you select the "Go Back" anchor link, the onenterbackward event will be triggered when the
advertisement card is loaded. The WML code associated with the onenterbackward event, that
is <prev/>, will be executed. So, the mobile phone browser will go backwards once more and
the table of contents will display instead of the advertisement.

Exercise_8 WML Selection Lists.

Problem Statement/Aim
The objective of this exercise is to demonstrate the use of WML selection lists.
Source Code.
<?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="Selection List">
<p>
This is a selection list:<br/>
<select name="selection_list" multiple="true">
<option value="tutorial_A">WML Tutorial A</option>
<option value="tutorial_B">WML Tutorial B</option>
<option value="tutorial_C">WML Tutorial C</option>
</select>
</p>
</card>
</wml>

Sample Output:
TheresultoftheaboveWMLcodeinNokia 6670mobilephonebrowsersis shown below:

12
Exercise_9WML Event(onpick).

Problem Statement/Aim
The objective of this exercise is to demonstrate WML event specifically onpick event.

Source Code.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<!--To demonstrate Onpick evetn-->
<wml>
<card id="tutorial_tc" title="WML Tutorial">
<p>
Hello, welcome to our WML tutorial.<br/><br/> Table of Contents:<br/>
<select name="selection_list">
<option onpick="#tutorial_ch1">Chapter 1</option>
<option onpick="#tutorial_ch2">Chapter 2</option>
<option>
<onevent type="onpick">
<go href="#tutorial_ch3"/>
</onevent>
Chapter 3
</option>
<option>
<onevent type="onpick">
<go href="#tutorial_ch4"/>
</onevent>
Chapter 4
</option>
</select>
</p>

13
</card>
<card id="tutorial_ch1" title="WML Tutorial Ch1">
<p>
<em>Chapter 1: WML Introduction</em><br/><br/>
...
</p>
</card>
<card id="tutorial_ch2" title="WML Tutorial Ch2">
<p>
<em>Chapter 2: WML Deck and Card</em><br/><br/>
...
</p>
</card>
<card id="tutorial_ch3" title="WML Tutorial Ch3">
<p>
<em>Chapter 3: WML Document Structure</em><br/><br/>
...
</p>
</card>
<card id="tutorial_ch4" title="WML Tutorial Ch4">
<p>
<em>Chapter 4: WML Generic Metadata</em><br/><br/>
...
</p>
</card>
</wml>

Sample Output:

The following screenshotsshow theresultoftheabove WMLexampleinNokia 6670mobile

phone browsers:

When the selection list is selected, the mobile phone browser will show the options
available:

14
If you select any of the above options, the <go> task associated with the onpick event
of that option will be performed and the mobile phone browser will show the chapter
chosen.

Exercise_10 WML Password Input Fields.

Problem Statement/Aim
The objective of this exercise is to show the use of WML password input fields.

Source Code:
<?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="Password Input Fields">
<p> Please login before reading our WML tutorial.<br/><br/>
User Name:
<input type="text" name="name" maxlength="16" value="Jack"/><br/>
Password:
<input type="password" name="passwd" maxlength="10" value="abc"/>
</p>
</card>
</wml>

15
Sample Output:

Exercise_11 Reset Button in WML.

Problem Statement/Aim
The objective of this exercise is to use the WML reset Buttons.

Source Code.
<?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 Form">
<p>
User name:<br/>
<input name="myUserName"/><br/> Password:<br/>
<input name="myPassword" type="password"/><br/><br/>
<anchor>
<go>
<method="get" h+ref="resetButtonsProc.asp"/>
<postfield name="name" value="$(myUserName)"/>
<postfield name="password" value="$(myPassword)"/>
</go>
Submit Data
</anchor><br/>
<anchor>
<refresh>
<setvar name="myUserName" value=""/>
<setvar name="myPassword" value=""/>
</refresh> Reset Form
</anchor>
</p>
</card>
</wml>

16
Sample Output:

When a personal data is entered like this:

When the Reset Button is clicked the above output will be seen as below:

17
Exercise_12 Referencing And Setting Variable.

Problem Statement/Aim
The objective of this exercise is to use variables like card, do, go, prev, setvar, onevent, refresh
and attribute such as newcontext etc.

Source Code.

<?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="First Card" newcontext="true">
<p>

Card 1 ... <br/>

<!-- The following variables will not be defined

until the other cards in this deck are entered.
-->

card1 var1 = $(card1_var1) <br/>

card2 var1 = $(card2_var1) <br/>
card3 var1 = $(card3_var1) <br/>

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

<go href="#card2">
<setvar name="card1_var1" value="val_1"/>
</go>
</do>
</p>
</card>

18
<card id="card2" title="Second Card">
<p>
Card2 ...<br/>

Card1 var1 = $(card1_var1) <br/>

Card2 var1 = $(card2_var1) <br/>
Card3 var1 = $(card3_var1) <br/>

<do type="accept" label="First Card">

<go href="#card1"/>
</do>

<do type="accept" label="Third Card">

<go href="#card3">
<setvar name="card2_var1" value="val_2"/>
</go>
</do>

<do type="prev" label="Previous Card">

<prev/>
</do>

</p>
</card>

<card id="card3" title="Third Card">

<onevent type="onenterforward">
<refresh>
<setvar name="card3_var1 " value="val_3"/>
</refresh>
</onevent>

<p>
Card 3 ...<br/>

Card1 var1 = $(Card1_var1) <br/>

Card2 var1 = $(Card2_var1) <br/>
Card3 var1 = $(card3_var1) <br/>

<do type="prev" label="Previous">

<prev/>
</do>
</p>
</card>
</wml>

19
Sample Output:

Exercise_13 Task Shadowing And Inter-Deck Navigation.

Problem Statement/Aim
The objective of this exercise is geared toward the use of the following access, head, meta,
template and noop.

Source Code

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

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

<card id="card1" title="---First Card---" newcontext="true">

<p>

Card 1 ... <br/>

</p>
<p>
<b>Next Card</b>
<do type="accept" label="Next Card">
<go href="#card2"/>
</do>

<!-- Must override the DO/PREV in the template to

20
 prevent the PREV element from going back to
the previous deck
-->

<do type="prev" name="Previous">

<noop/>
</do>

</p>
</card>

<card id="card2" title="Second Card">

<p>

Card 2 ... <br/>

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

<go href="#card3"/>
</do>

</p>
</card>

<card id="card3" title="Third Card">

<p>

Card 3 ... <br/>

<!-- NOTE: the following DO element will go to a new

deck. The name of this deck is embedded
in the URL.
-->

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

<go href="deck2b.wml"/>
</do>

</p>
</card>

</wml>

Sample Output:

21
Pressing Next card sends you to the second card of the deck. The card contains the next card
item specified in the card and the previous item specified in the template

Pressing Next Card sends you to the third card. The card contains the Next Card item
specified in the card and the Previous item specified in the template.

The Next Deck menu item allows you to navigate to deck2b.wml, which contains a previous
soft key, allowing you to navigate to the card you visited
last

22