Wyyme Technology Junction: Wireless Markup Language

WAP uses Wireless Markup Language (WML), which includes the Handheld Device Markup Language (HDML) developed by Phone.com.

WML can also trace its roots to eXtensible Markup Language (XML). A markup language is a way of adding information to your content that tells the device receiving the content what to do with it. The best known markup language is Hypertext Markup Language (HTML). Unlike HTML, WML is considered a meta language. Basically, this means that in addition to providing predefined tags, WML lets you design your own markup language components. WAP also allows the use of standard Internet protocols such as UDP, IP and XML.

There are three main reasons why wireless Internet needs the Wireless Application Protocol:

Transfer speed
Size and readability
Navigation

Most cell phones and Web-enabled PDAs have data transfer rates of 14.4 Kbps or less. Compare this to a typical 56 Kbps modem, a cable modem or a DSL connection. Most Web pages today are full of graphics that would take an unbearably long time to download at 14.4 Kbps. Wireless Internet content is typically text-based in order to solve this problem.

The relatively small size of the LCD on a cell phone or PDA presents another challenge. Most Web pages are designed for a resolution of 640x480 pixels, which is fine if you are reading on a desktop or a laptop. The page simply does not fit on a wireless device's display, which might be 150x150 pixels. Also, the majority of wireless devices use monochrome screens. Pages are harder to read when font and background colors become similar shades of gray.

WML (Wireless Markup Language) is the new web language for making sites on mobile phones. Over the past few months new WAP (Wireless Applications Protocol) phones have become extremely popular and many large websites have created special ‘mobile’ versions of their site. Many people predict that, over the next few years, WAP sites will become extremely popular and e-commerce over mobile phones will be widly available.

To create a WAP site you don’t need a WAP enabled phone. You can get a WAP simulator for a PC. This is a piece of software which will give you a WAP phone on your desktop. You can then type in the URLs of WAP sites and then view them on your PC. You can get a very good free WAP simulator from YourWAP.com

WAP sites are not like standard web sites at all. As an example, you are looking at part of the Gowansnet web site.

As you can see, sites written in WML are monochrome, very limited and there is very little screen space. Because of this you must be very careful when you are designing a WAP site as it is nothing like a web site.

Just read on to learn how to create a WAP site using WML. It is a great advantage if you know HTML as WML is a lot like it (in fact WML is just a variant of XML, another web language). Let’s get straight into how to create a site. Note, a working knowledge of HTML is useful and you should really have either a WAP phone or a WAP simulator to view your site.

Unfortunately WML cannot be run on all web hosts. For WML content to be run, a web host must make some changes to the configuration of their web server. If your host cannot do this for you, you can try WAPHosts.net. They can provide you with a server that will support WML.

Valid WML Elements

WML predefines a set of elements that can be combined together to create a WML document. These elements include can be broken down into two groups: the Deck/Card elements and the Event elements.

Deck/Card Elements

wml

card

template

head

access

Using Variables

Because multiple cards can be contained within one deck, some mechanism needs to be in place to hold data as the user traverses from card to card. This mechanism is provided via WML variables. Variables can be created and set using several different methods. For instance:

Using the <setvar> element as a result of the user executing some task. The <setvar> element can be used to set a variable’s state within the following elements: go, prev, and refresh. The following element would create a variable named x with a value of 123:

<setvar name="x" value="123"/>

Variables are also set through any input element (input, select, option, etc.). A variable is automatically created that corresponds with the name attribute of an input element. For instance, the following element would create a variable named x:

<select name="x" title="X Value:">

Although we haven’t discussed WMLScript yet, it is important to note that WML and WMLScript within a document share the same variables.

Declaring A WML Document

When you are creating a WML document all you need is notepad, just like for HTML. The first thing you should enter is:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

this tells the phone that it is interpreting a WML document and which WML standards it is using.

Cards

Instead of having pages, WAP sites have cards. These are what is displayed on the screen at any one time, just like a page. More than one card can be inserted in each WML document. To declare a card, insert the following:

<card id="index" title="My WAP Site" newcontext="true">

This will make a card with the ID index (used for linking) and will display the text:

My WAP Site

at the top of the screen.

Closing Tags

Unlike with HTML, it is extremely important to close WML tags. If you do not, a page will certainly not work. You must close both the <card> and <wml> tags:

</card>
</wml>

Now I am going to show you how to insert text and how to format it.

The Tag

Just like in HTML the tag is used to show where a paragraph begins and ends. Unlike HTML though, all text on a WML page must be inside these tags. You are not allowed to nest these tags either. One important thing to remember about WML is that, unlike HTML where a page will still display even if there is bad code, a WAP phone will just reject a page if there is code it doesn’t understand.

As with HTML you use the tags as follows:

information

Aligning Text

Aligning text in WML is nearly exactly the same as in HTML, except you can’t use the center tag. All aligning must be done using the following tags:

Center:



Right: 

The Tag

In WML (as mentioned earlier) all tags must be closed. This causes problems when using old HTML tags (like ) which have no closing tag. To get around this, some tags have had a / put on the end e.g.

<br/>

This, like in HTML will make a line break.

Text

In WML there is actually no font tag (as you can only display text in the phone's default font in black). To show text all you need to do is put it in between the and tags. Here is an example of a full WML document:

<?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="index" title="My WAP Site" newcontext="true">

Welcome to my new WAP site. You can view this on your mobile phone anywhere in the world! 
It is amazing!

</card>
</wml>

Hyperlinks + Images

Now I will show you how you can make this better by adding extra parts, linking to them (and other sites) and how to add images to your site.

More Cards

WAP sites have cards instead of pages. They are really the same as pages except that they can all be written in one file. To add another card, all you need to do is put in another <card> tag with a different ID to the others. For example:

<card title="About Me" id="about">
information
</card>

would be added below the first card but before the </wml> tag.

Linking

There are three ways to link to another WAP site, file or card. Just like in HTML these can either be the full path to a file or a relative link.

To link to a WAP site you use the following:

<a href="http://gowansnet.waphosts.net/">Gowansnet</a>

in your text. To link to another file on your site you would use:

<a href="links.wml">My Links</a>

and to link to another card in the same page you use:

<a href="#about">About Me</a>

Images

Unfortunately, because WAP phones only have monochrome screens, images do not work very well on WML pages. They also use their own image format: WBMP. When you are creating an image to use on your site you will need to make it small (mobile phone screens are about 100x50 pixels).

The easiest way to get an image into the WBMP format is to create it as a GIF or JPG (it can be in colour if you want) and then visit this site to convert it into a monochrome (black and white) WBMP image which you can then include on your site.

Images in WML are inserted using the <img> tag, just like in HTML:

<img src="logo.wbmp" alt="Logo" />

Again, you can see that a / has been added at the end as the <img> tag has no closing tag. It is very important that you also include the alt text as it will be displayed while the image is being downloaded.

Example Site

Below is the sample WML code for a small WAP site. It has two cards, an image, and a link to an external site:

<?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="index" title="My WAP Site" newcontext="true">

Welcome to my new WAP site. You can view this on your mobile phone anywhere in the world! 
<img src="logo.wbmp" src="Logo" />


Here are some links: 
<a href="#about">About Me</a> 
<a href="http://gowansnet.waphosts.net/">Gowansnet</a>

</card>
<card id="about" title="About Me">
Here is some informatio about me. You can't write too much in here, though as there is not much space 
You can scroll down the screen, of course.

<a href="#index">Back</a>

</card>
</wml>

Creating A WML Deck

In this example, we’ll start by creating a WML deck that allows us to first select a username from a list, enter in a password, then have our selections repeated back to us. This will illustrate the basic handling of user input, events, and variables all within one deck using multiple cards.

<?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="Login" title="Login">
  <do type="accept" label="Password">
   <go href="#Password"/>
  </do>
  <p>
  UserName:
  <select name="name" title="Name:">
   <option value="John Doe">John Doe</option>
   <option value="Paul Smith">Paul Smith</option>
   <option value="Joe Dean">Joe Dean</option>
   <option value="Bill Todd">Bill Todd</option>
  </select>
  </p>
 </card>

 <card id="Password" title="Password:">
  <do type="accept" label="Results">
   <go href="#Results"/>
  </do>
  <p>
  Password: <input type="text" name="password"/>
  </p>
 </card>

 <card id="Results" title="Results:">
 <p>
 You entered:<br/>
 Name: $(name)<br/>
Password: $(password)<br/>
 </p>
 </card>
</wml>

Selecting this option causes the element to be analyzed.
If you are familiar with the anchor tag () in HTML, you know that it specifies an href attribute that tells the browser where to link to if this anchor is selected. The WML element’s "href" attribute works in the same manner. As with HTML, to link to another card in the document, you simply prepend a # symbol before it. For example, to link to the Results card, we define the following element:


<go href="#Results"/>

This Results card makes use of variables by retrieving and displaying the contents of the name and password variables. Recall that variables are substituted into a card or deck by using the following syntax:


$(variable_name)

Calling A Server Script

Without the ability to perform server transactions, WML would only serve to provide a standardized way to display text on a client. Adding in the ability to dynamically connect to remote servers opens up every WAP device to the world of Internet messaging, enterprise data, and e-commerce. WAP devices interact with these data sources through a WAP gateway as mentioned in our WAP Overview tutorial. This gateway must interface with a carrier such as CDMA, GSM, or GPRS.

WMLExample2.wml


<?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="Order" title="Query Inventory"> 
  <p> 
  <select name="Items" title="Items">
   <option value="Books">Books</option>
   <option value="Music">Music</option>
   <option value="Video">Video</option>
   <option value="Software">Software</option>
  </select>
  </p> 
  <do type="accept" label="Query">
   <go href="http://127.0.0.1/WML/Inventory.asp" method="post">
    <postfield name="Items" value="$(Items)"/>
   </go>
  </do>
 </card> 
</wml>

Listing 3 - Inventory.asp

<% 
Dim Body

If Request.Form("Items") = "Books" Then
 Body = "You selected Books!"
ElseIf Request.Form("Items") = "Video" Then
 Body = "You selected Video!"
ElseIf Request.Form("Items") = "Software" Then
 Body = "You selected Software!"
ElseIf Request.Form("Items") = "Music" Then
 Body = "You selected Music!"
End If

Response.ContentType = "text/vnd.wap.wml"%>

<?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>

<%Response.write(Body)%>

</p>
</card>
</wml>

A few things should be mentioned for those wishing to run this example on their local Web server. You must register the proper MIME types with your Web server so that WML content can be properly sent. The two MIME types that should be registered are:


.wml text/vnd.wap.wml
.wmls text/vnd.wap.wmlscript

If you’d like to use Wireless Bitmap images (the image format supported by WAP), also add:


.wbmp  image/vnd.wap.wbmp

Adding Client-Side Logic To WAP Using WMLScript

WMLScript is the WAP corollary to the JavaScript scripting language that was popularized by Netscape Communications. Standardization efforts by Netscape helped produce the ECMAScript standard, a standard that WMLScript was based on.

WMLScript syntax is based on the ECMAScript programming language. Unlike ECMAScript, however, the WMLScript specification also defines a bytecode and interpreter reference architecture for optimal utilization of current narrowband communications channels and handheld device memory requirements.

The smallest unit of execution in WMLScript is a statement and each statement must end with a semicolon (;).
WMLScript is case-sensitive.
Comments can either be single-line (beginning with //) or multi-line (bracketed by /* and */). This syntax is identical to both C++ and Java.
A literal character string is defined as any sequence of zero or more characters enclosed within double ("") or single (‘) quotes.
Boolean literal values correspond to true and false.
New variables are declared using the var keyword (i.e. var x;)

Data Types

WMLScript is a weakly typed language. This means that no type-checking is done at compile- or run-time and no variable types are explicitly declared. Internally, the following data types are supported:

Boolean
Integer
Floating-point
String
Invalid

The programmer does not need to specify the type of any variable; WMLScript will automatically attempt to convert between the different types as needed. One other point to note is that WMLScript is not object-oriented (such as Java or C++). Therefore, it is impossible to create your own user-defined data types programmatically.

Operators

WMLScript supports a variety of operators that support value assignment operations, arithmetic operations, logical operations, string operations, comparison operations, and array operations. For more information on the wide variety of WMLScript operators, see the WMLScript specification.

Flow Control Statements

The operators and expressions supported by WMLScript are virtually identical to those of the JavaScript programming language so we will not discuss them here. Java does support a number of control statements for handling branching within programs. These include the if-else, for loop, while loop, break, and continue statements.

Functions

Related WMLScript statements can be executed together as a unit known as a function. A function declaration has the following syntax:

extern function identifier(FormatParameterList) Block ;

The extern keyword is optional and is used to specify a function that can be called from outside the current compilation unit in which the function is defined. A sample WMLScript function declaration looks like this:


function RunTime(distance, speed)
{
 var time = distance / speed;
 return time;
};

The above example simply takes two input variables, distance and speed, and uses them to calculate a time variable. The return keyword is then used to return a value.

When calling a function included with one of the WMLScript standard libraries (see below), the library name must be included with the function call. For example, to call the String library’s length() function, use the following syntax:


var a = String.length("1234567890");

The WMLScript Standard Libraries

While WMLScript does not support the creation of new objects via object-oriented programming, it does provide six "pre-built" libraries that aid in the handling of many common tasks. These libraries (with a brief description of each) include:

Lang - This library contains a set of functions that are closely related to the WMLScript language core. Included in this library are functions for data type manipulation, absolute value calculations, and random number generation.

Float - The Float library is optional and is only supported on those clients who have floating-point capabilities. Typical functions provided by this library include sqrt(), round(), and pow().

String - The String library contains a set of functions for performing string operations. Some of the functions included in this library are length(), charAt(), find(), replace(), and trim().

URL - This library contains a set of functions for handling both absolute URLs and relative URLs. Typical functions include getPath(), getReferer(), and getHost().

WMLBrowser - This library contains functions by which WMLScript can access the associated WML context. These functions must not have any side effects and must return invalid in cases where the system does not support WMLBrowser and where the interpreter is not invoked by the WML Browser. Commonly used functions in this library include go(), prev(), next(), getCurrentCard(), and refresh().

Dialogs - This library contains a set of typical user interface functions including prompt(), confirm(), and alert().

Example: Validating User Input Via WMLScript

In the following example, we will build a simple WML card that asks the user to input a social security number (an identification number used by the U.S. Social Security Administration). We will then use WMLScript to verify that the user’s input was formatted correctly. Following this verification, we’ll alert the user via WMLScript to let them know whether their number was accepted or not. This example, though simple, represents a typical usage of WMLScript on a client.

Listing 1 - WMLScriptExample.wml


<?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="SSN" title="SSN:">
  <do type="accept" label="Results">
   <go href="WMLScriptExample.wmls#validateSSN($(SSN))"/>
  </do>
  <p>
  Enter SSN: <input type="text" name="SSN"/>
  </p>
 </card>

 <card id="Results" title="Results:">
 <p>
 You entered:<br/>
 SSN: $(SSN)<br/>
 </p>
 </card>

</wml>

Listing 2 - WMLScriptExample.wmls


extern function validateSSN(SSN)
{
 if (String.length(SSN) != 9)
 {
  WMLBrowser.setVar("SSN", "Error: String must be 9 digits long.");
 }

 WMLBrowser.go("WMLScriptExample.wml#Results");
};

Thursday, 5 September 2013

Wireless Markup Language