Hello WAP! Johan Montelius
Introduction
In this laboration you will create a simple WAP site using WML.
1 Before the session
Before attending the session you should have accessed your home directory and created a directory called 2g1722 under your public html directory. Make sure that the directory is readable by the web-server. In this directory you should add a document called index.wml with the following content:
2G1722
Before the session you should send me an email with your name and the url to the page.
2 Getting started
As a reference to WML you should use the WML specifications found in the WAP-191-WML document from the WAP Forum. There are more easy to read tutorials and more accessible reference material but reading the definition from the source will help you to understand and navigate WAP Forum and OMA standards. In order to proceed you will need a text editor and a WML capable browser. I’m using Emacs and Opera but you can of course use any system you like. The WinWAP emulator is one popular choice but you will also find emulators from the different phone manufacturer. If you’re using Firefox, there is an add-on that renders WML. The WML pages that you will create can either be accessed as local files on your computer or over a web server that has access to the pages. The alternatives and their limitations can be summarized as follows.
1 • Local files accessed from browser: works well for static pages without server side scripts.
• Web server accessed from browser: allows you to do dynamic pages using for example PHP. I have not found a browser that supports client side scripting but that will not be necessary now.
• Web server accessed from a mobile phone: also allows you to do client side scripting using WMLscripts and accessing the phone specific fea- tures such as making a phone call.
You will also notice that things that have worked in an emulator will not work at all on a regular phone so I suggest that you use a phone as soon as possible. Also try different phone models and see how pages are handled differently. If you access your pages over your own web server make sure that the server has been properly configured so that it delivers the right mime types for WML documents.
3 Hello WAP
Since you have prepared well for this session you already have a “2G1722” page in you home directory. If you have done some HTML programming you will of course think this is a trivial task but trust me, if you’re not very careful you will have problems. The reason is that WML browsers are not as forgiving as regular HTML browser, one small mistake and your doomed. A WML document is well formed XML document; it must follow the XML rules. This means that it should start with a document type declara- tion. This could look like follows:
The first element states that this document is a XML document that con- forms to the XML 1.0 specification. The second element specifies that is a WML 1.3 document and also where the DTD can be found. Try to access the URL and take a short look at it. The DTD defines the syntax of WML 1.3. Note that the Opera browser is quite relaxed when it comes to doc- ument type definitions; you can even leave it out. A browser on a mobile phone will choke if you do the slightest mistake. Now let’s look at the rest of the document. A WML document will always contain a wml element with one or more card elements. Our card element will contain one paragraph with the text “2G1722”. Notice that the paragraph must be enclosed in a
and
tag. If you forget the closing2 tag (as you would probably have done if this was HTML) you page will not be rendered properly or more likely generate a “page fault”.
2G1722
If you want to try some nicer type setting you can experiment with tags such as: , , , , , , and . You can also give attributes to the paragraph element to align the text and insert line breaks.:
2G1722
DMA
4 Decks and cards
A WML document is also referred to as a deck since it consist of a sequence of cards. Each card correspond to a page so when you retrieve a deck you will have access to several pages. The first card is the first one to be displayed (if nothing else is stated) but then you’re in control of the navigation. In order to navigate between cards you will need to have unique iden- tifiers for the cards. You can the create links much in the same way as you would do in a HTML document. Try the following, create a new file nav.wml with the following deck:
3
If you would do this on a mobile phone you would notice that the navi- gation is very quick (or rather that it is not slow). The reason is of course that we have downloaded the deck once and then only jump from card to card. If we would have done the same thing using three different decks nav- igation would be very much slower. Try to implement the same behavior using three document and link the documents as follows:
Notice that once the phone has cached (if you have a phone that will cache pages) the deck navigation is almost as fast as before. Also note that it would not be a good idea to include all cards of a site in one deck. The deck would probably then be very large and the first access could then be too slow. Learning how much to include in one deck is the secret of good WML programing. Now that you know how to create links you can start to add content to your “2G1722” page. Collect all test that you do so that you can try them later.
5 Some more navigation
Since a phone is so limited when it comes to user interface WML provides more ways to help navigation. One can for example do navigation using the key pad or through a navigation menu.
5.1 Anchors Anchors are, as for HTML, the most use form of navigation. The tag is only a short form of a more extensive anchor element that has more options. The full version looks like this:
4 Select a page (or press key 1 or 2): Page one: go Page two: go
There are even more attributes, both to the anchor element and the go element, and there are more events to choose from. Note that the “ac- cesskey” attribute does not work in the a regular browser. You will have to use a phone emulator or a regular phone.
5.2 Options menu You’re phone probably has a options key or two so called soft-keys. The soft-keys are normally located directly below the screen and has their func- tionality defined by the page you’re visiting.
5 The home page. Test the options
About: this is only a options test.
Contact: I’ll call you.
In the above example we used a template element to make the options available through all cards in the deck. If you only want the options to be visible in one card then the do elements can be written inside a card. The type attribute in the do element is an indication of the intended use of the option. There are a few predefined types such as the help type. If there is a “help” button on the phone the option might be mapped to this key. The mapping to specific keys are terminal specific and one should not rely on a particular mapping. One (not so) fun thing to do is to set the type attribute to prev and then set the link to a prison card. The prev type will remap the “back” or “previous” key. A user that pressed the key will be brought to the prison and will not be able to get out of there (I told you it wasn’t that fun).
6 Variables and selections
Since we would like to do as much processing on the terminal side, WML provides variables that can be set and retrieved. Variables are set either explicitly in the setvar element, as the result of selecting an options or, by user input. The only data structure is strings and we can not do very much manipulation of the data unless we call a WMLscript function. Below is an example of how WML variables can be used:
Choose a car: 6 And then move on! You selected a $(car).
The $ notation is how you access variables. Since $ is the reserved as a special character you will have to write $$ if you want to write a regular $-character in your text. Variables exist as long as you keep your session open. That means that you can pass information from one deck to another. You can clear all variables by setting the newcontext attribute in the card element. Another way to set a variable is to ask the user for some text input. This is done by the input element.
Input your name: And then move on! Welcome \$(guest).
7 Assignment
Create a small WAP site that experiments with some of the WML elements described in this tutorial. Do some experiments with how much text that you can have in a card or in a deck before navigation becomes a problem. How do you best solve navigation, using links, keys or selections? WML has limited support for images. In the beginning, browsers only supported black and with bitmaps but modern phones will handle color images. It is advisable to limit the usage of images since all phones will not be able to handle them and that for any terminal it takes time to download. They also take up valuable space on the screen so if the image doesn’t provide any added value then they can best be left out. Take a look at how BBC, Aftonbladet or DN uses images (www.bbc.co.uk/mobile, wap.aftonbladet.se, wap.dn.se ). The next tutorial will look WMLscripts, how to create dynamic content and how to adapt the content to a particular device.
7