2008년 02월 19일
[강좌]Flex 빠른 시작 가이드: 시작하기
목차
MXML과 ActionScript를 사용한 코딩
Adobe®는 Flex를 ActionScript 클래스 라이브러리로 구현했습니다. 이 클래스 라이브러리에는 구성 요소(컨테이너 및 컨트롤), 관리자 클래스, 데이터 서비스 클래스 및 기타 모든 기능을 위한 클래스가 포함되어 있습니다. 이 클래스 라이브러리와 함께 MXML 및 ActionScript 언어를 사용하여 어플리케이션을 개발할 수 있습니다.
MXML
MXML은 Adobe® Flex™ 어플리케이션에서 유저 인터페이스 구성 요소를 배치하는 데 사용하는 XML 언어입니다. 또한 서버측 데이터 소스에 대한 액세스 및 유저 인터페이스 구성 요소와 데이터 소스 간의 바인딩 등 어플리케이션의 비시각적 측면을 선언적으로 정의하는 데에도 MXML을 사용할 수 있습니다.
예를 들어 <mx:Button> 태그를 사용하여 다음 MXML 문을 사용하는 Button 컨트롤의 인스턴스를 생성할 수 있습니다.
<mx:Button id="myButton" label="I'm a button!"/>
id 속성을 설정하여 이후에 참조할 수 있도록 Button 인스턴스에 고유한 이름을 지정할 수 있습니다. label 속성에서 Button 인스턴스에 표시되는 레이블의 텍스트를 설정합니다.
다음 예제는 Button 컨트롤이 있는 Flex 어플리케이션을 생성하는 데 필요한 전체 코드를 나타낸 것입니다.
<?xml version="1.0" encoding="utf-8"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="center"
> <mx:Button id="myButton" label="I'm a button!" /></mx:Application>
Flex 어플리케이션을 작성한 후 Flex 컴파일러를 사용하여 컴파일해야 합니다. Flex 컴파일러는 Flex 2 설치 폴더의 Flex SDK 2.0\bin 폴더에 있는 mxmlc라는 소형 실행 파일입니다.
팁: Flex 2 installation folder\Flex SDK 2.0\bin 폴더는 사용자 시스템 경로에 존재해야 합니다. 경로에 Flex 컴파일러가 있어야 현재 표시된 폴더에 관계없이 명령줄을 사용하여 호출할 수 있습니다.
지침
- 원하는 텍스트 편집기(예: 메모장)에서 새 파일을 생성하여 MyFirst.mxml로 저장합니다.
- 앞 예제의 코드를 MyFirst.mxml에 입력하여 파일을 저장합니다.
- 시작 > 모든 프로그램 > 보조프로그램 > 명령 프롬프트를 선택하여 명령 창을 엽니다.
- 현재의 디렉토리를 1단계에서 저장한 Flex 어플리케이션이 포함된 폴더로 변경합니다.
- 다음 명령을 입력하여 Flex 컴파일러를 호출합니다.
mxmlc --strict=true --file-specs MyFirst.mxml명령 문자열에서 이중 대시로 시작하는 항목은 컴파일러 옵션이며 Flex 컴파일러의 동작을 정의하는 데 사용됩니다. 앞 예제에서
--strict옵션을true로 설정하면 컴파일러가 strict 모드로 전환됩니다. strict 모드에서 컴파일러는 코드에 대해 높은 기대를 가지게 되는데, 예를 들어 사용자가 고정적으로 변수를 입력할 것으로 기대합니다.--file-specs옵션을 사용하여 컴파일될 MXML 파일을 지정합니다. 독립 실행형 Adobe Flash Player 9에서 SWF 파일을 열려면 Windows Explorer에서 SWF 파일을 두 번 클릭하거나 명령줄에 이름을 입력합니다.
이 예제의 결과는 SWF 파일에서 다음과 같이 나타납니다.
//전체 소스를 보려면 Flex 어플리케이션을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 View Source를 선택합니다.
팁: 시각적 디자인 뷰를 포함하는 Flex 개발용 IDE(Integrated Development Environment)인 Adobe Flex Builder 2를 사용하여 Flex 어플리케이션을 생성 및 컴파일할 수도 있습니다. Flex Builder 2에 대한 자세한 내용은 Flex Builder 2 사용*을 참조하십시오.
ActionScript
MXML 태그는 ActionScript 클래스나 클래스 속성에 해당합니다. Flex 어플리케이션을 컴파일할 경우 Flex는 MXMLtags를 구문 분석하고 해당 ActionScript 클래스를 생성합니다. 그 다음 이들 ActionScript 클래스를 SWF 파일에 저장되는 SWF 바이트코드로 컴파일합니다.
팁: Flex에서 생성되는 중간 ActionScript 파일을 보려면 mxmlc 명령에 --keep-generated-actionscript 옵션을 추가하십시오.
위 예제에서 Flex는 Flex Button 컨트롤을 정의하는 ActionScript Button 클래스를 제공합니다.
참고: 이전 예제에서 <mx:Button> 태그의 mx 접두어가 네임스페이스입니다. 이는 Application 태그의 고유 URL을 사용하여 선언됩니다. mx 접두어는 mx 네임스페이스의 각 구성 요소를 정규화된 클래스 이름과 대응시킵니다. 이러한 방법으로 Flex 컴파일러는 mx 네임스페이스에서 MXML 태그에 해당하는 ActionScript 클래스를 찾아 냅니다.
다음 예제에서는 ActionScript를 사용하여 Button 컨트롤을 생성하는 방법을 설명합니다. 결과는 MXML 버전에서와 동일합니다.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80"
>
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void
{
// Create a Button instance and set its label
myButton = new Button();
myButton.label = "I'm a button!";
// Get notified once button component has been created and processed for layout
myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
// Add the Button instance to the DisplayList
addChild (myButton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
{
// Center the button
myButton.x = parent.width/2 - myButton.width/2;
myButton.y = parent.height/2 - myButton.height/2;
}
]]>
</mx:Script>
</mx:Application>
ActionScript를 통해 Flex 구성 요소를 생성하려면 구성 요소의 클래스를 가져와야 합니다. 또한 이들이 표시되도록 하려면 addChild() 메서드를 사용하여 구성 요소를 어플리케이션의 DisplayList에 추가해야 합니다. 이 예제의 길이와 복잡성을 이에 상응하는 MXML 버전과 비교해 보면, 간단한 이 태그 기반의 선언적 MXML 구문을 통해 구성 요소 배치에 필요한 많은 ActionScript 코드 작성 작업을 피할 수 있다는 것을 알 수 있습니다.
이 예제의 결과는 SWF 파일에서 다음과 같이 나타납니다.
//참고: 이 예제는 Flex 어플리케이션에 ActionScript를 포함하는 한 가지 방법으로서 Script 태그와 함께 인라인 ActionScript를 사용하는 방법을 보여줍니다. 다른 방법으로는 스크립트 블록을 외부 ActionScript 파일로 분리하거나 외부 ActionScript 클래스를 사용할 수 있습니다.
추가 정보
MXML과 ActionScript에 대한 자세한 내용은 Flex 2 Developer's Guide*의 "Developing applications in MXML," "MXML Syntax" 및 "Using ActionScript"를 참조하십시오.
저자 소개
배우 겸 가수로도 활동하고 있는 Aral Balkan은 개발 팀을 이끌고 사용자 경험을 디자인하고 리치 인터넷 어플리케이션을 설계하며, 런던 Macromedia 사용자 그룹인 OSFlash.org와 자신의 회사인 Ariaware를 경영하고 있습니다. 디자인 패턴에 대한 의견을 교환하고 책 저술과 잡지에 기고하는 일을 즐기며, Flash Platform용 개방형 소스 RIA 프레임워크인 Arp를 만든 사람이기도 합니다. Aral은 대체로 자기 주장이 상당히 강한 편이며, 활기차고 열정적입니다. 웃는 것을 좋아하고 껌을 씹으며 길을 걷기도 합니다.
# by | 2008/02/19 14:09 | adobe flex | 트랙백(2) | 덧글(0)
