Adobe AIR에는 Webkit 브라우져 엔진이 내장되어 있어 IE나 FireFox와 같은 브라우져 기능을 만들 수 있다. 단순히 그런 기능만 제공하는 거라면 흥미가 떨어지겠지만 중요한 점은 로드되는 컨텐츠에 DOM형태로 접근할 수 있어 실제로 Element를 추가하거나 뺄 수 있고 함수까지 재정의도 가능하다. 이러한 작업을 Javascript에 대한 지식이 있다면 쉽게 할 수 있기 때문에 이것을 이용한 다양하고 재미있는 시도를 해볼 수 있다.

개발환경은 Flash Builder 라고 가정하겠다. 물론 Flash IDE에서 해도 무방하다.


AIR에서 DOM 접근의 예

AIR에서 DOM에 접근해보는 재미있는 예를 들어보겠다.

Javascript에는 alert() 함수가 존재한다. 알다시피 경고창 띄워주는 함수이다. 이 함수를 AIR에서 커스터마이징할 수 있다. 가령, 원래기능인 경고창을 띄워주지 않고 넘겨준 문자열 정보를 Flash Builder의 Console창에 출력하도록 하는 것이다. 이 기능을 구현해보자.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Test</title>
<style type="text/css">
	body { background-color: #aaaaaa; }
</style>
</head>
<body>
	<input type="button" value="alert( 'Hello' )" onclick="alert('Hello')"> 
	<input type="button" value="alert( 'I', 'love', 'you' )" onclick="alert('I', 'love', 'you')">
</body>
</html>

위 HTML코드는 Button을 누르면 alert() 함수로 경고창을 띄워준다.

AIR에서 이 HTML 문서를 로드하는데 HTMLLoader 클래스로 할 수 있다. 이 클래스는 Webkit 엔진을 한번 감싸서 AIR개발자가 손쉽게 사용할 수 있도록 한다. HTMLoader의 load()를 이용해 HTML문서를 로드하고 alert를 아래 코드와 같이 재정의 할 수 있다.

var _html:HTMLLoader = new HTMLLoader();
_html.addEventListener( Event.HTML_DOM_INITIALIZE, __ON_HTML_DOM_INITIALIZE );
_html.load( new URLRequest("test.html") );
stage.addChild(htmlLoader);

private function __ON_HTML_DOM_INITIALIZE($e:Event):void {
	//javascript의 alert 함수를 actionscript에서 재정의했다.
	_html.window.alert = function():void {
		trace( arguments );
	}			
}

참고 1. 위 코드는 완벽한 코드는 아니다. 중요부분만 떼어내었다.
참고 2. _html.window.alert 내에 재정의 된 함수에 arguments가 뭐냐고 물어보신다면... 
Adobe문서를 참고하자. 이런것이 가능한 것은 Actionscript와 Javascript가 모두 ECMAScript 규약을 따르고 있기 때문이다.

Event.HTML_DOM_INITIALIZE 이벤트는 HTML DOM이 만들어졌음을 알려주는 이벤트로 이때부터 HTML의 DOM에 접근할 수 있다. 하지만 모든 DOM이 만들어지는 것을 의미하지 않으며 가장 기본적인 구조만 접근이 가능해진다. 완벽한 DOM구조에 접근하려면 Event.COMPLETE 이벤트를 핸들링해야한다. 

위 ActionScript 코드의 __ON_HTML_DOM_INITIALIZE() 이벤트 핸들러에서 브레이크 포인트를 찍어서  디버깅 모드로 실행해보면 다음과 같은 DOM구조를 볼 수 있다.


위처럼 내부적으로 정의된 __HTMLScriptObject 객체가 HTMLLoader의 window속성으로 참조되어 있는 것을 확인할 수 있고 alert도 여기에 포함되어 있는 것을 확인할 수 있을 것이다. 저기에 있는 HTML 내부 속성을 모두 개발자가 커스터마이징 할 수 있다는데 매우 흥미를 느끼지 않는가?

Flash Builder에서 디버깅 모드로 실행해보면 다음 처럼 윈도우가 나오고 test.html이 HTMLLoader에 로드되는 것을 볼 수 있다. 



위 버튼을 누르면 누를때마다 alert창이 뜨지않고 다음처럼  Flash Builder의 Console창에 출력된다.


굳이 Event.COMPLETE가 아니라 Event.HTML_DOM_INITIALIZE 이벤트 발생시 alert를 재정의 하는 것은 Event.COMPLETE 이전에 Javascript가 얼마든지 실행될 수 있기 때문이다. 그러므로 어느때든지 alert가 원래기능을 수행하지 못하게 하는데 가장 적절한 시점은 바로 Event.HTML_DOM_INITIALIZE 이벤트가 발생할 때이다.


사용자 정의 Trace() 만들자.

AIR의 HTMLLoader를 통해 불려지는 HTML의 디버깅은 쉽지 않다. 왜냐하면 Flash Builder나 FireFox와 같은 디버깅 툴을 사용할 수 없기 때문이다. 이 때문에 복잡하게 만들어진 JavaScript 코드와 HTML이 섞여 있는 경우라면 어떤 경우에 문제가 발생하는지 찾는것 조차 어려워진다. 

Flash Builder에서는 trace()문을 사용하면 디버깅에 크게 도움이 된다. 비록 브레이크 포인트를 찍으면서 값을 추적할 수 없지만 trace()문 하나만으로도 많은 부분 문제를 해결하는데 도움을 준다.

그럼 JavaScript내에 강제적으로 trace()함수를 정의하고 개발자가 필요할때 HTML문서상에서 이 함수를 호출하면 AIR 애플리케이션에 trace으로 들어온 인자값을 출력해주면 어떨까? alert()를 커스터마이징 했었다는 것을 충분히 이해했다면 이 부분도 그리 어려운 것은 아니다.

private function __ON_HTML_DOM_INITIALIZE($e:Event):void {
	_html.window.trace = function():void {
		trace( arguments );
	}			
}

참고 : _html.window.trace는 로드되는 HTML DOM에 trace()함수를 정의한 것이고 함수내에 trace()는 ActionScript의 trace라는 것을 인식하자.


이미 보여준 ActionScript 코드에서 alert 재정의 대신 trace를 정의하도록 만들었다. 이미 언급한 HTML문서에서 onclick="alert()" 구문대신 onclick="trace()" 로 바꿔보자.

디버깅 모드로 실행하면 Flash Builder의 Console창에 버튼을 클릭할때마다 메시지가 보이는 것을 확인할 수 있을 것이다.

이 방법은 꽤 유용하다. 웹개발자가 만든 HTML문서가 AIR의 Webkit에도 제대로 동작하지 않는 경우도 꽤 발생한다. 이런경우 어느 지점에서 문제가 되는지 알 수 없어 alert()만 의지해서 디버깅하는 것은 웹개발자에게 너무 가혹하다. AIR개발자는 웹개발자를 위해 이 정도의 기능을 최소한으로 제공해서 웹개발자의 어려움을 덜어주어야 한다고 생각한다.


몇가지 문제점 극복하기

하지만 아직까지 문제는 있다.

1. IFrame으로 로드되는 컨텐츠는 AIR에서 정의한 trace를 직접사용할 수 없다.
이런 점을 극복하기 위해서 iFrame에 로드되는 문서에서는 parent.trace() 처럼 사용하면 어느정도 해결이 된다.

2. 기존에 사용하는 HTML문서가 이미 웹상에서 서비스되고 있을때 HTML내 실수로 trace()문을 그대로 남겨두게 되는 경우 문제가 발생한다. 왜냐하면 AIR에 로드되는 경우는 강제적으로 trace()함수를 정의하지만 일반 웹브라우져에서 로드되는 경우에는 trace()정의가 없으므로 trace()함수를 호출하면 에러를 던질 것이기 때문이다. 물론 이런 경우가 발생하지 않도록 웹개발자의 꼼꼼한 테스트가 필요하지만 그게 말처럼 쉬울까?

이처럼 웹상에서 trace()가 쓰여도 웹개발자의 실수로 인해 trace()를 지우지 못해 발생하는 문제를 해결할 방법은 있다. 먼저 아래처럼 common.js 파일을 만든다.
try {
	trace; //trace문이 정의되었는가?
} catch(e) {
	trace = function() {}; //정의되어 있지 않으면 강제로 만들어준다.
}

그 다음 서비스되고 있는 모든 HTML에 common.js를 아래처럼 import한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Test</title>
<script type="text/javascript" src='common.js'></script>
<style type="text/css">
	body { background-color: #aaaaaa; }
</style>
</head>
<body>
	<input type="button" value="trace( 'Hello' )" onclick="trace('Hello')"> 
	<input type="button" value="trace( 'I', 'love', 'you' )" onclick="trace('I', 'love', 'you')">
</body>
</html>

모든 HTML문서에 common.js가 있어야 한다는 점을 기억하자. 중요하게 봐야할 것은 common.js의 동작방식이다. 이 HTML문서를 AIR에서 로드되면 DOM이 생성되자마자 trace를 정의하므로 try..catch문에서 catch()문으로 가지 않는다. 하지만 일반 웹브라우져에서 로드하면 trace가 생성되지 않아 catch()문이 실행되게 된다. 그러니 웹개발자가 trace()문을 실수로 지우지 않아도 AIR에 로드되든 일반 웹브라우져에 로드되든 문제가 발생하지 않는다.


실용적으로 만들어보자. 

AIR에 로드되는 HTML문서에서 trace()문을 이용하는 방법을 알 수 있게 되었다. 이를 좀더 실용적으로 테스트 해볼 수 있도록 만들기 위해서는 trace()의 결과가 console창에만 나오는 것이 아니라 별도의 창을 띄워서 언제든지 trace()내용을 확인할 수 있도록 하는 것이 좋다. 이것은 AIR 개발자와 웹페이지 개발자가 다른 경우 AIR개발자가 웹페이지 개발자에게 해줄 수 있는 최소한의 배려이다.

여기서는 최소한의 기능만 보여주려고 한다. 아래처럼 창 2개가 있다. 좌측창은 HTML를 로드한 지금까지 예제이고, 우측창은 trace문의 결과물을 보여주는 창이다.


이것을 구현하기 위해 ActionScript 3.0으로 만들어보자. Flash Builder에서 개발한다면 Flex 프로젝트를 생성하되 Application type은 Desktop(AIR)로 하고 Main Application file 이름을 .mxml이 아닌 .as로 끝나는 확장자를 가지도록 만들어야한다. 나는 Main.as로 만들었다.

Main.as
package {
	import flash.display.NativeWindow;
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * 메인 애플리케이션 
	 * @author jidolstar
	 */
	public class Main extends Sprite {
		public function Main() {
			//브라우져 띄우기 
			var window:BrowserWindow = new BrowserWindow();
			window.width = stage.stageWidth;
			window.height = stage.stageHeight;
			window.load( "test.html" );
			window.activate();
		}
	}
}


BrowserWindow.as


package {
	import flash.display.NativeWindow;
	import flash.desktop.NativeApplication;	
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.html.HTMLLoader;
	import flash.net.URLRequest;

	/**
	 * Trace 테스트용 브라우저 윈도우
	 * @author jidolstar
	 */
	public class BrowserWindow extends NativeWindow {
		private var _html:HTMLLoader;
		private var _trace:TraceWindow;

		/**
		 * 생성자 
		 */
		public function BrowserWindow() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			//윈도우 옵션
			var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
			initOptions.type = NativeWindowType.NORMAL;
			super(initOptions);
			
			//HTML 로더 
			_html = new HTMLLoader();
			_html.width = stage.stageWidth;
			_html.height = stage.stageHeight;
			_html.addEventListener(Event.HTML_DOM_INITIALIZE, function ($e:Event):void {
				//DOM에 trace 함수를 정의한다. 
				_html.window.trace = function():void {
					var str:String = "";
					for( var i:int = 0; i < arguments.length; i++ ) {
						str += arguments[i] + " ";
					}
					//결과물을 창에 출력해준다.
					_trace.addString( str );
				}
			});
			stage.addChild(_html);
			
			//Trace 결과물을 보여주는 창 
			_trace = new TraceWindow();
			_trace.width = 300;
			_trace.height = 300;
			_trace.activate();
			
			//창이 닫힐때 모든 윈도우를 닫는다.
			addEventListener(Event.CLOSING, function($e:Event):void {
				var openedWindows:Array = NativeApplication.nativeApplication.openedWindows;
				for each( var window:NativeWindow in openedWindows ) {
					window.close();
				}
			} );	
			
			title = "browser";
		}
		
		public function load($url:String):void {
			_html.load( new URLRequest( $url ) );
		}
		
	}
}


TraceWindow.as

package {
	import flash.display.NativeWindow;
	import flash.display.NativeWindowInitOptions;
	import flash.display.NativeWindowType;	
	import flash.text.TextField;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	/**
	 * Trace를 출력해주는 윈도우
	 * @author jidolstar
	 */
	public class TraceWindow extends NativeWindow {
		private var _textField:TextField;
		private var _traceText:String = "";

		public function TraceWindow() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions();
			initOptions.type = NativeWindowType.NORMAL;
			super(initOptions);

			_textField = new TextField();
			_textField.width = stage.stageWidth;
			_textField.height = stage.stageHeight;
			stage.addChild(_textField);
			
			title = "trace window";
		}

		public function addString($value:String):void {
			_textField.appendText($value + "\n");
		}
	}
}


물론 이것은 ActionScript 3.0 코드이고 이미 언급한 HTML(test.html) 및 common.js 도 함께 소스에 포함해야한다.

아래는 위 코드들을 압축한 소스이다.


예제는 단순하지만 더 응용해서 컴포넌트화 시키면 좋을 것이다.


정리하며
Adobe AIR의 장점은 크로스 OS, 기존 Flash/Flex 개발자의 접근 향상 정도만 있는 것은 아니다. Adobe는 웹과 매우 친하면서도 데스크탑 영역으로까지 확장했다. 여기서 웹과 매우 친하다는 말에 주목할 필요있다. 웹브라우져에 올라온 Flash와 AIR가 별도의 설치 없이 서로 통신할 수 있고 웹브라우져에서 AIR를 실행할 수도 있다. 또한 오늘 언급한 것처럼 dom에 대한 접근이 매우 쉬운 것도 있다. 아직까지 AIR가 성능 및 기술적 한계가 분명 존재하지만 버전업을 거듭하면서 더욱 나아지고 있다. AIR의 장점을 명확히 인식한다면 AIR만의 매력을 느낄 수 있지 않을까 생각한다.

아래 링크로부터 AIR에 관련된 정보를 얻을 수 있다.

글쓴이 : 지돌스타(http://blog.jidolstar.com/650)

저번주 2009년 5월 23일 서울 서초동 비트컴퓨터 멀티미디어관 지하 2층에서 OKGosu.net 세미나가 있었습니다. 저는 "스타플(starpl.com) 서비스에 이용된 Flex 기술" 이라는 제목으로 발표를 했습니다.

 

스타플 홍보도 하고 싶고 함께 기술도 공유하고 싶어서 그랬는지 주제 자체가 너무 커져서 많은 것을 전달하지 못해 약간 아쉬움이 남는 시간이였던 것 같습니다.

 

이번 세미나로 제가 말씀드리고 싶었던 것은 아래 내용이였습니다.

 

1. 스타플 소개

2. Flex를 도입할 때 고려해야할 사항

3. 개발 방법 소개

4. 모듈 개발시 최적화 방법

5. Flex 학습방법

 

한가지만 해도 30분 이상씩 잡아야 제대로 설명이 가능한 건데 너무 많은 주제를 놓고 이 모든 것은 40분 내에 말할려고 했네요. ^^;;

 

약간 보충해서 설명드릴께요.

 

1. 스타플 소개

스타플 구경을 못드렸네요. http://starpl.com 에 가시면 구경하실 수 있답니다.

홍보 동영상을 다시한번 보고 싶으시다면 "홍보영상보기"를 눌러주세요.

스타플에 대해서 더 알고 싶다면 제 블로그에서 스타플로 검색해보세요.

 

2. Flex를 도입할 때 고려해야할 사항

발표시 말씀드렸던 것은 Flex/Flash 중 도입 선택에 대한 문제였습니다. 어떤 경우에는 Flex를 도입하는 것이 맞는 반면 경우에 따라서는 Flex를 쓰는 것이 오히려 문제가 될 수 있습니다. 가령, Flex Framework에서 제공하는 컴포넌트를 거의 사용하지 않는데 Flex를 도입하는 것은 무리입니다. 또한 Flex를 도입하면 쉽게 해결될 것을 Flash로 만들면 그것 또한 문제지요. 이 점을 잘 생각하시고 선택하시길 바래요.

 

3. 개발 방법 소개

제 개인적인 개발 방법을 소개했습니다.

분석-설계-제작-테스트-배포 형태로 된다는 것을 설명드렸죠.

말씀 드리고 싶었던 것은 "기획자, 디자이너간에 커뮤니케이션 중요하다. 서로 존중하면서 대화에 임하라."라는 것과 제작환경 구성시 "ANT, SVN은 꼭 잘 활용해라"라는 것이였습니다. 더불어 통신관련 도식화와 애플리케이션 도식화, 그리고 UML 제작을 개발하기 전에 꼭 해보라는 것이였습니다. 이러한 작업은 앞으로 문서화에도 도움이 되며 다른 사람에게 인수인계할때도 좋고요. 나중에 그 프로그램을 다시 보더라도 내가 짠 것 내가 이해 못하는 꼴이 발생하지 않습니다. ^^

 

4. 모듈 개발시 최적화 방법

SWF가 다른 SWF를 로드하고 Class를 서로 참조하는 일이 발생하는 개발을 하게 되면 모듈 프로그래밍을 한다고 할 수 있습니다. 중요한 것은 다른 SWF간에 정의된 Class중복을 어떻게 해결할 것인가였습니다. 중복 자체가 크게 문제를 일으키는 것은 아니지만 필요없는 Class를 가지고 있기 때문에 프로그램 용량이 그만큼 커집니다. 그래서 중복된 Class를 없애기 위해 RSL도 이용해보고 mxmlc 컴파일러 옵션에 -include-libraries, -load-externs, -link-report 등의 옵션을 사용하는 예도 보여드렸습니다.

 

Main애플리케이션과 모듈이 서로 같은 Class를 담고 있는 경우 그대로 로드하면 어느 한쪽의 클래스를 사용하게 되겠지요. 이때 중요한 개념이 ApplicationDomain인데 제가 이 설명을 빠뜨렸습니다.

 

이 이야기는 다음 링크를 참고하세요.

Flex 모듈 프로그래밍의 기초 - Application domain의 이해 1부

Flex 모듈 프로그래밍의 기초 - Application domain의 이해 2부

 

 

5. Flex 학습법

이 부분은 시간관계상 설명 못드렸네요.

어떻게 보면 매우 중요한 부분인데 ㅎㅎ

제가 말씀 드리고 싶었던 것은 Flex 낚는 어부가 되시라는 거였습니다. Flex라는 물고기만 계속 받아먹기만 하면 발전이 없잖아요. 그래서 Flex 낚는 어부가 되기 위해 이것만은 했으면 좋겠다는 내용이였죠. 설명 못드려 아쉽네요. 시간조정을 못한 제 불찰입니다. ㅜㅜ

 

 

아무튼 짧았지만 좋은 시간이였던 것 같습니다. 제가 발표했던 자료는 아래 링크를 통해 받아가세요.

 

 

다른 분의 자료는 [여기]에서 받아가세요.

 

이번 세미나를 개최하시느라 고생하신 옥상훈(http://okgosu.tistory.com)님 수고 많으셨고요.

주최에 도움을 줬던 데브멘토(http://devmento.co.kr) 관계자 분들도 수고 많으셨습니다.

 

발표자였던 오창훈(http://lovedev.tistory.com/), 이정웅(http://bluemetal.tistory.com/)님도 수고했어요.

 

저는 항상 열려있습니다.

저처럼 바보같은 질문도 괜찮습니다. 반대로 제가 답변 못하더라도 전 부끄럽지 않습니다.

오히려 몰랐던 것을 알게 되니 좋은 것이지요. ^^

대한민국 개발자들이 서로 소통하는데 힘써주셨으면 합니다.

 

 

 

 

Flash Player가 Cross OS, Cross Browser가 된다고 한다지만 유독 한글 입력 문제에 있어서 만큼은 제대로 되지 않는 경우가 있다. 가령 MS Windows 환경에서 Explorer외에 Firefox, Safari, Chrome, Opera 등에서 SWF를 브라우저에 Embed할 때 wmode를 transparent로 지정하면 TextField에 한글입력이 되지 않는다.(2009년 3월 25일 현재)

 

본인은 스타플(http://starpl.com)의 별지도에 댓글 달기 기능을 추가하면서 사용자의 OS, Browser를 판별하여 한글입력이 되지 않는 Browser의 경우 "*한글 입력이 되지 않아요!"라는 문구를 넣어야 했다.

 

 

위처럼 IE 경우엔 한글입력이 잘되므로 문구가 필요없다.

 

 

그러나 FireFox의 경우에는 한글입력이 되지 않아서 문구가 들어간다. 저 문구를 누르면 문제에 대한 안내페이지로 이동하게 되어 있다.

 

불행히도 ActionScript 3.0 라이브러리에서는 사용자가 어떤 브라우져를 이용하는지 알 수 있는 API를 제공하지 않고 있다. 그럴만도 한 것이 SWF는 브라우저에 Embed되어 작동되는 것 외에도 Flash Player 자체에서도 동작하기 때문일 것이다. (참고로 flash.system.Capabilities의 os 속성을 이용해 운영체제의 상세정보는 얻어올 수 있다.)

 

다행히도 사용자의 Browser정보를 알 수 있는 방법은 있다. 그것은 JavaScript 를 이용하는 것이다. JavaScript를 이용해만 쉽게 Browser 종류, 버전, OS 종류등을 얻어올 수 있다.

 

관련정보를 검색해본 끝에 Browser 종류, 버전, OS 종류를 범용적으로 사용할 수 있는 Javascript 코드를 발견했다. 아래 링크를 참고하자.

 

Browser detect : http://www.quirksmode.org/js/detect.html

 

사용자는 Javascript코드내에서 단지 아래처럼 사용하면 그만이다.

 

  • Browser name: BrowserDetect.browser
  • Browser version: BrowserDetect.version
  • OS name: BrowserDetect.OS

 

너무 편하다. 그럼 이것을 어떻게 ActionScript 3.0 에서 사용할 수 있다는 것인가? 결과적으로 flash.external.ExternalInterface를 이용하면 된다. ExternalInterface의 call()메소드를 이용해 JavaScript 코드를 호출하면 된다. 여기서 두가지 선택을 하게 된다.

 

  1. 위의 BrowserDetect를 js 파일로 만들어 HTML에 포함해서 ActionScript 3.0에서 ExternalInterface로 호출
  2. 위의 BrowserDetect를 커스터마이징한 JavaScript 코드를 ActionScript 3.0에 삽입해서 ExternalInterface로 호출

 

첫번째 방법은 ExternalInterface를 학습한 사람이라면 쉽게 접근할 수 있을 것이다. 하지만 AS3 코드와  JavaScript 코드가 둘로 나뉘어 관리하기가 힘들어지는 단점이 있다. 그래서 하나의 AS3에서 관리할 수 있는  두번째 방법으로 문제를 해결하고자 한다.

 

package com.starpl.utils
{
	import flash.external.ExternalInterface;

	/**
	 * Browser detect
	 * @author Yongho Ji
	 * @since 2009.03.24
	 * @see http://www.quirksmode.org/js/detect.html
	 */
	public class BrowserDetectUtil
	{
		/**
		 * Here we define javascript functions which will be inserted into the DOM
		 */
		private static const DATA_OS:String =
				"var dataOS = [" +
					"{" +
						"string: navigator.platform," +
						"subString: \"Win\"," +
						"identity: \"Windows\"" +
					"}," +
					"{" +
						"string: navigator.platform," +
						"subString: \"Mac\"," +
						"identity: \"Mac\"" +
					"}," +
					"{" +
						"string: navigator.userAgent," +
						"subString: \"iPhone\"," +
						"identity: \"iPhone/iPod\"" +
					"}," +
					"{" +
						"string: navigator.platform," +
						"subString: \"Linux\"," +
						"identity: \"Linux\"" +
					"}" +
				"];";

		private static const DATA_BROWSER:String =
				"var dataBrowser = [" +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"Chrome\"," +
							"identity: \"Chrome\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"OmniWeb\"," +
							"versionSearch: \"OmniWeb/\"," +
							"identity: \"OmniWeb\"" +
						"}," +
						"{" +
							"string: navigator.vendor," +
							"subString: \"Apple\"," +
							"identity: \"Safari\"," +
							"versionSearch: \"Version\"" +
						"}," +
						"{" +
							"prop: window.opera," +
							"identity: \"Opera\"" +
						"}," +
						"{" +
							"string: navigator.vendor," +
							"subString: \"iCab\"," +
							"identity: \"iCab\"" +
						"}," +
						"{" +
							"string: navigator.vendor," +
							"subString: \"KDE\"," +
							"identity: \"Konqueror\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"Firefox\"," +
							"identity: \"Firefox\"" +
						"}," +
						"{" +
							"string: navigator.vendor," +
							"subString: \"Camino\"," +
							"identity: \"Camino\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"Netscape\"," +
							"identity: \"Netscape\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"MSIE\"," +
							"identity: \"Explorer\"," +
							"versionSearch: \"MSIE\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"Gecko\"," +
							"identity: \"Mozilla\"," +
							"versionSearch: \"rv\"" +
						"}," +
						"{" +
							"string: navigator.userAgent," +
							"subString: \"Mozilla\"," +
							"identity: \"Netscape\"," +
							"versionSearch: \"Mozilla\"" +
						"}" +
					"];";		

		private static const FUNCTION_SEARCH_BROWSER:String =
			"document.insertScript = function ()" +
			"{"	+
				"if (document.searchBrowser==null)" +
				"{" +
					"searchBrowser = function ()" +
					"{" +
						DATA_BROWSER +
						"var browser = null;" +
						"for (var i=0;i<dataBrowser.length;i++)	" +
						"{" +
							"var dataString = dataBrowser[i].string;" +
							"var dataProp = dataBrowser[i].prop;" +
							"if (dataString) " +
							"{" +
								"if (dataString.indexOf(dataBrowser[i].subString) != -1)" +
								"{" +
									"browser = dataBrowser[i].identity;" +
									"break;" +
								"}" +
							"}" +
							"else if (dataProp)" +
							"{" +
								"browser = dataBrowser[i].identity;" +
								"break;" +
							"}" +
						"}" +
						"if( browser == null )" +
						"{" +
							"browser = \"An unknown browser\";" +
						"}" +
						"return browser;" +
					"}" +
				"}" +
			"}";

		private static const FUNCTION_SEARCH_BROWSER_VERSION:String =
			"document.insertScript = function ()" +
			"{"	+
				"if (document.searchBrowserVersion==null)" +
				"{" +
					"searchBrowserVersion = function () " +
					"{" +
						DATA_BROWSER +
						"var browser;" +
						"for (var i=0;i<dataBrowser.length;i++)	" +
						"{" +
							"var browserString = dataBrowser[i].string;" +
							"var browserProp = dataBrowser[i].prop;" +
							"if (browserString) " +
							"{" +
								"if (browserString.indexOf(dataBrowser[i].subString) != -1)" +
								"{" +
									"browser = dataBrowser[i];" +
									"break;" +
								"}" +
							"}" +
							"else if (browserProp)" +
							"{" +
								"browser = dataBrowser[i];" +
								"break;" +
							"}" +
						"}" +
						"var versionSearchString = browser.versionSearch || browser.identity;" +
						"var index;" +
						"var version;" +
						"version = navigator.appVersion;" +
						"index = version.indexOf(versionSearchString);" +
						"if (index != -1) " +
						"{" +
							"return parseFloat(version.substring(index+versionSearchString.length+1));" +
						"}" +
						"version = navigator.userAgent;" +
						"index = version.indexOf(versionSearchString);" +
						"if (index != -1) " +
						"{" +
							"return parseFloat(version.substring(index+versionSearchString.length+1));" +
						"}" +
						"return \"an unknown version\";" +
					"}"+
				"}"+
			"}";	

		private static const FUNCTION_SEARCH_OS:String =
			"document.insertScript = function ()" +
			"{" +
				"if (document.searchOS==null)" +
				"{" +
					"searchOS = function ()" +
					"{" +
						DATA_OS +
						"var os = null;" +
						"for (var i=0;i<dataOS.length;i++)	" +
						"{" +
							"var dataString = dataOS[i].string;" +
							"var dataProp = dataOS[i].prop;" +
							"if (dataString) " +
							"{" +
								"if (dataString.indexOf(dataOS[i].subString) != -1)" +
								"{" +
									"os = dataOS[i].identity;" +
									"break;" +
								"}" +
							"}" +
							"else if (dataProp)" +
							"{" +
								"os = dataOS[i].identity;" +
								"break;" +
							"}" +
						"}" +
						"if( os == null )" +
						"{" +
							"os = \"An unknown OS\";" +
						"}" +
						"return os;" +
					"}"+
				"}"+
			"}";	

		private static var initFlag:Boolean = false;
		private static var _browserVersion:String = null;
		private static var _browser:String = null;
		private static var _os:String = null;

		private static function insertScript():void
		{
			if( initFlag ) return;
			if (! ExternalInterface.available)
			{
			    throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
			}

			initFlag = true;
			ExternalInterface.call( FUNCTION_SEARCH_BROWSER );
			ExternalInterface.call( FUNCTION_SEARCH_BROWSER_VERSION );
			ExternalInterface.call( FUNCTION_SEARCH_OS );
		}

		/**
		 * browser name
		 */
		public static function get browser():String
		{
			if( _browser ) return _browser;
			insertScript();
			_browser = ExternalInterface.call( "searchBrowser" );
			return _browser;
		}

		/**
		 * browser version
		 */
		public static function get browserVersion():String
		{
			if( _browserVersion ) return _browserVersion;
			insertScript();
			_browserVersion = ExternalInterface.call( "searchBrowserVersion" );
			return _browserVersion;
		}

		/**
		 * OS name
		 */
		public static function get OS():String
		{
			if( _os ) return _os;
			insertScript();
			_os = ExternalInterface.call( "searchOS" );
			return _os;
		}

	}
}

 

 

사용법은 매우 간단하다.

 

  • Browser name: BrowserDetectUtil.browser
  • Browser version: BrowserDetectUtil.version
  • OS name: BrowserDetectUtil.OS

 

ExternalInterface를 활용하면 매우 무궁무진하게 확장이 가능해진다.

 

단, ExternalInterface를 사용할 수 있는 조건을 잘 고려해야한다. 첫번째로 ExternalInterface를 지원하는 Flash Player 버전을 확인한다. 둘째로 SWF를 Embed할때 allowScriptAccess속성과 allowNetworking 속성을 체크한다. 두번째의 경우 본인 블로그에 있는 “위젯도 마음대로 못다는 네이버 블로그” 글을 보면 되겠다.

 

참고글

 

2008년 10월부터 공개했던 파일업로더를 기능 추가해 다시 공개합니다. 따로 ASdocs를 마련하지 않았기 때문에 불편하긴 하지만 차차 넣을 생각이고 응용프로그램도 몇개 더 만들 예정입니다.

 

이번에 추가된 기능은 “업로드 금지 파일”을 등록하는 기능입니다. 가령, 서버측에 등록되면 민감할 php, js, asp, jsp, pl등의 확장자를 가진 파일을 업로드하려고 할 때 클라이언트 측에서 업로드하는 것을 원천적으로 방지하는 기능입니다.

 

사용하는 방법은 예제 프로그램에서 uploader/html-template/index.template.html 안에 flashvars의 banfileExtensions를 참고하시면 되겠습니다. 금지할 파일 확장자를 “php;js;asp;” 형태로 만드시면 됩니다. 사용자가 여기에 등록된 파일을 올리려고 하는 경우 fileuploader_banFileExtension 이벤트가 발생하게 되며 이벤트가 발생할 때 처리를 하기 위해 FAService의 addEventListener()를 이용해 이벤트 핸들러 함수를 등록합니다. 이벤트 핸들러 함수에 넘어오는 인자값은 object형태로 아래와 같은 값이 넘어옵니다.

 

{”filename”:업로드금지 처리된 파일명, “banFileExtension”: 업로드 금지처리된 파일의 확장자, “banFileExtensions”: 등록된 업로드 금지 확장자들. ;로 구분됨 }

 

질문 및 버그에 대한 댓글은 언제든지 환영합니다.

 

멀티 파일 업로더 실행 동영상

 

왜 만들었나?

Flash Player 10이 나오면서 기존 Javascript-Flash 기반 다중 파일 업로더 기능이 제대로 동작하지 않아 이것을 쓰는 많은 사이트들이 발등에 불떨어지듯한 상황이 발생하게 되었다. 내가 참여하고 있는 스타플(http://starpl.com)도 예외는 아니다.

 

원인을 살펴보자면 Flash Player의 파일 업로드에 대한 보안(?)정책이 바뀐 것에 기인한다. Ajax(Javascript)만 가지고 실시간 다중 파일 업로드가 안되기 때문에 Ajax에서 직접 ExternalInterface로 Flash의 FileReference.browse() 메소드를 호출하여 파일을 업로드하고 그 결과를 다시 Ajax로 ExternalInterface를 이용해 반환하는 거였는데 여기서 문제될 만한 부분은 Ajax쪽에서 사용자 조작이 있어 browse() 메소드를 호출하면 바로 “Error #2176 팝업 창 표시와 같은 특정 동작은 마우스를 클릭하거나 버튼을 누르는 것과 같이 사용자가 조작하는 경우에만 발생합니다.”라는 에러가 발생한다. 즉, Flash Player 10부터는 Flash 내부가 아닌 외부 Ajax와 같은 사용자 조작으로는 browse() 메소드를 호출할 수 없다!

 

Flash Player 10 부터는 Flash에 버튼을 만들고 FileReference.browse()를 호출해야한다.

 

왜 공개했나?

소스 공개의 묘미는 함께 알아가는 가는 거다. 본인의 실력이 특출나기 때문이 아니라는 점을 강조하고 싶다. 오히려 부족함을 느끼기 때문에 블로깅을 하는 것과 동일하다. 블로깅을 하면 나도 모르게 몰랐던 것도 알아간다. 왜냐하면 블로깅을 통해 관심 분야의 사람들과 만날 수 있기 때문이다. 소스 공개도 마찬가지이다. 새로운 이슈에 대해 나만 알고 있다면 얼마나 이기적인가? 어짜피 알거면 같이 알아가면서 함께 발전하자는게 나의 생각이다.

 

그런 의미에서 여러분도 with 블로깅&소스공개?!

 

멀티 파일 업로더 (Multi - file uploader) 에 대해

사용하는데는 어려움이 많이 없을거라 생각합니다.


이미 swfuploader라는 좋은 툴이 있긴 하지만 학습과 쉬운 소스 수정을 위해 직접 만들었습니다.
공유해서 함께 지식을 넓혀가길 희망합니다.


이름은 Multi-file uploader이지만 실제 동작은 1개씩 업로드 되는 겁니다.

 

* author : 지용호 (Yongho, Ji)

* Q&A : jidolstar[at]gmail.com, http://blog.jidolstar.com)

* license : LGPL (수정시에는 소스를 공개합니다. 하지만 그대로 사용하는 것은 사용 출처만 밝혀주세요.)

* 최초제작일 : 2008.10.24

* 최종수정일 : 2009.03.02

* 제작언어 : Adobe ActionScript 3.0

* 제작환경 : Adobe Flex Builder 3 Professional. Flex SDK 3.2

* 구동환경 테스트 : IE6, FF, google chrome

* 제작배경
  Flash Player 10이 정식 릴리즈 됨에 따라 Javascript를 통해 FileReference.browse() 메소드를 호출을 방지하도록 되었기 때문에 이 방식을 사용한 것을 대체하려고…

 

* 첨부파일 설명

  1. FAService는 Javascript-SWF간 통신하기 위한 라이브러리이다.
  2. fileupload는 멀티파일업로더 핵심 라이브러리이다.
  3. fileuploader는 fileupload와 FAService를 이용해서 HTML환경에서 멀티파일업로드를 가능하게 만들어진 애플리케이션이다.
  4. fileuploader/html-template/index.template.html 부분처럼 사용하면 되겠다.
  5. fileuploader/php 에는 예제로 만들어진 php소스가 있다. jsp, asp로 비슷하게 만들어 쓰면 되겠다.

* 추가사항

  •  2008.11.14
         1. POST, GET 방식으로 Variables를 넘길 수 있도록 함
         2. requestHeaders를 추가할 수 있도록 함 (헤더를 보내는 경우 서버측 crossdomain.xml에 allow-http-request-headers-from 설정이 되어야 한다.)
         3. contentType(MINE Type)을 지정할 수 있도록 함
         이러한 방식은 AS3의 URLRequest에 있는 속성이므로 참고하길 바란다.
         사용예는  index.template.html의 flashvars 참고하면 된다.
  •  2009.03.02
         banfileExtensions 추가. flashvars에 추가된 속성으로 업로드를 거절할 확장자를 가진 파일을 등록한다. 대소문자는 자동으로 맞춰준다. 사용자가 업로드 금지 파일을 등록하려는 경우 “fileuploader_banFileExtension” 이벤트가 발생한다. 자세한 사용법은 index.template.html을 참고한다.  ex) banfileExtensions = “mp3;php;pl;”;

* 사용방법

  1. 자바스크립트를 통해 이벤트 핸들러를 등록한다.(FAService Flex-Ajax 통신 브릿지 이용, Flex-JS로 제작됨 , 본인 제작)
  2. 파일 업로드를 위한 설정 Flash Vars로 등록 한다.(가령 업로드할 서버 경로, 파일 사이즈, 필터, 버튼이미지 경로등…)
  3. 업로더 SWF를 HTML상에 붙인다. 예제에서는 swfobject.js를 이용했다.
  4. 서버쪽 프로그램을 만든다. 첨부된 php파일을 참고하면 되겠다. asp, jsp든 어떤 언어를 써도 동일하게 만들면 되겠다.
  5. 예제에선 정상적으로 동작하는 경우 textarea에 ready가 뜬다. 이벤트 핸들러가 호출되면 여기에 출력하도록 짜여졌다.
  6. 파일 선택후 ok하면 이벤트는 fileuploader_startAll, (fileuploader_start, fileuploader_step, fileuploader_end), fileuploader_endAll 순으로 진행된다. 중간에 ()안에 들어간것은 여러개의 파일의 경우에 진행상황에 따라서 번갈아가며 호출된다.
  7. 서버 접속이 원할치 않는다면  fileuploader_fail 이벤트가 발생한다.(보안 또는 IO Error)
  8. 파일 선택을 취소하면 fileuploader_cancel가 발생한다.
  9. 1개의 파일 사이즈가 정해진 크기보다 크면 fileuploader_fileSizeError 이벤트가 발생한다.
  10. . 선택한 파일의 갯수가 정해진 갯수보다 크면 fileuploader_fileCountError 이벤트가 발생한다.
  11. . 중간에 uploaderFAService.call( “stop”, null )을 호출하게 되면 업로드가 최소되고 fileuploader_stopAll 이벤트가 발생한다.
  12. 금지된 파일을 선택한 경우 fileuploader_banFileExtension 이벤트가 발생한다.

* 이벤트

이벤트 발생시 파라미터들은 JSON Object 형태이다.

  • ready  없음
  • fileuploader_startAll : {”totalCount”:total count of files, “totalSize”:total size of files(bytes) }
  • fileuploader_start : {”filename”:file name, “bytesTotal”:size of file(bytes)}
  • fileuploader_step : {”filename”:file name, “bytesTotal”:size of file(bytes), “bytesLoaded”:uploaded size of file(bytes)}
  • fileuploader_end : {”filename”:file name, “bytesTotal”:size of file(bytes), “uploadCompleteData”:…}  여기서 uploadCompleteData는 서버 개발자가 마음대로 값을 바꿀 수 있다. JSON 형태의 String값으로 넘겨주면 프로그램에서는 자동적으로 Object형태로 반환해준다.
  • fileuploader_fail : {”filename”:file name, “bytesTotal”:size of file(bytes, “msg”:error message}
  • fileuploader_endAll : {”failCount”: count of files upload failed, “endCount”: count of files upload successed , “totalCount”: count of files tried to upload }
  • fileuploader_stopAll : {”totalCount”:total count of files, “totalSize”:total size of files(bytes) }
  • fileuploader_fileSizeError : {”filename”:file name, “bytesTotal”:size of file(bytes), “maxFileSize”: maximum file size(bytes)}
  • fileuploader_fileCountError :{”totalCount”:total count of files, “maxFileCount”: maximum count of files }
  • fileuploader_banFileExtension : {”filename”:filename, “banFileExtension”: extension of selected file, “banFileExtensions”: registered ban extensions}

 

* 함수

  • uploaderFAService.call(’browse’,null );  Flash Player 9이하일때는 다음과 같은 방법으로 파일 browsing을 요청할 수 있다. 하지만 이 방법은 사용을 권장하지 않는다.

 

* FAService에 대해

  1. FAService는 Flex-Ajax 통신 라이브러리이다.(ActionScript 3 프로젝트로도 사용이 가능)
  2. 여기서는 소스도 함께 공개했다.
  3. FABridge와 비교할때 최소기능만 사용하도록 만들었다.
  4. 단순히 addEventListener, removeEventListener, call 만으로 Flex와 Ajax간에 통신합니다.
  5. addEventListener은 Flex에서 발생하는 이벤트명, JS이벤트 함수, 우선순위 값이 들어갑니다. 우선순위 값은 같은 이벤트 발생시 호출한 JS이벤트핸들러 함수의 호출 순서를 정합니다. 숫자가 클수록 등록순에 관계없이 먼저 호출된다.
  6. JS 이벤트 핸들러 함수의 파라미터 값들은 Flex에서 정해서 보내줍니다. Object형이 일반적이지만 Array, Boolean, int, float,String 형등 다양한 형태가 될 수 있다.
  7. removeEventListener은 기존에 등록한 이벤트 핸들러를 삭제해준다.
  8. call 함수는 Flex쪽에 “호출명”이 등록되어 있어야만 호출된다. 인수값은 Object, Array, Boolean, int, float,String 형등이 모두 가능하며 이 값은 Flex쪽에서 정한다.
  9. 만약 Flex에서 정한 형태로 만들어지지 않으면 JS Alert 창을 띄우게 된다.
  10. call 함수는 반드시 ready 이벤트가 발생한 시점 이후로 사용해야한다. 이전에는 적용되지 않습니다.(스텍을 이용해서 명령을 저장해두었다가 하는 방법도 모색하고 있음, addEventHandler는 그렇게 하고 있음)
  11. 등록되어진 이벤트 핸들러, 호출가능한 call 함수 목록등을 반환할 수 있는 함수를 만들 필요가 있다고 생각한다.

 

소스 다운로드

 

읽어볼만한 글

+ Recent posts