Creative Wrong Answer

ExternalInterface 세번째 입니다.

ExternalInterface가 뭔지 전혀 모르겠다 하시는 분은
2009/12/30 - [Flex/ExternalInterface] - ExternalInterface 기본기
이 포스트를 먼저 읽어 보고 오시면 됩니다.

자바스크립트에는 유용한 기능들이 많습니다.
가장 많이 사용하는 window 객체에는 브라우저의 정보 및 페이지 정보를 알아올수 있는 메서드들이 포함되어있는데 페이지 정보는 location에 들어있습니다. 그중 몇가지를 살펴보면 아래와 같습니다.

window.location.href
주로 페이지 이동시에 많이 사용했던 속성인데 저 자체로는 현재 페이지의 정보를 가지고 있습니다.

아무사이트나 들어간 후에 주소창에 javascript:window.location.href 라고 쓰게 되면 현재 페이지 주소가 나타납니다.
자바스크립트는 클라이언트에서 직접 실행되는 스크립트이기 때문에 기본 메서드 같은 경우 이런식으로 브라우저 주소창에 쓰면 대부분 실행됩니다.

window.location.hostname
페이지의 호스트 주소 정보를 반환합니다.

window.location.pathname
호스트 네임 뒤로 실제 페이지까지의 경로를 반환합니다.

window.location.search
주소 부분에서 get방식으로 넘어온 파라미터 부분을 반환합니다.
이게 중요합니다.
플렉스에서 get방식의 파라미터를 받아올때에도 이것을 사용합니다.

간단하게 예제를 봅시당.

주소 예제 : http://rinn.kr/post/aa.html?blogID=rinn&name=퍼플린

window.location.href : http://rinn.kr/post/aa.html?blogID=rinn&name=퍼플린
window.location.hostname : rinn.kr
window.location.pathname : /post/aa.html
window.location.search : ?blogID=rinn&name=퍼플린

딱 보면 뭘 어떻게 사용해야 할지 감이 오실꺼라 생각됩니다.

HTML 페이지나 플렉스 어플리케이션에서 새창으로 다른 어플리케이션을 띄우면서 파라미터를 넘겨줘야 하는 경우가 생기는 상황이 많이 발생합니다.
내부에 로드 하는 경우는 여러가지 방법으로 데이터를 교환 할수 있지만 브라우저 자체가 달라지는 경우 에는 좀 힘들게 됩니다.

플렉스에서 넘어온 파라미터를 받는 Application.application.parameters 같은 경우 flashVar 로 넘어오는 것만 받을수 있습니다.
따라서 플렉스의 swf 를 임베드 할때에 파라미터를 같이 세팅 해줘야 하고 자바스크립트로 배열을 미리 만들어놓는다거나 해서 받아오도록 처리했었습니다.
데이터가 많아지거나 가변적이거나 할 경우 이런 방법은 꽤나 버그를 유발할수 있는 소지가 많습니다.

직접 주소를 가져다가 그냥 짤라서 사용하기만 하면 되니 이쪽이 더 쉬울꺼라 생각됩니다.

어플리케이션간에 파라미터 이동을 나만 고민 하지는 않았겠지요.
당연합니다 구글에 이미 사용이 가능한 소스도 있습니다


public static function getParameterValue(key:String):String
{ 
	var value:String;
	var uparam:String = ExternalInterface.call("window.location.search.toString");
	
	if(uparam==null)
	{
    	return null;
    }
    var paramArray:ArrayCollection = new ArrayCollection(uparam.split('&'));
    for(var x:int=0; x-1)
    	{
    		value = (p.replace((key + '='), '')).replace('?','');
    		x=paramArray.length;
    	}
    }
    
    return value;
}
깔끔하게 키값으로 받아올수 있도록 구현되어있습니다.


ExternalInterface.call("window.location.search.toString");

이렇게 직접 호출한 놈을 가지고 파싱해서 키에 맞는 value 값을 리턴해줍니다.

아래의 소스는 key-value 의 object로 넘어온 놈들을 전부 리턴 해주는 함수 입니다.


public static function getAllParameters():Object
{
	var _params:Object = {};
	var uparam:String = ExternalInterface.call("window.location.search.toString");
	
	if(uparam==null)
	{
    	return null;
    }
	
	uparam = uparam.replace('?','');
	
	var params:Array = uparam.split('&');
	var length:uint = params.length;
	
	for (var i:uint=0,index:int=-1; i<length; i++) 
	{
		var kvPair:String = params[i];
		if((index = kvPair.indexOf("=")) > 0)
		{
			var key:String = kvPair.substring(0,index);
			var value:String = kvPair.substring(index+1);
			_params[key] = value;
		}
	}
	return _params;
}

이처럼 자바스크립트를 사용할수 있는 Externalinterface는 활용할수 있는 부분이 꽤 많습니다.
이 글을 보시게 되는 분들도 좋은 방법이 있으면 저한테도 공유좀 부탁드립니다 -ㅅ-;;;




ps.
전체를 가져오는 소스와 키로 받아오는 소스는 제작자가 다른 소스 입니다.
북마크를 날려먹은 관계로 원본 블로그 주소를 찾을수가 없군요.
이곳저곳에서 퍼다가 링크 걸어놓은 주소는 있는거 같은데.. 쩝;
아시는분은 댓글로 남겨주시면 제작자 블로그 링크를 추가 하도록 하겠습니다.

저작자 표시 비영리 동일 조건 변경 허락
신고

Comment +2

  • 트랙백 감사합니다. ExternalInterface를 이용해 JS의 API를 사용하는 것은 좋은 방법이긴 하지만 약점도 있습니다. 바로 웹브라우져에서 동작하지 않고 독립 Flash Player에서 동작하거나 AIR에서 동작하는 경우입니다. 이때는 ExternalInterface를 이용하는 것자체가 무의미합니다. 물론 반드시 웹브라우져에서 동작한다는 것을 가정한다면 상관없습니다. ^^

    • 브라우저에서만 가능 하다는 내용은 기본기쪽을 쓰면서 언급 하기는 했습니다.

      아무래도 작업 하는쪽이 웹쪽만 작업 하다보니 별 생각없이 사용하게 되는거 같어요 ㅎㅎ

ExternalInterface가 뭐하는건지 잘 모르는 분은
2009/12/30 - [Flex/ExternalInterface] - ExternalInterface 기본기  이 글을 보고 오면 됩니다.

ExternalInterface 가 자바스크립트의 함수를 실행시키기만 하는것이 아니고.

이전 글에 있듯이.

Externalinterface.call("window.alert('아싸~')");
처럼 자바스크립트 내장객체를 호출하거나 메서드를 실행하는것도 가능합니다.
이걸 이용해서 예전에 유행했던 윈도우 창 흔들기를 간단하게 구현해보도록 하겠습니다.



버튼을 클릭해보세요. 파일을 업로드 했습니다 ㅎㅎ

역시 아쉽게도 글쓰는 곳이 파일 업로드가 안되서 이 블로그를 흔드는것은 시범을 보여드릴수가 없고 어플리케이션 하나 만들어서 아래소스를 붙여넣기 하고 실행해보시면 됩니다.

import mx.controls.Alert;

private var timer:Timer;
private var dir:Boolean = false;
private var offsetX:int;
private var offsetY:int;

private function shakeWindow():void
{
	offsetX = int(Math.random() * 20);
	offsetY = int(Math.random() * 20);
	
	timer = new Timer(30, 10);
	timer.addEventListener(TimerEvent.TIMER, shakeIt);
	timer.addEventListener(TimerEvent.TIMER_COMPLETE, stopShake);
	timer.start();
}

private function shakeIt(e:TimerEvent):void
{
	if(dir)
	{
		offsetX = -offsetX;
		offsetY = -offsetY;
	}
	dir = !dir;
	ExternalInterface.call("window.moveBy("+offsetX+","+offsetY+")");
}

private function stopShake(e:TimerEvent):void
{
	timer.removeEventListener(TimerEvent.TIMER, shakeIt);
	timer.removeEventListener(TimerEvent.TIMER_COMPLETE, stopShake);
}

스크립트 블록은 이렇게 되고 버튼 하나 만들어서 shakeWindow()를 호출해주시면 됩니다.

자바스크립트의 window.moveBy(x,y) 함수는 현재의 윈도우 위치에서 x, y 만큼 윈도우를 이동시켜주는 함수 입니다.

간단하게 offset 값을 정해주고 해당 타이머가 돌아가는동안 윈도우를 움직인다.
이걸로 끝입니다.

간단한 것이 가능하다면 복잡한것도 가능합니다.

브라우저 쿠키를 AS 3.0 만으로 만들고 삭제하고 읽어들이고 할수도 있습니다.
AS3 에는 같은 기능을 하는 SharedObject가 있지만 프로젝트에 따라서 쿠키를 사용해야 하는 경우가 있는데 이런경우 html에 추가 해야 하는 불편 없이 추가 할수 있습니다.

이부분은 이미 잘 만들어진 것이 있기 때문에 따로 구현하지 않고 링크로만 대신합니다.


저 링크에서 보듯이 Externalinterface를 사용해서 뭘 할것이냐는 전적으로 아이디어에 달려있는것 같습니다.
그냥 간단하게 정보 확인용으로만 사용할수도 있고. javascript에서만 가능한것들과 연계해서 뭔가 훨씬 재밌는것들을 찾아낼수도 있지 않을까 싶습니다.


저작자 표시 비영리 동일 조건 변경 허락
신고

Comment 0


ExternalInterface는 swf 파일을 싸고 있는 컨테이너 html 의 자바스크립트와 통신하기 위한 인터페이스 입니다.

ExternalInterface.call을 사용해서 html에 있는 자바스크립트 함수를 실행 시킬수 있고
ExternalInterface.callback을 사용해서 자바스크립트에서 SWF의 함수를 실행시킬수 있습니다.

이전 AS 2.0 에서는 fscommand()가 자바스크립트와의 통신에 사용되었는데 Player 9 버전 이후에는 Externalinterface를 사용하도록 권장하고 있습니다.

html과 함께 사용되는 것이기 때문에 swf만 실행시키거나 stand alone player에서 실행시키면 디버그 창을 만날수있습니다.

ExternalInterface가 중요한 이유가 C# 등 윈도우프로그램을 사용할경우 C#이 플레이어 api를 가지고 ExternalInterface를 구현해 놓으면 SWF와 윈도우 프로그램간의 통신 프로토콜로도 사용할수 있습니다.

addCallback(functionName:String, closure:Function):void
[정적] 컨테이너로부터 호출 가능하도록 ActionScript 메서드를 등록합니다.

functionName은 자바스크립트에서 플레시로 호출할때의 이름입니다. closure는 해당 이름을 플레시플레이어가 받았을때 호출할 함수 입니다.

addCallback 에서 String으로 키워드를 받고 그것에 closure에서 정의된 함수를 호출하는 구조이기 때문에 callback 에서 자바스크립트가 부르는 함수는 실제로 swf의 함수 이름이 아닐수도 있습니다.

콜백을 등록하기 전에 ExternalInterface.available을 사용해서 swf를 싸고 있는 컨테이너가 ExternalInterface를 지원 하는지 확인 후에 등록하는 것이 좋습니다.

call(functionName:String, ... arguments):*
[정적] 0개 이상의 인수를 전달하는 Flash Player 컨테이너에 의해 노출된 함수를 호출합니다.

call 함수는 자바스크립트의 함수 이름을 직접 지정하게 됩니다.
call 에서 부르는 함수는 실제 자바스크립트 함수의 이름이어야 합니다.

ExternalInterface.call 함수가 유용한 이유는 자바스크립트 함수를 단지 호출하는게 문제가 아니라 함수 실행 위치가 컨테이너로 옮겨간다는데 있습니다.

무슨소리냐 하면. functionName이 꼭 이름만 호출해야 할 필요가 없다는거죠. 저기에 html상에서 실행될수 있는 자바스크립트 함수가 직접 들어갈수 있습니다.

ExternalInterface.call("window.alert('아싸~')");
이렇게 하게 되면 Flex의 Alert 함수가 아닌 윈도우얼럿이 뜨게 됩니다.

Flex에서 IFrame 컴포넌트를 사용한다거나 하게 되면. 레이어가 플렉스보다 위쪽에 생기게 되어서 Flex Alert을 사용하게 되면 알람메시지가 IFrame컴포넌트보다 하위에 나와서 보이지 않게 되는데 이럴때 유용하게 사용할 수 있습니다.

자바스크립트 정리된 사이트가 갑자기 필요하게 되는 순간입니다.. -ㅅ-;;;

기본적인 내용은 여기서 마치고 다음 글에서 실제 이걸로 활용할수 있는 것들에 대해서 써보겠습니다.
ExternalInterface의 예제 들은 검색에 쳐보면 많이 나오기 때문에 패스 하도록 하겠습니다.

더큰 이유는 제가 이글을 쓰고있는곳이 파일첨부가 안됩니다..
보안프로그램과 방화벽때문에.. ㅠㅠ
부득이하게 이번 글은 예제 파일은 없이 갑니다 -ㅅ-~

Tip.

ExternalInterface는 동기로 동작하게 됩니다. 일반적인 플렉스 처럼 비동기가 아니고 콜백을 받거나 call을 하게 되면 플렉스함수가 실행되지 않고 멈추게 됩니다.
위에서 나온 alert을 띄우는것을 가지고 테스트 해보시면 됩니다.
Alert이 뜨는 순간 그 다음에 있는 플렉스 함수들은 실행되지 않습니다.

call을 호출하고 그 결과를 받을때에도 이벤트방식으로 동작하지 않기 때문에 결과가 올때까지 swf는 멈춰있게 됩니다. 테스트 해보시고 적용하실때 고민해서 적용하시는것이 자잘한 버그를 생산하지 않는 원동력이 됩니다..

다음 포스트에서는 응용편을 써볼까 합니다. 그럼..~
저작자 표시 비영리 동일 조건 변경 허락
신고

Comment 0