Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This
From the author of

Binding Data to the Components

Next, we need to bind outgoing and incoming data to the components so Flash knows to use the web service to define the word you enter. To do this:

  1. With the Component Inspector (or simply, the inspector) still open, click the Bindings tab.

  2. Click the Add Binding button and select word:String from the list in the resulting Add Binding dialog box (see Figure 4). This part of the WSDL file grabs the word we tell it to grab and then looks up its definition. Click OK to close the dialog box. The inspector now shows params.word in the bindings section of the inspector.

  3. Figure 4Figure 4 Add bindings. It's the latest craze.

  4. Click the bound to field in the inspector; then click the magnifying glass icon to the right of it to open the Bound To dialog box.

  5. In the Bound To dialog box, select TextInput, <input> and click OK. The params.word binding is now bound to the input instance.

  6. Next, we'll bind the word's definition to the definition instance on the stage (the TextArea component). To do this, click the Add Binding button again, select Word Definition:String from the Add Binding dialog box, and click OK.

  7. In the bound to field, click the magnifying glass icon, choose TextArea, <definition> in the Bound To dialog box, and click OK.

To finish up, we just need to tell the button instance to trigger the WebServiceConnector and define the word we enter.

  1. Select the button component instance on the stage and open the Behaviors panel (Window > Development Panels > Behaviors).

  2. Choose Add Behavior (the + button) > Data > Trigger Data Source.

  3. In the Trigger Data Source dialog box, select dictionaryConnector and click OK. This process adds the ActionScript needed to trigger the WebServiceConnector to the button instance.

  4. Save your work.

  5. Publish (Shift + F12).

  6. Locate dictionary.html in the directory in which you saved your FLA file and double-click to open it in your default web browser (or choose File > Open in your web browser, and locate and choose dictionary.html).

With the dictionary widget running, you can type in any word you want, click the Define It button, and get the word's definition in just a few seconds, as shown in Figure 5.

Figure 5Figure 5 I looked up the word "dictionary" just to be ironic.

From here, try adding more components and binding other parts of the WSDL to your application. The web service can hit several dictionary web sites at once and retrieve definitions from all of them. So you could allow the user to choose which site to access for the definition.

If you feel like keeping this dictionary widget and using it either on your own web site or from your desktop, you might try giving it a real design. Research components in the Flash Help documentation to see how to set font properties for the components and change the highlight colors. You can also add your own design elements and make this whole thing look good. Simply tossing components onto the stage makes for a pretty boring design, so play around and make it interesting.

Until next time, happy Flashing!

  • + Share This
  • 🔖 Save To Your Account