머드초보의 블로그

자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.
아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 blazeds를 이용합니다-_-;
프로젝트를 생성할 때 ProjectName에 FABridgeTest로 하고, Web application으로 하고, Application ServerType을 J2EE로합니다. 톰캣을 사용하는 겁니다. 이렇게 생성한 놈은 실행할 때 http://localhost:8080/프로젝트명/프로젝트명.html로 실행해주기 때문에 테스트를 할 수 있습니다.
Next를 하고, Target runtime에 tomcat을 설정해주고, Flex War파일에는 blazeds.war파일을 선택합니다. Finish를 선택하여 프로젝트를 만듭니다.

기존에 있던 index.templete.html은 FABridge사용에 문제가 좀 있어서 다시 생성만들어야합니다.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기에 가면 templete을 만들어 놓은 것이 있는데 다운받고 압축을 풀면, html-template폴더가 있는데, 기존의 html-template폴더 날려버리고, 이걸로 대체합니다.

이제 필요한 것은 FABridge.js파일인데, 이 파일은 기존의 것을 사용하면 swfobject 2.1에서는 사용할 수 없습니다. 그래서 수정한 버전이 필요합니다. 기존것으로 하려다 혈압이 약 20%상승한 듯 합니다.
http://www.swffix.org/swfobject/swfobject_flex3/
이곳에 가면 예제와 FABridge.js와 history.js파일이 있는데 이걸 html-templete폴더와 ./history폴더에 각각 복사합니다.
예제를 만들어봅시다.
index.templete.html파일을 열어서 bridgeName을 지정해줍니다.
[code]
var flashvars = {
    bridgeName: "mudchobo"
};
[/code]
지정해주지 않으면 flash가 디폴트가 됩니다.
html-templete폴더에 test.js파일을 만들어서 테스트를 만들어봅시다.
test.js
[code]

var flexApp;

FABridge.addInitializationCallback( "mudchobo", function() {
    flexApp = FABridge.mudchobo.root();
    var callback = function() {
        alert('flex로 호출한 javascript메소드');
    }
    flexApp.getMyButton().addEventListener("click", callback);
});

function callFlexFunction() {
    flexApp.flexFunction('javascript로 호출한 flex메소드');
}
[/code]
FABridge.addInitializationCallback함수는 birdge이름이 mudchobo인 flash가 초기화가 다 되면 호출이 되는 듯합니다. 로드가 다 된 상태면 저 뒤에 함수를 호출하게 되는 듯합니다.
window.onload에다가 때려박으면 FABridge.mudchobo가 undefined가 되더라구요. 이걸로 혈압이 약 10%상승했습니다.
javascript에서 flex버튼 이벤트가 발생했을 때 이벤트를 걸 수 있습니다. getMyButton()네이밍 룰은 flex에서 버튼 id가 myButton이면 getMyButton으로 해당 컴포넌트를 가져올 수 있습니다. id가 mudchobo면 getMudchobo()가 되겠죠. addEventListener에 click시 callback함수를 호출하도록 이벤트를 추가합니다.

그리고, callFlexFunction이라는 메소드를 추가해서 이것은 flex메소드를 호출하는 겁니다.
flexApp객체를 통해 그냥 함수명을 호출하면 호출이 됩니다.

index.templete.html에다가는 head부분에다가
[code]
<script type="text/javascript" src="FABridge.js"></script>
<script type="text/javascript" src="test.js"></script>
[/code]
body부분에다가 button을 추가
[code]
<div>
    <input type="button" id="javascriptButton" value="callFlex" onclick="callFlexFunction();"/>
</div>
[/code]
이제 flex코드로 가봅시다. 우선 FABridge.as파일이 필요합니다. 이 파일은 C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\javascript\fabridge\src에 있습니다. 아주 꼭꼭 숨겨두셨어요-_-;
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:bridge="bridge.*" width="300" height="150">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function flexFunction(data:String):void
            {
                Alert.show(data);
            }
        ]]>
    </mx:Script>
   
    <mx:Button id="myButton" label="callJavaScript" />
   
    <bridge:FABridge />
</mx:Application>
[/code]
중요한 점은 xmlns:bridge="bridge.*"랑 <bridge:FABridge /> 입니다.
이제 실행을 해봅시다.
아...여기서 이제 html-templete내용의 js파일을 고쳤는데 파폭에서 열고 소스보기하면 안바뀌어 있을 때가 있습니다. 그때는 Flex메뉴에서 Project -> clean을 해주면 되더라구요. 이걸로 혈압 10%상승!

실행하면 localhost로 뜨기 때문에 잘 될 겁니다. 소스파일입니다.

다음시간엔 실제 ajax를 요청해봐야겠다-_-;