18.4. WML Event: onpick

The onpick event is used with selection lists. It is triggered when an option in a selection list is selected. If the multiple attribute of the <select> element is set to true, the onpick event will also be triggered if an option is deselected. As usual, you can specify the WML code to be executed when the event is triggered. An onpick event handler has the following form:

<option ...>
  <onevent type="onpick">
    A single task to be done whenever the onpick event occurs
  </onevent>
  ...
</option>

The following WML markup:

<option ...>
  <onevent type="onpick">
    <go href="url to go to"/>
  </onevent>
  ...
</option>

can be written in the shortcut form below. The onpick attribute of the <option> element is used instead of the <onevent></onevent> and <go/> tags.

<option onpick="url to go to" ...>
...
</option>

Let's have a look at the following WML example. It can help you understand how to use the onpick event.

(onpickEg1.wml)

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">

<wml>
  <card id="tutorial_tc" title="WML Tutorial">
    <p>
      Hello, welcome to our WML tutorial.<br/><br/>
      Table of Contents:<br/>

      <select name="selection_list">
        <option onpick="#tutorial_ch1">Chapter 1</option>
        <option onpick="#tutorial_ch2">Chapter 2</option>
        <option>
          <onevent type="onpick">
            <go href="#tutorial_ch3"/>
          </onevent>
          Chapter 3
        </option>
        <option>
          <onevent type="onpick">
            <go href="#tutorial_ch4"/>
          </onevent>
          Chapter 4
        </option>
      </select>
    </p>
  </card>

  <card id="tutorial_ch1" title="WML Tutorial Ch1">
    <p>
      <em>Chapter 1: WML Introduction</em><br/><br/>
      ...
    </p>
  </card>

  <card id="tutorial_ch2" title="WML Tutorial Ch2">
    <p>
      <em>Chapter 2: WML Deck and Card</em><br/><br/>
      ...
    </p>
  </card>

  <card id="tutorial_ch3" title="WML Tutorial Ch3">
    <p>
      <em>Chapter 3: WML Document Structure</em><br/><br/>
      ...
    </p>
  </card>

  <card id="tutorial_ch4" title="WML Tutorial Ch4">
    <p>
      <em>Chapter 4: WML Generic Metadata</em><br/><br/>
      ...
    </p>
  </card>
</wml>

In the above WML example, we make use of the onpick event to create a selection list that can be used to navigate between cards. The following screenshots show the result of the above WML example in some mobile phone browsers:

If you select the selection list, the mobile phone browser will show the options available:

If you select any of the above options, the <go> task associated with the onpick event of that option will be performed and the mobile phone browser will show the chapter you chosen. For example, if you select the "Chapter 2" option, the mobile phone browser will display the card with ID tutorial_ch2 on the screen, like this:

Previous Page

Page 34 of 50

Next Page