Mr. Drumcap.com

우선 기존 Flash빌더 플러그인이 설치되어 있다고 가정한다. 만약 없으면 플러그인 버전으로 기존 eclipse에 타겟으로 설치할 것

요즘 SVN -> Git으로 소스 버전컨트롤 이전중입니다.

예전에 SVN의 History가 아쉬워서 이전 작업을 못했었는데, git-svn이라는 툴을 별도로 제공하고 있었네요.

우분투 기준으로 설명드리면 아래와 같이 설치하면 끝!!

sudo apt-get install git-svn

이런 멋진 기능을 제공하는 Git이 참 고마울 따름입니다. ㅠ

일반적인 구조의 SVN Repository 전체 가져오기 (trunk,branches,tags 폴더로 구성되어있는 경우)

(앞의 prefix는 가져온 리비전내용 앞에 붙여줄 내용)

git svn clone --prefix svn/ --username yds -s <<SVN address>>

플래시/플렉스 개발자라면 구글 크롬을 많이들 애용하실 겁니다. 그런데 어느날 갑자기 구글 크롬에 플래시 플레이어가 Release 버전이 깔려 있어 디버깅이 안되었습니다. 제가 맥 환경이라 플레이어는 오직 하나뿐이고 플래시는 브라우저 플러그인 아키텍쳐로 실행되기 때문에 사파리, 파폭은 잘 되는데 크롬만 Release로 돌아가는 것이 너무 이상했습니다.  그래서 플래시 플레이어를 지웠다 설치했다를 몇번을 반복해도 잘 안되길래 완전히 지우고 크롬을 실행해 봤습니다. 그랬더니 사파리, 파폭은 지워져서 실행이 안되는데 크롬에는 지워지지 않고 여전히 플래시 플레이어가 남아있었습니다. 

LCDS나 BlazeDS는 플렉스와 서버와의 통신을 도와주는 미들웨어 입니다. 여기서 서버 설정에 대한 부분은 인터넷에 널려있으니 넘어가고, 플렉스에서의 설정에 대해서만 이야기 해 보도록 하겠습니다.
플렉스 프로젝트를 만들면 RemoteObject 등을 사용하여 통신하기 위해 아래와 같이 프로젝트 생성 위자드에서 설정을 하는 과정을 거칩니다. 

그러면 빌더는 다음과 같은 프로젝트 설정 정보들을 화면에 보여주면서 LCDS/BlazeDS 등의 서버 기술을 사용할 수 있게 도와 줍니다.

 

차례대로 설명하면, 서버 탭에 생긴 정보들은 빌더에서 사용하는 정보로써, 이 정보를 참고하여 플래시 빌더4의 서비스 생성 위자드, 컴파일, 실행 등을 매끄럽게 할 수 있습니다. 
컴파일러 탭의 Additional Compiler Arguments 항목에 –services 에 LCDS/BlazeDS의 서비스 xml 이 지정되어 있는 것을 보실 수 있습니다. 이것은 컴파일 시에 해당 서비스 xml 정보를 플래시 안에 넣기 위함이며, 컴파일러가 알아서 해 줍니다. 공동 작업 시에는 이 services 컴파일러 아규먼트가 달라서 개발자마다 이 정보를 변경해 줘야 했습니다.

여기서 고민이 생겼습니다.
개발자마다 파일은 같지만 위치가 다르다고 해서 설정을 바꾸는 수고를 매번 해야할까? 라고 말이죠. 이것으로 쏠쏠하게 세팅할 때마다 불려 다니곤 했습니다.

해결책1. RemoteObject에 endpoint 속성을 매번 넣어주기

사실 RemoteObject 클래스에는 endpoint 라는 속성이 있는데, 여기에 해당 서비스의 endpoint 를 아래와 같이 지정해 주시면 됩니다. 다만, RemoteObject 선언할 때 매번 설정해 줘야겠죠

해결책2. 직접 services-config.xml 정보를 넣어주기.

위와 같이 일일이 설정하는 것은 답이 아니라 생각해서 컴파일러 아규먼트에 촛점을 맞춰 해결책을 강구해 봤습니다. 이 아규먼트가 들어감으로 해서 어떤 일이 생기는지 분석해 보면 자연스레 해결될 것이니까요. 그래서 컴파일러 아규먼트에 -keep을 추가해서 mxml에서 생성되는 as 클래스들을 찾아 하나하나 자세히 분석해 보았습니다. 그랬더니 의외의 결과가 나왔는데, 컴파일러는 –services 아규먼트를 지정하면 부가 코드를 여럿 생성하지만 가장 중요한 부분이 지정한 xml을 읽어와 mx.messaging.config.ServerConfig 클래스의 스태틱인 xml속성에 넣어주는 것 밖에 없었습니다.

궁금하시면 컴파일러 아규먼트 –services 를 지정하셨다면 아래와 같이 해 보세요. services-config.xml 설정 정보가 쫙 펼쳐져 보일 것입니다.

trace(ServerConfig.xml.toXMLString());

결론은 간단합니다. 글을 장황하게는 썼지만 그냥 다음과 같은 간단한 클래스를 만들어 mxml코드에 넣어주기만 하면 됩니다. 초기화 시에 서비스를 다녀와야 할 일이 있다면 as 코드에 직접 설정정보를 예제와 같이 넣으시고요. 아니라면 xml를 읽어온 이후에 서버의 타이밍에 따라 다르지만 대체로 applicationComplete 이벤트 디스패치 된 이후에 세팅완료 됩니다. RemoteObject 에서 endpoint를 찾을 수 있습니다.

LcdsServiceInitializer.as

package
{
	import mx.core.IMXMLObject;
	import mx.core.mx_internal;
	import mx.messaging.config.ServerConfig;
	import mx.rpc.AsyncToken;
	import mx.rpc.Responder;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;

	use namespace mx_internal;

	/**
	 * LCDS , BlazeDS의 Services Config를 컴파일러에서 세팅하지 않고 
	 * 동적으로 세팅하게 해 주는 초기화 클래스
	 *  
	 * @author Yun Dosun
	 */
	public class LcdsServiceInitializer implements IMXMLObject
	{
		//-----------------------------------------------------------
		//
		// Constants
		// 
		//-----------------------------------------------------------
		private static const DEFAULT_XML_LOCATION:String = "config/services-config.xml";
		private static const DEFAULT_SERVICES:XML = 
				
					
						
							
						
					
				
				
					
						
							
						
					
				
				
				
				
					
						
						
							true
							4
						
					
					
						
						
						
					
					
						
						
						
					
				
			;


		/**
		 * IMXMLObject 를 구현한 클래스 (MXML에서 세팅한 속성값 적용을 위한 목적)
		 * @param document
		 * @param id
		 */
		public function initialized(document:Object, id:String):void
		{
			this.document = document;
			this.id = id;

			setROService();
		}

		/**
		 * configPath 설정파일 경로에서 잘 찾아오면 그 값으로, 
		 * 설정파일이 없으면 기본 설정정보로 셋  
		 */
		private function setROService():void
		{
			var service:HTTPService = new HTTPService();
			service.url = configPath;
			service.resultFormat = "e4x";

			var resultFunc:Function = function(event:ResultEvent):void
				{
					var xml:XML = event.result as XML;
					ServerConfig.xml = xml;
				}

			var faultFunc:Function = function(event:FaultEvent):void
				{
					ServerConfig.xml = DEFAULT_SERVICES;
				}

			var responder:Responder = new Responder(resultFunc, faultFunc);

			var token:AsyncToken = service.send();
			token.addResponder(responder);
		}

		//--------------------------------------------------------
		//
		// Variables
		// 
		//--------------------------------------------------------

		mx_internal var document:Object;
		mx_internal var id:String;

		/**
		 * services-config.xml(플렉스용) 파일의 경로
		 * @return 
		 */
		public function get configPath():String
		{
			var ret:String = _configPath;

			if (!_configPath)
			{
				ret = DEFAULT_XML_LOCATION;
			}

			return ret;
		}
		private var _configPath:String;

		/**
		 * services-config.xml(플렉스용) 파일의 경로
		 * @param value
		 */
		public function set configPath(value:String):void
		{
			if (_configPath == value)
			{
				return;
			}
			_configPath = value;
			
			setROService();
		}
		
		/**
		 * 현재 어플리케이션에 설정 되어있는 services-config 정보
		 * @return 
		 */
		public function get serverConfigXml():XML
		{
			return ServerConfig.xml;
		}
	}
}

main.mxml

	
		<![CDATA[
			import mx.rpc.CallResponder;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			import volcano.uxsb.platform.utils.RemoteObjectHelper;

			private var cr:CallResponder;

			protected function datagrid1_clickHandler(event:MouseEvent):void
			{
				cr.token=RemoteObjectHelper.sendRemote(new Object, "getData111", "drumcap");
				cr.addEventListener(ResultEvent.RESULT, onResultEventHandler);
			}

			private function onResultEventHandler(event:ResultEvent):void
			{
				trace("result===", event.result);
			}
		]]>
	

	
	

	

코딩하다 좀 황당해서 글을 남깁니다. 이미 알고 계신분도 계시겠지만요. ;-)

trace(flash.utils.getQualifiedClassName(MouseEvent));
// trace결과 ==> flash.events::MouseEvent

package
{
	import flash.display.Sprite;
	
	public class TestAS3 extends Sprite
	{
		namespace flash_events = "flash.events";
		
		public function TestAS3()
		{
			trace(flash_events::MouseEvent);
		}
	}
}

지난 1부에서는 PSD 가져와서 화면 기본 구성하는 것을 완성했다면 이번에는 게시판의 기본형태를 만들고 페이지를 만들어서 3부에 할 인터랙션/이펙트를 위한 과정을 해야 합니다. 만약 1부를 보지않고 이 페이지로 바로 오셨다면 1부를 보시고 다시 여기로 오셔야 합니다.

플렉스로 대형 어플리케이션 프로젝트를 하다보면 프리로더를 수정하여 사용할 때가 반드시 오는데 이때 발생하는 문제는, 로딩이 길어질 때 스테이지를 클릭하면 마우스 이벤트에 가끔 오작동을 일으켜 런타임 에러를 발생시킬 때가 있다는 것이다. 에러를 한번 살펴보자.

플렉스의 ToolTip의 사용방법과 스타일을 주는 것은 대부분의 플렉스를 하는 사람이라면 잘 알 것입니다. 하지만, 유용한 이 툴팁에는 몇가지 단점이 있는데, 그것은 다음과 같습니다.

1. 스타일은 어플리케이션 전체의 전역적인 클래스 타입의 스타일 밖에 적용되지 않습니다. 따라서 각각의 툴팁에 다른 스타일을 줄 수 없으며 이러한 경우 별도 UIComponent를 사용해 툴팁을 별도 제작해야합니다. 

2. 그리고 풍선 모양의 툴팁을 사용해야 할 때가 종종 있는데 이러한 경우도 지원하지 않으며 별도로 툴팁을 만들어야 합니다.

다음의 커스텀툴팁 매니저를 이용하고 스타일 이름으로 툴팁의 스타일을 매니저에게 넘겨주면 툴팁이 동적으로 생성됩니다.

원리는 툴팁 속성에 아무 값이나 주고 툴팁이 생성되게 설정한 후 toolTipCreate 이벤트에서 툴팁을 가로채서 별도의 툴팁으로 바꿔버리는 방법입니다. 

사용방법은 다음과 같습니다.

예를들어 버튼이 있다면 (toolTip 속성이 있는 UIComponent 를 상속받은 클래스들) 다음과 같이 설정합니다. 3가지를 모두 제대로 설정해야 제대로 보입니다.

CSS 에서는 다음과 같이...

컴포넌트 에서는 다음과 같이..

아래의 샘플에서 마우스 오른쪽 버튼 - view source 하시면 소스를 보실 수 있습니다.

(현재 샘플 소스가 한글이 깨져보이네요. 이부분 서둘러 잡을 테니 우선 소스를 다운로드 해서 봐주세요)

어도비의 테드 패트릭은 자신의 블로그에서 Flash Player 10.1 과 AIR 2.0 를 사용해서 개발 중이거나 개발 된 플래시 파일을 사용해 테스트 해 보고 버그신고 해주길 바라고 있습니다.
요즘과 같이 뒤숭숭한 때에 우리 플래시 플렉스 개발자들이 열심히 베타 테스트에 참여해서 버그를 줄일 수 있도록 해야합니다. 비록 제출한 것이 채택 안되더라도 말입니다.

테드 패트릭이 제안한 참여 방법은 다음과 같습니다.

1. 해당 툴을 다운로드 받습니다.  (Debugger로 다운받아야 겠지요?)
   Flash Player 10.1 Beta 2 and AIR 2.0 Beta 2
2. 당신이 가지고 있는 어플리이션을 위의 베타로 돌려봅니다.
3. 발견된 버그를 bug.adobe.com 에 버그내용을 영어로 올립니다. (회원가입 필요)

사실 어도비 버그 트랙킹 시스템은 추첨에 의한 방식을 채택하고 있으며, 그에따라 우선순위가 부여된다고 합니다. 현재 상황에서 어도비는 10.1에 대한 안정적인 출시가 가장 중요할 것이기 때문에 특별히 버그 내용들을 예의주시 하고 있을 것입니다.

아직 몇주 후 쯤엔 베타3로 진행할 것이며, 2달 내로 RC를 발표한다 하니 시간은 충분하므로 그 사이에 한번 버그 신고해서 한국 개발자 들의 저력을 보여줍시다. 그리고 혹시라도 버그를 올리면 코멘트에다라도 달아서 서로 추천하여 반드시 버그가 처리되게 해 봅시다.