WML: An Introduction - Welcome Aboard!
(Page 5 of 6 )
Making use of what we’ve learned so far, we’re going to create a site that encompasses the reason WAP was created: to access information quickly without the need of numerous images and ads. What better way to showcase your WML skills than by building your own WAP-enabled resume site?
Without further adieu, let’s get started. We’ll first start by building the main interface (otherwise known as the home page):
<wml>
<card title="Frank's Resume" id="card1">
<big>Frank's Resumé</big>
<p><img alt="My Portrait" src="http://www.devarticles.com/images/authors/93.gif"
height="50%" width="50%" /></p>
<do type="accept" label="Proceed">
<go href="#card2" />
</do>
</card>
<card title="Select a Section" id="card2">
<select type="radio" title="Select a Section" name="selection">
<option value="contact" onpick="contact.wml">Contact Information</option>
<option value="skills" onpick="skills.wml">Skills Summary</option>
<option value="education" onpick="education.wml">Education Information</option>
<option value="work" onpick="work.wml">Professional Development</option>
<option value="contactu" onpick="#card3">Leave Your Contact Info</option>
</select>
</card>
<card title="Leave Your Contact Info" id="card3">
Postal Code: <input type="text" name="pcode" format="aNa NaN" size="7" width="50%" />
Name: <input type="text" name="name" width="50%" /><br /><br />
<a href="#card4">Submit</a>
</card>
<card title="Thank You!" id="card4">
<p>Thank you, $name, your postal code is: <br />
$pcode</p>
<p><br />Quick Nav:
<select type="list" title="Select a Section" name="selection">
<option value="contact" onpick="contact.wml">Contact Information</option>
<option value="skills" onpick="skills.wml">Skills Summary</option>
<option value="education" onpick="education.wml">Education Information</option>
<option value="work" onpick="work.wml">Professional Development</option>
</select></p>
</card>
</wml>
We start off by creating our first card, which I’ve graciously called card1. Card one contains a <big> tag, which will simply display “Frank’s Resume” in a larger font. My beautiful (yeah right!) picture is then plastered onto the page; my, how I love that mug shot. We then create a label using WML’s <do> tag, which acts as a redirect to a specified URL or card:
<do type="accept" label="Proceed">
<go href="#card2" />
</do>
The label attribute is what will be displayed to the user. The main interface that is presented to the user looks something like this:
Our second card, card2, will contain the navigation around the site. Here we have a link to my contact information, my education information, and so on. The links lead to our other WML pages, which will make up the entire resume site.
<select type="radio" title="Select a Section" name="selection">
<option value="contact" onpick="contact.wml">Contact Information</option>
<option value="skills" onpick="skills.wml">Skills Summary</option>
<option value="education" onpick="education.wml">Education Information</option>
In this case, I’ve decided to make use of the <select> tag. The “type” attribute I’ve chosen is “radio”, which is self-explanatory. The reason for my choice of the radio-style display is that I’ve noticed some uncertain behavior when using other display types, namely spin. In any case, you can experiment with whichever style you prefer. The radio style selection list looks like the following:
The third and fourth cards work hand-in-hand together. The third card is the page where a user can leave their contact information. The sole purpose of this card is to demonstrate how a format mask can be applied to input areas:
Postal Code: <input type="text" name="pcode" format="aNa NaN" size="7" width="50%" /><br />
When specifying a format mask the following is a list of values and their descriptions:
| Tag | Description |
| A | Any symbolic or uppercase alphabetic character (no numbers) |
| a | Any symbolic or lowercase alphabetic character (no numbers) |
| N | Any numeric character (no symbols or alphabetic characters) |
| X | Any symbolic, numeric, or uppercase alphabetic character (not changeable to lowercase) |
| x | Any symbolic, numeric, or lowercase alphabetic character (not changeable to uppercase) |
| M | Any symbolic, numeric, or uppercase alphabetic character (changeable to lowercase)—for multiple character input, defaults to uppercase first character |
| m | Any symbolic, numeric, or lowercase alphabetic character (changeable touppercase)—for multiple character input, defaults to lowercase first character |
In this case, I’ve restricted the input of the “Postal Code” field to an Alphanumeric/Numeric combination (the equivalent of a Canadian postal code).
Our next page will be the contact information page, which will list items such as a telephone number, email address, etc.:
<wml>
<card title="Contact Information" id="contact">
<big>Frank Manno</big>
<p><img localsrc="phone1" src="" alt="Phone Icon" />Phone: <a href="wtai://mp/mc/905-555-5555"> 905-555-5555</a><br />
<img localsrc="mailbox" src="" alt="Email Icon" />Email: <a href="mailto:frank@developershed.com?subject=%20CResume Contact%20&body=%20I'd like to hire you!%20">frank@developershed.com</a>
</p>
<p>
<a href="res1.wml">Prev</a> | <a href="skills.wml">Next</a></p>
<p>Quick Nav:
<select type="list" title="Select a Section" name="selection">
<option value="contact" onpick="contact.wml">Contact Information</option>
<option value="skills" onpick="skills.wml">Skills Summary</option>
<option value="education" onpick="education.wml">Education Information</option>
<option value="work" onpick="work.wml">Professional Development</option>
</select></p>
</card>
</wml>
This page is fairly straightforward. The only thing that may seem a little alien is the “localsrc” attribute in the <img> tag. Because I’m using the Openave SDK, I’m able to specify the location to the local image within the device’s ROM. In this case, I’ve specified “phone1” and “mailbox” as the icons that represent my telephone and email address. If the icon cannot be found in the device’s ROM, it attempts to retrieve it from the Openwave Mobile Access Gateway Server. You can alternately specify a location within the “src” attribute, which will download the specified image should the icon be unavailable. A list of available ROM-based icons is listed in the WML developer’s reference, indicated at the end of this article in the resource section.
Our contact page looks like the following:
Next: Wrap It Up >>
More Web Services Articles
More By Frank Manno
