|
In data driven web applications, usually, the options of the combo boxes and list boxes are filled dynamically. Here is a sample HTML code of a combo box:
<select name="COUNTRY_ID" size="2">
<option value="us">U.S.A</option>
<option value="de" selected="selected">Germany</option>
<option value="fr">France</option>
<option value="tr">Turkey</option>
</select>
|
Although there are two different elements (combo box and list box) in MoreMotion they are both compiled to the HTML element <select>. What determines a select element is displayed as a combo box or a list box in the browser is its size attribute. Therefore when Application Studio compiles a combo box element it does not create the size attribute of the <select> element.
An option element has 3 qualifiers;
| 1. | The value of the <option> element. e.g. "Germany". This is the part which is displayed in the browser. |
| 2. | "value" attribute. The value of the option. e.g. "de". This is the part which is sent to the server when the form that contains this combo box is submitted. |
| 3. | "selected" attribute. Specifies that the option is initially selected. |
After this little background information now lets see how we can fill the options of a combo box or a list box element.
First copy & paste the XML content given below into a file and save the file as "c:\xml\countries.xml".
<?xml version="1.0" encoding="UTF-8"?>
<root>
<countries>
<item>
<ID>us</ID>
<NAME>U.S.A</NAME>
</item>
<item>
<ID>de</ID>
<NAME>Germany</NAME>
</item>
<item>
<ID>fr</ID>
<NAME>France</NAME>
</item>
<item>
<ID>tr</ID>
<NAME>Turkey</NAME>
</item>
</countries>
<selected-country>de</selected-country>
</root>
|
Steps:
| 1. | Create a new page in your project |
| 2. | Set its "XML file for Preview" property to "c:\xml\countries.xml" |
| 3. | Click on Combo box ( ) icon on the Basic Elements toolbar and click on an empty spot on the page design area |
| 4. | Right click on the element and choose the context menu command "Bind Options To..." |
| 5. | Define the input fields of the upcoming dialog as follows |
For each /countries/item node found in the XML data an option element will be created in the output HTML document. The option text and the value of the value attribute will be taken from NAME and ID nodes that exist under each item node.
| 6. | Enter "$vof(/selected-country)" to the "Value" property of the element. The value of the XML node selected-country will be the initial value of the combo box. |
You can also define static options for a combo box whose options are filled dynamically. To do this double-click on to the element and define the static options as follows.
| 
