Hello WAP! Johan Montelius

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: <?xml version="1.0" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> <wml> <card> 2G1722 </card> </wml> 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: <?xml version="1.0" ?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd"> 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 document 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 closing 2 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”. <wml> <card> 2G1722 </card> </wml> If you want to try some nicer type setting you can experiment with tags such as: <big>, , , , , , and . You can also give attributes to the paragraph element to align the text and insert line breaks.: <wml> <card> 2G1722 <big>DMA</big> </card> </wml> 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: <wml> <card id="one" title="First"> Go to the <a href="#one">first</a>, <a href="#two">second</a> or <a href="#three">third</a> card. </card> <card id="two" title="Second"> Go to the <a href="#one">first</a>, <a href="#two">second</a> or <a href="#three">third</a> card. </card> 3 <card id="three" title="Third"> Go to the <a href="#one">first</a>, <a href="#two">second</a> or <a href="#three">third</a> card. </card> </wml> If you would do this on a mobile phone you would notice that the navigation 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 navigation would be very much slower. Try to implement the same behavior using three document and link the documents as follows: <wml> <card title="First"> Go to the <a href="one.wml">first</a>, <a href="two.wml">second</a> or <a href="three.wml">third</a> deck. </card> </wml> 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 <a ..> tag is only a short form of a more extensive anchor element that has more options. The full version looks like this: 4 <wml> <card id="home" title="Anchors"> Select a page (or press key 1 or 2): <anchor title="page one" accesskey="1"> <go href="#one"/> one </anchor> <anchor title="page two" accesskey="2"> <go href="#two"/> two </anchor> </card> <card id="one" title="One"> Page one: go <anchor><prev/>back</anchor>. </card> <card id="two" title="Two"> Page two: go <anchor><prev/>back</anchor>. </card> </wml> 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 “accesskey” 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. <wml> <template> <do type ="home" label="Home"> <go href="#home"/> </do> <do type="help" label="About"> <go href="#about"/> </do> <do type="contact" label="Contact"> <go href="#contact"/> </do> </template> 5 <card id="home" title="Options test"> The home page. Test the options </card> <card id="about" title="Options test"> About: this is only a options test. </card> <card id="contact" title="Options test"> Contact: I’ll call you. </card> </wml> 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.

Load more