[Flex3] Flex 어플리케이션에서 ActionScript 사용 / Using ActionScript in Flex applications

Reference : http://livedocs.adobe.com/flex/3/html/usingas_2.html#123077

Flex 프로그래밍 > ActionScript 사용 > Flex 어플리케이션에서 ActionScript 사용

Flex 개발자는 Flex 어프리케이션에 특별한 동작을 구현하기 위해 ActionScript 를 사용할 수 있다. 먼저 사용자 인터페이스를 만들기 위한 컨테이너, 컨트롤, 이펙트, 포매터, 밸리데이터와 어플리케이션에 필요한 웹 서비스 등을 MXML 태그를 사용하여 선언한다. 각 컴포넌트는 기본적인 동작을 제공한다. 예를 들어 버튼에 마우스를 가져가면 ActionScript 를 사용하지 않아도 자동적으로 버튼이 강조된다. 하지만 MXML 과 같은 선언적 언어로는 버튼을 클릭했을 때의 동작을 구현하기에는 적합하지 않다. 이를 위해 실행 가능한 함수, 다양한 종류의 변수 타입, 조건문과 반복문과 같은 흐름 제어를 제공하는 ActionScript 와 같은 순차적 언어를 사용할 필요가 있다. 전반적으로 MXML 은 어플리케이션의 정적인 부분을 구현하는 데 사용되고, ActionScript 는 동적인 부분을 구현하는 데 사용된다.

ActionScript 는 ECMAScript (ECMA-262) edition 4 draft language specification 에 기반한 오브젝트 중심의 절차적 프로그래밍 언어다. 아래와 같이 다양한 방법으로 ActionScript 와 MXML 을 함께 사용할 수 있다:

• MXML 속성에서 이벤트 리스너를 정의하기 위해 ActionScript 사용
• <mx:Script> 태그를 사용하여 스크립트 블럭 추가
• 외부 ActionScript 파일
• ActionScript 클래스 임포트
• ActionScript 컴포넌트 생성

ActionScript compilation
ActionScript 컴파일

하나의 MXML 파일이나 ActionScript 파일에 간단한 Flex 어플리케이션을 작성할 수 있지만, 대부분의 어플리케이션은 여러 개의 파일로 나누어져 있다. 예를 들어 <mx:Application> 에서 <mx:Script> 블럭과 <mx:Style> 블럭을 각각 AS 파일과 CSS 파일로 이동시키는 것은 무척 일반적이다. 어플리케이션에서 MXML 컴포넌트와 ActionScript 컴포넌트를 임포트 하는 것도 일반적이다. These must be defined in other files, and MXML components may put their own <mx:Script> blocks into yet more AS files that they include. Components may also be imported from precompiled SWC files rather than source code. Finally, SWF files containing executable code can also be embedded in an application. The end result of all these input files is a single SWF file.

The Flex compiler transforms the main MXML file and other files it includes into a single ActionScript class. As a result, you cannot define classes or use statements outside of functions in the MXML files and the included ActionScript files.

You can reference imported ActionScript classes from your MXML application files, and those classes are added to the final SWF file. When the transformation to an ActionScript file is complete, Flex links all the ActionScript components and includes those classes in the final SWF file.

About generated ActionScript
생성된 ActionScript

MXML 파일을 작성해서 컴파일하면 Flex 컴파일러는 클래스를 생성하고, 클래스가 사용하는 ActionScript 파일을 생성한다. MXML 태그와 ActionScript 는 클래스에 의해 사용된다. 이 정보는 어프리케이션의 뒤에서 발생하는 일을 이해하는 데 유용하다.

MXML 어플리케이션 (<mx:Application> 태그로 시작하는 파일) 은 Application 의 하위 클래스를 정의한다. 마찬가지로 MXML 컴포넌트 (<mx:Button> 처럼 다른 컴포넌트의 태그로 시작하는 파일) 는 컴포넌트의 하위 클래스를 정의한다.

하위 클래스의 이름은 파일의 이름과 같다. 베이스 클래스는 최상위 수준 태그의 클래스다. MXML 어플리케이션은 실제로 아래처럼 정의한다:

class MyApp extends Application

만약 MyButton.mxml 이 <mx:Button> 으로 시작하면, 실제로 아래와 같의 정의한다:

class MyButton extends Button

<mx:Script> 블럭 내의 변수와 함수 선언은 하위 클래스의 속성과 메쏘드를 정의한다.

클래스에서 컴포넌트 인스턴스의 id 속성을 정하는 것은 이 컴포넌트 인스턴스를 참조하는 하위 클래스에 퍼블릭 변수를 선언하는 것과 같다. 예를 들어 <mx:Button id="myButton"/> 태그가 여러 겹의 태그 안에 위치하더라도, myButton 으로 참조할 수 있다.

Event 속성은 하위 클래스의 자동으로 생성된 이벤트 리스너 메쏘드가 된다. 예를 들어:

<mx:Button id="myButton" click="foo = 1; doSomething()">

는

private function __myButton_click(event:MouseEvent):void {
    foo = 1;
    doSomething()
}

가 된다. 이벤트 속성이 메쏘드가 되어 하위 클래스의 다른 속성이나 메쏘드에 접근할 수 있다.

MXML 파일의 ActionScript 는 <mx:Script> 블럭에 위치하든, 태그 밖에 위치하든, 하위 클래스의 인스턴스를 참조하는 this 키워드로 실행된다.

클래스의 퍼블릭 속성과 메쏘드는 다른 컴포넌트의 ActionScript 코드에서 접근할 수 있다. as long as that code "dots down" (for example, myCheckoutAccordion.myAddressForm.firstNameTextInput.text) or reaches up using parentDocument, parentApplication, or Application.application to specify which component the property or method exists on.

Using ActionScript in MXML event handlers
MXML 이벤트 핸들러에서 ActionScript 사용하기

Flex 어플리케이션에서 ActionScript 코드를 사용하는 한 가지 방법은, 아래의 예제에서 보이는 것처럼, MXML 태그의 이벤트 핸들러에서 사용하는 것이다:

<?xml version="1.0"?>
<!-- usingas/HelloWorldAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Panel title="My Application"  height="128" x="226" y="24" layout="absolute">
     <mx:TextArea id="textarea1" width="155" x="0" y="0"/>
     <mx:Button label="Click Me"
        click="textarea1.text='Hello World';"
        width="92"
        x="31.5"
        y="56"
     />
  </mx:Panel>
</mx:Application>

이 코들르 실행한 SWF 파일은 아래와 같다:

이 예에서 ActionScript 코드를 Button 컨트롤의 클릭 이벤트 핸들러 바디에 넣을 수 있다. MXML 컴파일러는 click="..." 속성을 통해 아래와 같은 이벤트 핸들러 함수를 생성한다:

public function __myButton_click(event:MouseEvent):void {
    textarea1.text='Hello World';
}

사용자가 버튼을 클릭하면, 이 코드는 TextArea 컨트롤의 text 속성을 "Hello World" 로 변경시킨다. 대부분의 경우에 생성된 코드를 살펴 볼 필요는 없지만 인라인 이벤트 핸들러를 작성했을 때 어떤 일이 일어나는지 이해하는 데 유용할 것이다.

생성된 코드를 보려면 컴파일러 옵션의 keep-generated-actionscript 값을 true 로 설정하면 된다. 그러면 컴파일러는 SWF 파일의 하위 폴더인 /generated 폴더의 *.as 헬퍼 파일을 저장한다.

이벤트에 대해 더 많은 정보는 Using Events 에서 볼 수 있다. 커맨드라인 컴파일러에 대한 정보는 Using the Flex Compilers 에서 볼 수 있다.

Using ActionScript blocks in MXML files
MXML 파일에서 ActionScript 블럭 사용하기

MXML 파일에 ActionScript 블럭을 삽입할 때 <mx:Script> 태그를 사용한다. ActionScript 블럭은 MXML 에서 사용되는 ActionScript 함수와 변수를 포함한다. Code inside <mx:Script> 태그 안의 코드도 상수와 네임스페이스를 선언하거나(const 문 또는 namespace 사용), ActionScript 파일을 인클루드 하거나(include 사용), 선언을 임포트 하거나(import 사용), 네임스페이스를 사용할 수 있다(use namespace 사용).

<mx:Script> 태그는 <mx:Application> 이나 다른 최상위 수준 컴포넌트 태그의 내부에 있어야 한다.

구문과 표현식은 함수 안에서만 사용가능하다. 그리고 <mx:Script> 블럭에서는 새로운 클래스나 인터페이스를 정의할 수 없다. 새로운 클래스나 인터페이스는 AS 파일에 위치해야 하며, 이 파일을 임포트 하여 사용한다. 

Flex 가 어플리케이션을 컴파일 할 때 블럭에 있는 모든 ActionScript 는 전체 파일의 클래스에 추가된다. 아래의 예제는 변수를 선언하고, 함수에서 변수의 값을 대입한다:

<?xml version="1.0"?>
<!-- usingas/StatementSyntax.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">
    <mx:Script><![CDATA[
            public var s:Boolean;
            public function doSomething():void {
                // 아래의 문장은 반드시 함수 안에 있어야 한다.
                s = label1.visible;
                label1.text = "label1.visible = " + String(s);
            }
    ]]></mx:Script>
   
    <mx:Label id="label1"/>
   
</mx:Application>

모든 명령문은 <mx:Script> 블럭 내부의 함수 안에 위치해야 한다. 하지만 아래와 같은 문장은 함수의 밖에 위치할 수 있다:

• import
• var
• include
• const
• namespace
• use namespace

<mx:Script> 블럭을 사용할 때는 CDATA 컨스트럭트로 내용을 감싸야 한다. 컴파일러가 스크립트 블럭의 내용을 XML 로 해석하는 것을 막고, ActionScript 를 제대로 생성하기 위해서다. Adobe 아래의 예시에서 보이는 것처럼 <mx:Script> 태그를 작성하는 것을 추천한다:

<mx:Script>
    <![CDATA[
        ...
    ]]>
</mx:Script>

Flex 는 CDATA 컨스트럭트 내부의 텍스트를 분석하지 않는다. 이 말은 <, >, & 과 같은 XML 에서 구분자로 사용되는 문자를 사용할 수 있다는 것이다. 아래의 스크립트처럼 < 연산자를 포함하고 있으면 반드시 CDATA 컨스트럭트 안에 위치해야 한다:

<?xml version="1.0"?>
<!-- usingas/UsingCDATA.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="doSomething()">
    <mx:Script><![CDATA[
        public var m:Number;
        public var n:Number;
        public function doSomething():void {
            n = 42;
            m = 40;
            label1.text = "42 > 40 = " + String(n > m);
        }
    ]]></mx:Script>
   
    <mx:Label id="label1"/>
   
</mx:Application>

이 예제의 SWF 실행 파일은 아래와 같다:

Accessing ActionScript documentation
ActionScript 문서에 접근하기

ActionScript 3.0 프로그래밍 언어는 Adobe® Flash® Professional, Adobe® Flex® Builder™ 등의 다양한 개발 환경에서 사용될 수 있다. 

Flex 문서는 ActionScript 언어에 대해 설명하는 Programming ActionScript 3.0 를 포함하고 있다. ActionScript API 레퍼런스 는 Adobe Flex Language Reference 의 일부이다.