플렉스

델리마운트 위키

목차 1 플렉스 빌더 1.1 서버와 연동한 개발환경 1.1.1 Rails 서버 + Flex 1.2 RSL 프로젝트 참조하기 1.3 연관된 프로젝트 체크아웃 후 최초 빌드하기 1.4 Flex Navigator 단축키 설정하기 2 ActionScript 2.1 ObjectUtil 3 플렉스와 JavaScript 연동 3.1 ActionScript 에서 JavaScript 함수 호출 3.2 JavaScript 에서 ActionScript 함수 호출

플렉스 빌더

서버와 연동한 개발환경

서버 프로젝트에 플렉스 프로젝트의 바이너리 폴더를 Symbolic Link로 연결함으로서 손쉽게 릴리즈 환경과 동일한 형태로 개발에 임할 수 있습니다.

본래 NTFS 파일시스템은 Symbolic Link를 지원하지만, 윈도우 XP는 전문가보다는 일반인에 친숙한 OS를 지향하여 이 기능을 드러내지 않습니다. 윈도우 XP 사용자의 경우에는 Symbolic Link 지원을 위해 Junction v1.05를 설치해주세요. 실행파일을 특정 폴더에 저장한 후, 해당 폴더를 path 설정에 추가해주시면 됩니다. 또는 시스템 폴더(윈도 XP의 경우 C:\WINDOWS\system32) 밑에 복사해도 됩니다.

윈도우 비스타 사용자는 자체적으로 Symbolic Link 툴이 내장되어 있습니다.

Rails 서버 + Flex

1. Command Prompt를 실행하여, Rails 프로젝트의 public 폴더로 이동합니다.
2. 다음과 같은 명령어로 public 폴더 밑에 flex 라는 이름으로 flex 프로젝트의 bin-debug 폴더를 Symbolic Link 합니다. junction flex "path/to/flex/bin-debug"
3. Flex 프로젝트에서 Run > Debug > Other 를 클릭합니다.
4. 좌측 Flex Application 에서 해당 프로젝트의 Application 을 선택한 후, URL or path to launch 의 Use defaults 를 체크 해제 합니다.
5. Debug, Profile, Run 에 다음과 같은 형태의 Rails 서버의 주소를 적어줍니다. http://localhost:3000/flex/MyApplication.html

RSL 프로젝트 참조하기

1. Flex Navigator > Properties 창 > Flex Build Path > Library path 탭 > Add Product 버튼
2. Build path libraries에서 추가된 프로젝트 선택합니다.
3. Link Type을 RSL로 변경합니다.

[주의] Build path libraries에서 프로젝트 간의 빌드 우선 순위가 있습니다. 참조되는 프로젝트를 위에 배치합니다.

연관된 프로젝트 체크아웃 후 최초 빌드하기

RSL 처럼 연관된 프로젝트들을 체크아웃 후 빌드가 정상적으로 되지 않는 경우가 있습니다. 만약 참조해야하는 swf 파일이 존재하지 않아 빌드가 실패한 경우 아래와 같이 진행하도록 합니다.

1. Project > Build Automatically를 체크 해제합니다.
2. Project > Clean...을 클릭합니다.
3. Clean 창에서 Clear all projects 선택, Start a build immediately를 체크 해제한 후 OK를 클릭합니다.
4. 프로젝트 간의 종속성이 낮은 순서대로 프로젝트를 선택한 후 컨텍스트 메뉴에서 Build Project를 클릭합니다.

Flex Navigator 단축키 설정하기

1. Window > Preferences 창 > General > Keys
2. Include unbound commands 체크합니다.
3. Show View (View:Flex Navigator) 선택(검색 가능)합니다.
4. Binding에 Ctrl + ` 입력 후 OK 클릭합니다.

[주의] Ctrl + ` 단축키는 이미 사용되고 있습니다.

ActionScript

ObjectUtil

만약 아무 property도 담지 않은 Object인지 확인하고자 한다면, 다음과 같은 코드로 확인할 수 있다. <source lang=actionscript> if ( 0 == ObjectUtil.compare( {}, params ) ) {

   // Do if params has no properties

} </source>

플렉스와 JavaScript 연동

ActionScript 에서 JavaScript 함수 호출

• ActionScript Side

<source lang=actionscript> import flash.external.ExternalInterface;

function callJavaScriptFunction() : void {

 ExternalInterface.call( "foo", "안녕" );

} </source>

• JavaScript Side

<source lang=javascript> function foo( message ) {

 alert( message );

} </source>

JavaScript 에서 ActionScript 함수 호출

• MXML Side (MyApplication.mxml)

<source lang=actionscript> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
   <![CDATA[
     import flash.external.ExternalInterface;

     import mx.controls.Alert;

     protected override function createChildren() : void {
       super.createChildren();

       ExternalInterface.addCallback( "foo", foo );
     }

     public function foo( message : String ) : void {
       Alert.show( message );
     }
   ]]>
 </mx:Script>

</mx:Application> </source>

• JavaScript Side

<source lang=javascript> function callActionScriptFunction() {

 MyApplication.foo( "안녕" );

} </source>