WAP and WML - Phillips Alexander Benton
Download
Report
Transcript WAP and WML - Phillips Alexander Benton
WAP and WML
The Wireless Application Protocol
WAP architecture
WML document structure
WML syntax
•Basic document syntax
•Layout
•Text formatting
•Images
•Navigation
•Events
•Variables
WAP and WML
WAP Architecture
Client
Any WAP-enabled phone, ie any phone which runs the
Wireless Application Protocol browser software
No unique hardware is required
There are at least 158 different models today, according to
developer.openwave.com
WAP Gateway
This is a service provided by your mobile service carrier
There are at least 51 carriers worldwide who offer WAP
gateways (developer.openwave.com)
The WAP gateway serves several purposes:
• Serve WML, WMLS, and WBMP content
• Compile WMLScript
• Compress all content into binary form
WAP Architecture
Do you still need a web server?
Early WAP server designs included an HTML-to-WML
converter. The theory was that you could serve your original
content, just reformulate the tags into WML in an automated
manner. Your web server became a back end behind your
WAP server; the WAP server would translate requests from
the Gateway, through to the web server, and back.
This failed painfully. It’s clear now that your content needs to
either be in WML, or you need to design for a one-inch-square
screen in your HTML.
So, if not a web server, then--?
Your WAP server is the web server.
You can serve both types of content from one system.
WAP Architecture
Follow the request:
Client establishes a data connection to WAP Gateway
Client sends WTAI (“Wireless Telephony Application
Interface”--HTTP for phones) request for URL entered
WAP Gateway receives request, decodes it
WAP Gateway sends HTTP request to Web Server
Web Server replies with content
WAP Gateway re-encodes content and sends it back to client
Client renders content locally
WML : Documents, Decks and Cards
Every WML document must begin with an XML
declaration and a DTD:
<? xml version=“1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML
1.1//EN” “http://www.wapforum.org/DTD/wml_1.1.xml”>
All WML documents contain one or more cards.
Each card contains the content for a single page
of display.
The <WML> tag is the root of the deck.
Within the <WML> tag, you’ll one or more <card>’s and
perhaps a <head> tag.
WML Syntax
<wml>
<head>
<card>
<card>
title=“…”
id =“…”
newcontext =“true”, “false”
onenterbackward =“[url]”
onenterforward =“[url]”
ontimer =“[url]”
WML Syntax - Layout
<p>
align=“left”, “right”, center”
<p>
<table columns="3">
<tr>
mode=“wrap”, “nowrap”
<td>Cell 1</td>
<br />
<td>Cell 2</td>
<table>
<td>Cell 3</td>
columns=“…”
align=“l”, “c”, “r”
<tr>
<td>
</tr>
</table>
</p>
WML Syntax - Text Formatting
<b>
- bold text
<big>
- big text
<em>
- emphasized text
<i>
- italicised text
<small>
- small text
<strong> - strong text
<u>
-underlined text
WML Syntax - Images
<img> - Render a WBMP file
src=“…”
align = “top”, “middle”, “bottom”
alt=“…”
height=“…”, width=“…”
hspace=“…”, vspace=“…”
<p> An image:
<img src="stickman.wbmp” alt="Stickman"/>
</p>
WML Syntax - Navigation
As in HTML, you link from page to page explicitly
with anchors.
<p>
This is a <a href=“foo.wml”>link</a>
</p>
WML offers the <a> tag and the <anchor> tag
<a> - the simple anchor tag
href=“…”
<anchor> - more powerful anchor tag
<go>, <prev>, <refresh>, <noop>, ...
WML Syntax - Navigation
A softkey on a mobile phone is a button whose
function can be set by the software. Most phone
buttons are softkeys.
<do> - Map a user softkey to an action; similar to
an anchor tag.
label=“…”
type=“accept”, “prev”, “help”, “reset”, “options”, “delete”,
“unknown”, “x-*”, “vnd.*”
“accept” is the “YES” button on most phones; “prev” is the
“NO” button.
When using softkeys, be careful to respect
common usage rules.
WML Syntax - Navigation
<go> - Navigate to a new card
<prev> - Back up one on the card stack
<refresh> - Reloads the current page
<noop> - Do nothing
<setvar> - Sets a variable
<postfield> - Sends a post (or get) field value to
the server
WML Syntax - Events
<do> is the softkey event handler.
<onevent> is a more generalised events handler.
type=“onenterbackward”, “onenterforward”, “onpick”, “ontimer”
Use onevent to process data differently
depending on the action of the user.
For example, you might want to initialise a
variable to zero with onenterforward, but then
incremement it to track user returns in
onenterback. Onenterback will fire whenever the
user uses the prev softkey to return to the page.
WML Syntax - Timer Events
Use the <timer> tag to initialise a timer.
The timer’s value field specifies 1/10’th’s of a second.
The <card> tag defines an ontimer event, whose
value is a URL. When the <timer> times out, the
<card>’s ontimer URL is loaded.
<card id=“card1” ontimer=“#card2”>
<timer value=“30”>
</card>
<card id=“card2”>
<p>Here by timer!</p>
</card>
WML Syntax - Variables
A variable in a WML script is a data field whose
value can be changed before the next update.
This is a divergence from HTML. HTML does not
have the concept of variables, because HTML
has inline JavaScript instead.
Variable names, like all concepts in XML, are
case-sensitive.
To refer to a variable in your code, use a dollar
sign ($) followed by the name of the variable,
optionally enclosed in parentheses.
$foo
$(foo)
WML Syntax - Variables
Variables are set with the <setvar> tag.
Variables, once set, take effect when the page is
next reloaded. Unfortunately, since <setvar>
runs when an event triggers it, you can’t initialise
variables cleanly.
<card id=“Bob The Card”>
<onevent type="onenterforward">
<refresh>
<setvar name=“Fred” value=“Barney” />
</refresh>
</onevent>
WML Syntax - Variables
Variables can also be set through user input with
the <input> tag
name=“…”
type=“text”, “password”, emptyok=“true”, “false”
maxlength=“…”, size=“…”
format = [*|n][AaNXxMm]
A / a : Uppercase / lowercase alphabetic or punctuation
N : numeric
X / x : Uppercase / lowercase alphabetic
M / m : all characters
* : arbitrary number of characters
n : set number of characters
WAP and WML - Recap
WAP architecture
Client, WAP Gateway, Web Server
WML document structure
DTDs, decks and <card>’s
WML syntax
Basic document syntax - <wml>, <card>, ...
Layout - <p>, <br>, <table>, ...
Text formatting - <b>, <i>, <u>, <big>, <em>, ...
Images - <img> - WBMPs only.
Navigation - <a>, <anchor>, <do>
Events - ontimer, onenterforward, onenterbackward, ...
Variables - <setvar>, <input>, $(foo)
WAP and WML - Bibliography
WAP in Easy Steps, by Mike McGrath. (C)2000 published
by ComputerStep, Warwickshire
http://www.w3schools.com/wap/wml_reference.asp - a
really well-done WML reference
http://developer.openwave.com/ - OpenWave are the folks
who’re defining the WAP gateway standards. They also
make a mobile device SDK.
http://www.openmobilealliance.org/documents.html Technical specifications page for the Open Mobile Alliance,
the public body which binds the many corporations
investing in WAP and related technologies. Note: site can
be a bit thick.