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.
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.
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> |