Task: Form with Components

I l @ ve RuBoard

Task: Form with Components

Now let's combine five different components to make a data entry form. Figure 21.10 shows such a form. It uses the CheckBox, RadioButton, ComboBox, ListBox, and PushButton components.

Figure 21.10. This form uses only Flash components.

1. Create a new Flash movie.

2. Make three CheckBox components. Name them checkbox1, checkbox2, and checkbox3. Label them as you see in Figure 21.10.

3. Make three RadioButton components. Name them radiobutton1, radiobutton2, and radiobutton3. Label them as you see in Figure 21.10.

4. Create a ComboBox component. Name it combobox. Add several labels to it so that the user has some choices to make.

5. Create a ListBox component. Name it listbox. Add as many labels to it as you can. Don't worry about the order in which they appear because we'll sort them later. Set the ListBox Multiple Selections parameter to false. Use the Properties panel to make the list box 200 pixels wide by 200 pixels high.

6. Add a PushButton component. Set its label to Done and its Click Handler to buttonPressed.

7. Add the following line to the frame script. This sorts the items in the ListBox component.

    listbox.sortItemsBy("label","Asc"); 

   The sortItemsBy command works with the ComboBox component as well. You can use "label" or "data" as the first parameter. This determines whether the labels or the data fields will be used for sorting. The second parameter can be "Asc" for sorting by ascending order or "Desc" for sorting by descending order.

8. The PushButton component calls buttonPressed . Let's build this function piece by piece to process each of the sections of the form.

   The function starts off by creating a new array. It then checks each check box to see whether its getValue() function is true. If it is, the label from that check box is added to that array. When this loop is finished, the array own contains any user selections made with the check boxes.

    function buttonPressed(buttonInstance) {     if (buttonInstance == doneButton) {         // compile array of CheckBoxes selected         own = new Array();         for(var i=1;i<=3;i++) {             if (this["checkbox"+i].getValue()) {                 own.push(this["checkbox"+i].getLabel());             }         }         trace("Computers Owned: "+own); 

9. The next piece of code checks all the RadioButton components and remembers which one is turned on:

    // determine which RadioButton selected favorite = "none"; for(var i=1;i<=3;i++) {     if (this["radiobutton"+i].getState()) {         favorite = this["radiobutton"+i].getLabel();     } } trace("Favorite: "+favorite); 

10. The simplest component to check is the combo box. This piece of code simply returns its value:

     // get value of ComboBoxComboBox nextPurchase = comboBox.getValue(); trace("Next Purchase: "+nextPurchase); 

11. To check the multiple selections of the list box, you will need to loop through the array returned by getSelectedItems() . You then need to examine the label property of each item.

    The following code does this and builds an array of labels selected:

     // compile list of ListBox selections         uses = new Array();         items = listbox.getSelectedItems();         for(var i=0;i<items.length;i++) {             uses.push(items[i].label);         }         trace("Uses: "+uses);     } } 

If you were building this for actual use, you would probably do something more constructive than using trace commands. For instance, you could make a LoadVars object that then gets submitted to the server.

I l @ ve RuBoard