Category Archives: Flex

만영의 Flex 강좌 시리즈 2_캔곰 프레임워크

출처 : http://adobe.bloter.net/_news/8df06ad994c33787

Cairngorm Framework

1. Cairngorm Framework 정의
cairngorm은 사전적인 의미로는 연수정이란 뜻입니다.
발음을 하면 컨검? 주위에서는 그냥 캔곰이라고 부르더군요. 이하 강좌는 캔곰이라는 용어를 사용하여 진행하도록 하겠습니다. 알아서 이해해 주시면 감사…^^
캔곰 프레임워크는 Flex를 위한 작은 규모의 프레임워크입니다. 기존에 사용하던 프레임워크와는 차이가 많이 나죠. 저도 처음엔 뭐 이런게 프레임워크인가 생각했던 적이 있습니다. 하지만 그래도 몇가지 사항에서 중요합니다.
캔곰은 Flex Application을 사용하여 Enterprise Software를 개발하기 위한 디자인패턴들로 구현되어 있습니다. 또한 캔곰 사용의 장점은 동일한 패턴으로 서비스를 정의하고 관리함으로서 간결한 코드를 작성할 수 있습니다. 단점은 파일 개수가 많아 진다는 것이 아닐까 싶네요.

2. 캔곰 프레임워크 설치하기
캔곰 프레임워크는 Flex에서 사용하는 라이브러리 포맷인 swc 형태로 배포됩니다. 또한 소스코드까지 포함되어 있으므로 좀 더 구체적인 내용을 알고 싶은 분들은 소스코드를 분석하셔도 됩니다.

2.1 캔곰 프레임웍2.1을 다운로드 합니다.
URL : http://labs.adobe.com/wiki/index.php/Cairngorm

<그림 1>

2.2 다운로드 받은 파일의 압축을 풉니다.
압축을 풀면 bin 폴더에서 Cairngorm.swc 파일을 확인할 수 있습니다.

<그림 2>

2.3 프로젝트의 library path로 이동한 다음 ‘Add SWC’버튼을 클릭 한 후 bin폴더에 있는 Cairngorm.swc파일을 추가합니다.

<그림 3>

3. Cairngorm Framework 구조
3.1 캔곰은 MVC구조 형태로 패턴화 되어 있습니다. 프리젠테이션과 비즈니스 로직을 분리 할 수 있는 형태의 템플릿을 제공합니다.
3.2 캔곰 architecture

<그림 4>

– View : End User의 View화면을 지칭합니다. View는 사용자의 이벤트를 받아 CairngormEventDispatcher를 사용하여 Controller에 등록되어 있는 커맨드를 호출하는 역할을 담당합니다.
– Model : Controller와 View를 중계하는 역할을 담당합니다. 최종적으로 처리된 결과를 ModelLocator를 통해 View에 전달됩니다.
– Controller : Command를 실행하여 서비스를 요청하는 역할을 담당합니다. 처리된 결과는 ModelLocator를 통해 View에 전달됩니다.

3.3 캔곰 패키지 구조
각각의 기능 그룹별로 패키지 폴더를 구성합니다. 뭐 반드시 지켜야 하는 구조는 아니지만 되도록이면 동일한 형태의 Naming Rule을 사용하기를 권장합니다.

– Business : Delegate 클래스를 모아 놓은 폴더입니다. 그리고 데이터 서비스를 정의하는 Services.mxml도 이곳이 포함됩니다.
– Commands : Delegate를 호출하고 리턴된 결과 값을 View에 전달하는 역할을 담당하는 command 클래스를 모아 놓은 폴더입니다. Command 클래스는 캔곰에서 제공하는 Command,Responder 인터페이스를 상속받아 구현합니다.
– Control : command를 관리하는 controller 클래스를 모아 놓은 폴더입니다. CairngormEventDispatcher를 통해 Control에 등록된 Command를 실행합니다. Controller 클래스는 캔곰에서 제공하는 FrontController를 상속받아 구현합니다.
– Model : View들을 관리하는 역할을 담당하는 ModelLocator를 모아 놓은 폴더입니다. ModelLocator 클래스는 캔곰에서 제공하는 ModelLocator클래스를 상속받아 구현합니다(개인적으로는 사용 안 함).
– Vo : RemoteObject서비스를 사용할때만 해당되는 클래스일 듯 합니다. Value Object의 약어로서 View에서 표시될 속성들을 모아놓은 클래스입니다. Vo는 ValueObject를 상속받아 구현합니다. Vo사용의 장점은 타입 체크를 통해 좀 더 명확하게 무슨 정보 인지를 판단 할 수 있습니다.

4. 캔곰 사용하기
예제로 게시판 리스트와 게시글 읽기 기능 두 가지를 가지고 캔곰을 적용해 서비스 데이터를 연동해 보도록 하겠습니다. 단 RemoteObject를 정의하여 자바 클래스를 호출하는 부분은 “RemoteObject 사용하기” 강좌에서 계속 진행 할 예정입니다.

4.1 프로젝트의 패키지를 아래와 같이 business,command,control,event,model,view.vo를 정의합니다.

<그림 5>

4.2 이벤트 정의

– ViewEvent.as : CairngormEvent를 상속받은 클래스로서 리턴 페이지 객체를 저장하기 위한 view 속성을 포함하고 있습니다. 추후 커맨드를 호출하기 위해서는 반드시 ViewEvent를 생성하여 사용해야 합니다

package sample.event
{
import com.adobe.cairngorm.control.CairngormEvent;
import mx.core.UIComponent;
public class ViewEvent extends CairngormEvent
{
//view객체를 저장하기 위한 속성
public var view:UIComponent;
public function ViewEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

– ServiceResultEvent.as : 서비스 결과를 전달하기 위한 이벤트 입니다. 결과 값을 저장하기 위한 result속성을 포함하고 있습니다.
package sample.event
{
import flash.events.Event;
public class ServiceResultEvent extends Event
{
public var result:*;
//이벤트 이름
public static const EVENT_SERVICE_RESULT:String = ”serviceResult”;

public function ServiceResultEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}

4.3 Delegate 정의
– BBSServiceDelegate.as : ServiceLocator를 사용하여 RemoteObject 서비스를 호출하고 리턴된 결과값을 command에 전달합니다. 서비스 호출은 AsyncToken을 사용하여 비동기 형태로 호출됩니다. RemoteObject를 이용한 코드는 다음 강좌에 진행하기 때문에 임시로 주석처리 하였습니다.
package sample.business
{
import sample.event.ViewEvent;
import com.adobe.cairngorm.business.Responder;
import com.adobe.cairngorm.business.ServiceLocator;
import mx.rpc.AsyncToken;
import mx.collections.ArrayCollection;
import flash.utils.setTimeout;
import sample.vo.BBSData;

public class BBSServiceDelegate
{
private var responder:Responder;
private var serivce:Object;

public function BBSServiceDelegate(responder:Responder)
{
//정의된 RemoteObject의 id값으로 서비스 객체를 얻어 옵니다.
//this.serivce = ServiceLocator.getInstance().getService(”BBSService”);
this.responder = responder;
}
public function getBBSList(event:ViewEvent):void
{
var dataArr:ArrayCollection = new ArrayCollection();
var obj:BBSData = new BBSData();
obj.num = 1;
obj.subject = ”aaaa”;
obj.writer = ”lee”;

dataArr.addItem(obj);

var resultObj:Object = new Object();
resultObj.result = dataArr;

setTimeout( responder.onResult, 100, resultObj );
//var token:AsyncToken = service.getBBSList();
//token.resultHandler = responder.onResult;
//token.faultHandler = responder.onFault;
}
public function getBBSRead(event:ViewEvent):void
{
var obj:BBSData = new BBSData();
obj.num = 1;
obj.subject = ”aaaa”;
obj.writer = ”lee”;

var resultObj:Object = new Object();
resultObj.result = obj;

setTimeout( responder.onResult, 100, resultObj );
//var token:AsyncToken = service.getBBSRead(event.data.rowNum);
//token.resultHandler = responder.onResult;
//token.faultHandler = responder.onFault;
}
}
}

4.4 Command 정의

– BBSListCommand.as : 게시판 리스트 command입니다. BBSServiceDelegate function을 호출한후 결과 값을 view 속성을 사용하여 ServiceResultEvent 이벤트를 발생시킵니다.
package sample.command
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.business.Responder;
import sample.event.ViewEvent;
import sample.event.ServiceResultEvent;
import mx.core.UIComponent;
import sample.business.BBSServiceDelegate;
import mx.collections.ArrayCollection;
import sample.vo.BBSData;
public class BBSListCommand implements Command, Responder
{
private var view:UIComponent;
public function execute(event:CairngormEvent):void
{
var viewEvt:ViewEvent = ViewEvent(event);
//호출한 View. 결과를 리턴할때 사용함.
view = viewEvt.view;

//Delegate 클래스 호출
var delegate : BBSServiceDelegate = new BBSServiceDelegate( this );
delegate.getBBSList(viewEvt);
}

public function onResult(event:*=null):void
{
var res:ServiceResultEvent = new ServiceResultEvent(ServiceResultEvent.EVENT_SERVICE_RESULT);
res.result = event.result;
//호출한 view의 ”serviceResult” 이벤트를 발생시킴
view.dispatchEvent(res);
}

public function onFault(event:*=null):void
{
}

}
}

4.5 Controller 정의

– BBSController.as : 게시판 관련 이벤트를 관리하는 역할을 담당합니다. 등록된 이벤트 들은 CairngormEventDispatcher를 사용하여 실행됩니다.
package sample.control
{
import com.adobe.cairngorm.control.FrontController;
import sample.command.BBSListCommand;
import sample.command.BBSReadCommand;

public class BBSController extends FrontController
{
public static const EVENT_BBS_LIST : String = ”bbs_list”;
public static const EVENT_BBS_READ : String = ”bbs_read”;
public function BBSController()
{
addCommand( BBSController.EVENT_BBS_LIST, BBSListCommand );
addCommand( BBSController.EVENT_BBS_READ, BBSReadCommand);
}

}
}

4.6 Vo 정의

– BBSData.as : 게시판에서 사용되는 데이터 속성 값을 정의 한 클래스입니다.
package sample.vo
{
import com.adobe.cairngorm.vo.ValueObject;
[Bindable]
public class BBSData implements ValueObject
{
public var num:int; //번호
public var subject:String; //제목
public var content:String; //내용
public var writer:String; //작성자
}
}

4.7 View 정의

– 이제부터 모든 사용자 View들에 대한 컴포넌트들은 view 패키지 아래에서 정의한 다음 네임스페이스 정의를 통해 접근하는 형태로 사용합니다. 그리고 서비스를 호출하는 페이지들은 아래와 같이 이벤트를 정의하고 initialize 시점에 이벤트를 등록하여 처리하는 형태로 작성됩니다.

*사용자 이벤트 정의

<그림 6>

*initialize 이벤트

<그림 7>

* serviceResult” 이벤트 처리

<그림 8>

– BBSListView.mxml : 게시판 리스트를 구현한 MXML 컴포넌트 입니다. CairngormEventDispatcher를 사용하여 command를 호출하고 “serviceResult”를 등록하여 결과 리턴 이벤트를 전달받아 DataGrid에 Binding을 합니다.

[event(type=”serviceResult”,”sample.event.ServiceResultEvent”)]

4.8 완성된 전체 게시판 구조는 아래 그림 형태로 실행됩니다

<그림 9>

처음 시작하시는 분들은 여러 개의 파일을 생성하여 서비스를 구현하는 형태가 번거롭다고 생각할지도 모르나 추후 프로젝트를 진행하면서 새로운 기능들이 추가되고 이전 기능들이 수정될 경우 동일한 패턴을 사용하므로 서비스 변경이 용이합니다. 그리고 캔곰에 대해 어느정도 익숙해지면 나름대로 프로젝트 성격에 맞는 형태로 수정하여 재사용할 수도 있습니다. 나름대로 고민해 보길 바랍니다.

다음은 RemoteObject에 대해
지금까지 각각의 캔곰 클래스들이 담당하는 역할과 이를 활용하여 게시판 리스트를 구현하는 방법에 대해 알아 보았습니다. 다음 시간에는 RemoteObject에 대해 알아보도록 합니다.

만영의 Flex 강좌 시리즈 1

출처 : http://adobe.bloter.net/_news/8df42c431fee0c5c

[만영의 Flex 강좌 시리즈 1]
FDS 설치 방법 알아보기

안녕하세요. 강좌를 시작하기에 앞서 저에 대한 간단한 소개를 하고자 합니다.
현재 ㈜핸디소프트 BAM개발팀에 근무하고 있으며 BAM(Business Activity Monitoring) 솔루션 중에 대시보드 파트를 Flex를 가지고 열심히 삽질과 깨우침을 터득하면서 내공을 쌓고 있습니다. 생각해보면 Flex의 장점을 가장 효과적으로 사용 할 수 있는 분야 중 하나는 대시보드가 아닐까 하는 생각이 드는군요.

개인적으로 Flex를 처음 접한 건 2005년도 Flex1.5가 막 나오기 직전인 듯 합니다. X-Internet관련 밴치마킹을 하고 있던 차에 Flex라는 RIA 솔루션을 알게 되었습니다. 이전까지만 해도 flash는 디자인 영역이라 불문율로 여겨왔는데… 제앞에 나타난건 헉! 개발자들도 flash를 할 수 있다는 거죠… 미려하고 인터렉티브한 UI를 구성 할 수 있는 참으로 경이로운 솔루션이었습니다. 문법 또한 자바와 html,javascript와 유사했기 때문에 더이상 지체할수없는 영역이었습니다 그때까지만 해도 문서와 레퍼런스가 많이 없던 시절이었기 때문에 혼자서 모든 것을 해결해야 했습니다. 참으로 힘든 하루의 연속이었죠… ㅠ.ㅠ 이제는 flex를 시작하는 분들에게 조금이나마 도움을 드리고자 현재까지 축적해왔던 정보들을 하나 둘씩 공유하고자 합니다.

첫번째로 Flex에서 가장 꽃이라 할 수 있는(개인적인 생각임…^^) FDS에 대한 강좌를 진행 하고자 합니다. FDS에 대해 간단히 소개하자면 FDS는 자바로 만들어진 프레임웍 이고 Web Application Server에 Deploy되어 자바 클래스와 클라이언트 flash와의 데이터 서비스를 제공합니다. 그리고 FDS의 가장 중요한 요소인 실시간 데이터 서비스도 제공합니다. 하지만 아쉽게도 FDS를 사용하기 위해서는 기본적으로 자바에 대한 지식이 있어야 합니다. 자바를 모르시는 분들은 자바부터 시작 하셔야 겠지요. ^^

그럼 이제 시작해 볼까요.

– Flex Data Services 2
Flex는 3가지 데이터 통신 서비스를 제공하는데 FDS를 사용할경우만 Binery데이터를 사용 할 수 있습니다. 다른 서비스의 경우는 XML포맷을 사용하기 때문에 범용성 측면에서는 장점이 있겠지만 데이터 사이즈 증가로 인해 성능이 저하되는 문제를 유발합니다. 그러므로 대용량 처리를 위해서는 FDS를 사용하여 효과적인 시스템을 구축해야 합니다.
FDS를 사용하기 위해선 먼저 설치부터 해야 겠죠… 한 스텝씩 친절하게 정리 하였으니 천천히 따라 해보세요. ~~

1. Adobe 사이트에서 Express edition 버전을 다운 받습니다.
URL: http://www.adobe.com/cfusion/tdrc/index.cfm?loc=ko&product=flex
Express edition은 1CPU 컴퓨터에서 하나의 어플리케이션을 실행하도록 제한된 무기한 무료 제품입니다.

<그림1>

2. 다운로드 받은 fds2-win.exe파일을 더블클릭하여 설치를 시작합니다.

<그림2>

3. next버튼을 클릭합니다.

<그림 3>

4. License agreement를 체크한다음 next버튼을 클릭합니다.

<그림 4>

5. 라이센스 키를 입력한다음 next버튼을 클릭합니다. 단 Express edition으로 설치한다면 라이센스 키없이 바로 next버튼을 클릭합니다.

<그림 5>

6. FDS2설치 폴더를 선택한 다음 next버튼을 클릭합니다.

<그림 6>

7. 2가지 옵션중 하나를 선택 할 수 있습니다. 첫번째 옵션인 With integrated JRun을 선택하면 디폴트로 JRun J2EE서버를 설치한후 JRun에 FDS2를 설치합니다.
두번째 옵션인 J2EE Web Application을 선택하면 다른 Web Application Server에 디플로이가 가능한 형태인 flex.war파일을 생성해 줍니다. 이번 강좌는 첫번째 옵션을 선택하여 JRun을 설치한다음 FDS2를 설치 하도록 하겠습니다.

[TIP] – Tomcat을 사용한다면 두번째 옵션을 선택한 후 해당 폴더를 지정하면 됩니다. 그리고 추가적으로 설정 파일을 변경하기 위해서는 최종으로 생성된 flex.war파일의 압축을 풀어 사용을 하셔야 겠지요.

<그림 7>

8. Install버튼을 클릭합니다.

<그림 8>

9. 설치가 완료되었습니다. 설치된 예제는 서버를 구동한 다음 http://localhost:8700/samples에서 확인 할 수 있습니다. 참고사항으로 JRun서버는 디풀트로 8700포트를 사용합니다.

<그림 9>

10. 설치된 폴더를 확인합니다. Flex는 JRun서버의 웹루트인 ~jrun4/servers/default폴더에 설치되어 있습니다

<그림 10>

11. 설치된 JRun 서버를 실행 합니다. C:fds2jrun4bin폴더로 이동하여 jrun.exe를 실행한다음 콘솔 화면에서 defualt를 선택한후 Start 버튼을 클릭합니다.

<그림 11>

12. 콘솔 메세지의 마지막 라인에 Server ‘default’ started.가 표시되었다면 정상적으로 서버 실행이 완료되었습니다.
자 이제 브라우져를 열고 http://localhost:8700/flex 로 이동합니다. 아래와 같은 화면이 떳다면 설치가 완료되었습니다.

<그림 12>

13. 설치된 FDS의 폴더 구조는 아래와 같습니다.(~/jrun4/servers/default/flex)
– WEB-INF 폴더
WEB-INF/classes -> 자바 클래스 폴더입니다. Web Application Server가 구동될 때 자동으로 메모리에 로딩합니다.
클라이언트와 통신할 때 필요한 자바 클래스들이 이곳에 포함되겠죠. ^^
WEB-INF/flex -> FDS 프레임웍 설정 및 관련 파일들이 모여있는 폴더입니다.
WEB-INF/lib -> FDS를위해 사용하는 자바 라이브러리 폴더입니다.

– WEB-INF/flex 폴더
Hotfixes -> flex 핫픽스 관련 파일들을 관리하는 폴더입니다.
Jars -> mxml을 컴파일하기 위해 사용하는 자바 라이브러리 폴더입니다.
Libs -> 플렉스 공통 라이브러리 폴더입니다.
Locale -> 플렉스가 제공하는 컴포넌트들의 다국어 리소스를 관리하는 폴더입니다.
Themes -> 플렉스 테마를 관리하는 폴더입니다.
User_classes -> 사용자 정의 플렉스 라이브러리,mxml,as 클래스를 관리하는 폴더입니다.

이제까지 FDS 설치 방법에 대해 알아보았습니다. 생각보다 정말 간단하죠. 그럼 만영 두번째 글에서는 FDS에서 빼놓을 수 없는 Cairngorm Framework에 대해 알아보도록 합시다.