private function returnTax( $usState:String , $price:Number ):Number{
	var result:Number
	result = 0;

	switch ( $usState ){
		case 'MA':
			result = 0.05*$price;
			break;
		case 'NJ':
			result = 0.07*$price;
			break;
	}
	return result;
}

위의 코드가 일반적인 코드라면, Data Driven Programming을 하게 되면 다음과 같습니다.

private var _stateTax:Object; // 서버로 부터 얻어온 새금율 데이터
private function returnTax( $usState:String, $price:Number ):Number{
	var result:Number, key:*;

	result = 0;
	for( key in _stateTax ){
		if( key === $usState ){
			result = _stateTax[key]*$price;
		}
	}

	return result;
}

서버로부터 세율을 얻어와 알고리즘에 사용하고 있어서 서버의 데이터가 변동 되면 컴파일을 하지 않아도 됩니다. 반면 첫 번째 코드는 새로 지역이 추가 되거나 세율이 수정될 때 마다 컴파일을 해야 합니다. 코드를 통해 비교한 것을 보시면 금방 이해가 가실 겁니다.

그럼 끝으로 제가 프로젝트를 진행하면서 느낀 Data Driven Programming의 특징을 정리해보겠습니다. 먼저 데이터의 변동에 따라 결과물(swf)이 달라지기 때문에 개발 후 유지/보수가 빈번한 프로젝트에 매우 유용할 것 같습니다. 하지만 데이터를 만들어 내는 서버 사이드 쪽 알고리즘은 상당히 복잡해지겠지요. 그리고 데이터에 대한 프로토콜을 매우 잘 정해야 합니다. 그리고 개발을 하면서 항상 Data Driven Programming방식으로 개발중인 것을 인지해야 합니다. 저 같은 경우 막 코딩의 습관이 아직 남아 있어서 멍 때리는 순간 코드가 오염이 되더군요-_-; 그렇지만 매우 유용한 개발 방법임에는 틀림 없는 것 같습니다. ^^ 계속 프로젝트를 진행해 가면서 새로운 점을 배우면 또 포스팅을 하겠습니다.

요즘 회사에서 큰 어플리케이션을 제작하고 있습니다. 큰 어플리케이션인 만큼 구조도 매우 복잡하고 저에겐 모든 것들이 어려운 일들 뿐입니다. 그런데 그 가운데 제일 이해하기 힘든 게 이 역할 모델인데, 저 같은 경우 아직 초급 개발자라 개발을 할 때, 습관적으로 알고리즘이나 구현에만 집중을 하게 됩니다( 안 하려고 해도 아직은 무의식적으로 그렇게 되더군요[...] ). 이렇게 알고리즘과 구현에만 집중한 결과, 만들어진 클래스들은 각각 어떤 일을 하는지도 명확하지 않고, 각 클래스마다 중복되는 알고리즘도 많아지고, 점점 개발할수록 악의 구렁텅이 속으로 빠지게 되지요. 다 제 경험입니다.(-_ㅜ) 하지만 이 악의 구렁텅이에서 쉽게 빠져 나오기가 힘듭니다. 항상 프로젝트를 시작할 땐 “아 이번엔 클래스나 함수들을 아름답게 만들어야지!”하고 다짐을 하지만 언제나 거의 비슷한 수준의 코드를 만들어 냈습니다. 아무튼 오늘도 그런 악순환을 반복하고 있었는데 히카형께서 제가 어려워하는 모습을 보시고, 메모장을 꺼내라고 하셨습니다. 그리고 메모장에 코드를 적기 시작했습니다. 제가 만들어야 하는 클래스는 CSmodal이라는 클래스로 역할이 alert창을 보여주고 사용자의 반응에 따라 다음 행동을 하도록 하는 클래스입니다. 제가 혼자 클래스를 만들 때는 구현에만 집착해서 “전역적으로 사용하는 alert창을 어떻게 그릴까?”에 대해서만 고민을 하면서 시간을 잡아먹고 코드는 산으로 가고 있었습니다. 아무튼 히카형 말씀대로 메모장에 먼저 생각해내기 쉬운 함수를 적었습니다.

static public function alert():void

전역적으로 사용해야 하기 때문에 static public을 사용했습니다. 다음은 이 함수가 하는 일을 생각해봤습니다. 먼저 alert창을 띄워야 하겠죠. 그래서 코드는

static public function alert():void{
	// alert창을 띄운다.
	alertWindow.visible = true;
}

이 정도가 되겠죠. 그리고 alert창이 띄워졌을 때 나머지 화면에서는 마우스 이벤트를 받으면 안되기 때문에 마우스 이벤트를 막아줄 창이 필요합니다. 그 창을 modalWindow라고 하면

static public function alert():void{
	// alert창을 띄운다.
	alertWindow.visible = true;
	// modal창을 띄운다.
	modalWindow.visible = true;
}

이렇게 되겠죠. 다음으로 alert창에서 표시 해야 할 텍스트를 넣어줘야 합니다.

static public function alert():void{
	// alert창을 띄운다.
	alertWindow.visible = true;
	// modal창을 띄운다.
	modalWindow.visible = true;
	// 텍스트를 넣어준다.
	alertContents.text = $contents;
}

이제 함수가 거의 다 만들어졌는데요. 아직 한가지가 남았습니다. alert창에서 확인버튼을 누르면 다음 동작으로 이어져야 합니다. 그래서 그 함수를 설정하는 부분이 남았습니다.

static public function alert():void{
	// alert창을 띄운다.
	alertWindow.visible = true;
	// modal창을 띄운다.
	modalWindow.visible = true;
	// 텍스트를 넣어준다.
	alertContents.text = $contents;
	// 확인 버튼을 누르면 작동할 함수를 설정한다.
	alertOK = $OK;
}

자 이 함수내부에서 하는 일들을 모두 기술했습니다. 이렇게 되면 이 함수가 필요로 하는 변수들이 무엇인지 알 수 있게 됩니다.  alertWindow, modalWindow, alertContents, alertOK 변수들은 이 프로젝트 내에서 계속적으로 사용되기 때문에 CSmodal클래스의 정적 멤버 변수로 잡아줍니다.

public final class CSmodal {
	static private var alertWindow:Sprite;
	static private var modalWindow:Sprite;
	static private var alertOK:Function;
	static private var alertContents:TextField;

그리고 alert() 함수의 코드를 보면 alertContents와 alertOK에 할당해주는 변수가 있습니다. 이 변수들은 alert() 함수가 실행 될 때 마다 달라질 경우가 많기 때문에 ( 매번 다른 텍스트내용을 보낼 수도 있고, 다음 동작을 변경 할 수 있어서 ) 인자로 받아오는 형태를 가지게 됩니다. 그러면 alert 함수의 시그니쳐가 다음과 같이 명확해 집니다.

static public function alert( $contens:String, $OK:Function ):void{
	// alert창을 띄운다.
	alertWindow.visible = true;
	// modal창을 띄운다.
	modalWindow.visible = true;
	// 텍스트를 넣어준다.
	alertContents.text = $contents;
	// 확인 버튼을 누르면 작동할 함수를 설정한다.
	alertOK = $OK;
}

이제 alert() 함수가 다 만들어졌습니다. 그렇다면 지금 저 상태로 제대로 작동이 될까요? 당연히 안되겠죠. alertWindow, modalWindow, alertContents 변수들은 선언만하고 생성이나 할당을 하지 않았기 때문에 제대로 작동하지 않겠죠. 그럼 이 변수들에 생성이나 할당을 어디서 할까요? 생성이나 할당하는 것을 보통 “초기화” 한다고 말하지요. 그러면 초기화를 하는 init()라는 함수를 만들어서 그 안에서 변수들을 초기화하면 되겠습니다.

static public function init( $alertWindow:Sprite, $modalWindow:Sprite ):void{
	// alertWindow 할당
	alertWindow = $alertWindow;
	// modalWindow할당
	modalWindow = $modalWindow;
	// alertContents할당
	alertContents = alertWindow.getChildByName( ‘contents’ );
}

코드를 보면 alertWindow와 modalWindow는 외부로부터 할당을 받는 형태로 되어있습니다. 그 이유는 CSmodal클래스의 역할은 창을 그리는 것이 아니고 창을 띄워 주고 확인, 취소 버튼을 눌렀을 때 그에 해당하는 동작을 하는 역할 이기 때문입니다. alertWindow와 modalWindow는 직접 넘겨 받아 할당하지만 alertContents는 alertWindow의 자식이기 때문에 alertWindow로 부터 할당 받습니다. 생각해보니 전역 변수로 잡을 필요도 없어지는군요. ^^; 이렇게 init()까지 완성이 되었습니다. 그러면 이제 실제로 사용할 수 있는 클래스가 되었습니다.

이렇게 차근 차근 코딩을 하다 보니 클래스가 뚝딱, 그것도 이쁘게 만들어 지더군요. 클래스를 만들 때 알고리즘과 구현에 집착하지 않고 역할을 꼼꼼히 따지고 생각해서 자신이 할 일을 명확하게 인지한 후 의사코드를 짜고 그 의사 코드를 통해 실제 코드로 변환하면 정말 깔끔한 클래스가 만들어 집니다. 매번 머릿속으로는 가지고 있던 생각이었지만 잘 되지 않았었는데 오늘은 잘 되어서 개인적으로도 매우 기뻤습니다 ^^; 어떤가요? 오늘 배운 내용을 복습하고, 짧게나마 공유해보고 싶어서 이렇게 포스팅을 합니다.

Loader의 loadBytes() 메서드가 실행가능한 코드를 허용하지 않는다고 나옵니다. 이 문장만 가지고는 정확히 무슨 문제인지 알 수 없어서 검색을 해보니 이 에러를 당한 이유를 알 수 있었습니다. API 문서에도 명시가 잘 되어있더군요.

명시되어있는 내용을 쉽게 설명하자면 이미지는 그냥 불러와도 되지만 actionscript가 포함되어있는 swf같은 경우에는 LoaderContext클래스의 allowLoadBytesCodeExecution속성을 true로 설정해줘야 한다는 거죠~ 아무래도 AIR같은 경우에는 보안이 더 까다로워서 이런 절차가 더 필요한 듯 싶습니다. 하지만 저 allowLoadBytesCodeExecution속성은 AIR에서만 사용할 수 있는 속성이라서 Loader를 라이브러리에서 사용하는 경우 이에 대해서 각각 actionscript project와 AIR project에 대응하는 클래스를 2개를 만들 수도 없고 난감합니다. 실제로 프로젝트를 하다 보면 actionscript project로 개발 후 AIR로 패키징 하는 경우가 꽤 많을 것입니다. 그래서 Loader를 사용하는 클래스에 아래의 코드를 추가 했습니다.

context = new LoaderContext;
if( 'allowLoadBytesCodeExecution' in context ){
	context.allowLoadBytesCodeExecution = true;
}

LoaderContext클래스의 객체인 context에 allowLoadBytesCodeExecution 속성이 존재하면 무조건 true로 설정해주는 것입니다. 이렇게 하면 actionscript project에서도 오류가 발생하지 않고 AIR project에서도 오류가 발생하지 않습니다. 그래서 결론은 Loader를 이용한 라이브러리를 제작하셨다면 위의 코드를 추가해야 AIR에서 사용시에도 오류 없이 잘 쓸 수 있다는 것입니다.

위의 스샷처럼 이미지자원을 외부에서 로드해오거나 Flash IDE를 이용해서 라이브러리에 지정된 linkage네임을 통해 지정하는 방법밖에 없더군요. 그래서 Embed된 자원을 불러오는 방법은 없을까 해서 구글링을 해 본 결과! 역시 방법이 있었습니다.

Textfield를 감싸는 클래스 이름이 Main이라 하면 다음과 같이 Embed를 한 후

[Embed(source='embed/Boo.png')]
 private var BITMAPboo:Class;

아래와 같이 Textfiled에 삽입합니다.

t.htmlText = '테스트<img src="Main_BITMAPboo">';

규칙은

클래스이름_자원클래스이름

전체 소스는 다음과 같습니다.

package {
	import flash.display.Sprite;
	import flash.text.*;
	public class Main extends Sprite
	{
		[Embed(source='embed/Boo.png')]
		private var BITMAPboo:Class;
		public function Main()
		{
			var t:TextField = new TextField();
			t.htmlText = '테스트';
			addChild(t);
		}
	}
}

다음은 컴파일 화면입니다.

매우 간단하죠~? ㅎㅎ 이걸 모르고선 역시 안되는구나 하고  포기하려는 찰나 어떤 중국 커뮤니티의 게시물을 발견하고 해답을 얻었습니다.

Flash Builder의 상단 메뉴에서 Window -> Prefrences에 들어가 General항목에서 Keys를 찾을 수 있습니다. 이곳에서 빌더에서 쓰이는 여러가지 키보드 단축키를 지정할 수 있습니다. 빌더에서 주로 제일 많이 쓰는 코드 어시스트(Ctrl + Space)도 여기서 다른 키로 바꿀 수 있지요. 제가 회사에서 자주 쓰는 단축키들을 정리해 보겠습니다.

1. Word Completion

코드 어시스트와 더불어 엄청나게 많이 쓰고있는 기능입니다. 이름 그대로 단어를 완성시켜주는 것인데요. 어찌보면 코드 어시스트와 비슷하지만 코드 어시스트 같은 경우 키워드, 조건문등에는 적용되지 않아 은근 불편합니다. 반면 워드 컴플리션은 한번 썼던 단어는 무조건 기억을 하고 있다가 복원해 줍니다. 예를 들어 소스코드의 상단에 switch를 썼다면 아래서 코딩하다가 sw만 쓰고 워드 컴플리션을 발동시켜주면 바로 switch 문자가 만들어 집니다.전 보통 Shift + Space로 설정해놓고 코드 어시스트와 함께 사용합니다.

2. Toggle Comment

주석을 토글하는 기능입니다. 이걸 몰랐을 땐 손으로 직접 //나 /* */로 주석처리를 많이 했었습니다. 일일히 손으로 주석을 달았다 지우기가 매우 성가시고 불편했었습니다. 하지만 토글 주석은 이름 그대로 토글방식이여서 주석을 달고 지우기가 매우 편리합니다. 여러 문장을 한꺼번에 다 적용할 수 있고 부분만 해제를 할 수도 있어 여러모로 편리합니다. 전 Ctrl + T로 설정해놓고 사용하고 있습니다.

3. Delete Line

커서가 위치한 한줄을 지워버리는 기능입니다. 이 기능도 은근 많이 씁니다. Ctrl + Shift + X로 설정해서 사용중입니다.

4. To Upper Case

대문자로 바꾸기입니다. Ctrl + Shift + U로 사용하고 있습니다.

5. To Lower Case

소문자로 바꾸기입니다. Ctrl + Shift + L로 사용하고 있습니다.

6. ASDoc

ASDoc 주석을 달경우 유용한 기능입니다. 하지만 ASDoc을 그닥 작성하지 않으므로 별로 쓰지는 않습니다. Ctrl + Shift + D로 사용하고 있습니다.

7. Save As

다른 프로그램에서와 마찬가지로 당연히 기본으로 지정되어 있을 줄 알았던 기능이 지정이 안되있더군요. Ctrl + Shift + S는 원래 Save All로 되어 있습니다. 하지만 별로 필요하지 않아서 Save As로 대체 시켰습니다.

여기까지 제가 쓰는 기능과 단축키들을 정리해보았습니다. 이외에도 제가 모르는 좋은 기능들이 많이 있을거라 생각이 되는군요. ㅎㅎ 다른 좋은 기능들도 공유했으면 좋겠네요~

문구는 아래와 같았습니다.

To install or update plugins, you must quit Flash Builder and run with adminstrator privilege.

짧은 영어 실력으로 해석을 해보니,

플러그인을 업데이트하거나 설치할 때, 당신은 반드시 플래시 빌더를 종료하고 관리자권한으로 실행을 해야합니다.

역시 이 문제였던거죠. ㅎㅎ 아무튼 재빠르게 아이콘에 마우스 오른쪽 클릭 -> 속성

그 후 속성 창에서 호환성 패널로 가보면 아래 쪽에 권한 수준에 체크를 해주니 아주 잘 설치가 되더군요 ㅎㅎ

매우 간단한거긴 하지만 일단 오류가 뜨면 쉽게 당황하는 저같은 분들을 위해 글을 남겨봅니다.

IGraphicsData 인터페이스를 구현하는 GraphicsStroke, GraphicsPath, GraphicsBitmapFill, GraphicsEndFill, GraphicsGradientFill, GraphicsShaderFill, GraphicsSolidFill, GraphicsTriangleFill 클래스들이 추가 되었는데 이름을 보면 알 수 있듯이 기존 graphics 객체가 가지고 있는 메서드들을 객체화 시킨것입니다.

GraphicsStroke는 lineStyle(), GraphicsPath는 moveTo(), lineTo(), curveTo(), GraphicsBitmapFill는 beginBitmapFill, GraphicsEndFill는 endFill(), GraphicsGradientFill는 beginGradientFill(), GraphicsShaderFill는 beginShaderFill()메서드와 동일합니다.

먼저 GraphicsPath클래스를 살펴 보겠습니다. 생성시 commands, data, winding 이렇게 3개의 인자를 받습니다. 저 3가지는 속성으로도 있는데 중요한건 commands와 data입니다. 이름을 통해 유추할 수 있는데 commands 속성은 Vector.<int> 타입으로 되어있습니다. 여기에 lineTo(), moveTo(), curveTo()등의 명령을 저장하는 것입니다. 벡터의 타입이 int인 이유는 moveTo() = 1, lineTo() = 2, curveTo() = 3으로 표현되기 때문입니다. 다음 data는 commands에 해당하는 값을 저장합니다. 명령에 해당하는 값을 그냥 순서대로 쭉 넣어주면 됩니다.  이렇게 commands와 data를 설정하는 방법도 있지만 메서드를 통해서 설정할 수 도 있습니다. 오히려 이쪽이 더 편할 수는 있지만 계속 메서드를 호출해야하므로 반복작업때문에 오히려 귀찮을 수도있습니다.

칠하는 행위를 하나의 역할로 보고 여러가지 다양한 방법으로 칠하는 행위를 각각의 클래스로 만들어졌습니다. 그래서 lineGradientStyle(), lineBitmapStyle(), lineShaderStyle()메서드에 해당하는 클래스가 없는 것입니다. 선스타일(GraphicsStroke)에 칠하기(GraphicsBitmapFill, GraphicsGradientFill, GraphicsShaderFill, GraphicsSolidFill)를 설정하면 해당 칠하기 방법대로 선스타일이 지정되는 것입니다.

예를 들어 볼까요?

비트맵라인스타일을 만들고 싶어요!

→ GraphicsStroke와 GraphicsBitmapFill을 사용

그리고 당연히 개별적으로 GraphicsBitmapFill을 사용하면 비트맵 칠하기가 되는 것입니다.

이렇게 객체화된 명령을 graphics.drawGraphicsData() 메서드를 이용하여 그리게 됩니다. 인자로 graphicsData:Vector<IGarphicsData>를 받습니다.  이 벡터에 패스데이터와 칠하기데이터, 선스타일 데이터가 들어가는 것입니다.

그럼 실질적으로 어떻게 사용하는지 코드를 보며 알아보겠습니다.

package{
	import flash.display.GraphicsPath;
	import flash.display.GraphicsSolidFill;
	import flash.display.GraphicsStroke;
	import flash.display.IGraphicsData;
	import flash.display.Sprite;

	public class TestDrawingAPI extends Sprite{
		public function TestDrawingAPI(){
			var graphicsData:Vector.<IGraphicsData>, graphicsPath:GraphicsPath,
			lineStyle:GraphicsStroke, fill:GraphicsSolidFill,
			commands:Vector.<int>, data:Vector.<Number>;

			graphicsPath = new GraphicsPath;
			commands = Vector.<int>( [1, 2] );
			data = Vector.<Number>( [100, 100, 50, 50] );
			graphicsPath.commands = commands;
			graphicsPath.data = data;

			fill = new GraphicsSolidFill( 0xff0000 );
			lineStyle = new GraphicsStroke( 3 );
			lineStyle.fill = fill;

			graphicsData = Vector.<IGraphicsData>( [lineStyle, graphicsPath] );
			graphics.drawGraphicsData( graphicsData );
		}
	}
}

먼저 GraphicsPath클래스의 객체를 만들고, 객체에 할당할 명령과 데이터를 만들어 줍니다. 변수 commands에 1, 2를 차례로 넣습니다. moveTo와 lineTo명령을 할당한 것이죠. 다음 변수 data에는 값을 할당해줍니다 moveTo에서 100, 100을 사용하고 다음 lineTo에서는 50, 50을 사용합니다. 다음은 칠하기를 만들어줍니다 fill변수에 GraphicsSolidFill객체를 생성합니다. 그리고 선을 그리기 위해서 lineStyle변수에 GraphicsStroke객체를 생성한후 선에 칠하기를 할당해줍니다. 그리고 나서 마지막으로 graphicsData변수에 위에서 만든 lineStyle과 graphicsPath를 설정해주고 graphics.drawGraphicsData() 메서드를 실행해주면 선이 그려집니다. 아래는 컴파일 결과입니다.

아마 처음 접해보시는 분들은 사용하기가 매우 복잡하다고 느끼실것입니다. 단순히 메서드를 실행하던 수준에서 많은 객체들을 만들어야하기 때문인데 이렇게 쓰는 이유는 앞서 말씀드린것과 같이 명령을 객체화하면 재사용이 쉽다는 점에 있습니다.