ActionScript in Flex Applications

When you want to use ActionScript within Flex, you have four basic options for where to place the code:

1. Inline within MXML tags
   
2. Nested within MXML tags
   
3. In MXML scripts
   
4. Within ActionScript classes

The preceding lists the techniques for working with ActionScript code, from the simplest to the most complex form. We’ll look at each of these techniques in the following sections.

Inline ActionScript appears within MXML tags. Believe it or not, you’ve already seen several examples of this in Chapter 3. Inline event handling and data binding using curly brace syntax necessarily uses basic ActionScript. The following example uses ActionScript to display an alert dialog box when the user clicks on a button:

  <mx:Button id="alertButton" label="Show Alert"
             click="mx.controls.Alert.show('Example')" />

In this example, the text assigned to theclickevent handler attribute is ActionScript code, which calls ashow()method of an ActionScript class calledAlert.

The next example uses data binding:

  <mx:VBox>
    <mx:TextInput id="input" />
    <mx:Text id="output"
text="{input.text}" />
  </mx:VBox>

This example uses the ActionScript expressioninput.textto evaluate thetextproperty value for theinputobject (the text input control).

Inline data binding represents the most limited use of ActionScript, because it can evaluate only one expression. For instance, the preceding example evaluates the expressioninput.text. You could use a more complex expression, such as the following:

  <mx:VBox>
    <mx:TextInput id="input" />
    <mx:Text id="output" text="{'User input: ' + input.text}" />
  </mx:VBox>

This example concatenates the stringUser input:with the user input from the text input control. You can also create even more complex expressions using inline data binding.

Inline event handlers allow you to write more complex ActionScript that can consist of several statements. ActionScript statements generally end with semicolons. The following example illustrates a button with slightly more complex event handler code, consisting of two expressions:

  <mx:Button id="alertButton" label="Show Alert" click="mx.controls.Alert.
  show('Example');alertButton.x += 40;" />

This example first displays an alert dialog box. It then moves the button to the right by 40 pixels. Although you can string together many statements (as in this example), it is very uncommon. It’s not difficult to understand why this would be. Rather simply: the code is difficult to read and manage when you try to use several inline statements in that fashion. If an event handler needs to run several statements, it is far more common to simply call a function. We’ll look more at functions in the next section, and then later in the chapter, in the “Methods ” section.