The following single sample application, which calls a single function, shows several methods of separating ActionScript from the MXML.

The Temperature application takes input from a single input field and uses a function to convert the input from Fahrenheit to Celsius. It then displays the resulting temperature in a Label control.

The following image shows the sample Temperature application:

One MXML document (event handling logic in event attribute)

The following code shows the ActionScript event handling logic inside the MXML tag's click event:

<?xml version="1.0"?>
<!-- usingas/ASOneFile.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Fahrenheit:"/>
        <mx:TextInput id="fahrenheit" width="120"/>
        <mx:Button label="Convert"
           click="celsius.text=String(Math.round((Number(fahrenheit.text)-32)/1.8 * 10)/10);"/>
        <mx:Label text="Temperature in Celsius:"/>
     <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

One MXML document (event handling logic in <mx:Script> block)

In this example, the logic for the function is inside an <mx:Script> block in the MXML document, and is called from the MXML tag's click event, as the following code shows:

<?xml version="1.0"?>
<!-- usingas/ASScriptBlock.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     public function calculate():void {
        var n:Number = Number(fahrenheit.text);
        var t:Number = Math.round((n-32)/1.8*10)/10;
        celsius.text=String(t);
     }
  ]]></mx:Script>

  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Fahrenheit:"/>
        <mx:TextInput id="fahrenheit" width="120"/>
        <mx:Button label="Convert" click="calculate();" />
        <mx:Label text="Temperature in Celsius:"/>
        <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

One MXML document and one ActionScript file (event handling logic in separate script file)

Here, the function call is in an MXML event attribute, and the function is defined in a separate ActionScript file, as the following code shows:

<?xml version="1.0"?>
<!-- usingas/ASSourceFile.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <!-- Specify the ActionScript file that contains the function. -->
  <mx:Script source="includes/Sample3Script.as"/>

  <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
     paddingLeft="10" paddingRight="10">
     <mx:HBox>
        <mx:Label text="Temperature in Fahrenheit:"/>
        <mx:TextInput id="fahrenheit" width="120"/>
        <mx:Button label="Convert" click="celsius.text=calculate(fahrenheit.text);"/>
        <mx:Label text="Temperature in Celsius:"/>
        <mx:Label id="celsius" width="120" fontSize="24"/>
     </mx:HBox>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The Sample3Script.as ActionScript file contains the following code:

// usingas/includes/Sample3Script.as
public function calculate(s:String):String {
    var n:Number = Number(s);
    var t:Number = Math.round((n-32)/1.8*10)/10;
    return String(t);
}