WAP Overview

What Does WML Look Like?

This section contains some examples of WML, along with screenshots showing how the card is rendered in a WML browser. Working through this section should help to clarify the use and effect of some of the WML elements mentioned above.

The Document Prologue

<?xml version="1.0"?>

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

 

<wml>

...

</wml>

Defining a Template

<wml>

   <template>

      <do type="goBack" name="goBack" label="Back">

         <prev/>

      </do>

   </template>

   <card id="init" newcontext="true">

   </card>

</wml>

The above snippet of WML results in the Back option being displayed on each card in the deck. It uses the <do> element to associate the label Back with the <prev> task.

 

Whenever the user selects the Back option, the microbrowser will navigate to the previous card:

Defining a Card

<wml>

   <card id="init" newcontext="true">

      <p align="center">

         <b>Portfolio Service</b><br/>

      </p>

   </card>

</wml>

 

This code snippet just shows a simple WML card. It includes some formatting elements to influence how the text is laid out by the microbrowser. The card is shown here:

 

 

 

 

 

Using Anchors

<wml>

<card id="MainMenu" title="Main Menu">

   <p>

      <anchor>1. Market Indices

         <go href="#MarketIndices"/>

      </anchor><br/>

      <anchor>2. Portfolio Valuation

         <go href="#PortfolioValuation"/>

      </anchor><br/>

      <anchor>3. Current Fund Prices

         <go href="#CurrentFundPrices"/>

      </anchor><br/>

      <anchor>4. Buy/Sell

         <go href="#BuySell"/>

      </anchor><br/>

   </p>

</card>

</wml>

Anchors are used to link to other cards, as shown in the code snippet above and the screen shot here. Each anchor element is bound to a <go> task that references another card in the deck.

 

 

Using Input Fields

<wml>

<card id="Login" title="Client Login">

   <p>

      Please enter:<br/>

      Account No

      <input type="text" name="txtAccountNo"/><br/>

      Security Code

      <input type="password" name="txtSecurityCode"/><br/>

   </p>

   <do type="goMainMenu" label="Main Menu">

      <go href="#MainMenu"/>

   </do>

</card>

</wml>

 

Input fields are used to allow the user to enter data. The code snippet above creates two input fields, one of which takes some text, the other of which takes a password. The password will be obscured by asterisks as it is rendered on the screen. The card is also bound to a <go> task, which links it to the main menu, by a <do> element.

Using Tables and Graphics

This final example shows the use of graphics and tables.

<wml>

<card id="init" newcontext="true">

   <p align="center">

      <table columns="1">

         <tr><td>

            <img src="abcbank.gif" alt="ABC Bank"/><br/>

         </td></tr>

      </table>

      <b>Portfolio Service</b><br/>

   </p>

   <do type="goLogin" label="Login">

      <go href="#Login"/>

   </do>

</card>

</wml>

This final example shows the use of graphics and tables. A table containing one column is created using the <table> element. The <p> element is used to align the table in the center of the screen. Within the table a <tr> element creates a single row that contains a single cell, created by the <td> element. Inside the cell the <img> element creates a link to an image, with some alternate text associated with it for use in the event that the image cannot be displayed. A <do> element binds the card to a <go> task that links to the login card within the deck.