Adding ActionScript to a Flex Application

ActionScript follows the ECMA-262 Standard Edition 4 (the specification written by the European Computer Manufacturers Association) unless otherwise noted. For more information on ActionScript, see Using ActionScript.

You can use ActionScript for the following purposes:

Handling events The Flex user interface is event-driven. For example, when a user selects a Button control, the Button generates an event. You handle events by defining functions in ActionScript. Your event handler could open a window, play a SWF file, or perform whatever action is necessary for your application.

Handling errors You handle runtime errors in ActionScript. You can detect data validation errors and signal the error to the user, resubmit a request to the server, or perform some other actions based on your application.

Binding data objects to a Flex control within an MXML statement You can use data binding to populate a data model from a Flex control, or populate a control from a data model.

Defining custom components You can derive custom components from the Flex component class hierarchy to create components specific to your application requirements.

The following example is a modification to the example in the previous section that adds an event handler for the click event of the Button control. An event handler is ActionScript code that is executed in response to a user action. The event handler in this example copies the text from the TextInput control to the TextArea control when the user selects the Button control:

<?xml version="1.0"?> 
<!-- ?xml tag must start in line 1 column 1 -->

<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

   <!-- Flex controls exist in a container. Define a Panel container. -->
   <mx:Panel title="My Application">

      <!-- TextInput control for user input. -->
      <mx:TextInput id="myInput" width="150" text=""  />

      <!-- Button control that triggers the copy. -->
      <mx:Button id="myButton" label="Copy Text"
         click="myText.text=myInput.text;" />

      <!-- Output TextArea control. -->
      <mx:TextArea id="myText" text="" width="150" />
         
   </mx:Panel>   
</mx:Application>

The previous example inserts the ActionScript code directly into the MXML code. Although this technique works well for one or two lines of ActionScript code, for more complex logic you typically define your ActionScript in an <mx:Script> block, as the following example shows:

<?xml version="1.0"?> 
<!-- ?xml tag must start in line 1 column 1 -->

   <mx:Script>
      <![CDATA[
         function duplicate(){   
            myText.text=myInput.text;
         }
      ]]>
   </mx:Script>

<!-- MXML root element tag -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

   <!-- Flex controls exist in a container. Define a Panel container. -->
   <mx:Panel title="My Application">

      <!-- TextInput control for user input. -->
      <mx:TextInput id="myInput" width="150" text=""  />

      <!-- Button control that triggers the copy. -->
      <mx:Button id="myButton" label="Copy Text"
         click="duplicate();" />

      <!-- Output TextArea control. -->
      <mx:TextArea id="myText" text="" width="150" />
         
   </mx:Panel>   
</mx:Application>

In this example, you implement the event handler as an ActionScript function. Flex calls this function in response to the user selecting the Button control. This techniques lets you separate your MXML code from your ActionScript code. You can also choose to divide your application into multiple files to increase its modularity. For more information, see Using ActionScript.

Version 1.5

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00002143.htm

Add Comment