[Flex3] ActionScript 와 MXML 을 분리하는 기술 / Techniques for separating ActionScript from MXML

Reference : http://livedocs.adobe.com/flex/3/html/usingas_6.html#216704

하나의 함수를 호출하는 아래의 어플리케이션으로 MXML 에서 ActionScript 를 분리하는 몇 가지 방법에 대해 보여줄 것이다.

Temperature 어플리케이션은 하나의 인풋 필드에서 인풋을 받고 인풋을 Farenheit에서 Celsius 로 변환하는 함수를 사용한다. 그러면 Label 컨트롤에 결과로 나온 온도를 보여준다.

아래의 이미지는 Temperature 어플리케이션을 보여준다:

One MXML document (event handling logic in event attribute)

아래의 코드는 MXML 태그의tag's click 이벤트 내부의 ActionScript 이벤트 처리 로직을 보여준다:

<?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>

이 코드를 실행한 파일은 아래와 같다:
 

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

이 예에서 함수 로직은 MXML 문서의 <mx:Script> 블럭 내에 위치하고 MXML 태그의 click 이벤트에서 호출된다:

<?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>

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

여기서 함수 호출은 MXML 이벤트 속성 내에 위치하고 함수는 분리된 ActionScript 파일에 정의되었다:

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

  <!-- 함수가 있는 ActionScript 파일 명시. -->
  <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>

코드를 실행한 결과는 아래와 같다:

Sample3Script.as ActionScript 파일에 아래의 코드가 있다:

// 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);
}