O'Reilly logo

Programming Flex 2 by Joey Lott, Chafic Kazoun

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 4. ActionScript

ActionScript is the programming language that you can use along with MXML to create sophisticated Flex applications. While MXML is an important part of a Flex application, it is mostly used for creating the user interface, and it can go only so far in creating a complete application. For data models and sophisticated client-side business logic, you'll need to use ActionScript as well.

Flex applications require ActionScript 3.0, which represents a significant maturation from earlier versions of the language. ActionScript 3.0 is compliant with the ECMA-262 specification and leverages parts of the pending ECMAScript Edition 4 specification. ActionScript 3.0 supports a wide range of features including formalized classes, interfaces, and packages, runtime exception handling, runtime data types, reflection, regular expressions, E4X (XML), and more.

ActionScript is a standards-based, object-oriented language. Since ActionScript is an object-oriented language it can be viewed as a collection of APIs generally in the form of classes. There are three tiers of ActionScript APIs:

Flash Player APIs

These APIs are part of the Flash Player itself, and they run natively in that runtime environment. Flash Player APIs consist of core classes such as String, Number, Date, and Array as well as Flash Player-specific classes such as DisplayObject, URLLoader, NetConnection, Video, and Sound.

Flex framework APIs

These are the APIs that make up the Flex framework itself. The Flex framework is written in ActionScript, so it leverages the lower-level Flash Player APIs. The Flex framework is effectively a layer on top of the Flash Player APIs. The Flex framework APIs consist of all the Flex containers (Application, VBox, etc.), controls (Button, TextInput, etc.), and other assorted data, manager, and utility classes that are discussed throughout much of this book.

Custom APIs

These APIs are for the classes you build for use in custom applications. Custom classes can use Flash Player APIs as well as the Flex framework APIs.

The APIs that comprise the Flash Player are far too large a category to attempt to discuss in this chapter, and in fact there are books spanning many hundreds of pages that still can't cover all of the Flash Player APIs. Our assumption in this book is that you are either already basically familiar with the Flash Player APIs or you are also reading a companion reference specific to Flash Player APIs. Most ActionScript 3.0 books focus primarily on the Flash Player APIs. You will most likely find that the Flex documentation API reference is quite helpful in this regard.

Tip

Much of this book is dedicated to the Flex framework APIs, via either ActionScript or MXML. For that reason, this chapter doesn't focus on the Flex framework APIs.

ActionScript 3.0 is an object-oriented language, which means that in one form or another, the ActionScript code you write is part of a class. This book assumes you are already familiar with basic object-oriented programming concepts. It is not our intention to attempt to teach object-oriented theory in this chapter. Yet you will need to have a fundamental understanding of object-oriented concepts to make the most of this chapter. You can find a good introduction to object-oriented concepts at http://en.wikipedia.org/wiki/Object-oriented.

ActionScript is an important and essential part of Flex applications. In fact, ActionScript is the foundation upon which the entire Flex framework is written. This chapter teaches you the important fundamental concepts about ActionScript, including the relationship between MXML and ActionScript, ActionScript syntax, events, error handling, XML, and reflection.

Using ActionScript

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

  • Inline within MXML tags

  • Nested within MXML tags

  • In MXML scripts

  • 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

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 the click event handler attribute is ActionScript code, which calls a show( ) method of an ActionScript class called Alert.

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 expression input.text to evaluate the text property value for the input object (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 expression input.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 string User 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.

Nested ActionScript

You also can nest ActionScript code within MXML tags. Just as you can nest values for most properties you can nest the values (ActionScript) for event handlers. You must place the code within a CDATA block. Here's an example:

<mx:Button>
  <mx:click>
    <![CDATA[
      mx.controls.Alert.show("Example");
    ]]>
  </mx:click>
</mx:Button>

MXML Scripts

The second way to add ActionScript code to an application is to place it within an MXML script. An MXML script appears in an MXML document within a Script element:

<mx:Script>
</mx:Script>

Since ActionScript code may use special characters otherwise interpreted by the MXML compiler, you must place ActionScript code within Script tags and also within a CDATA block, as in the following example:

<mx:Script><![CDATA[

  import mx.controls.Alert;

  private function example(  ):void {
    Alert.show("Example");
  }

]]>
</mx:Script>

You can optionally place ActionScript code blocks in separate files, and you can embed them in a script block using the source attribute of a Script tag:

<mx:Script source="code.as" />

Within MXML scripts, you can import classes and declare properties and methods. We discuss each of these in more detail in the "Understanding ActionScript Syntax" section, later in this chapter.

Classes

Classes are the most sophisticated and powerful use of ActionScript. Although it's not wrong to use inline code and MXML scripts, it's generally advisable to place the majority of ActionScript code within ActionScript classes.

ActionScript class code exists within separate documents, apart from the MXML application and component documents. ActionScript class files are text files that use the file extension .as. We'll talk more about creating classes later in this chapter, in the "Declaring Classes" section.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required