Top Banner
1 Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC
76

Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Jan 04, 2016

Download

Documents

Olivia Owen

Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC. Components of Wireless Environment. Wireless Operators & Service Providers Independent Hardware Vendors Software Infrastructure Providers Independent Software Vendors System Integrators - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

1

Wireless Web Applications

&

m-business

Dr. Awad Khalil

Computer Science Department

AUC

Page 2: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

2

Components of Wireless Environment

• Wireless Operators & Service Providers

• Independent Hardware Vendors

• Software Infrastructure Providers

• Independent Software Vendors

• System Integrators

• Device Manufacturers

Page 3: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

3

Why Go Mobile?

• Business benefits– Increasing revenue

– Reducing costs

• End-user benefits

Challenges• Wireless networks issues• Mobile device diversity• Software infrastructure choices

Page 4: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

4

Mobile Devices

Input Mechanisms• Keypad input• Pen-based input• Keyboard input• Voice input

Wireless Communication• Two-unit configuration• Detachable configuration• Integrated configuration

Page 5: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

5

Mobile Devices

Mobile Devices Classification• Web-enabled phones• Two-way pagers• Low-end smart phones• Palm-sized PDAs• High-end smart phones• Handheld PCs• Tablet PCs• Notebook/Laptop

Page 6: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

6

Mobile & Wireless Messaging

• Email– SMTP Server

– POP3 Server

• Smart Message Service (SMS)• Enhanced Message Service (EMS)• Multimedia Message Service (MMS)• Instant Messaging• Application-to-Application Messaging

Page 7: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

7

Mobile & Wireless Security

Creating a Secure Environment• Authentication• Data integrity• Confidentiality• Authorization• Nonrepudiation

Security Threats• Spoofing• Sniffing• Tampering• Theft

Page 8: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

8

Mobile & Wireless Security

Security Technologies• Cryptography• Digital certificates• Digital signatures• Public key Infrastructure• Firewalls• Proxy servers• Virtual Private Networks (VPNs)• Two-factor authentication• Biometrics

Page 9: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

9

Building Wireless Application

The Client• User Interface• Data storage• Performance• Data Synchronization• Messaging

The Server• Data

Synchronization• Enterprise data

source• Messaging

Page 10: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

10

Mobile Operating Systems

• Windows CE• Palm OS• Symbian OS• Linux• Java and J2ME

Page 11: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

11

Building Wireless Internet Application

WAP• WAP stands for

Wireless Application Protocol

• The WAP protocol is the leading standard for information services on wireless terminals like digital mobile phones.

Development Markup

Languages• WML• HDML• HTML• cHTML• XHTML• VoiceML

Content-generation

Technologies• Common Gateway

Interface (CGI) with Perl

• Active Server Pages

• Java Servlets• JavaServer Pages• XML with XSLT

Page 12: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

12What is WAP?

• The wireless industry came up with the idea of WAP.

• The point of this standard was to show internet contents on wireless clients, like mobile phones. 

• WAP stands for Wireless Application Protocol

• 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 such as mobile phones•

• WAP is a protocol designed for micro browsers

• WAP enables the creating of web applications for mobile devices.

• WAP uses the mark-up language WML (not HTML)•

• WML is defined as an XML 1.0 application

Page 13: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

13

The Wireless Application Protocol

• The WAP protocol is the leading standard for information services on wireless terminals like digital mobile phones.

• The WAP standard is based on Internet standards (HTML, XML and TCP/IP). It consists of a WML language specification, a WMLScript specification, and a Wireless Telephony Application Interface (WTAI) specification.

• WAP is published by the WAP Forum, founded in 1997 by Ericsson, Motorola, Nokia, and Unwired Planet. Forum members now represent over 90% of the global handset market, as well as leading infrastructure providers, software developers and other organizations.

Page 14: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

14

WAP Micro Browsers

• To fit into a small wireless terminal, WAP uses a Micro Browser.

• A Micro Browser is a small piece of software that makes minimal demands on hardware, memory and CPU. It can display information written in a restricted mark-up language called WML.

• The Micro Browser can also interpret a reduced version of JavaScript called WMLScript.

Page 15: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

15

What is WML?

• WML stands for Wireless Markup Language. It is a mark-up language inherited from HTML, but WML is based on XML, so it is much stricter than HTML.

• WML is used to create pages that can be displayed in a WAP browser. Pages in WML are called DECKS. Decks are constructed as a set of CARDS.

Page 16: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

16

What is WMLScript?

• WML uses WMLScript to run simple code on the client. WMLScript is a light JavaScript language. However, WML scripts are not embedded in the WML pages. WML pages only contains references to script URLs. WML scripts need to be compiled into byte code on a server before they can run in a WAP browser.

Page 17: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

17

Examples of WAP use

• Checking train table information • Ticket purchase • Flight check in • Viewing traffic information • Checking weather conditions • Looking up stock values • Looking up phone numbers • Looking up addresses • Looking up sport results

Page 18: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

18

WAP Homepages

• WAP homepages are not very different from HTML homepages. The markup language used for WAP is WML (Wireless Markup Language). WML uses tags - just like HTML - but the syntax is stricter and conforms to the XML 1.0 standard.

• WML pages have the extension *.WML, just like HTML pages have the extension *.HTML.

Page 19: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

19

WML Tags

• WML is mostly about text. Tags that would slow down the communication with handheld devices are not a part of the WML standard. The use of tables and images is strongly restricted. 

• Since WML is an XML application, all tags are case sensitive (<wml> is not the same as <WML>), and all tags must be properly closed.

Page 20: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

20

WML Decks and Cards

• WML pages are called DECKS. They are constructed as a set of CARDS, related to each other with links. When a WML page is accessed from a mobile phone, all the cards in the page are downloaded from the WAP server. Navigation between the cards is done by the phone computer - inside the phone - without any extra access trips to the server.

Page 21: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

21

Example WML document

<?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="HTML" title="HTML Tutorial">

<p> Welcome to HTML Tutorial </p>

</card>

<card id="XML" title="XML Tutorial">

<p> Welcome to XML Tutorial </p>

</card>

</wml>

Page 22: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

22

Decks and Cards

• WML pages are often called "decks". A deck contains a set of cards. A card element can contain text, markup, links, input-fields, tasks, images and more. Cards can be related to each other with links. 

• When a WML page is accessed from a mobile phone, all the cards in the page are downloaded from the WAP server. Navigation between the cards is done by the phone computer - inside the phone - without any extra access trips to the server:

Page 23: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

23

Decks and Cards

<?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 our WAP Tutorial!</p>

</card>

</wml>

Page 24: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

24

Decks and Cards

• The result MIGHT look like this in your mobile phone display (note that only one card is displayed at a time):

------ Card 1 ------

Hello World!

Page 25: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

25

Paragraphs and Line Breaks

• A WML card can be set up to display the paragraph and line break functions of WML:

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

<p> This is a paragraph </p>

<p> This is another<br/>with a line break </p>

</card>

</wml>

Page 26: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

26

Paragraphs and Line Breaks

• The result MIGHT look like this in your mobile phone display:

------ Paragraphs ------

This is a paragraph

This is another with a line break

Page 27: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

27

Text Formatting

• A WML card can be set up to display the text formatting functions of WML:

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

Page 28: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

28

Text Formatting

• The result MIGHT look like this in your mobile phone display (don't take it for granted that all formatting tags will render as expected):

----- Formatting -----normalemphasizedstrongbolditalicunderlinebigsmall

Page 29: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

29

Tables• A WML card can be set up to display the table

functions of WML:

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

Page 30: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

30Links

• A WML card can be set up to display the anchor functions of WML.

• The <anchor> tag always has a task ("go", "prev", or "refresh") specified. The task defines what to do when the user selects the link. In this example, when the user selects the "Next page" link, the task says "go to the file test.wml":

<?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="Anchor Tag">

<p> <anchor>Next page <go href="test.wml"/> </anchor> </p>

</card>

</wml>

Page 31: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

31Links

• The <a> tag always performs a "go" task, with no variables. The example below does the same as the <anchor> tag 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 title="A Tag">

<p> <a href="test.wml">Next page</a> </p>

</card>

</wml>

Page 32: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

32Image

• A WML card can be set up to display an 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 title="Image">

<p> This is an image <img src="/images/stickman.wbmp“

alt="stickman" /> in a paragraph </p>

</card>

</wml>

Page 33: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

33

Image

• The result MIGHT look like this in your mobile phone display:

• Note that .wbmp is the only image type that can be displayed in a WAP browser.

------ Image ------

This is an image  in a paragraph

Page 34: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

34Input Fields

• A WML card can be set up to let a user enter information, as demonstrated in this 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 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>

Page 35: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

35

Input Fields

• The result MIGHT look like this in your mobile phone display:

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

Name:

Age :

Sex :

Page 36: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

36Select and Option

• A WML card, can be set up to display the select and option functions of WML:

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

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

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

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

</select> </p>

</card>

</wml>

Page 37: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

37

Select and Option

• The result MIGHT look like this in your mobile phone display:

--- Selectable List 1---

HTML Tutorial

XML Tutorial

WAP Tutorial

Page 38: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

38WML Tasks

• A task specifies what action to perform when an event, like entering a card or selecting a link, occurs.

• Go Task

• The <go> task represents the action of switching to a new 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> <p>

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

</card>

</wml>

Page 39: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

39Prev Task

• The <prev> task represents the action of going back to the previous 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> <p>

<anchor> Previous Page <prev/> </anchor> </p>

</card>

</wml>

Page 40: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

40Refresh Task

• The <refresh> task refreshes some specified card variables. If any of the variables are shown on the screen, this task also refreshes the screen.

• The example below uses an <anchor> tag to add a "Refresh this page" link to the card. When the user clicks on the link, he or she refreshes the page and the value of the variable x will be set to 30:

<?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> Refresh this page <go href="thispage.wml"/>

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

</anchor> </p>

</card>

</wml>

Page 41: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

41Noop Task

• The <noop> task says that nothing should be done (noop stands for "no operation"). This tag is used to override deck-level elements.

• The <do> tag can be used to activate a task when the user clicks on a word/phrase on the screen.

• The example below uses a <do> tag to add a "Back" link to the card. When the user clicks on the "Back" link, he or she should be taken back to the previous card. But the <noop> tag prevents this operation; when the user clicks on the "Back" link

nothing will happen: <?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 name="back" type="prev" label="Back"><noop/> </do> </p>

</card>

</wml>

Page 42: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

42WML Timer

• A WML card can be set up to use the timer function of WML. The time unit of the timer is 1/10 of a second.

• The example below will display a message for 3 seconds, and then take you to the file "test.wml":

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

<wml>

<card ontimer="test.wml"><timer value="30"/> <p>Some Message</p>

</card>

</wml>

Page 43: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

43WML Variables

• Variables

• When a user switches from card to card in a deck, we need to store data in variables. WML variables are case sensitive.

• Specify a Variable with the Setvar Command• When someone executes a task (like go, prev, and refresh), the setvar element can be used to

set a variable with a specified value.

• The following example will create a variable named i with a value of 500:

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

• The name and value attributes are required.

• Specify 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 Tutorial</option> <option value="XML">XML Tutorial</option> </select> </card>

• To use the variable we created in the example above:

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

Page 44: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

44WML Examples

• A WML deck with two cards - one for user input and one for displaying the result - can be set up, as demonstrated in this 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="card1" title="Tutorial">

<do type="accept" label="Answer"> <go href="#card2"/> </do> <p>

<select name="name">

<option value="HTML">HTML Tutorial</option>

<option value="XML">XML Tutorial</option>

<option value="WAP">WAP Tutorial</option>

</select> </p>

</card>

<card id="card2" title="Answer"> <p> You selected: $(name) </p>

</card>

</wml>

Page 45: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

45

WML Examples

--- Tutorial---

HTML Tutorial

XML Tutorial

WAP Tutorial

Answer

• The result MIGHT look like this in your mobile phone display:

--- Answer---

You selected: HTML

Page 46: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

46

WAP Demo• The WAP Demo requires Microsoft Internet Explorer 5.0 or higher

• To test and compile your WML code, you can download the Nokia Mobile Internet Toolkit for free. The Nokia Mobile Internet Toolkit supports the complete WAP 2.0 specification, including XHTML and CSS.

• If you place WML code on your IIS or Apache server, you don't need to compile it. This is a job for the WAP Gateway. Simply host your native WML code on your server.

Page 47: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

47WAP Company

• Symbian

• Symbian was established as a private independent company in June 1998 and is owned by Ericsson, Nokia, Matsushita (Panasonic), Motorola, Psion, Siemens and Sony Ericsson. Symbian supplies the advanced, open, standard operating system - Symbian OS - for data-enabled mobile phones.

Page 48: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

48WAP Company

• MobileDev

• MobileDev is the first Wireless Development Environment (WDE) specifically for WAP Internet applications. Its innovative open-ended development model integrates a graphical application mapper with a wizard interface and a rich tool set. MobileDev supports WAP technologies like WML, HDML, Microsoft Active Server Pages (ASP), Perl and Java Server Pages (JSP).

• Using the GUI application mapper to show the relationships between objects, developers can quickly outline the components of a WAP application. Then they can take advantage of wizards that generate Decks and Cards in both WML and HDML, and use MobileDev's code builder to write WML/HDML syntax that complements the wizard-generated code. The integration of the application mapper with wizards and the code builder provides a seamless WDE that delivers results fast.

• MobileDev comes complete with its own powerful integrated runtime engine, MobileDev Server Script. Server Script can quickly create prototypes or build full-blown business WAP applications that can be natively connected to an RDBMS. MobileDev WDE is also designed to support development in ASP, JSP, Perl or other template-based server technologies.

Page 49: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

49WAP Company

• PyWeb - Put Your Content on Mobile

• PyWeb.com

• PyWeb enables Webmasters to be "WAP-ready" as quickly and cheaply as possible. Mastering the WAP technology, the PyWeb offer is based on a software package hosted on PyWeb servers as an Application Service Provider.

Page 50: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline50

Fig23_2.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 2: fig23_2.wml -->6 <!-- Simple WML Page -->7 8 <wml>9 <card id = "index" title = "WML Title">10 <p>11 Welcome to wireless programming!12 </p>13 </card> 14 </wml>

This text will be displayed in the browser window.

Page 51: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline51

Program Output

Page 52: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline52

Fig23_4.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. fig23_4.wml -->6 <!-- Using local icons -->78 <wml>9 <card id = "index" title = "Icons">10 <p>11 Local Icons<br />1213 <!-- link to the second card -->14 <a href = "#card2">1516 <!-- insert the local icon -->17 <img src = "" alt = "Link" localsrc = "link" />18 </a>Link<br />19 20 <!-- link to the third card -->21 <a href = "#card3">22 <img src = "" alt = "Wrench" localsrc = "wrench" />23 </a>Wrench<br />24 25 <!--link to an external card-->26 <a href = "fig23_5.wml#card4">27 <img src = "" alt = "Football" localsrc = "football" />28 </a>Football<br />29 30 <a href = "fig23_5.wml#card5">31 <img src = "" alt = "Boat" localsrc = "boat" />32 </a>Boat33 </p>34 </card>

The text Link is a link to card2.

The text Wrench is a link to card3.

The text Football is a link to card4 in fig23_5.wml.

The boat local icon is a link to card5 in fig23_5.wml.

Page 53: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline53

Fig23_4.wml

3536 <card id = "card2" title = "Icons">37 <p>38 You chose the link!39 </p>40 </card> 4142 <card id = "card3" title = "Wrench Link">43 <p>44 You chose the wrench!45 </p>46 </card> 47 </wml>

Result of choosing the link icon.

Result of choosing the wrench icon.

Page 54: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline54

Fig23_5.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 23.5: fig23_5.wml -->6 <!-- Linking to an external card -->78 <wml>9 <card id = "card4" title = "Football Link">10 <p>11 You chose the football!12 </p>13 </card> 1415 <card id = "card5" title = "Boat Link">16 <p>17 You chose the boat!18 </p>19 </card> 20 </wml>

Result of choosing the football link.

Result choosing the boat link.

Page 55: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline55

Program Output

Page 56: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline56

WelcomeDoc.wmls

1 // Fig. 23.6: welcomeDoc.wmls2 // Writing a line of text34 extern function welcome() 5 {6 // creating a browser variable and assigning it a value7 WMLBrowser.setVar( "welcome", 8 "Welcome to WMLScript programming!" );910 // refresh the display window11 WMLBrowser.refresh();12 } Method setVar creates a browser variable

welcome with the value of the string “Welcome to WMLScript programming”.

Method refresh refreshes the browser and all variable values.

Page 57: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline57

Fig23_7.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 23.7: fig23_7.wml -->6 <!-- Printing a line of text -->78 <wml>9 <card id = "Line" title = "Line">1011 <onevent type = "onenterforward">1213 <!-- call function welcome -->14 <go href = "welcomeDoc.wmls#welcome()" />1516 </onevent>17 18 <p>19 $welcome <!-- dereference browser variable welcome -->20 </p>21 </card>22 </wml>

Dereferencing browser variable welcome displays its value.

Page 58: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline58

Program Output

Page 59: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline59

DialogPrompt.wmls

1 // Fig. 8: dialogPrompt.wmls2 // Printing multiple lines in a dialog34 extern function displayDialog() 5 {6 Dialogs.alert( "Welcome to\nWMLScript\nProgramming!" );7 }

The alert method displays the string passed to it in a dialog box.

Each line break character places the remaining text on the next line in the browser.

Page 60: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline60

Fig23_9.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 23.9: fig23_9.wml -->6 <!-- Using dialogs -->78 <wml>9 <card id = "Dialog" title = "Dialog">1011 <!-- event element to execute go element -->12 <onevent type = "onenterforward"> 1314 <!-- call function displayDialog -->15 <!-- in dialogPrompt.wmls -->16 <go href = "dialogPrompt.wmls#displayDialog()" />1718 </onevent>1920 </card>21 </wml>

Setting the type attribute to onenterforward causes the action of the go element to be executed when the card is entered.

When the cars is entered, function displayDialog will be called.

Page 61: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline61

Program Output

Soft keys

Page 62: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline62

SquareNumbers.wmls

1 // Fig. 10: squareNumbers.wmls2 // Programmer-defined functions34 extern function count() 5 { 6 // prompt the user for a number7 var inputNumber = Dialogs.prompt( 8 "Enter a number to be squared", "" );910 // convert the number to an integer and pass11 // the number to function square12 var numberSquared = square( Lang.parseInt( inputNumber ) );1314 var outputSquare = inputNumber + " squared is " + 15 numberSquared;1617 // set the string to a browser variable and 18 // redirect the client to the card named result19 WMLBrowser.setVar( "result1", outputSquare );20 WMLBrowser.go( "#result" );21 }2223 function square( y )24 {25 return y * y;26 }

Method prompt displays a dialog box that displays a message and an input field.The first argument passed to method

prompt is the message that is displayed in the dialog.

The second argument passed to methos prompt is the default value for the input field

Call function square and pass it the value input by the user.Variable y gets the value of inputNumber.

Page 63: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline63

Fig23_11.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 23.11: fig23_11.wml -->6 <!-- Squaring numbers -->78 <wml>9 <card id = "index" title = "Number Squared">1011 <!-- soft key to invoke function count -->12 <do type = "accept" label = "OK">13 <go href = "squareNumbers.wmls#count()" />14 </do>1516 <p>17 Press OK to square a number.18 </p>19 </card>2021 <card id = "result" title = "Results">2223 <!-- soft key that returns the user to the previous card->24 <do type = "accept" label = "Home">25 <prev />26 </do>2728 <p>29 $result130 </p>31 </card> 32 </wml>

This soft key calls function count when pressed.

The prev element sends the client back to the previous card.

Dereferencing variable result displays the result of the calculation.

Page 64: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline64

Program Output

Page 65: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline65

GetVariable.wmls

1 // Fig. 23.12: getVariable.wmls2 // Using the WMLBrowser object’s getVar method34 extern function getName()5 {6 var x = WMLBrowser.getVar( "username" );7 var y = x + ", thanks for visiting!";89 WMLBrowser.setVar( "result", y );10 WMLBrowser.go( "#card2" );11 }

Method getVar retrieves the value of browser variable username.

The + operator concatenates the value of x and the string “, thanks for visiting”.

Page 66: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline66

GetVar.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 45 <!-- Fig. 23.13: getVar.wml -->6 <!-- Using the WMLBrowser object’s getVar method -->78 <wml>9 <card id = "index" title = "getVar">10 <do type = "accept" label = "Run">1112 <!-- call function getName -->13 <go href = "getVariable.wmls#getName()" />1415 </do>16 17 <p>18 Enter your name:<br />1920 <!-- create input box for user input -->21 <input name = "username" value = "" />2223 </p>24 </card> 2526 <card id = "card2" title = "getVar">2728 <!-- create a soft key to return the client -->29 <!-- to the previous card -->30 <do type = "accept" label = "Back">31 <prev />32 </do>33

This soft key calls function getName when pressed.

This input field allows the user to enter a username.

This soft key sends the client to the previous card.

Page 67: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline67

GetVar.wml

Program Output

34 <p>35 $result <!-- dereference browser variable result -->36 </p>37 </card> 38 </wml> Dereferencing browser variable result displays

the results of the script.

Page 68: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline68

FunctionSet.wmls

1 // Fig. 23.14: functionSet.wmls 2 // Demonstrating String object methods34 extern function stringMethods() 5 {6 var string1 = "";7 var empty;89 // test if string1 is empty10 if ( String.isEmpty( string1 ) )11 empty = "string1 is empty";12 else13 empty = "string1 is not empty";1415 WMLBrowser.setVar( "emptyString1", empty );1617 // format the string to have 12 spaces between 18 // "Wireless" and "Web"19 string1 = String.format( "Wireless%15s", "Web" );2021 WMLBrowser.setVar( "formatString1", string1 );2223 // squeeze the string until one space is left24 string1 = String.squeeze( string1 );2526 WMLBrowser.setVar( "squeezeString1", string1 );2728 // use method element to count the elements in string129 // use the toString method to convert the integer to 30 // a string31 var count = String.toString( String.elements( string1, " ") );3233 WMLBrowser.setVar( "elementsString1", count );34

The value of variable string1 begins as an empty string.

Method isEmpty determines if the string is empty and returns true if it is.

After invoking the format method, the value of string1 will be “Wireless Web” with 12 spaces separating the two words.

Method squeeze eliminates all consecutive whitespace leaving one space between Wireless and Web.

Method elements determines the amount of elements in a string separated by a space (the second argument).Method toString converts the integer value

returns by method elements to a string.

Page 69: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline69

FunctionSet.wmls

35 // find string starting at index 8 and ending with a space36 var string1Element = String.elementAt( string1, 8, " " );3738 WMLBrowser.setVar( "elementAtString1", string1Element );3940 // get the length of string141 var length = String.length( string1 );42 43 // insert "Book" at the end of string144 string1 = String.insertAt( string1, "Book", length, " " );4546 WMLBrowser.setVar( "insertAtString1", string1 );4748 // replace "Web" with "Deitel" where "Web" has an 49 // index of 150 string1 = String.replaceAt( string1, "Deitel", 1, " " );51 52 WMLBrowser.setVar( "replaceAtString1", string1 );5354 // remove "Wireless" from string155 string1 = String.removeAt( string1, 0, " " );5657 WMLBrowser.setVar( "removeAtString1", string1 ); 58 WMLBrowser.go( "#card2" ); 59 }

Method elementAt will return a substring from the value of string1 starting at index 8 and ending at a space.

Method length returns the number of characters in string1 as an integer.

Method replaceAt removes “Web” from string1 and replaces it with the string “Deitel” (Wireless Deitel Book).

Method insertAt inserts the string “Book” at the end of the value of string1 (Wireless Web Book).

Method removeAt removes the string “Wireless” from the value of string1 leaving “Deitel Book”.

Page 70: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline70

StringMisc.wml

1 <?xml version = "1.0"?>2 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"3 "http://www.wapforum.org/DTD/wml12.dtd"> 4 5 <!-- Fig. 23.15: stringMisc.wml -->6 <!-- WML document that references stringMisc.wmls -->78 <wml>910 <card id = "index" title = "strings">11 <do type = "accept" label = "Run">1213 <!-- call function stringMethods in functionSet.wmls -->14 <go href = "functionSet.wmls#stringMethods()" />1516 </do>17 18 <p>19 Click Run to execute the script.20 </p>21 </card> 2223 <card id ="card2" title = "strings">24 <do type = "accept" label = "Run">25 26 <!-- redirect the user to the next card to -->27 <!-- display further results -->28 <go href = "#card3" />2930 </do>31

Page 71: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline71

StringMisc.wml

32 <p>33 isEmpty method:<br />34 35 <!-- dereference browser variable emptyString1 -->36 $emptyString13738 </p>39 </card>40 41 <card id = "card3" title = "strings">42 <do type = "accept" label = "Run">4344 <!-- redirect the user to the next card to -->45 <!-- display further results -->46 <go href = "#card4" />4748 </do>49 50 <p>51 String.format method:<br />5253 <!-- dereference browser variable formatString1 -->54 $formatString155 </p>56 </card> 57 58 <card id = "card4" title = "strings">59 <do type = "accept" label = "Run">6061 <!-- redirect the user to the next card to -->62 <!-- display further results -->63 <go href = "#card5" />64 </do>65

Display results of invoking method isEmpty.

Display result of invoking method format.

Page 72: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline72

StringMisc.wml

66 <p>67 String.squeeze method:<br />6869 <!-- dereference browser variable squeezeString1 -->70 $squeezeString171 </p>7273 </card> 74 75 <card id = "card5" title = "strings">76 <do type = "accept" label = "Run">7778 <!-- redirect the user to the next card to -->79 <!-- display further results -->80 <go href = "#card6" />81 </do>82 83 <p>84 String.elements method:<br />8586 <!-- dereference browser variable elementsString1 -->87 $elementsString188 </p>89 </card> 90 91 <card id = "card6" title = "strings">92 <do type = "accept" label = "Run">9394 <!-- redirect the user to the next card to -->95 <!-- display further results -->96 <go href = "#card7" />97 </do>98

Display results of invoking method squeeze.

Display result of invoking method elements.

Page 73: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline73

StringMisc.wml

99 <p>100 String.elementAt method:<br />101102 <!-- dereference browser variable elementAtString1 -->103 $elementAtString1104 </p>105 </card> 106 107 <card id = "card7" title = "strings">108 <do type = "accept" label = "Run">109110 <!-- redirect the user to the next card to -->111 <!-- display further results -->112 <go href = "#card8" />113 </do>114 115 <p>116 String.insertAt method:<br />117118 <!-- dereference browser variable insertAtString1 -->119 $insertAtString1120 </p>121 </card> 122 123 <card id = "card8" title = "strings">124 <do type = "accept" label = "Run">125126 <!-- redirect the user to the next card to -->127 <!-- display further results -->128 <go href = "#card9" />129 </do>130

Display results of invoking method elementAt.

Display result of invoking method insertAt.

Page 74: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline74

StringMisc.wml

131 <p>132 String.replaceAt method:<br />133134 <!-- dereference browser variable replaceAtString1 -->135 $replaceAtString1136 </p>137 </card> 138 139 <card id = "card9" title = "strings">140 <do type = "accept" label = "Home">141142 <!-- redirect the user to the first card -->143 <go href = "#index" />144 </do>145 146 <p>147 String.removeAt method:<br />148149 <!-- dereference browser variable removeAtString1 -->150 $removeAtString1151 </p>152 </card> 153 </wml>

Display results of invoking method replaceAt.

Display result of invoking method removeAt.

Page 75: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline75

Program Output

Page 76: Wireless Web Applications & m-business Dr. Awad Khalil Computer Science Department AUC

Outline76

Program Output