1. Copyright © Gavin McArdell 2000-2002 WML Training Course Gavin McArdell

2. Copyright © Gavin McArdell 2000-2002 Intro WML 1.1 is the current version of the Wireless Markup Language as defined under the Wireless Application Protocol (W@P).W@P WAP is a standard defined by the Wap Forum (http://www.wapforum.org) A Forum started by Nokia, Motorola, Ericsson and Phone.Com (formerly unwired planet) over 2 and a half years ago.http://www.wapforum.org

3. Copyright © Gavin McArdell 2000-2002 Wap Forum Goals Independent of wireless network standard. Open to all. Will be proposed to the appropriate standards bodies. Applications scale across transport options. Applications scale across device types. Extensible over time to new networks and transports.

4. Copyright © Gavin McArdell 2000-2002 Applicability The Wireless Application Protocol will be applicable to, but not limited to: GSM-900, GSM-1800, GSM-1900 CDMA IS-95 TDMA IS-136 3G systems - IMT-2000, UMTS, W- CDMA, Wideband IS-95

5. Copyright © Gavin McArdell 2000-2002 WML Language WML is an XML based language. Similar to HTML it is designed specifically for optimisation of content on a small screen such as a mobile phone. All WML decks are valid WML documents and therefore are associated with a DTD and are prefixed with the WML XML declaration as follows: <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

6. Copyright © Gavin McArdell 2000-2002 WML Tags All WML tags are defined in lower case in 1.1 (in 1.0 of wap all wml tags were upper case!!) All WML decks start with a tag and end with a tag

7. Copyright © Gavin McArdell 2000-2002 Card Deck WML unlike HTML is based on a Card Deck paradigm where a WML deck consists of multiple cards. Each card is displayed to the user one at a time. A card deck is defined by a … tag pair. A card may have a number of attributes but the main two are id= and title=

8. Copyright © Gavin McArdell 2000-2002 Card Deck Contd.. Id is the identifier of the card for internal references such as links to a particular card. title is the caption that will be displayed for the page. …

9. Copyright © Gavin McArdell 2000-2002 Text Paragraph Paragraphs of text are defined within a … tag pair. Today will be mainly cloudy with a little sunshine and scattered showers!

10. Copyright © Gavin McArdell 2000-2002 Hello World Practical 1. No tutorial would be complete without a ‘Hello World’ application and this is no exception, so if we bring together the pieces defined so far you should be able to create a ‘Hello World’ WML application. The answer is in appendix A, Example 1.

11. Copyright © Gavin McArdell 2000-2002 Line Break Paragraph text can have limited formatting with a line break by inserting the tag where a new line should be forced. Example: Today will be mainly cloudy with a little sunshine and scattered showers!

12. Copyright © Gavin McArdell 2000-2002 Multiple Cards If we are to create multiple card decks we need a way of navigating from one card to the next. This can be done by using the anchor tag. The notation should be familiar to HTML developers. Anchors must be contained within a paragraph tag. Example: Go to card 2…

13. Copyright © Gavin McArdell 2000-2002 Practical 2 Try and create a WML deck with two cards. The first card displays a paragraph of text suggesting the answer lies in the next card and the next card says ‘Fooled ya!’.

14. Copyright © Gavin McArdell 2000-2002 Escaped Characters Some characters have special meaning in WML as in HTML such as &,< etc. Therefore to present these in a paragraph needs special attention. WML allows these characters to be presented either as a named or numeric entity. This references to the document character set (Unicode) and not to the current document encoding (charset) In this way &#302 will always present the same character. To use this notation it is simply &#nnn; To use the named entity is simply &name;

15. Copyright © Gavin McArdell 2000-2002 Popular Escaped Characters CharacterNumericNamed “"" &&& !'&apos; <<< >>>  

16. Copyright © Gavin McArdell 2000-2002 Comments Comments can be added to WML as in HTML by beginning with Example:

17. Copyright © Gavin McArdell 2000-2002 Forms – Input Box The simplest form of user input is by the use of a standard input box. This is done with an tag. The two main attributes of an input box are type and name. Type may be “text” or “password”. Name is the internal identifier of the input box and can be used in WML as a WML variable name to refer to the value. There are a number of other useful attributes for a text input box:

18. Copyright © Gavin McArdell 2000-2002 Input Box Contd… You can set a default value for the input box as follows:

19. Copyright © Gavin McArdell 2000-2002 Special Formats FormatDescription AAny upper-case alphabetic or punctuation character aAny lower-case alphabetic or punctuation character NAny numeric character XAny upper-case character xAny lower-case character MAny character. The device may assume upper-case as default mAny Character. The device may assume lower-case as default. *fEntry of any number of characters where ‘f’ is one of the formats above. nfEntry of ‘n’ characters where ‘f’ is one of the formats above.

20. Copyright © Gavin McArdell 2000-2002 Formatting examples Any number of any characters format=”*M” 3 Numerics only format=”3N”

21. Copyright © Gavin McArdell 2000-2002 Input Box contd… Maxlength You can specify the maximum number of characters that can be entered by using the maxlength attribute. Title You can specify a title description for the input box using the title attribute.

22. Copyright © Gavin McArdell 2000-2002 Selection List In order to provide a user with a list of options you can specify a selection list box similar to html. A select list is defined within a pair of … tags. The select tag has a name attribute as with an input box. Listed options within the selection list are defined between the … tags by inserting tags. An option can have a value attribute which denotes the value associated with select’s name variable.

23. Copyright © Gavin McArdell 2000-2002 Select contd… Dog Cat Tarantula Piranha

24. Copyright © Gavin McArdell 2000-2002 Variables Variables can be declared within a WML deck in two main ways. One which we have seen is that a form element has a name which can be accessed as a variable, the other is an explicit tag. Example:

25. Copyright © Gavin McArdell 2000-2002 Variables Contd… Variables can be referenced in other parts of a WML deck by prefixing the variable name with a $. Example: My variable value is $myvar

26. Copyright © Gavin McArdell 2000-2002 Variables Contd… The name may also be put in parentheses where a variable has a space in the name. This is not advised. However use of parentheses is good practice. Example: My variable value is $(myvar)

27. Copyright © Gavin McArdell 2000-2002 Variables Contd… The variable name may be suffixed by a colon and conversion filter. The most useful of which is called escape My variable value is $(myvar:escape) This can be used when posting field data to a cgi script where the content may contain special characters.

28. Copyright © Gavin McArdell 2000-2002 Practical 3 Write a 3 card deck where the user enters their name and age in the first card, select their favourite colour in the second card and the third card tells them what they entered and picked.

29. Copyright © Gavin McArdell 2000-2002 Do Element The do element provides a mechanism for the user to act upon the current displayed card. The visualisation is device dependant. On the Nokia 7110 it generally maps to the two action buttons or into the options list. The main do types are Accept, Prev and Help.

30. Copyright © Gavin McArdell 2000-2002 Do Actions Accept The Accept is a positive acknowledgement of an action. Prev Prev instigates a backwards navigation. Help Help request help.

31. Copyright © Gavin McArdell 2000-2002 Accept example This example will place a ‘Home’ label in the options list of a 7110. On selecting it the user will be directed to the url http://www.mydomain.com/home.asp as defined in the tag. http://www.mydomain.com/home.asp

32. Copyright © Gavin McArdell 2000-2002 Prev Example This example will place a label “Back” against the right hand 7110 action button. On pressing that the user will be sent back to the previous card or WML deck. Note the new tag.

33. Copyright © Gavin McArdell 2000-2002 Help Example This example will place a ‘Help’ label in the options list of a 7110. On selecting it the user will be directed to the url http://www.mydomain.com/help.asp as defined in the tag. http://www.mydomain.com/help.asp

34. Copyright © Gavin McArdell 2000-2002 Templates Templates can be used to define Do actions which apply to all cards in a deck rather than applying them again at each card. The template is defined within a … tag pair and come at the beginning of a wml deck. Inside the tags are placed tags to be applied for the whole deck.

35. Copyright © Gavin McArdell 2000-2002 Template Example

36. Copyright © Gavin McArdell 2000-2002 Events Some tags can support events. Some good practical examples are the onpick event on a select option, ontimer,onenterforward,onenterbackward for a card. Hello

37. Copyright © Gavin McArdell 2000-2002 Images WML supports images of type WBMP which is basically a monochrome image. These can be embedded in a card using the tag. Example:

38. Copyright © Gavin McArdell 2000-2002 Practical 4 Taking the results of practical 3. Extend it to include a template for Accept actions to allow navigating to subsequent cards. Also allow the user to go backwards for corrections. Finally add an initial card which says “Welcome to My Application” for 3 seconds before directing the user to the correct card.

39. Copyright © Gavin McArdell 2000-2002 Thank You.