'FABridge'에 해당되는 글 1건

  1. 2008.08.06 [Flex] Flex와 javascript간의 통신을 쉽게 해주는 FABridge 사용후기. (10)
 
자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.
SecurityError: Error #2060: 보안 샌드박스 문제가 발생했습니다. ExternalInterface 호출자 file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.swf은(는) file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.html에 액세스할 수 없습니다.
    at flash.external::ExternalInterface$/_initJS()
    at flash.external::ExternalInterface$/addCallback()
    at bridge::FABridge/initializeCallbacks()
    at bridge::FABridge()
    at FABridgeTest/_FABridgeTest_FABridge1_i()
    at FABridgeTest()
    at _FABridgeTest_mx_managers_SystemManager/create()
    at mx.managers::SystemManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()
아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 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를 요청해봐야겠다-_-;
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 꽃녀 2008.08.07 10:13  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.
    혈압 60% 상승한 관계로
    조금 있다가 다시봐야겠네용 ;;

    • 머드초보 2008.08.07 13:46  댓글주소  수정/삭제

      아넵 ^^
      혈압이....-_-;
      FABridge랑 swfobject를 연동하려다보니 배로 상승하더군요^^

  2. BlogIcon 검쉰 2008.08.07 14:40  댓글주소  수정/삭제  댓글쓰기

    60^2 % 상승할지도.. ㄷㄷㄷ

    • 머드초보 2008.08.07 14:48  댓글주소  수정/삭제

      핫핫 고혈압으로 쓰러져요 ^^
      바로 댓글을 달아주는 센스-_-;
      남들이 보면 일은 안하고 블로그만 하는줄알겠어요 ㅠㅠ
      이제 일해야지 ㅠ

  3. BlogIcon 전영재 2009.08.04 16:19  댓글주소  수정/삭제  댓글쓰기

    1년이 지나도 혈압은 마찬가지네요.

    • 머드초보 2009.08.07 23:34  댓글주소  수정/삭제

      와 이거 저도 오랜만에 보니까 뭔지 모르겠네요-_-
      내가 뭘쓴거지-_-

  4. 우람궁딩 2009.08.24 18:35  댓글주소  수정/삭제  댓글쓰기

    올려두신 글 잘 보았습니다.
    비슷한 고민을 하던 차에.. 참고가 될만한 반가운 글을 보았습니다.

    ...그런데..
    만약.. 위와 같은 경우에는 플렉스 에플리케이션을 생성해야 하는데..
    플렉스 모듈 컴포넌트를 사용할 경우에는 위 방법이 가능한지 궁금하네요..
    만약 된다면.. 어떤 방법으로 가능한지 조언 부탁드립니다. nn

    proverbs1609@empal.com

    • 머드초보 2009.08.27 10:59  댓글주소  수정/삭제

      음...모듈로 생성한 경우에는 제가 안해봐서 모르겠네요 ㅠ
      FABridge의 활용도는 그렇게 높은 것이 아니라서-_-
      저도 실무에서 사용하는 것을 본적이 없군요-_-

  5. BlogIcon bemga 2010.10.22 15:22  댓글주소  수정/삭제  댓글쓰기

    2년이 지나도 혈압은 마찬가지네요. ㅋㅋ

    • 머드초보 2010.11.05 19:30  댓글주소  수정/삭제

      사실 FABridge가 셋팅만 다하면 쓰기 편할 것 같긴 하지만,
      그냥 js를 호출하고 addCallback만으로도 충분히 구현하는데에는 문제가 없어보이네요~ 안쓰시는게 더 나아요^^