Full-house, Go-Fish, and Blackjack – some of my favorite games to play when I’m with friends. Alright, maybe that’s not true, but they’re definitely a way to pass the time. The words “deck” and “card” are synonymous to playing cards. However, they are also the terms used when developing WAP-enabled websites using WML. In this tutorial, I’ll give a breakdown on just what WAP and WML are and how they can be used. We’ll also run through creating a simple WAP-enabled site making use of multiple cards in a deck. There will be ample code to get you started on developing your own WAP-enabled site, whether for fun or for business.
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):
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:
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.
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:
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.