- Web Services for the Uninformed
- Building the User Interface
- Using the WebServiceConnector Component
- Binding Data to the Components
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building the User Interface
To set up the UI, let's create a quick list of the items we'll need on the stage to handle our dictionary widget. We'll need the following:
A way to enter a word to define.
A big ol' text field that displays the word's definition. It would also be helpful if the text field auto-expands so scrollbars appear if the definition is longer than the text field.
A button to trigger the lookup process.
Labels for the text fields.
We'll use the UI components that come with Flash to take care of all this. To set it up:
Launch Flash MX Professional 2004 (Flash Pro) and save a new Flash document as dictionary.fla. Save it wherever you like.
Change the stage dimensions to 550x220.
Open the Components panel (Window > Development Panels > Components) and expand the UI Components set shown in Figure 1.
Drag a Label component to the stage and set the Text parameter in the Properties panel to Word to define:.
Drag another Label component to the stage and set its Text parameter to Definition:. You can also simply use static text for these two labels, created by using the Text tool.
Next, drag a TextInput component to the stage and name it input. This is where we'll enter words to define.
Drag a TextArea component to the stage and name it definition. This component will display the definitions of the words we look up.
Finally, drag a button component to the stage and set the Label parameter in the Properties panel to Define It.
Align everything on the stage to look similar to Figure 2.
)
Figure
1 UI components for both you and me. (Knee slapper, huh?)
)
Figure
2 A layout just begging for a better design.
Now that we have our UI set up, we can move on to accessing the web service and binding data to the components.