Flex Framework:FABridge
출처: 어도비 랩스
From Adobe Labs
1 What Is the Flex Ajax Bridge?
2 Where Should I Use the Flex Ajax Bridge?
3 What Do I Need to Use It?
4 Download and Installation
5 I've Run the Samples. How Do I Use the Flex Ajax Bridge?
6 What Are the Limitations?
7 How Do I Find Out More?
8 Summary
What Is the Flex Ajax Bridge?
플렉스 에이젝스 브릿지가 무엇인가?
by Ely Greenfield
플렉스 에이젝스 브릿지(FABridge)는 코드 라이브러리로, 우리가 브라우저에서 사용하기 위해서 만드는 플렉스 어플리케이션이나 플렉스 컴포넌트, SWF 파일에 삽입할 수 있다. 오픈 소스 라이센트로 커뮤니티에 공개될 것이다.
Ruby on Rails 커뮤니티의 내용을 빌자면, FABridge는 "don't repeat yourself" 이론(바둑에서 패가 무한히 반복되어서는 안 된다는 것은 우리모두 알고 있다)을 염두하고 만들어졌다. 새롭게 정의하는 대신에 액션스크립트 오브젝트를 자바스크립트에 드러내는 API들을 간단하게 하였다. FABridge를 사용하면 별도의 코딩 없이 액션스크립트 클래스가 자바스크립트를 사용할 수 있게 만들 수 있다. 한번 라이브러리를 추가하면, 액션스크립트를 사용하듯이 자바스크립트를 사용할 수 있다.
플래시 플레이어는 External API(ExternalInterface 클래스)를 통해서 액션스크립트에서 자바스크립트를 호출하거나 그 반대의 경우에 대한 기능을 원래부터 가지고 있다. 그러나 ExternalInterface는 다음과 같은 제약사항들이 있다:
- 액션스크립트와 자바스크립트 모두에서 별도 코드의 라이브러리를 작성하여, 플렉스 어플리케이션의기능을 자바스크립에서 사용하거나 그 반대의 경우에 대해서도, ExternalInterface 클래스가 있어야 한다.
- ExternalInterface 클래스는 또한 제약이 있다. 기본 데이터 타입, 배열, 심플 오브젝트들은 전달할 수 있지만, 속성과 메소드를 가지는 사용자 정의 클래스를 전달하는 것은 문제가 있다. 이 때문에 우리가 하려는 것이 제한을 받는다.
- ExternalInterface 클래스는 인터페이스를 정의하여, 우리가 만든 자바스크립트가 우리가 만든 액션스크립트를 호출할 수 있다. FABridge의 핵심은 액션스크립트 대신에 자바스크립트를 작성할 수 있게 해주는 것이다.
Where Should Use the Flex Ajax Bridge?
어디에 플렉스 에이젝스 브릿지를 쓰지?
우리는 다음과 같은 경우에서 FABridge 라이브러리를 유용성을 발견할 수 있다:
- 리치 플렉스 컴포넌트를 에이젝트 어플리케이션 안에서 사용하고자 하지만 플렉스 코드를 엄청나게새로 쓰는 것은 원하지 않는 경우이다. 브릿지를 사용하는 일부 어플리케이션 내에 컴포넌트를 감싸려고 한다면, 자바스크립트로 전체를 스크립트할 수 있고, 이것은 서버에서 생성된 eval() 함수를 사용하는 형태의 자바스크립트를 이용한다.
- 우리 팀에 플렉스를 하는 사람이 한 두 사람뿐인 경우이다. 저자는 전체 구성원이 플렉스를 구매하고 사용하는 것을 추천하지만(그러면 모두 플렉스를 좋아하게 될 거라고 믿는다), FABridge 라이브러리는 팀의 모든 사람이 한 두 명의 플렉스 전문가가 만든 결과물을 사용할 수 있게 해준다.
- 플렉스와 에이젝스로 만들어진 부분을 모두 가지는 RIA를 만드는 경우이다. 우리는 ExternalInterface만을 이용하여 통합할 수도 있고, 남보다 앞서 FABridge를 사용하여 더 빠른 방법을 찾을 수도 있다.
What Do I Need to Use It?
뭐가 필요하지?
FABridge 라이브러리와 샘플을 사용하기 위해서, 다음의 것들이 필요하다:
- Flex Builder 2.0 Beta 1
- Flash Player 8.5 Beta 1
- 자바스크립트가 가능한 Internet Explorer 또는 Firefox
- 샘플을 구동시킬 수 있는 HTTP 서버
Download and Installation
다운로드와 설치
샘플 파일들을 실행하기 위해서, 다음의 과정을 따르라:
1. fabridge.zip(717 KB)을 다운로드하고 로컬 디렉토리에 압축을 풀어라.
주의: 소프트웨어 다운로드, 글쓰기, 포럼 등에 대한 이용은 어도비의 권리를 사용하는 데 대한 문서(http://www.adobe.com/misc/copyright.html)를 따른다.
2. src와 samples 폴더를 HTTP 서버로 옮겨 놓아라.
3. 웹 프라우저에서 <서버주소>/samples/FABridgeSample.html과 samples/SimpleSample.html을 열고 거기에 적힌 지시를 따라라.
4. file:// 경로가 아닌 http:// 경로로 접근하는 것을 확인하라. 로컬 파일로 접근한다면 플래시 플레이어의 보안 경고 창이 뜨고 접근을 막을 것이다.
I've Run the Samples. How Do I Use the Flex Ajax Bridge?
샘플이 동작하는군. 플렉스 에이젝스 브릿지는 어떻게 사용하지?
FABridge 라이브러리를 우리의 플렉스와 에이젝스 어플리케이션에서 사용하기 위해서, 다음의 과정을 따르라:
1. ZIP 파일의 src 폴더를 플렉스 어플리케이션이 사용하는 액션스크립트 classpath에 추가하라.
(1) 플렉스 빌더에서, 어플리케이션의 Nabigator 창에서 오른쪽 클릭을 하고 Properties를 선택하라.
(2) 플렉스 빌더 Path 부분을 선택하라.
(3) src 폴더를 class path 부분에 추가하라. OK를 클릭하라.
(4) 커맨드 라인에서 컴파일 하는 방법을 사용한다면, --actionscript-classpath 컴파일 옵션을 이용하여 src 폴더를 추가할 수 있다.
2. 다음의 태그를 어플리케이션 파일에 추가한다.
<mx:Application …>
<fab:FABridge xmlns:fab="bridge.*" />
...
우리의 어플리케이션에 자바스크립트가 접근할 수 있도록 하기 위해서, 다음과 작성하라:
function useBridge()
{
var flexApp = FABridge.flash.root();
}
속성값을 얻기 위해서, 이 함수를 호출한다. 오브젝트의 id를 사용하여 접근하는 것도 같은 문법을 사용한다:
function getMaxPrice()
{
var flexApp = FABridge.flash.root();
var appWidth = flexApp.width();
var maxPrice = flexApp.maxPriceSlider().value();
}
자바스크립트에서 속성값을 설정하기 위해서, setPropertyName()함수를 호출한다:
function setMaxPrice(newMaxPrice)
{
var flexApp = FABridge.flash.root();
flexApp.maxPriceSlider().setValue(newMaxPrice);
}
액션스크립트에서 하듯이 직접 오브젝트의 메소드를 호출 할 수 있다:
function setMaxPrice(newMaxPrice)
{
var flexApp = FABridge.flash.root();
flexApp.shoppingCart().addItem(“Antique Figurine”, 12.99 );
}
이벤트 핸들러처럼, 자바스크립트에서 액션스크립트로 함수를 보낼 수도 있다:
function listenToMaxPrice()
{
var flexApp = FABridge.flash.root();
var maxPriceCallback = function(event)
{
document.maxPrice = event.newValue();
document.loadFilteredProducts(document.minPrice, document.maxPrice);
}
flexApp.maxPriceSlider().addEventListener(“change”, maxPriceCallback );
}
플렉스 파일의 초기화 코드를 실행하기 위해서는 다운로드되고 처음 초기화 될 때 까지 기다려야 한다. 무비가 초기화될 때 콜백이 등록된다:
function initMaxPrice(maxPrice)
{
var initCallback = function()
{
var flexApp = FABridge.flash.root();
flexApp.maxPriceSlider.setValue(maxPrice);
}
FABridge.addInitializationCallback("flash",initCallback);
}
같은 페이지에 있는 여러 개의 플래시 무비의 스크립트를 처리하기 위해서, 각각에게 유일한 브릿지 이름이 flashVars 방식을 통해서 지정된다. 각 무비에 접근하거나 초기화 콜백을 등록하기 위해서는 브릿지 이름을 사용해야 한다:
<object ...>
<param name='flashvars' value='bridgeName=shoppingPanel'/>
<param name='src' value='app.swf'/>
<embed ... flashvars='bridgeName=shoppingPanel'/>
</object>
function initMaxPrice(maxPrice)
{
var initCallback = function()
{
var flexApp = FABridge.shoppingPanel.root();
flexApp.maxPriceSlider.setValue(maxPrice);
}
FABridge.addInitializationCallback("shoppingPanel",initCallback);
}
What Are the Limitations?
제약사항은?
FABridge 라이브러리는 현재 pre-alpha 상태이다. 파이어폭스 1.5와 인터넷 익스플로러 6.0(SP2)에서만 제한적으로 테스트 되었다. 리눅스나 매킨토시 브라우저에서 실험할 계획도 없다.
자바스크립트와 액션스크립트 가비지 콜렉션 모델 사이의 통합은 제약이 있기 때문에, 브릿지는 자바스크립트에서 접근할 때까지 액션스크립트 오브젝트가 메모리에 기한 없이 남아 있도록 보장을 해야만 한다. 메모리 사용량이 브릿지의 사용에 중요한 사항이 될 것이라고 생각한다면, FABridge.<플래시 또는 브릿지 이름>.releaseASObjects() 함수를 호출할 수 있다. 이 방법은 브릿지된 오브젝트와 함수를 캐쉬에서 제거하고 차지하고 있던 메모리를 해제하게 한다. 이 함수가 호출된 후에는, 액션스크립 오브젝트와 함수에 대한 모든 참조는 다시 얻기 전에는 유효하지 않게 된다.
FABridge 라이브러리의 다음 버전에는, 데이터 타입에 기반한 오브젝트를 다루는 더 특화된 기능을 추가하고 이 함수를 호출하는데 시간을 줄이기를 원한다(예를 들면, 다음 버전에는 이벤트 콜백의 생존시간이 지나면 이벤트 오브젝트를 캐쉬에 남기지 않을 것이다).
현재 배포된 플래시 플레이어 8.5 베타의 한계로 인해서, 액션스크립트에서 자바스크립트로 보내질 때마다 오브젝트들은 별도로 캐쉬에 저장된다. 이 방법은 약간의 메모리와 성능의 불이익이 있다. 다음 공개 버전의 플래시 플레이어 8.5에서는, 액션스크립트에서 자바스크립트로 처음 보내질 때만 오브젝트가 캐쉬에 저장될 것이다.
성능향상의 이유 때문에, 액션스크립트에서 자바스크립트로 익명의 오브젝트가 보내질 때, 브릿지는 기본 데이터와 배열, 타입이 정해지지 않은 오브젝트와 메소드와 같은 다른 익명의 오브젝트만을 담고 있다고 가정한다. 익명의 오브젝트의 부분으로 보내는 인스턴스나 메소드는 정확하게 브릿지를 통해서 전달되지 못한다.
How Do I Find Out More?
더 많은 정보는 어떻게 찾지?
플렉스 에이젝스 브릿지에 대한 궁금한 점이나 피드백은 어도비 랩스의 포럼에 글을 올려라.
플렉스와 에이젝스를 사용하는데 대한 더 많은 정보는, 플렉스 데이터 서비스를 위한 에이젝스 클라이언트(http://labs.macromedia.com/wiki/index.php/Flex_Enterprise_Services:Ajax_Client)를 보라.
Summary
요약
우리는 플렉스 어플리케이션을 에이젝스 기반의 HTML 어플리케이션에 자동으로 드러내기 위해서 FABridge 라이브러리를 사용할 수 있다. 브릿지를 사용하면, 우리의 어플리케이션에 리치한 플렉스 콤포넌트를 쉽게 포함시킬 수 있고, 페이지 내의 나머지 부분만을 이용해서 통합할 수 도 있다. 단 한번만 플렉스 어플리케이션이 브릿지를 사용하도록 하면, 자바스크립트 개발자들은 플렉스가 제공하는 모든 기능에 접근할 수 있다.
원본 출처: “http://labs.macromedia.com/wiki/index.php/Flex_Framework:FABridge”
번역자의 의견
어도비(이전 매크로미디어)가 일부 의견만을 바탕으로 플래시 플레이어의 보안 모델을 만듦으로서 하지 못하게 만들었던 일들을 이제 에이젝스를 이용하여 할 수 있게 되었을 뿐이다. 게다가 에이젝스는 자바스크립트를 기반으로 하는 방법이므로 어도비(이전 매크로미디어)가 별도로 무언가를 제공해 주지 않아도 이미 사용할 수 있는 방법들은 존재해왔다.
이전의 플래시 플레이어는 다른 웹사이트의 문서를 거의 제약 없이 읽어 올 수 있었다. 그러나 이제는 크로스 도메인 정책으로 금지되었고, xml 규칙을 따르지 않는 문서는 중간에서 끊어져 문서 전체를 읽을 수 도 없다. 새 버전에서는 자바스크립트에 접근하는 것 조차 힘들게 만들어 놓았다.
이러한 일들로 인해서 플래시 개발자들 조차 에이젝스로 넘어가게 만드는 계기가 되었고, 이는 분명 어도비(이전 매크로미디어)의 잘못된 판단에서 비롯된 것이다.