Flex 2 개발 가이드 > Flex 프로그램 언어의 사용 > ActionScript 의 사용 > ActionScript 를 MXML 로부터 분리하는 테크닉

ActionScript 를 MXML 로부터 분리하는 테크닉

이 섹션에서는, 1 개의 샘플 어플리케이션을 사용해, ActionScript 를 MXML 로부터 분리하는 방법에 대해 설명합니다. Temperature 어플리케이션은, 1 개의 입력 필드로부터 입력을 받아, 함수를 사용해 입력치를 화씨로부터 섭씨로 변환합니다. 그리고, 변환 결과를 Label 컨트롤에 표시합니다.

다음의 그림에 Temperature 샘플 어플리케이션을 나타냅니다.


Temperature 샘플 어플리케이션

1 개의 함수를 호출하는 이 단순한 어플리케이션에 대해, MXML 와 ActionScript 를 분리하는 방법은 몇개인가 있습니다.

이후의 섹션으로, 각각의 방법에 대해 설명합니다.

1 개의 MXML 문서 (이벤트 속성에서의 이벤트 처리 논리)

다음의 코드에서는, MXML 태그의 click 이벤트에 ActionScript 이벤트 처리 논리를 기술하고 있습니다. 

<? xml version="1. 0"? >
<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 Farenheit:"/>
            <mx:TextInput id="farenheit" width="120"/>
            <mx:Button label="Convert"
                click="celsius.text=String((farenheit.text-32)/1. 8) ;"/>
            <mx:Label text="Temperature in Celsius:"/>
        <mx:Label id="celsius" width="120" fontSize="24"/>
        </mx:HBox>
    </mx:Panel>
</mx:Application>

1 개의 MXML 문서 (<mx:Script> 블록에서의 이벤트 처리 논리)

이 예에서는, MXML 문서의 <mx:Script> 블록내에 함수의 논리를 기술해, MXML 태그의 click 이벤트로부터 호출하고 있습니다. 

<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><! [CDATA[
        public function calculate():void {
            celsius.text=String((farenheit.text-32)/1. 8);
        }
    ]]></mx:Script>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">
        <mx:HBox>
            <mx:Label text="Temperature in Farenheit:"/>
            <mx:TextInput id="farenheit" 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>

1 개의 MXML 문서와 1 개의 ActionScript 파일 (다른 스크립트 파일에서의 이벤트 처리 논리)

다음의 예에서는, MXML 이벤트 속성에 함수 호출을 기술해, 함수를 다른 ActionScript 파일로 정의하고 있습니다. 

<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <! -- 함수가 정의되고 있는 ActionScript 파일을 지정합니다.  -->
    <mx:Script source="sample3script.as"/>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">
        <mx:HBox>
            <mx:Label text="Temperature in Farenheit:"/>
            <mx:TextInput id="farenheit" 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>

"sample3script.as" ActionScript 파일의 내용은 다음과 같습니다. 

public function calculate() :void {
    celsius.text=String((farenheit.text-32)/1. 8);
}