ActionScript Basics

The backbone of the Flex Framework is ActionScript 3.0. An object-oriented scripting language based on the ECMAScript standard, ActionScript defines all of the structure / layout and most of the behavior of your Flex application. (CSS is responsible for the formatting / style and a host of server-side scripting languages (ColdFusion, PHP, JSP, .NET, etc) may contribute to your application's behavior.)

The Flex Framework (or SDK) ships with a library of prebuilt ActionScript classes. These prebuilt classes are organized into packages. A package is a mechanism for organizing ActionScript classes. Each package provides two important benefits:

1. A logical grouping of related functionality. For example, the package labeled mx.controls.listClasses contains the classes responsible for providing list-based control functionality.

2. A namespace for an ActionScript class. Without packages, every class name would have to be unique to avoid ambiguity. If every class name must be unique, a developer must know the name of every prebuilt class to avoid naming conflicts when creating custom classes. With packages, a developer is free to name custom classes as he / she likes as long as the name is unique to the package (namespace).

In most cases your use of prebuilt ActionScript classes will be limited to those found in the mx top level package (i.e. mx.charts.effects or mx.controls.menuClasses). These classes (mx) are specific to Flex applications. However, you'll find that since Flex is a subset of Flash, the ActionScript classes found in the 'flash' top level package can also be leveraged in your Flex application (i.e. flash.net.URLLoader).

If you have any experience with JavaScript, you'll find ActionScript to be pleasantly familiar. After all, JavaScript and ActionScript are based on the same standard, ECMAScript. Outside of using MXML tags (an abstraction layer for ActionScript), the following techniques are used to include ActionScript into a Flex application:

1. Inline ActionScript – typically limited to property assignment or method calls triggered by an event rather than complex business logic, ActionScript can live within an MXML attribute.

<mx:Button id="myButton" click="eventHandler()" />

2. Nested ActionScript – The text node of an MXML element may contain ActionScript. To avoid the parsing of ActionScript in the text node as XML, place the ActionScript within a CDATA block.

<mx:Button label="click me">
<mx:click>
<![CDATA[
myFunction('hi there')
]]>
</mx:click>
</mx:Button>

3. MXML Script Tags – As your ActionScript becomes more complex and verbose, an MXML Script tag may be warranted. Again, a CDATA block must be used to prevent parsing of ActionScript as XML.

<mx:Script>
<![CDATA[
import mx.controls.Alert;

public function myFunction(message:String):void {
Alert.show(message);
}
]]>
</mx:Script>

4. Adhering to object-oriented principles and guidelines often involves the creation of custom ActionScript classes for use in your Flex application. Custom classes are typically an extension of a prebuilt class and occupy their own file with an .AS extension. Like prebuilt classes, custom classes reside in a package. For custom classes, packages are synonymous with directories. Therefore, a custom class file (i.e. MyClass.as) found in wwwroot/com/flexdevelopers/view could be referenced from your Flex application as:

com.flexdevelopers.view.MyClass

The property / methods of a prebuilt or custom class can be utilized by simply importing the class into your application for use:

import com.flexdeveloper.view.MyClass

var myObject:MyClass = new MyClass();
var myVariable:String = myObject.myMethod();

or, by providing a fully-qualified class path in an ActionScript expression / statement:

if (1==1) { com.flexdeveloper.view.MyClass.myStaticMethod(); }