Mobile Internet Lab Book: Semester 1 2003/2004

CCM3 0 3 2
Mobile Internet

Lab Book

Semester 1
2003/2004

Dr Y. Luo
School of Computing Science

Contents

Contents...................................................................................................................................... 2
Lab 1: Introduction to Nokia Mobile Internet Toolkit and WML.............................................. 4
Nokia Mobile Internet Toolkit (NMIT) 4.0 ........................................................................... 4
Major features of NMIT..................................................................................................... 4
Browsing Editors................................................................................................................ 4
Push Content Editors.......................................................................................................... 5
MMS Editors...................................................................................................................... 5
Launching NMIT................................................................................................................ 6
File Menu Options.............................................................................................................. 6
Edit Menu Options ............................................................................................................. 7
Windows Menu Options..................................................................................................... 7
Tools Menu Options........................................................................................................... 8
Help Menu.......................................................................................................................... 8
Editor Window Layout....................................................................................................... 8
WML Content Editor ......................................................................................................... 9
WMLScript Editor.............................................................................................................. 9
WML Basic .......................................................................................................................... 10
Example 1.1 creating your first WML page..................................................................... 10
Example 1.2 displaying a cart title................................................................................... 10
Example 1.3 text formatting............................................................................................. 11
Example 1.4 formatting a paragraph................................................................................ 11
Example 1.5 displaying a simple deck............................................................................. 11
Lab 2: Card Navigation............................................................................................................ 13
Example 2.1 using links with a simple deck.................................................................... 13
Example 2.2 creating an action button............................................................................. 14
Example 2.3 using templates............................................................................................ 14
Example 2.4 using templates and shadowing................................................................... 15
Example 2.5 using URLs ................................................................................................. 16
Lab 3: Managing Output .......................................................................................................... 18
Example 3.1 physical formatting options......................................................................... 18
Example 3.2 using a variable to display information an a card ....................................... 18
Example 3.3 paragraph alignment and wrapping............................................................. 19
Example 3.4 constructing a simple table.......................................................................... 19
Example 3.5 using optional table attributes ..................................................................... 20
Example 3.6 special WML character entities................................................................... 21
Lab 4: Working with User Input .............................................................................................. 23
Example 4.1 using parentheses around variable references............................................. 23
Example 4.3 setting variables using the <setvar> tag...................................................... 24
Example 4.5 gathering a simple string in the browser ..................................................... 25
Example 4.6 using <type> attribute to specify text or password input ............................ 26
Example 4.7 formatting alphabetic and mixed-case input ............................................... 27
Example 4.8 using the name and value attributes in the <select> tag.............................. 28
Example 4.9 using the indexed selection list attributes ................................................... 28
Example 4.10 using the onpick attribute to send the user to another card....................... 29
Lab 5: Using WMLScript......................................................................................................... 30
Example 5.1 input validation application in WML and WMLScript............................... 30
Example 5.2 set variable in the WML deck using WMLScript ....................................... 31
Example 5.3 passing parameters -1.................................................................................. 32
Example 5.4 passing parameters - 2................................................................................. 32
Example 5.5 validating an email address ......................................................................... 33
Example 5.6 currency conversion using WML and WMLScript..................................... 34

Lab 1: Introduction to Nokia Mobile Internet Toolkit and WML
This section provides a briefly overview of Nokia Mobile Internet Toolkit. For detailed
information, please see the user's guide of the toolkit.

Nokia Mobile Internet Toolkit (NMIT) 4.0

Nokia Mobile Internet Toolkit, Version 4.0, supports WAP standards, authored by the WAP
Forum, as well as other specifications authored by other organizations.

Nokia Mobile Internet Toolkit (NMIT) consists of a set of editors for creating various types of
mobile Internet content. NMIT enables the display of this content on multiple supported
phone SDKs, such as the Nokia 7210 Content Authoring SDK as well as the Nokia Mobile
Browser Simulator (NMB) concept phone SDK.

Phone SDKs are installed separately. NMIT detects installed, supported phone SDKs at
startup and lists these in its SDK Control Panel. You can display content you author on any
supported phone SDK by simply clicking a Show button within an editor.

Most NMIT editors are used for creating XML-based content types defined by Document
Type Defintions (DTDs). These editors employ content validation to check content against a
DTD, and they provide features for easily selecting elements and attributions for insertion
based on current cursor position. In addition, NMIT provides a DTD Manager through which
you can import new DTDs for use by NMIT editors.

Major features of NMIT
1. A set of editors for creating and editing mobile Internet content. These are all accessible
using the File>New or File>Open command. Most editors enable the immediate processing
and display of content on a phone SDK by pressing a button (Show or Push) within the
editor. The following briefly describes these editors.

Browsing Editors
WML 1.3 Deck - Create a Wireless Markup Language (WML) document. Supports
the WML 1.3 DTD, which conforms to the June 2000 WAP specification. Creation of
WML 1.2 and 1.1 documents is also supported.
WML Script - Create WMLScript content. WMLScript is a derivative of ECMA
Script and is used to add programmatic logic to a WML deck, for example,
calculations.
WBMP Image - Create a Wireless Bitmap (WBMP) image. Similar to most image
editors, the WBMP editor enables the creation and editing of WBMP images, as well
as conversion of existing images from GIF and JPEG formats to WBMP format.
XHTML-MP - Create an XHTML document based on the XHTML Mobile Profile
DTD.
XHTML-MP+CHTML - Create an XHTML document based on the XHTML Mobile
Profile DTD with additional element and attributes taken from Compact HTML.
CSS - Create a Cascading Style Sheet (CSS). The CSS contains formatting style
definitions that will be applied to the elements specified in an XHTML document.
Select DTD From List - Create a document based on a selected system DTD, that is, a
DTD from a built-in list or one you created yourself.
Push Content Editors
Service Indication (SI) Editor - Create a Service Indication Push message, which is
sent to notify a user of the availability of new content.
Service Loading (SL) Editor - Create a Service Loading Push message, which is sent
to force a user agent running on the client device to download new content (without
notifying the user).
Cache Operation (CO) Editor - Create a Cache Operation Push message, which is sent
to invalidate specific content in the user agent cache (thus forcing a reload of content
the next time the user requests that content).
Multipart Message Editor - Create a multipart message, which is a kind of Push
message consisting of more than one part, each of which is separately processed by the
user agent. The editor enables the incorporation and ordering of already existing parts
(files) into a single multipart message.

MMS Editors
MMS Wizard - Create a Multimedia Messaging file consisting of one or more parts,
each part consisting of text, image, or audio content.
MMS Message Editor - Create or edit an MMS Message. Major features enable you to
add, delete, or rearrange media parts; edit MMS headers and individual Part headers;
and push the message to selected phone SDKs.
SMIL Editor - Create a Synchronized Multimedia Integration Language file, for
specifying the presentational options of an MMS message.

2. An SDK Control Panel from which you can select one or more installed phone SDKs
upon which to display content from an editor or from the Internet. The panel is opened using
the Tools>SDK Control Panel

3. Several sample applications you can use as aids in developing your own content. These
include the content types WML, XHTML, Push, and MMS and are readily available through
the File>Open menu, through the Bookmarks button, or in the directory: <NMIT-
installation-directory>\samples.

4. Ease of Use Feature
Pop-Up Menus - Many NMIT commands and functions are accessible by clicking the
right mouse button. Right-clicking within a window area but not on an individual item
will generally display a popup menu of window-level commands, such as Close or
Tear off. Right-clicking on an individual item displays commands relevant to that
item. For example, right-clicking on an XHTML document displays commands for
revalidating the document and for showing the document on phone SDKs. If there are
no commands particularly relevant to an individual item, NMIT usually displays
window-level commands in the popup menu.
Tool Tips - Tool tips are pop-up text describing the function of an active control.
Throughout the NMIT interface, resting the cursor on an active control such as a
button or drop-down lists displays a tool tip.
Documentation and Online Help - NMIT provides help in convenient formats. Online
JavaHelp is available through the Help menu and can also be displayed in a context-
sensitive manner by pressing the F1 key. The
Users Guide is provided in PDF format for viewing using Adobe Acrobat.
Independent Windows - You can keep multiple documents open and visible
simultaneously by "tearing off" a document, that is, detaching it from the main NMIT
window so it is an independent window. As an independent window it can be sized,
moved, and minimized independently. To tear off a document, right-click in the
document window and choose the Tear Off pop-up menu option. To put a torn off
document back into the NMIT main window as a tab page, right-click in the document
window and choose the Put Back pop-up menu option.
Editor Preferences - Before using an NMIT editor, you may wish to set the available
editor preferences such as line numbering, auto-validation, and show warnings.

Launching NMIT

To launch NMIT from the Windows Start menu, choose:
Start>Programs>Nokia>Nokia Mobile Internet Toolkit>NMIT4.0

Upon launch, the NMIT Welcome tab is displayed.

The Welcome tab provides an overview of NMIT functions and contains active links that
enable you to launch editors and SDKs and to open online help topics. You can disable the
display of the Welcome tab on subsequent launches by checking the Do not show this tab
again check box.

File Menu Options
New - Displays the Available Content Types dialog from which you can choose a
content type for the file you wish to create. The dialog has three tab pages which
divide the content types into the following three categories (there is an editor for each
content type):
o Browsing Editors
o Push Editors
o Messaging Editors
After you select the desired content type and choose OK, NMIT opens the appropriate
editor, displaying a default template for the content type.
Open - Displays the Open file for editing dialog from which you can navigate to an
existing file that you wish to edit. NMIT opens the appropriate editor for the selected
file based on the file type.
Close - Closes the current document and displays the next open document in the
NMIT tab order (if there are other open documents).
Save - In an NMIT Editors window, saves an already named file. If the file is untitled,
you are prompted for a file name.
Save As - In an NMIT Editors window, opens the Save as dialog into which you can
type a file name for the file you wish to save. By default, NMIT supplies a file
extension for the file based on the content type.
Print - Opens the Print dialog from which you can print the current document.
Print to HTML... - Opens the Save As dialog which enables you to save the current
document in publishable HTML format. When such a document is subsequently
opened in a browser, it is displayed as it is displayed within an NMIT editor, showing
elements and attributes, proper syntax, and color coding. This format is useful for
publishing code for review by other content developers or for creating online
documentation for programming code.
<various file names> - Re-opens any of these most recently opened file names. Up to
four files may be listed.
Exit - Closes NMIT and sends a Close command to any running phone SDK.

Edit Menu Options
Undo - Undo the previous action. Note that NMIT dynamically renames this menu
item to reflect what its action will be. For example, if you have performed a paste
operation, the menu item is renamed Undo addition. This item is grayed out if there is
no previous action.
Redo - Do the action that had previously been undone; that is, undo the last undo.
Note that NMIT dynamically renames this menu item to reflect what its action will be.
This item is grayed out if there is no previous action.
Cut - Delete the selected text and copy it to the Clipboard.
Copy - Copy the selected text to the Clipboard.
Paste - Paste the contents of the Clipboard at the cursor insertion point.
Find - Opens the Find/Replace Text dialog in which you can specify text to find (and
optionally replace) in the current editor window.
Preferences - Opens the Preferences dialog.

Windows Menu Options
<open documents> - Displays a list of all open documents. Select an open document
to bring that document to the foreground for editing.
Tear Off <current> - Tears off the active document from the NMIT main window,
creating an independent window (with a complete menu bar) that can be sized, moved,
and minimized independently. This function enables you to view multiple documents
simultaneously. To put a torn off document back into the main NMIT window, choose
the Windows >Put Back menu item from the torn off windows menu bar. Both the
tearing off and the putting back of document windows can also be accomplished by
right-clicking the mouse in a document window and then choosing the desired option
from the popup menu.
Tools Menu Options
SDK Control Panel - Opens the SDK Control Panel from which you can choose
among available phone SDKs to which you wish to send a document for display. The
use of this control panel is described in the chapter titled Working With Phone SDKs.
DTD Manager - Opens the DTD Manager, an NMIT component that enables you to
register additional DTDs for use with NMIT content editors (see DTD Manager).
DRM - Opens the Nokia Content Publishing Toolkit, an independent application that
enables you to generate OMA DRM content packages and their related download
descriptors.
WAP Gateway - Launches Nokia WAP Gateway Simulator (NWGS) if installed on
your computer. NWGS is a single-user WAP Gateway based on the multi-user Nokia
Active Server. In order to browse the Internet using a phone SDK, the phone SDK
must be configured to use NWGS or an external WAP gateway. If the former, NWGS
must be running. This menu option is provided for convenience in launching NWGS.

Help Menu
The Help menu provides options for accessing NMIT user guide information, online help, and
release notes.

Editor Window Layout

The following figure shows the major regions in a validating editor.

Note the following with respect to the above figure:
Enter text in the text editing region. The NMIT editor displays a template for the
content type you have chosen when you create a new file.
Use the side panel to insert valid attributes for the element highlighted by the cursor in
the text editing region and to modify attribute values.
The message region displays validation messages when you save, Show, or Validate a
document.
Use the active buttons to validate content, show the document on phone SDKs, or set
editing options.
The document summary displays details about the current document.
WML Content Editor

By default, the NMIT WML editor references the WML 1.3 DTD. This DTD is the generally
recognized standard DTD for XHTML content. The required elements of this DTD are
described below.

The first XML statement <?xml version=1.0?> is required by all XML documents. The
second <!DOCTYPE> specifies the DTD Public ID and the URL of its Internet location.

The third required element is <wml> . Within the <wml> element, the <head> and
<template> elements are optional.

DTDs for WML versions 1.1 and 1.2 are also registered for use in NMIT editors, and you can
change the WML 1.3 DTD to 1.1 or 1.2 by placing the cursor in the <!DOCTYPE>
declaration and selecting either of these from the DTD drop-down selector in the side panel.

WMLScript Editor

The WMLScript Editor is opened whenever you take any of the following actions:
Choose File>New>WMLScript.
Choose File>Open and then choose a wmls file.

After coding your function, you compile the code by choosing the Compile button.

After choosing Compile, a message region is opened beneath the editing window. Within this
region, compile-time errors and status messages are displayed. You can hide these messages
in order to restore the full text editing window by choosing the Hide Messages button, and
after that, view the messages again by choosing the View Messages button, thus toggling
between the two views.

When your compilation is successful, you can test your function in the following ways:
Open the WML document that calls the function defined in your WMLS document
and then display the WML document on the phone SDK by choosing Show. All Nokia
phone SDKs have a Diagnostics panel containing a Current view. Most phone SDKs
also support the viewing of variables within the Current view. Using this view, you
can view and modify variables used in your WML Script document and then reload
the content again. Showing the WML document on the phone SDK enables you to see
the results of both your WML and WMLScript content on the phone SDK display
itself, as well as to observe the interaction between the two files in a browser context.
Choose the Call button in the WMLScript editor. Choosing Call opens the Calling
Script dialog into which you enter a call to one of the functions defined in the
WMLScript currently displayed in the editor. Alternatively, you can type the call in
the text box to the right of the Call button and then press Enter.

WML Basic

The best approach for learning a programming language is to practice through examples.
After you are familiar with the basic functions of the Nokia Mobile Internet Toolkit, try out
the following examples. Make sure you understand the meaning of every element used in the
examples.

Example 1.1 creating your first WML page

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

<wml>
<card>
<p>
Welcome to WAP and WML.
</p>
</card>
</wml>

Question: Can the text be placed in a card directly without <p> tag?

Example 1.2 displaying a cart title


<wml>
<card title="Welcome!">
<p>
Welcome to WAP and WML.
</p>
</card>
</wml>

Question: what is the difference on the simulator comparing with the output of example
1.1?

Example 1.3 text formatting


<wml>
<p>
Welcome to <b>WAP</b> and <b>WML</b>.
</p>
</card>
</wml>

Question: what is the function of <b> tag?

Example 1.4 formatting a paragraph


<wml>
<p>
Welcome to WAP and WML.<br/>
This is easy.
</p>
</card>
</wml>

Question: what does the <br> tag perform?

Example 1.5 displaying a simple deck


<wml>
<card id="card1">
<p>This is Card 1 </p>
</card>
<card id="card2">
</card>
<card id="card3">
</card>
</wml>

Questions: What is the <card> tag's id attribute used for? WML files can contain
multiple cards. However, the browser can only display one card at a time. How do you
specify a card to be displayed? If no card is specified or the requested card does not
exist, which card in the deck is displayed?

Lab 2: Card Navigation

Just like pages on a Web site, cards in WAP application require navigation capabilities to get
from card to card.

Two forms of navigation are supported:
1. Anchors can be placed around text or images to make them selectable (similar to the
HTML <a> tag).
2. All WAP devices have action keys which can be programmed as needed.

Try out the following examples.

Example 2.1 using links with a simple deck


<wml>
<card id="index">
<p>
<a href="#card1">Card 1 </a><br/>
</p>
</card>
<card id="card1">
</card>
<card id="card2">
</card>
<card id="card3">
</card>
</wml>

Questions: What is the function of <a> tag? How to use the href attribute to place a link
to cards within the same deck? After you selected and displayed a card, can you go back
to the index card?

Using Actions

Actions are unique to WML and have no real HTML counterpart. Every WAP device has task
buttons, usually at least two, and usually directly beneath the display. On most devices the left
button is the accept button, and the right button is the back button, but this is not always the
case. Regardless of the number of buttons and their position, one thing is certain: these
buttons do exist, and you can control what they do.

Programming an action requires associating a URL with a button type, and this is done using
the <do> tag. For example:

<do type="accept">
<go href="/index.wml" />
</do>
<do> requires a button type to be specified; here we used the accept button. Valid values of
type include accept, delete, help, options, prev, reset, unknown etc. Between the <do> and
</do> tags comes the action to be performed, here we used <go> tag to specify a URL to go
to.

Example 2.2 creating an action button


<wml>
<card id="index">
<p>
</p>
</card>
<card id="card1">
<do type="options" label="Back">
<prev />
</do>
</card>
<card id="card2">
<prev />
</do>
</card>
<card id="card3">
<prev />
</do>
</card>
</wml>

Question: in the program above, we defined an options button with a label Back, the
action associated with this button is <prev />, what action does the <prev> tag perform?

Example 2.3 using templates


<wml>
<template>
<prev />
</do>
</template>
<card id="index">
<p>
</p>
</card>
<card id="card1">
</card>
<card id="card2">
</card>
<card id="card3">
</card>
</wml>

Question: what is the <template> tag used for?

Example 2.4 using templates and shadowing


<wml>
<template>
<prev />
</do>
</template>
<card id="index">
<do type="options">
<noop />
</do>
<p>
</p>
</card>
<card id="card1">
</card>
<card id="card2">
</card>
<card id="card3">
</card>
</wml>

Question: what is the difference between the example 2.3 and 2.4?

Using URLs

URLs have two main navigational goals in WML:
1. Hyperlinking - allowing users to easily move between different parts of electronic
documents.
2. Locating resources external to the WML file.

Absolute URLs - the complete address of a resource, including the scheme (for example,
http), the full Internet name or address of the server, an optional network port number at the
server, and the location where the content can be found. For example, the following tag takes
us to the menu deck of BurgerWorld WAP site from any other location on the network:
<a href="http://wap.burgerworld.com/menu.wml">

Relative URLs - specify a document location relative to some base document. For example,
if we are already in the same site and the same directory as the menu.wml file, then we can
use the following tag to locate the menu.wml deck:
<a href="menu.wml">

An absolute URL fragment - naming specific cards within a deck by using # sign. These
cards are identified by their card ID name. For example, if the menu.wml has a card "drinks",
we can use an absolute URL fragment to go to the drinks card on the menu.wml deck:
<a href="http://wap.burgerworld.com/menu.wml#drinks">

A relative URL fragment - inside a deck, if we want to go from one card to another, a
relative URL fragment should be used. For example:
<a href="#drinks">

Example 2.5 using URLs

Type the following codes and save as menu.wml


<wml>
<card id="main" title="Main Menu">
<p>
BurgerWorld<br/>
Main Menu<br/>
<a href="food.wml">Food</a><br/>
<a href="#drinks">Drinks</a><br/>
</p>
</card>
<card id="drinks" title="Drink Menu">
<p>
Soda Pop 1<br/>
<a href="#main">Main Menu</a><br/>
</p>
</card>
</wml>
Type the following codes and save as food.wml in the same directory as the menu.wml.


<wml>
<card id="food" title="Food Menu">
<p>
Burgers 2<br/>
Fries 1<br/>
<a href="menu.wml#drinks">Drinks</a><br/>
<a href="menu.wml">Main Menu</a><br/>
</p>
</card>
</wml>

Question: what types of URLs are used in this example?

Lab 3: Managing Output

You have already used <p> and <br> tag for formatting the output text. Here are some more
formatting tags:
<em> choose a font that indicates emphasis
<strong> choose a font that indicates strong emphasis
<b> bold the font
<i> italicize the font
<u> underline the text
<small> make the font smaller
<big> make the font bigger

Example 3.1 physical formatting options


<wml>
<card title="Formatting">
<p>
Plain
<b>Bold</b>
<i>Italics</i>
<u>Underline</u>
<small>Smaller</small>
<big>Bigger</big>
<big>M<b>i</b><i><u>x</u>e</i><small>d</small></big>
</p>
</card>
</wml>

Question: what function does the perform?

Referencing Variables

One feature that separates WML from HTML is its support for variables. WML variables
allow you to parameterise the output of a card. All WML variables are strings. Variables in
WML are referenced in text or attributes using the $(var) syntax, where var is the name of the
variable. In lab 4, we will learn more about variables.

Example 3.2 using a variable to display information an a card


<wml>
<card id="getusername" title="variable demo">
<do type="accept" label="Sign In">
<go href="#SignIn" />
</do>
<p>
Enter your name:<br/>
<input name="Username" emptyok="false" type="text" />
</p>
</card>
<card id="SignIn" title="variable demo">
<do type="accept" label="Done">
<prev/>
</do>
<p>Welcome to WML development, <em>$(Username)</em></p>
</card>
</wml>

Question: as shown in above example, the variables in WML are referenced using $(var)
syntax, the browser will attempt to interpret all references to the $. If you want to
display the $ character in the output text, how can you do this without a parser error?

Example 3.3 paragraph alignment and wrapping


<wml>
<card id="demoAlign" title="Alignment Demo">
<do type="accept" label="Wrap">
<go href="#demoWrap" />
</do>
<p align="left">
Left - alignment
</p>
<p align="center">
Centered
</p>
<p align="right">
Right - alignment
</p>
</card>
<card id="demoWrap" title="Wrapping Demo">
<do type="accept" label="Align">
<go href="#demoAlign" />
</do>
<p mode="nowrap">
This is a nowrap, 36 character line.
</p>
<p mode="wrap">
This is a wrapped 36 character line.
</p>
</card>
</wml>

Question: regarding the alignment and wrapping, which one is more important to the
WAP browser?

Example 3.4 constructing a simple table


<wml>
<card title="Simple table">
<p>
<table columns="8">
<tr>
<td>H</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td>B</td>
<td>C</td>
<td>N</td>
<td>O</td>
<td>F</td>
<td>Ne</td>
</tr>
<tr>
<td>Na</td>
<td>Mg</td>
<td>Al</td>
<td>Si</td>
<td>P</td>
<td>S</td>
<td>Cl</td>
<td>Ar</td>
</tr>
</table>
</p>
</card>
</wml>

Questions: what is the function of column attribute in a table? Is it possible not to supply
the column value when defining a table? What's happen if the column value is
greater/less than the number of <td>? Try it out.

Example 3.5 using optional table attributes


<wml>
<card id="toc" title="Table of Contents">
<p mode="nowrap">
<table columns="3" title="Elements of Style" align="RRL">
<tr>
<td>I</td>
<td></td>
<td>Elementary rules of usage</td>
</tr>
<tr>
<td></td>
<td>1.</td>
<td>Form possessive singular of nouns by adding 's</td>
</tr>
<tr>
<td></td>
<td>2.</td>
<td>Enclose parenthetic expressions between commas</td>
</tr>
<tr>
<td>II</td>
<td></td>
<td>Elementary principles of composition</td>
</tr>
</table>
</p>
</card>
</wml>

Question: what does the RRL stand for in table's align attribute value?

Special Characters

When constructing text for the browser, you must avoid embedding characters in the raw text
that are reserved by WML. Here are some special WML character entities:

Named Entity Numeric Description
" " Quote ( " )
& & Ampersand ( & )
' ' Apostrophe ( ' )
< < Less-than angle bracket ( < )
> > Greater-than angle bracket ( > )
White space ( )
Soft hyphen ( - or nothing)

Example 3.6 special WML character entities


<wml>
<card title="Parser Friendly">
<onevent type="onenterforward">
<refresh>
<setvar name="Quote" value=""Ask not what...""/>
<setvar name="Apos" value='This is Charles's day'/>

</refresh>
</onevent>
<p >
$$ begins a variable<br/>
& begins an entity<br/>
<b> starts <b>bold</b><br/>
antidisestablishmentarianism<br/>
$(Quote)<br/>
$Apos<br/>
</p>
</card>
</wml>

Question: as shown in the table above, the special character entities can be represented
as named entities and decimal numeric entities. Find out that how can they be
represented as hexadecimal entities.

Lab 4: Working with User Input

Events
Events can be used to make WAP applications dynamic. There are four types of events, all
created with the onevent tag, whose syntax looks like this:

<onevent type="onenterforward | onenterbackward | onpick | ontimer">
<noop> | <refresh> | <prev> | <go>
</onevent>

event types:
onenterforward - occurs when the user navigates directly to the card, whether using the do
element or by entering a URL directly
onenterbackward - occurs when the user navigates to the deck using a prev task, which
retrieves a URL from the history stack
onpick - occurs when the user selects or deselects an item defined as an <option>
ontimer - occurs when a timer expires

action types:
noop - no operation, most commonly used for overriding template <do> tags
refresh - refresh the device's current context as specified by the setvar element
prev - performs a pop operation on the history stack and sends the user to the most recently
listed URL in the history stack
go - defines navigation to a URL and can point either to a new deck or card, using a URL
fragment.

Variables
WML supports programming variables within the body of the deck. A programming variable
is simply a name associated with a data value. Variables simply allow you to reference data
by name within your WML decks. You can retrieve and change those values in response to
browser events. You will typically use these variables to hold data that you retrieve from the
user to alter the behaviour of your application. These variables always reference string data
and, by default, all uninitialised variables are empty strings. You can use <setvar> tag to
assign a value to a variable. A variable can be referenced using the syntax: $var or $(var),
where the var is the variable name.

Variable name can only contain the alphanumeric characters (a to z, A to Z, 0 to 9) and
underscore (_). The first character in a variable name must be a letter or the underscore.
Names are case sensitive.

Example 4.1 using parentheses around variable references


<wml>
<card title="Variable Parens Use">
<refresh>
<setvar name="CBal" value="50"/>
<setvar name="CBal00" value="50"/>
</refresh>
</onevent>
<p><small>
Your balance $(CBal)00<br/>
Your balance $CBal00<br/>
Your balance $CBalPounds
Your balance $(Cbal)Pounds
</small></p>
</card>
</wml>

Question: What happens for the third line output?

The string referenced by a variable name can be substituted into a WML deck, such as the text
bodies of paragraphs, most attribute values on most tags, and all URLs used on your decks.
Look at the following two examples.

Example 4.2 substituting variables into a link tag


<wml>
<card title="Variable Substitution">
<refresh>
<setvar name="LinkDest" value="menu.wml"/>
<setvar name="LinkBody" value="BurgerWorld"/>
<setvar name="LinkTitle" value="Menu"/>
</refresh>
</onevent>
<p>
<a href="$(LinkDest)" title="$(LinkTitle)">$(LinkBody)</a>
</p>
</card>
</wml>

Example 4.3 setting variables using the <setvar> tag


<wml>
<card title="Var Setting">
<do type="options" label="Set Var">
<refresh>
<setvar name="Var1" value="Value1"/>
<setvar name="Var2" value="$(Var1)"/>
</refresh>
</do>
<p>
Var1: $(Var1)<br/>
Var2: $(Var2)<br/>
</p>
</card>
</wml>
Question: when have the values of variable Var1 and Var2 been set?

The <setvar> tag can only be placed within the <go>, <prev>, and <refresh> tags on the card,
and these tags must be children of <do>, <onevent>, and <anchor> tags, which all directly
respond to user input. This gives you the opportunity to dynamically change the contents of
your variables in response to a user action.

Example 4.4 tracking navigation through variables


<wml>
<card id="Card1" title="Var Display">
<refresh>
<setvar name="State" value="Initial" />
</refresh>
</onevent>
<onevent type="onenterbackward">
<refresh>
<setvar name="State" value="Returned" />
</refresh>
</onevent>
<do type="accept" label="Changed">
<go href="#Disp">
<setvar name="State" value="Changed" />
</go>
</do>
<do type="reset" label="Clear">
<refresh>
<setvar name="State" value="Cleared" />
</refresh>
</do>
<p>Card #1 current state: $(State)</p>
</card>
<card id="Disp" title="Var Display">
<p>Card #2 current state: $(State)</p>
<do type="accept" label="Return">
<prev/>
</do>
</card>
</wml>

Question: when has the value of variable State been set to Initial, Returned, Changed,
and Cleared?

Example 4.5 gathering a simple string in the browser


<wml>
<card id="login" title="Simple Input">
<do type="accept" label="OK">
<go href="#Display" />
</do>
<p>Enter your login name:<br/>
<input name="loginname" />
</p>
</card>
<card id="Display" title="Simple Input">
<p>Welcome to WML, $(loginname)</p>
<prev/>
</do>
</card>
</wml>

Question: what is the function of the name attribute of the <input> tag?

<input> tag attributes
The table below gives you a complete summary of the attributes that are special to the
<input> tag.
Attribute Behaviour
name Specifies the name of the variable to receive the data gathered through
the interface
value Default data for the variable, to be used when the variable specified by
name is not yet set
maxlength Maximum number of characters to accept from the user for the variable
size Number of characters to display onscreen for the input field
type Text | password
format Restricts the character sets available to the user in the input string.
emptyok Used with the format attribute to allow the user to leave the field blank

Example 4.6 using <type> attribute to specify text or password input


<wml>
<card id="login" title="Text and Password">
<refresh>
<setvar name="username" value=""/>
<setvar name="password" value=""/>
</refresh>
</onevent>
<p>
Username:<br/>
<input name="username" type="text" /><br/>
Password:
<input name="password" type="password" />
</p>
</card>
</wml>

Question: what is the difference between the text type and the password type in the
<input> tag?
Formatted input
The table below gives you a summary of the input mask specifiers for the format attribute of
the <input> tag
Specifier Allowed Input
A Any non-lowercase, non-numeric character and punctuation
a Any non-uppercase, non-numeric character and punctuation
N Any numeric character, including +, ., and -.
X All non-lowercase characters
x All non-uppercase characters
M Any character, the browser may assume it is uppercase
m Any character, the browser may assume it is lowercase
*f Any number of the characters allowed by the format specifier f.
nf Exactly n of the characters specified by f, where n is in 1 - 9
\c The literal character c is output, no input is allowed in this space

Example 4.7 formatting alphabetic and mixed-case input


<wml>
<card title="Alphabetic Input">
<refresh>
<setvar name="lastname" value=""/>
<setvar name="servicecode" value=""/>
</refresh>
</onevent>
<p>
Last name:<br/>
<input name="lastname" format="A*a" maxlength="8" /><br/>
Service code:<br/>
<input name="servicecode" format="AANNAA" />
</p>
</card>
</wml>

Question: how do the format specifiers "A*a" and "AANNAA" effect on the user's
input?

Restricted Input with <select>
Restricting input from a user means presenting the user with a finite number of choices. In
WML, this means using the <select> tag to present the choices as a list of text items from
which the user can select one or more.

<select> tag attributes:
name/iname the name of the variable to receive the value/index of the selection, option
elements are indexed 1 through the total number of the list
value/ivalue the option or options to select by default. The list is formatted as a semicolon-
delimited sequence of values/integers
multiple allows the list to accept multiple options simultaneously selected. By default,
multiple is false.
Example 4.8 using the name and value attributes in the <select> tag


<wml>
<card title="Value Selection">
<refresh>
<setvar name="color" value=""/>
</refresh>
</onevent>
<p>
Pick a color:
<select name="color" value="00FF00" multiple="true">
<option value="FF0000">Red</option>
<option value="00FF00">Green</option>
<option value="0000FF">Blue</option>
</select>
<br/>
RGB: $(color)
</p>
</card>
</wml>

Example 4.9 using the indexed selection list attributes


<wml>
<card title="Value Selection">
<refresh>
<setvar name="mode" value=""/>
<setvar name="imode" value=""/>
</refresh>
</onevent>
<p>
Pick transportation:
<select name="mode" iname="imode" value="plane" ivalue="3">
<option value="plane">Airplane</option>
<option value="train">Railway</option>
<option value="car">Automobile</option>
</select>
<br/>
<small>
Mode: $(mode)<br/>
Index: $(imode)
</small>
</p>
</card>
</wml>

Question: during the list initialisation, which attribute will be take precedence if both
value and ivalue are supplied?
Example 4.10 using the onpick attribute to send the user to another card


<wml>
<card title="Selection Action">
<refresh>
<setvar name="capital" value=""/>
</refresh>
</onevent>
<p>
Pick a US state:
<select name="capital">
<option onpick="#showcap" value="Santa Fe">New Mexico</option>
<option onpick="#showcap" value="Bismar">North Dakota</option>
<option onpick="#showcap" value="Providence">Rhode Island</option>
</select>
<br/>
<small>
Capital: $(capital)
</small>
</p>
</card>
<card id="showcap" title="Selection Action">
<p>the capital is $(capital).</p>
<prev/>
</do>
</card>
</wml>

Question: what is the function of the onpick attribute of the <option> element
performed?

Lab 5: Using WMLScript

WMLScript differs from WML in a number of ways. WML is primarily used to create an
environment for information entry and display. WMLScript is defined by functions that
manipulate data, perform basic calculations, and so on. WMLSript cannot be used to control
the user interface or display content except for three predefined types of dialogs. For the
detailed information about WMLScript, please see "WMLScript Reference" (you can find it
in our university library).

Example 5.1 input validation application in WML and WMLScript
Type the following WML program code and save as example5-1.wml



<wml>
<card id="login">
<p>Login:
<do type="accept">
<go href="#pass"/>
</do>
<input name="login"/>
</p>
</card>
<card id="pass">
<p> $login Enter Password:
<do type="accept">
<go href="validate.wmls#validate()"/>
</do>
<input name="pass"/>
</p>
</card>
<card id="badlogin">
<p>Login is required.
<do type="accept" label="LOGIN">
<go href="#login"/>
</do>
</p>
</card>
<card id="badpass">
<p>Password is required.
<do type="accept">
<go href="#pass"/>
</do>
</p>
</card>
<card id="ok">
<p>Welcome $(login)!
</p>
</card>
</wml>

Type the following WMLScript program code and save as validate.wmls into the same
directory as the file example5-1.wml.

// validate.wmls
extern function validate() {
// enter your function body here
var login = WMLBrowser.getVar("login");
var pass = WMLBrowser.getVar("pass");
if (String.isEmpty(login)) {
WMLBrowser.go("example5-1.wml#badlogin");
}
else if (String.isEmpty(pass)) {
WMLBrowser.go("example5-1.wml#badpass");
}
else { WMLBrowser.go("example5-1.wml#ok");
}
}

Question: how does the WMLScript file be called from the WML deck in the example
above?

You can define one or more functions in one WMLScript file, but you need to specify the
filename and the function name according to the format:

Filename#functionname(param1, param2, , param n)

The syntax of a basic WMLScript function is as follows:

extern function functionname() {
//function body here;
}

For example, if we want to use the function foo to set a variable in the WML deck, we might
construct it as:

extern function foo() {
WMLBrowser.setVar("test", "value");
}

Example 5.2 set variable in the WML deck using WMLScript
Type the following code and save as example5-2.wml


<wml>
<card id="step1">
<p>Select OK to test configuraton.
<do type="accept">
<go href="config_test.wmls#testscript()"/>
</do>
</p>
</card>
<card id="step2">
<p> $(result)</p>
</card>
</wml>

Type the following code and save as config_test.wmls into the same directory as the file
example5-2.wml

// config_test.wmls
extern function testscript() {
WMLBrowser.setVar("result", "WMLScript is configured!");
WMLBrowser.go("example5-2.wml#step2");
}

Question: How do the above WML and WMLScript programs interact?

Example 5.3 passing parameters -1


<wml>
<card title="Passing Params">
<refresh>
<setvar name="X" value="2" />
<setvar name="Y" value="3" />
</refresh>
</onevent>
<p>X=2; Y=3<br/>
X+Y = $(number)<br/>
<a href="calculate.wmls#calculate('$X','$Y')">Calculate</a>
</p>
</card>
</wml>

// calculate.wmls
extern function calculate(a,b) {
var n;
n=Lang.parseInt(a)+Lang.parseInt(b);
WMLBrowser.setVar("number", n);
WMLBrowser.refresh();
}

Example 5.4 passing parameters - 2


<wml>
<card title="Passing Params">
<refresh>
<setvar name="Greeting" value="Hello" />
</refresh>
</onevent>
<p>$(Greeting)<br/>
<a href="greetings.wmls#addAgain('Greeting')">Been here before?</a>
</p>
</card>
</wml>

// greetings.wmls
extern function addAgain(strval) {
var grtAgain = WMLBrowser.getVar(strval);
grtAgain += " Again";
WMLBrowser.setVar(strval, grtAgain);
WMLBrowser.refresh();
}

Question: what is the difference about the parameters passing in example 5.3 and 5.4?

Using WMLScript Libraries
WMLScript libraries are stored in the WAP browser, which is a unit predefined functions that
are resident in the WAP-compliant devices. These functions are called in exactly the same
way as functions written by the developer, except that the library name followed by a "." is
placed in front of the function name. We have already used some functions in WMLBrowser
library, such as: WMLBrowser.refresh(); WMLBrowser.getVar("WMLvar");
WMLBrowser.setVar("WMLvar", "value"), and so on. Standard WMLScript libraries include
Lang, Float, String, URL, WMLBrowser, Dialogs, Debug, and Console libraries. For detailed
information and syntax samples of all the WMLScript library functions, please see
"WMLScript Library Reference" (you can find it in our university library).

Example 5.5 validating an email address


<wml>
<card id="enter" title="Email Address">
<p>Email Address:<br/>
<do type="accept">
<go href="valid_email.wmls#testemail()" />
</do>
<input name="email"/></p>
</card>
<card id="yes" title="Email Address">
<p>$(email) is formatted correctly.</p>
<prev/>
</do>
</card>
<card id="no" title="Email Address">
<p>$(email) is not formatted correctly.</p>
<prev/>
</do>
</card>
</wml>

// valid_email.wmls
extern function testemail() {
var teststring = WMLBrowser.getVar("email");
var atsymbol = String.find(teststring, "@");
var dot = String.find(teststring, ".");
if (atsymbol < 0) {
WMLBrowser.go("example5-5.wml#no");
}
else {
if (dot < 0) {
WMLBrowser.go("example5-5.wml#no");
}
else {
WMLBrowser.go("example5-5.wml#yes");
}
}
}

Question: what is the return value of the function String.find(string, subString)?

Sample Application - Currency Converter

Example 5.6 currency conversion using WML and WMLScript


<wml>
<card id="first">
<refresh>
<setvar name="startCur" value=""/>
<setvar name="endCur" value=""/>
<setvar name="cur" value=""/>
</refresh>
</onevent>
<p>
<do type="accept" label="conv">
<go href="#destVal" />
</do>
Currency converter!<br/>
Convert from:
<select name="startCur">
<option value="USD">USD</option>
<option value="Euro">Euro</option>
<option value="GBP">Pound</option>
<option value="DMark">D-Mark</option>
<option value="Franc">Franc</option>
<option value="Lira">Lira</option>
</select>
</p>
</card>

<card id="destVal">
<p>
<do type="accept" label="dest">
<go href="#valCard"/>
</do>
Convert from $startCur to:
<select name="endCur">
<option value="USD">USD</option>
<option value="Euro">Euro</option>
<option value="GBP">Pound</option>
<option value="DMark">D-Mark</option>
<option value="Franc">Franc</option>
<option value="Lira">Lira</option>
</select>
</p>
</card>

<card id="valCard">
<refresh>
<setvar name="ans" value=""/>
</refresh>
</onevent>
<p>
<do type="accept" label="conv">
<go href="converter.wmls#convert()"/>
</do>
how much $startCur?
<input type="text" name="cur" format="*N"/>
</p>
</card>

<card id="convD">
<p>
<do type="accept" label="new">
<go href="#first">
<setvar name="startCur" value=""/>
<setvar name="endCur" value=""/>
</go>
</do>
<do type="options" label="again">
<go href="#valCard"/>
</do>
$cur in $startCur is $ans $endCur
</p>
</card>
</wml>

// converter.wmls
extern function convert() {
var scur = WMLBrowser.getVar("startCur");
var ecur = WMLBrowser.getVar("endCur");
var cur = WMLBrowser.getVar("cur");
var curVal = Lang.parseInt(cur);
if (curVal) {
if (scur != ecur) {
var endval = convertVal(scur, ecur, curVal);
}
else { endval = cur; }
endval = String.format("%1.2f", endval);
WMLBrowser.setVar("ans", endval);
WMLBrowser.go("example5-6.wml#convD");
}
}

extern function convertVal(scur, ecur, val) {
var usd = 1;
var euro = 1.0484;
var lira = 2030.01;
var dmark = 2.0505;
var franc = 6.8771;
var gbp = 0.6554;

//convert it all to usd
if (scur == "USD") { }
else if (scur == "Lira") { val = val/lira; }
else if (scur == "DMark") { val = val/dmark; }
else if (scur == "Franc") { val = val/franc; }
else if (scur == "GBP") { val = val/gbp; }
else if (scur == "Euro") { val = val/euro; }

//convert to dest currency
if (ecur == "USD") { return(val); }
else if (ecur == "Lira") { return(val*lira); }
else if (ecur == "DMark") { return(val*dmark); }
else if (ecur == "Franc") { return(val*franc); }
else if (ecur == "GBP") { return(val*gbp); }
else if (ecur == "Euro") { return(val*euro); }
}

Question: what is the meaning of "%1.2f" in the statement:
endval = String.format("%1.2f", endval); ?
Find out more format specifiers used in the format function of String library.

Mobile Internet Lab Book: Semester 1 2003/2004

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mobile Internet Lab Book: Semester 1 2003/2004

Uploaded by

Copyright:

Available Formats

CCM3 0 3 2

You might also like