Contents
1. Purpose of WML
2. System View: Delivering WML via Internet
3. WML Syntax and Examples
4. Exercises
5. References
1. Purpose of WML
Target of WML
Developers of apps for wireless devices
Typical Devices
Typical Device Characteristics
Small display
Limited input capability
Narrowband network connection
Limited memory
Limited CPU power
2. System View: Delivering WML via Internet
The normal web delivery of pages to HTML browsers looks like this (from [AEO]:
A gateway is used to do a protocol conversion when a doc is delivered from an origin server to a phone. A protocol conversion also occurs (to use a compact binary version of HTTP).
What phones have WML browsers?
Click
here to find out!
3. WML Syntax and Examples
Document Model
Controls text presentation and layout
User interface is deck of cards
- Deck = HTML page
- User navigates through sequence of cards
WML file is prameterized -- instantiate with variables to save memory
Provides inter-card navigation and linking
Supports scriting
Event handling for navigation or script invocation
User Navigation Model
- Browser maintans stack of URLs giving history, just like web browser
- Three operations on stack:
- Reset: Set stack to contain current card only
- Push: Put new URL on stack
- Pop: Remove current URL; return to previous URL
The
Prev button on the phone does a pop.
Initial exercise: Run the phone simulator
Start the WML phone simulator as follows:
Select Start->Programs->Course Software->UP.SDK3.2forWML->UP.Simulator
You should see a screen with three choices starting "Input Field"; if not enter the following in the text box to the right of "Go" at the top of the phone window:
file:\\c:/program files/unwired planet/upsdkw32/examples/wml/controls.wml
First, play with the user interface. The main screen will show you three choices:
- Input Field
- Select List
- Multiple Choice
se the up/down arrows followed by the OK soft key to select each in turn.
The first shows you password entry.
- Use the "BACK" button to return to the main screen.
- Then choose "Select List" to see how to select one from a list of items.
- Use the "BACK button again to return to the main screen.
|
- Then choose "Multiple Choice" and try selecting two or more items (or deselecting items) from the list of first names.
- Use the "BACK button again to return to the main screen.
After this, select "Open Configuration" from the "File" menu at the top of the window. Try each style of phone. Note the variety of screen sizes!
First Example: Hello World
This example illustrates a simple WML file containing one
<?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>
Hello!
</p>
</card>
</wml>
Open a file named "test.wml", paste the above text into the file, and try the phone simulator on test.wml to see what results!
Exercise 1
Open a text editor. Create a WML file named "pizza.wml". The file will evolve into a user interface for ordering pizzas. We'll have a screen to welcome to user to your pizza store (give it a name), and then screens to order the topping, crust, etc., followed by a screen that summarizes for the user what they ordered.
As the first step, create in pizza.wml an initial screen that welcomes the user to your pizza store!
Start a second copy of the phone simulator and display your file as follows:
Select Start->Programs->UP.SDK3.2forWML->UP.Simulator
To enter your file name, click in the textbox displaying the URL and type "file:\\c:/b/pizza.wml", replacing c:/b with the actual drive letter and path of your file.
Second Example
This example shows how to make the soft key change the display from one sceen to a second screen:
<?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 type="accept">
<go href="#card2"/>
</do>
Hello!
This is the first card...
</p>
</card>
<card id="card2">
<p>
This is the second card.
Goodbye!
</p>
</card>
</wml>
Exercise 2
Edit the file you created earlier named "test.wml", paste the above text into the file. Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml!
Then modify pizza.wml to add a second card, telling the user to choose whether they are ordering a pizza or a sub. (We'll see how to insert the list of toppings momentarily!)
Third Example
Now let's see how to insert a list of selections into a WML file...
<?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="NetworkClassMenu">
<p>
Network Device Status
<select>
<option onpick="#PrinterMenu">
Network Printers
</option>
<option onpick="#Computer_Menu">
Computers
</option>
<option onpick="#Routers_MenuItem">
Routers
</option>
</select>
</p>
</card>
<card id="PrinterMenu">
<p>
Network Printers
<select>
<option onpick="#HPLJ5A_stats">
HP-LaserJet 5M
</option>
<option onpick="#LMOE310A_stats">
Lexmark Optra-E310
</option>
<option onpick="#HP2500CM_stats">
HP-2500 CM
</option>
</select>
</p>
</card>
</wml>
Exercise 3
Edit the file you created earlier named "test.wml", paste the above text into the file. Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml!
Modify your second sceen to let the user pick a topping, and whichever is picked, goto screen #3, where the user picks a crust. Make screen #3 go to a screen #4, which we'll fill in later.
Fourth Example
The following code will display a screen with an input field generated by the <input> tag. The attribute
name="i1" assigns a variable. Also, the <do> elements are a way to order the screen display (in contrast to
onpick used in the Third Example).
<wml>
<card id="main">
<do type = "accept" label = "hello">
<go href = "#card2"/>
</do>
<p>
Enter your name:
<input name="i1" />
</p>
</card>
<card id="card2">
<do type = "prev" label = "hi">
<prev/>
</do>
<p>
Hello $i1, how are you?
</p>
</card>
</wml>
Exercise 4
Edit the file you created earlier named "test.wml", paste the above text into the file. Change focus to the phone simulator; if it is still displaying the old file test.wml, just hit F9 to display the new content of test.wml! Note how the display is automatically set to alpha mode so that you can spell your name.
Modify screen 4 in pizza.wml to ask the user to enter their name and phone number, then in screen #5 echo back what they input.
Be sure you understand how to enter a name (consisting of letters) versus a phone number (consisting of numbers) when you run your example!
Using UIML with WML
Here is a simple UIML file that generates a WML file displaying a couple of lines of text...
<?xml version="1.0"?>
<!DOCTYPE uiml PUBLIC
"-//UIT//DTD UIML 2.0 Draft//EN"
"UIML2_0d.dtd">
<uiml>
<interface>
<structure>
<part name="WelcomePage" class="Wml">
<part name="WelcomeCard" class="Card">
<!-- Sub Menu ======================= -->
<part name="IntroP" class="P">
<part name="Introduction" class="RichText">
<style>
<property name="bold">true</property>
<property name="wrap">true</property>
<property name="content">You have successfully converted UIML to WML!</property>
</style>
</part>
</part>
<part name="SigP" class="P">
<part name="Signature" class="RichText">
<style>
<property name="italic">true</property>
<property name="wrap">true</property>
<property name="content">Ready for more?</property>
</style>
</part>
</part>
</part>
</part>
</structure>
</interface>
</uiml>
Try this example.
Copy folder uiml2wml-0.3a from the shared folder to your folder. Set these environment variables:
- UIML2WML=<your-dir>\uiml2wml-0.3a
- PATH=%PATH%;<your-dir>\uiml2wml-0.3a\bin
Type "dir %uiml2wml%. You should see directories like "docs", "examples".
Put the blue UIML code above into a file name wmltest.uiml. CD to the directory containing that file. Enter this:
u2w -indent wmltest.uiml
The output file wmltest.wml should have been created. Display this file in your web browser.
More Examples
Try out the other examples in the Unwired Planet\UPSDKW32\examples\wml file.
5. References
