WML Decks

Multiple card decks and internal navigation.

The Hello World document created at stage three is only a single card. Adding cards to an existing document creates a useful bonus over HTML - one document can be broken into small chunks more suitable to reading from a mobile phone screen, and because each card is only displayed if the user navigates to that card, visitors can find the required information more quickly. Whilst you still have to keep the total size within gateway limits, you can use decks to reduce the number of NRT required.

Think of it like an HTML page that only shows the paragraphs that the user wants to see. You can use decks to reduce the amount of scrolling required by the visitor by keeping each card content to one short paragraph and using internal navigation to move to the next card. Navigate using the #, in the same way as the old HTML method <a name=myname></a> <a href="#myname">link</a>.

In WML you can use a menu option (like the Back button in Hello World) or an anchor - roughly equivalent to the <a> tag in HTML. To create an obvious link that displays as a paragraph of it's own, use the <anchor> tag:

<anchor title="About CodeHelp">About
<go method="get" href="#about" />
</anchor>

For an inline link (e.g. part of an existing paragraph or sentence) use the <a> tag but remember NOT to use any attributes except href and title. Obvously Javascript and mailto: or gopher: types links are not allowed in the href attribute of an <a> tag in WML.

A Multiple card deck:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
 "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
   <template>
      <do type="prev" label="Back">
         <prev/>
      </do>
   </template>
   <card id="main" title="CodeHelp" newcontext="true">
<do type="accept" label="WML code">
<go method="get" href="developer.wml#main" />
</do>
      <p>Welcome! <br/>
      Find out more <a href="#about">about CodeHelp</a>.
      </p>
      <p>
      <anchor title="About CodeHelp">About
      <go method="get" href="#about" />
      </anchor>
      </p>
   </card>
   <card id="about" title="About" newcontext="false">
      <p>CodeHelp aims to help anyone design and
write their own websites. Internet languages covered include
HTML, Javascript, Java, DHTML, CSS, XML and WAP.</p>
      <p>
         <a href="#main" title="back to index">Done</a>
      </p>
   </card>
</wml>


This is part of www.codehelp.co.uk Copyright © 1998-2004 Neil Williams
See the file about.html for copying conditions.