WML

Contents of the page:

The generic deck
Multi-carded deck
Images, timers, forms and variables (start of the application)

The generic deck:

I think the best thing to start our WML learning with is taking a look at the generic deck bellow, this is the most basic deck we can ever write and the tags within it will be repuired in all decks.


<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
                     "http://www.wapforum.org/DTD/wml_1.2.xml">
<wml>
  <card id="card1" title="First Card">
    <p>
      Hello WAP!
    </p>
  </card>
</wml>

If you edit this code with a text editor such as notepad and save it in one of your directories under a name, lets say "hello.wml", and excute it using one of the simulators I'm talking about in tools page, you will get something like what's in Figure1:

Figure1

As we can see, it was quite simple task to display some text in our screen. I'll try to explain what's these things mean.
WML is an application of XML the Extensible Markup Language, thus at the very beginning of each WML page which is called also deck, XML version should be declared. The second thing to do is to provide the Document Type Definition (DTD) and its location, this is simply the place where the WML elements are defined and our code's tags will be validated against it. WML is case sensitive language, you can not for example use the tag <P> instead of <p>, if you do so you will get a compile error, and by the way, I should tell that whenever a deck is asked from a server it's compiled in the Gateway, that reduces its size which should not exceed 1400 bytes, if this compiled size is greater than that, the deck should be split. That's very possible especially if we know that a deck is usually composed of many cards, so spliting a deck means in fact dividing the cards to more than one deck. I'm speaking here about cards without giving the definition, well, a card is the unit that the user can see on his screen at once. In our example we had just one card, its content is between <card> and </card> tags, these ones are included by them selfs between <wml> the root tag and its end </wml>. Every card should have at least one paragraph, it's stated using the <p> tag, just like in HTML, but here the end tag </p> is compulsory.
Some tags have attributes such as the case with <card>, in our example we set the "id" and "title" attributes, the first one is used for identifying the card within a deck and the second give an opportunity to the user agent to give a title saying something about the content of the card, but it's not taken in account by all the microbrowsers.

Multi-carded deck:

Moving a little further, you can see bellow a deck with two cards, and the usability of the "id" attribute we were talking about, also I introduce the <template>, <do>, <prev>, <a> and <b> tags.


<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
                     "http://www.wapforum.org/DTD/wml_1.2.xml">
<wml>
  <template>
    <do type="accept" label="Back">
      <prev/>
    </do>
  </template>
  <card id="card1" title="First Card"> 
    <p>
      Content of card1
    </p>
    <p>
     <a href="#card2">Go to 2nd card</a>
    </p>
  </card>

  <card id="card2" title="Second Card"> 
    <p>
      <b>And here is the content of the 2nd card</b>
    </p>
  </card>
</wml>

Here is how these cards will look like on the user agent:


Figure2	Figure3	Figure4

♦ Figure2 shows the first card which has a line of text and the link "Go to 2nd card", when this last one is selcted it takes us to the second card using the <a> tag in the same way it's used in HTML, the reference to the second card was its "id" attribute.
♦ Figure3 shows just a text formatted in bold with the <b> tag.
♦ Figure4 shows the specific way that the simulator I'm using interprets <do> tag which has the "type" and "label" attributes and its content is set to <prev/> (this tag's name is ended by a slash because it's an empty element, it has no content), that mean when this is selected we will go back to the previous card, at last, because all these is contained in the <template> element at the deck level (before cards declarations), so when ever I press the menu key of my simulator, I get this screen and I can go to previous card.

Images, timers, forms and variables:

This is the first deck of my application, actually it was not included in my original one but when I wanted to speak about images and timers I decided to add it (let's name it "storelogo.wml").


<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
                     "http://www.wapforum.org/DTD/wml_1.2.xml">
<wml>
  <card id="logo" ontimer="storelogin.wml" title="LOGO"> 
  <timer value="50"/>
    <p align="center">
      Make an Oder!<br/>
      <img src="mytruck.wbmp" alt="Truck" width="40" height="40"/>
    </p>
  </card>
</wml>

Figure5 is the result of this deck, and after 5 seconds we get the card in Figure6.


Figure5	Figure6

The format of images supported in WAP are Wireless Bitmaps images (wbmp). I created the one in Figure5 using a programe called WAPDraw, it's simple and free of charge.
As you can see, displaying images is done the same way as in HTML, with the same tag <img> and attributes, but in WAP, "alt" attribute is required whereas the "width" and "height" are not yet taken in account by all the microbrowsers.
The other important tag in our present deck is the <timer> tag, this one give us the opportunity to set a timer to some value (i.e 50 = "5 seconds") after which the card will be redirected to the URL "storelogin.wml" set in the attribute "ontimer" of the card element.
Of course, now I should speak about that "storelogin.wml" deck. First, here is its source code:


<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
                     "http://www.wapforum.org/DTD/wml_1.2.xml">
<wml>
  <card id="login" title="Log In" newcontext="true"> 
    <p>
      Enter user id:
      <input name="ID" title="User ID"/><br/>
      Enter password:
      <input name="password" title="Password"/><br/>
      <anchor>
        Submit
        <go href="store.asp" method="post">
          <postfield name="id" value="$(ID)"/>
          <postfield name="pass" value="$(password)"/>
        </go>
      </anchor>
    </p>
  </card>
</wml>

This is the login card of our application, it should validate the user id and the password of the user before she/he can use the service, but in fact this is not done in this deck, this one is responsible only of getting the data from the user and sending it back to the server, and in the server, these data will be checked against our users table in the database, we will see how that happens when talking about store.asp file.
In the <card> tag the "newcontext" attribute is added, it's set to true which means that all the variables will be deleted and a new context is initialized. (this is good thing to add especially when using id's and passwords in an application).
Getting user's input is done with the <input> tag, and sending it is done using the <go> tag, this last one has in our case two attributes, the first one "href" specifies the URL to go to when the anchor is selected, and the second one give the method to use which is "post" here, this allows our data to be sent in the message body not as part of the URL if we use "get" method.
The data to send is specified by the <postfield> tags in a form of "name-value" pairs, where "name" is the name of the variable we are sending, and "value" is its value which has a reference to the input in this case. The dollar "$" sign means a variable.
The <input> tag can have also a "type" attribute that can take one of two values: text or password, the first one is the default, and it shows the input in readable form, the second shows the input in obscured form, I could have been using it for the password input but because of the small size of the mobile phone's screen and the difficulty of text entry it seems to be more suitable to use just the default value.
Still two other files to examine in our application, they are ASP files, so we are going to look at them in the next page after giving a very short overview of the Microsoft's technology Active Server Pages (ASP).

<<[Prev] [Next]>>