Copyright © Gavin McArdell WML Training Course Gavin McArdell
Copyright © Gavin McArdell Intro WML 1.1 is the current version of the Wireless Markup Language as defined under the Wireless Application Protocol WAP is a standard defined by the Wap Forum ( A Forum started by Nokia, Motorola, Ericsson and Phone.Com (formerly unwired planet) over 2 and a half years ago.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell 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
Copyright © Gavin McArdell 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" "
Copyright © Gavin McArdell 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
Copyright © Gavin McArdell 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=
Copyright © Gavin McArdell 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. …
Copyright © Gavin McArdell Text Paragraph Paragraphs of text are defined within a … tag pair. Today will be mainly cloudy with a little sunshine and scattered showers!
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell 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!
Copyright © Gavin McArdell 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…
Copyright © Gavin McArdell 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!’.
Copyright © Gavin McArdell 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 Į will always present the same character. To use this notation it is simply &#nnn; To use the named entity is simply &name;
Copyright © Gavin McArdell Popular Escaped Characters CharacterNumericNamed “"" &&& !'' <<< >>>
Copyright © Gavin McArdell Comments Comments can be added to WML as in HTML by beginning with Example:
Copyright © Gavin McArdell 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:
Copyright © Gavin McArdell Input Box Contd… You can set a default value for the input box as follows:
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Formatting examples Any number of any characters format=”*M” 3 Numerics only format=”3N”
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Select contd… Dog Cat Tarantula Piranha
Copyright © Gavin McArdell 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:
Copyright © Gavin McArdell 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
Copyright © Gavin McArdell 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)
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Do Actions Accept The Accept is a positive acknowledgement of an action. Prev Prev instigates a backwards navigation. Help Help request help.
Copyright © Gavin McArdell Accept example This example will place a ‘Home’ label in the options list of a On selecting it the user will be directed to the url as defined in the tag.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Help Example This example will place a ‘Help’ label in the options list of a On selecting it the user will be directed to the url as defined in the tag.
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Template Example
Copyright © Gavin McArdell 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
Copyright © Gavin McArdell Images WML supports images of type WBMP which is basically a monochrome image. These can be embedded in a card using the tag. Example:
Copyright © Gavin McArdell 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.
Copyright © Gavin McArdell Thank You.