One codeless MXML document and one ActionScript component

The following example uses an ActionScript class as a controller component. The ActionScript component is declared in the application using a custom MXML tag. To use the TempConverter component in an application, you call its setupListener() method in the initialize property of the <mx:Application> tag, as the following code shows:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
      initialize="converter.setupListener()">

   <local:TempConverter id="converter" xmlns:local="*"/>

   <mx:Panel title="My Application" marginTop="10" marginBottom="10"
      marginLeft="10" marginRight="10" >
      <mx:HBox>
         <mx:Label text="Temperature in Farenheit:" />
         <mx:TextInput id="farenheit" width="120" />
         <mx:Button id="myButton" label="Convert" />
         <mx:Label text="Temperature in Celsius:" />
         <mx:Label id="celsius" width="120" fontSize="24" />
      </mx:HBox>
   </mx:Panel>
</mx:Application> 

The TempConverter.as ActionScript class contains the following code:

class TempConverter implements mx.core.MXMLObject{

   public var view;

   function initialized(doc : Object, id : String) : Void {
      view = doc;
   }

   function setupListener() : Void {
      view.myButton.addEventListener("click", this);
   }

   function click(event) {
      view.celsius.text=(view.farenheit.text-32)/1.8;
   }

}

TempConverter is an MXMLObject and the compiler calls the initialized() method on all instances of MXMLObject.

Version 1.5

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/00000074.htm

Add Comment