Select Elements

Like HTML, WML supports a <select> element to display a select control (which is like a drop-down list box). As an example, I'll create a select control here. After the user has made a selection, he can click a Read Selection <do> element, which will navigate to a new card that displays the selection they've made.

I start by creating the select control and giving it the name "selection" :

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"     "http://www.wapforum.org/dtd/wml20.dtd" > <wml>     <card id="Card1" title="Select">         <p align="center"><b>Select</b></p>  <select name="selection">   .   .   .   </select>  

As in HTML, you specify the items in the select control with <option> elements:

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"     "http://www.wapforum.org/dtd/wml20.dtd" > <wml>     <card id="Card1" title="Select">         <p align="center"><b>Select</b></p>         <select name="selection">  <option value="broccoli">Broccoli</option>   <option value="green beans">Green Beans</option>   <option value="spinach">Spinach</option>  </select>         .         .         . 

Now I add the Read Selection <do> element that will navigate to a new card, card 2:

 <?xml version="1.0"?>  <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"     "http://www.wapforum.org/dtd/wml20.dtd" > <wml>     <card id="Card1" title="Select">         <p align="center"><b>Select</b></p>         <select name="selection">             <option value="broccoli">Broccoli</option>             <option value="green beans">Green Beans</option>             <option value="spinach">Spinach</option>         </select>  <do type="accept" label="Read selection">   <go href="#card2"/>   </do>  .     .     . 

In card 2, I'll display the value in the select control, which I can refer to as $(selection) . The value of a select control is the string in the value attribute of the currently selected item's <option> element. Here's what the WML to display the current selection looks like in card 2:

Listing ch20_16.wml
 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"     "http://www.wapforum.org/dtd/wml20.dtd" > <wml>     <card id="Card1" title="Select">         <p align="center"><b>Select</b></p>         <select name="selection">             <option value="broccoli">Broccoli</option>             <option value="green beans">Green Beans</option>             <option value="spinach">Spinach</option>         </select>         <do type="accept" label="Read selection">             <go href="#card2"/>         </do>     </card>  <card id="card2" title="Card 2">   <p>   You selected $(selection).   </p>   </card>  </wml> 

You can see how this works in Figure 20-15, where I've selected the item Broccoli.

Figure 20-15. Making selections.

graphics/20fig15.gif

Clicking the Read Selection <do> element takes us to card 2, which reports the selection, as you see in Figure 20-16.

Figure 20-16. Reporting selections.

graphics/20fig16.gif

Another useful aspect of select controls is the onpick attribute of <option> elements, which allows you to navigate to new URIs as soon as the user chooses an item in a select control. Here's an example. All I have to do is to set the onpick attribute of a number of <option> elements to URIs; when the user chooses one, the browser will navigate to the corresponding URI:

Listing ch20_17.wml
 <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 2.0//EN"     "http://www.wapforum.org/dtd/wml20.dtd" > <wml>     <card id="Card1" title="Select">         <p align="center"><b>Select</b></p>         <select name="selection">  <option onpick="http://www.starpowder.com/mercury.wml">   Mercury   </option>   <option onpick="http://www.starpowder.com/venus.wml">   Venus   </option>   <option onpick="http://www.starpowder.com/earth.wml">   Earth   </option>   </select>   </card>   </wml>  


Real World XML
Real World XML (2nd Edition)
ISBN: 0735712867
EAN: 2147483647
Year: 2005
Pages: 440
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net