[Previous] [TOC] [Next]

Create a user interface and bind the components with the web service

Next, you use components to create a simple user interface that you can use to select a product, click a button, and see a random tip about the product. You create this application by binding the user interface components on the Stage to the parameters and returned results of the Macromedia Tips web service.

1.
In the Components panel, select UI Components > ComboBox. Drag a ComboBox component to the Stage. In the Property inspector, enter the instance name products_cb.

2.
In the Components panel, select UI Components > Button. Drag a Button component to the Stage. In the Property inspector, enter the instance name submit_button and for the label property type Get Tip, as follows:

3.
In the Components panel, select UI Components > TextArea. Drag the component onto the Stage. In the Property inspector, enter the instance name tip_ta.

4.
In the Components panel, select UI Components > Label and drag a Label component onto the Stage. Place it above the ComboBox component.

5.
In the Property inspector, in the Instance name field type products_lbl and for the text property type Select a Product, as follows:

The Property inspector showing the instance name products_lbl and the text "Select a Product"
6.
Drag another Label component above the tip_ta TextArea component. In the Property inspector, give it the Instance name tip_lbl and in the text field type Tips.

Now add a binding for the WebService connector component from the Macromedia Tip web service to ComboBox component that allows the user to choose a product and return a tip about the product.

7.
Select the WebServiceConnector component on the Stage. Open the Component inspector and click the Bindings tab. Click Add Binding (+). In the Add Binding dialog box, select product:String (under params:Object) and click OK.

8.
In the Component inspector, double-click the empty value in the Bound To field. In the Bound To dialog box, select ComboBox, <products_cb> for the component path and value:String for the schema location. Click OK.

Bound To field in the Component inspector

Selecting the component path and schema location in the Bound To dialog box

Next, you will bind the results parameter in the web service connector to the TextArea component on the Stage.

9.
In the Component inspector, click Add Binding (+) again. In the Add Binding dialog box, select results:String, and then click OK. In the Component inspector, double-click the empty value in the Bound To field, and in the Bound To dialog box, select TextArea, <tip_ta> as the component path and text:String as the schema location.

Click OK.

Finally, you will use a Button component and the trigger() method to trigger the service. You use the trigger method to attempt to retrieve a tip whenever you click the button.

10.
Open the Actions panel and add the following ActionScript on Frame 1 of the Timeline:

submit_button.onRelease = function(){

  tips_wsc.trigger();

};

11.
Next, add the following ActionScript after the code from step 10. The code uses the dataProvider property to set the items in the ComboBox instance to the contents of the array.

products_cb.dataProvider = ["Flash", "Dreamweaver"];

Note

If necessary, you can use the setStyle() method to change the color of the Label instance text to white using

products_lbl.setStyle("color", 0xFFFFFF);

12.
Save your file.

13.
Test the application (Control > Test Movie). Select Flash from the ComboBox instance and click Get Tip. The results should look similar to the following screen shot:

14.
Select Dreamweaver and click Get Tip again to view another tip.

[Previous] [TOC] [Next]