Home arrow Web Services arrow Page 5 - WML: An Introduction
WEB SERVICES

WML: An Introduction


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.

Author Info:
By: Frank Manno
Rating: 5 stars5 stars5 stars5 stars5 stars / 23
February 11, 2004
TABLE OF CONTENTS:
  1. · WML: An Introduction
  2. · Deal 'Em, Baby!
  3. · Shuffle That Deck
  4. · Would You Like My Special Offer
  5. · Welcome Aboard!
  6. · Wrap It Up

print this article
SEARCH DEVARTICLES

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:

WML & WAP

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:

WML & WAP

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:

TagDescription
AAny symbolic or uppercase alphabetic character (no numbers)
aAny symbolic or lowercase alphabetic character (no numbers)
NAny numeric character (no symbols or alphabetic characters)
XAny symbolic, numeric, or uppercase alphabetic character (not changeable to lowercase)
xAny symbolic, numeric, or lowercase alphabetic character (not changeable to uppercase)
MAny symbolic, numeric, or uppercase alphabetic character (changeable to lowercase)—for multiple character input, defaults to uppercase first character
mAny 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:

WML & WAP


blog comments powered by Disqus
WEB SERVICES ARTICLES

- Dealing with Loose Coupling in a Service-Ori...
- Loose Coupling in a Service-Oriented Archite...
- Safety, Idempotence, and the Resource-Orient...
- The Resource-Oriented Architecture in Action
- Features of the Resource-Oriented Architectu...
- The Resource-Oriented Architecture
- Getting Started with Flex
- Automated Billing and Faxing for the Web
- An Introduction to Web Services
- The Foundations of Web Services: From Novice...
- Web Services Reengineering: Finishing Touches
- Fault Handling with Web Services
- Flow and Web Services
- Process Lifecycles and Web Services
- Business Processes and Web Services

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials