프로젝트 중,
flex 를 이용하여 naver map을 구현하게 되었다.
IE와 FF간의 크로스 브라우저 문제와 함께
flex에서 externalinterface로 navermap으로 함수를 호출하고,
반대로 navermap에서 flex로 함수를 호출하는 것을 구현해 보았다.
(나또한 플렉스를 접한지 하루도 안된 초보이다. 온갖 삽질을 하다 벽에 막히신 분들이 보면 좋을듯 하다.)
일단 대충 그려본 개념도이다.
우리가 손봐야 할것은.
1. flex - flash component 추가
2. flex - action script 함수 선언, external call, callback 선언
3. html, binding flex - javascript 추가
4. html, binding flex - object tag 수정
5. html, binding flex - div, iframe tag 추가
6. html2, navermap - div(map)
7. html2, navermap - javascript 추가
1. flex - flash component(iframe) 추가
인터넷 검색결과 고맙게도 프로페어 님의 IFrame component를 발견할수 있었다.
iframe component
http://cafe.naver.com/flexcomponent/9575
(카페 바로 가입됨)
IFrame.zip파일을 풀면..
Comp폴더에 IFrame.mxml 파일을 플렉스의 src에 추가한다.
javascript폴더의 flexScript.js 파일은 index.template.html파일이 있는 폴더에 같이 넣어둔다.
design 탭을 눌러보면 custom폴더에 IFrame 컴포넌트가 있는걸 확인할수 있다.
고놈을 적단한 곳에 드래그 해서 넣으면 땡
<ns1:IFrame id="iframe" source="" width="100%" height="100%" />
요놈이 그 자리에 생성된걸 확인.
as에서 접근하기 위해 id 확인.
2. flex - action script 함수 선언, external call, callback 선언
app.mxml (만들려는 app)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="on_Creation();" currentState="main" xmlns:ns1="*">
빨간놈 추가후
callback 등록
<mx:Script>에
private function on_Creation():void{
//javascript에서 flex함수 호출용 callback 등록
ExternalInterface.addCallback("test",test);
}
요기도 빨간놈 추가
addCallback에서 함수 밖에 써주면 1120번 에러 발생. -_-;원인불명.ㅠ
그래서 초기화시 동작하는 함수에 써넣어줌.
test라는 함수를 자바스크립트에서 test라는 이름으로 쓸수 있도록 노출하겠다는 의미.
(externalinterface에 대해서는 http://tong.nate.com/etwas0227/29181871 참고)
public function test(t:int):void
{
alert(t.toString());
}
요놈 콜백함수 AS에 정의.
event시 javascript 함수 콜
예를 들어 버튼 클릭시..
<mx:Button label="내글" click="test2();"/>
public function test2():void
{
var w:int = iframe.width;
var h:int = iframe.height;
// javascript의 함수 호출
ExternalInterface.call("setMapSize" ,w, h);
}
3. html, binding flex - object tag 관련 수정
<추가된 부분>
AC_FL_RunContent 부분을 찾아서
"allowScriptAccess","sameDomain",
을
"allowScriptAccess","always",
로 수정(두군데 있음) : 안해줘도 동작잘하긴 한다...-_-;
object tag, 도 원래 sameDomain이었을것이다. id 는 나중에 js에서 as로 콜할때 필요한 id이다.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="192" height="192"id="app">
<param name="movie" value="externalinterface.addCallback.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<embed src="externalinterface.addCallback.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="192" height="192"allowScriptAccess="always" showLiveConnect="true" name="app"></embed>
</object>
4. html, binding flex - div, iframe tag 추가
<div id="iframeLayer"
style="width:0px; height:0px; position:absolute; left:0px; top:0px; z-index:1; visibility:hidden;">
<iframe name="iframeBox" id="iframeBox" src="navermap.html" width="100%"
height="100%" vspace="0" hspace="0" marginwidth="0" marginheight="0"
frameborder="0" scrolling="no"></iframe>
</div>
div의 id는 flexScript.js에서 사용하는 id
iframe의 id, name은 iframe의 함수 접근시 사용하는 name, id
iframe의 초기 src를 적어주어야 처음부터 화면에 나온다.
crossdomain 문제로 인해 navermap.html은 같은 도메인, 디렉토리안에 있을 필요가 있다.
위의 allowScriptAccess="always" 의 역할이 확실치 않으나 script의 접근을 가능하게 해누즞 역할인듯.
crossdomain에서 되는지는 모르겠으나 확실치 않음.
5. html, binding flex - javascript 추가
index.template.html 파일에
<script src="flexScript.js" language="javascript"></script> 를 추가
flexScript.js 파일엔 iframe component에서 사용하는
function iFrameVisible(viewFg,x,y,w,h)
function iFrameLayerReSize(x,y,w,h)
두 함수 포함. 나머지는 필요에 따라 사용
// flex로부터 external call 되는 함수
function setMapSize(w,h)
{
if(document.all) // ie
document.iframeBox.setSize(w,h);
else // ff
document.getElementById("iframeBox").contentWindow.setSize(w,h);
}
ie와 ff의 crossbrowser문제로 인해 각 iframe안의 함수 접근방법이 다름.
// iframe의 함수로부터 콜되는 함수.
////////////
// flex 객체 얻어서 돌려줌
function getFLEX(app)
{
if (navigator.appName.indexOf("Microsoft") != -1)
{
//alert("ms");
return window[app];
}
else
{
//alert("ff");
return document[app];
}
}
// 역시 crossbrowser 문제.
//자식 iframe의 javascript에서 call하는 부모의 javascript
function cb(t)
{
// flash 객체를 얻어다 그 안에서 미리 노출된 함수 호출
getFLEX("app").test(t);
}
6. html2, navermap - div(map) - 원래의 navermap 구현방법과 동일, 생략.
http://openapi.naver.com 참조할것
7. html2, navermap - javascript 추가
//부모의 js로 부터 call되는 함수
function setSize(w,h)
{
document.getElementById("mapContainer").style.width=w;
document.getElementById("mapContainer").style.height=h;
}
// 부모의 js를 호출하는 함수
function clickbtn(val)
{
parent.cb(val);
}
<div onclick="clickbtn(1);">클릭</div>
또는
navermap의 click event 등록(역시 navermap 사용법 참고)
이상 끝.
결과
(내부ip임. 외부에서 test안됨.)
혹시나 흐름을 말하자면,
1. view (flex에서 navermap불러오기)
index.template.html의 iframe의 src를 읽어서 iframe객체를 만들고,
flex 에서 그 iframe을 불러서(component) flex위로 overlay
2. flex - navermap간의 함수호출
flex event에서 aF()콜
aF()에서 externalinterface.call("jF1",args)
index.template.html의 javascript jF1(args)호출
jF1(args)에서 navermap.html(iframe)의 javascript jF2(args)콜
navermap의 element control
3. navermap - flex간의 함수 호출 (편의상 이름을 위의것과 같이 사용. 실제로는 다른 함수이어야 함.)
navermap event - jF2()콜
jF2()에서 index.template.html(iframe의 부모html)의 jF1(args)콜
jF1(args) 에서 actionscript의 aF()콜
(callback 노출된 함수 - 미리 externalinterface.addCallback("aF",aF)로 callback등록)
flex의 event 처리
---------------------------------------------------------------------------------------------
참고자료
iframe
http://cafe.naver.com/flexcomponent/9575externalinterface
http://tong.nate.com/etwas0227/29181871object, parameter setting
<플생사모>
http://cafe.naver.com/flashdev/8093externalinterface (addCallback 하는 위치)
<지돌스타 님>
http://blog.jidolstar.com/214navermap api
<네이버 api>
http://openapi.naver.com
이 글과 관련있는 글을 자동검색한 결과입니다 [?]
