출처 : http://2005elc.elancer.co.kr/eTimes/page/eTimes_view.html?str=c2VsdW5vPTUwNjA= 1. 프로젝트의 작성(1) | ||||
2007/01/10 | ||||
| ||||
■프로젝트의 작성 전회(Flex의 체제, Cairngorm의 아키텍쳐 )에서는 Cairngorm Framework에 부속되어 있는 로그인 샘플을 구성하는 클래스를 보면서 체제의 아키텍쳐에 대하여 이야기하였습니다. 이번 회부터 2회에 걸쳐서 실제로 Cairngorm Framework를 사용하여 웹 애플리케이션 서버의 검색/등록/갱신/삭제를 실시하는 간단한 샘플 어플리를 작성하고자 합니다. 이번 회에는 전편으로서 서버 측에 제휴할 때까지의 부분(View~Command)을 작성할 것입니다. 우선, 처음에 샘플 애플리케이션용 프로젝트를 작성합니다. 개발 환경의 구축이 되어 있지 않은 분은 제2회(Flex의 체제, Cairngorm를 사용해 보자)를 참조하여 개발 환경을 구축하기 바랍니다. 아래에는 제2회에서 구축한 개발 환경을 기반으로 샘플 애플리케이션을 작성할 것입니다. 프로젝트는 로그인 샘플을 움직였을 때 만든 프로젝트와 동일한 순서로 작성합니다. 우선, Eclipse를 가동시키면 Eclipse의 패키지 익스플로러 상에서 오른쪽 클릭 → [새로 만들기] → [그 외]를 선택합니다. 그러면, 아래와 같은 다이얼로그가 표시되고, [웹] → [Dynamic Web Project]를 선택하고 다음 버튼을 누릅니다.
그러면 아래와 같은 다이얼로그가 나타나므로 여기에서는 Project Name에 cairngorm-sample이라고 입력합니다. Target runtime에 개발 환경 구축 시에 설정한 Tomcat이 선택되어 있는 것이 확인되면 종료 버튼을 누릅니다.
|
2. 프로젝트의 작성(2) | ||||
2007/01/10 | ||||
| ||||
계속해서 Flex 애플리케이션에 필요한 라이브러리와 Cairngorm Framework의 라이브러리를 프로젝트에 복사합니다. 여기도 로그인 샘플을 움직였을 때의 순서와 같지만 4.의 작업이 새로 추가되었으므로 잊어서는 안됩니다.
리스트 1 flex-config.xml(발췌)
마지막으로 지금부터 만들 MXML이나 Action Script의 파일을 저장하기 위한 디렉토리를 작성합니다. 우선, cairngorm-sample/Web Content 바로 아래에 sample라는 디렉토리를 작성합니다. 그 다음으로 그 sample 디렉토리 안에 business, commands, control, model, view, vo의 6개의 디렉토리를 작성합시다. 이 디렉토리 구성은 로그인 샘플의 그것과 같습니다. 이것으로 샘플 애플리케이션용 프로젝트의 작성은 완료되었습니다. 이 때 프로젝트의 구성이 아래와 같은지 확인하도록 합니다.
|
3. 샘플 애플리케이션의 사양 | ||
2007/01/10 | ||
| ||
■샘플 애플리케이션의 사양 프로젝트의 작성이 완료되었다면 지금부터 샘플 애플리케이션의 작성에 들어갑니다 .이번 작성하는 샘플 애플리케이션은, 애플리케이션 서버의 검색/추가/갱신/삭제를 실시하는 간단한 것입니다.화면의 완성 이미지는, 아래와 같이 됩니다.
구체적으로는 제품 코드로 애플리케이션 서버를 검색하여 해당의 애플리케이션 서버를 데이터 그리드에 표시합니다. 데이터 그리드의 표시 항목은 제품 코드, 제품명, 벤더, 가격, 비고의 5개입니다. 데이터 그리드 아래에는 이들 5개 항목의 텍스트 인풋이 있으며 데이터 그리드의 행을 선택하면 텍스트 인풋에 선택된 애플리케이션 서버의 정보를 표시합니다. 이 텍스트 인풋의 정보를 수정하여 갱신 버튼을 누르면 애플리케이션 서버의 정보를 갱신합니다. 또, 데이터 그리드의 행이 선택된 상태에서 삭제 버튼을 누르면 해당 애플리케이션 서버를 삭제합니다. 새로운 애플리케이션 서버를 추가하고 싶을 때는 텍스트 인풋에 애플리케이션 서버의 정보를 입력하여 추가 버튼을 누릅니다. 실제의 검색/추가/갱신/삭제의 각 처리는 서버 사이드의 서비스(Remote Object)로서 구현합니다. |
4. View(MXML)의 작성 | ||
2007/01/10 | ||
| ||
■View(MXML)의 작성 그러면, 우선 화면인 View(MXML)부터 작성합니다. 아래의 리스트는 샘플 애플리케이션의 View인 APServerList.mxml입니다. 이것을 cairngorm-sample/Web Content/sample/view에 작성하도록 합시다. 리스트 2 APServerList.mxml
이 MXML은 완성 이미지에서 보았던 화면에 대응하는 것입니다. 라벨, 텍스트 인풋, 버튼, 데이터 그리드 등, 화면을 구성하는 컴포넌트를 배치하였습니다. 그리고, Cairngorm Framework를 사용하기 위해서 ViewHelper, ServiceLocator, Controller를 <mx:Application> 태그 아래에서 인스턴스화하였습니다. <mx:Application> 태그에서는 view, business, control의 각 패키지에 대해서 이름 공간을 설정하였습니다. 이름 공간을 설정하려면 xmlns:프리픽스=”URI”라는 기술을 합니다. 이렇게 함으로써 그 URI에 속하는 태그를 프리픽스:태그 명이라는 형식으로 표기할 수 있습니다. MXML 태그는 URI를 지정하여 이름 공간을 설정하였는데, view, business, control에 대해서는 URI가 아니라 패키지를 지정하였습니다. URI 부분에 패키지를 지정함으로써 해당 패키지에 속하는 클래스를 view:APServerListViewHelper와 같이 지정할 수 있습니다. <mx:Script>태그에서는 로그인 샘플과 같이 ModelLocator를 임포트하였습니다. ModelLocator의 apServerListModel 속성은 검색 결과의 애플리케이션 서버의 정보를 보관 유지하고 있는 속성이며 데이터 그리드에 데이터 바인딩하였습니다. 검색, 추가, 갱신, 삭제의 각 버튼에 대해서는 버튼이 클릭되었을 때에 각각 ViewHelper의 메소드를 호출하도록 하고 클릭되었을 때의 구체적인 처리는 View가 아닌 ViewHelper쪽으로 구현하도록 하였습니다.
|
5. ViewHelper의 작성 | |
2007/01/11 | |
| |
■ViewHelper의 작성 다음으로 ViewHelper를 작성합니다. 아래의 리스트는 샘플 애플리케이션의 ViewHelper인 APServerListViewHelper.as입니다.이것을 cairngorm-sample/WebContent/sample/view에 작성해 주세요. 리스트 3 APServerListViewHelper.as
ViewHelper는 Cairngorm Framework의 ViewHelper 클래스를 계승해 작성합니다.ViewHelper로 구현하는 처리는 화면의 검색 버튼, 추가 버튼, 갱신 버튼, 삭제 버튼을 각각 눌렀을 때의 처리입니다. 검색 버튼을 눌렀을 때에는 searchAPServer 메소드가 호출됩니다. 이 메소드에서는 화면의 검색 조건(제품 코드)을 입력하는 텍스트 인풋에서 값을 취득하고 EventBroadcaster 클래스의 broadcastEvent 메소드를 사용하여 이벤트를 발생시킵니다. 전 회에 설명한 바와 같이 broadcastEvent 메소드의 제1 인수에는 발생시키고 싶은 이벤트명을, 제2 인수에는 커맨드 클래스에 건네주고 싶은 데이터를 지정합니다. 여기에서는 Controller 클래스에 정의한 검색 이벤트와 화면으로부터 취득한 검색 조건을 인수에게 건네었습니다. 추가, 갱신 버튼을 눌렀을 때는 각각 registAPServer 메소드와 updateAPServer 메소드가 호출됩니다. 이러한 메소드 중에서는 각각 ValueObject의 속성에 화면의 입력값를 설정하고 EventBroadcaster 클래스의 broadcastEvent 메소드를 사용하여 이벤트를 발생시킵니다. 그 후, 데이터 그리드에 대해서 등록된 행의 추가나 갱신된 행의 치환을 실시하고 있습니다. 또, 행을 선택하지 않고 갱신 버튼을 눌렀을 경우에는 경계체제 메세지를 표시하도록 합니다. 삭제 버튼을 눌렀을 때는 removeAPServer 메소드가 호출됩니다. 이 메소드에서는 데이터 그리드에서 선택된 애플리케이션 서버의 제품 코드를 취득하고 다른 버튼을 눌렀을 때의 처리와 동일하게 EventBroadcaster 클래스의 broadcastEvent 메소드를 사용하여 이벤트를 발생시켰습니다. 그 후, 데이터 그리드로부터 선택된 행을 삭제하고 텍스트 인풋의 입력 구역을 비웠습니다. 갱신 버튼을 눌렀을 때의 처리와 동일하게 행을 선택하지 않고 삭제 버튼을 눌렀을 경우에는 경계체제 메세지를 표시하도록 합니다. |
6. ValueObject의 작성 | ||||
2007/01/11 | ||||
| ||||
■ValueObject의 작성 계속해서 ValueObject를 작성합니다. 아래의 리스트는 샘플 애플리케이션의 ValueObject인 APServerVO.as입니다. 이것을 cairngorm-sample/WebContent/sample/vo에 작성합니다. 리스트 4 APServerVO.as
ValueObject는 Cairngorm Framework의 ValueObject 인터페이스를 구현하여 작성합니다. 여기에서는 제품 코드, 제품명, 벤더, 가격, 비고의 5개를 모두 String형의 속성으로서 정의하였습니다. 또한, 로그인 샘플에서는 구현되고 있던 toString 메소드는 구현이 필수는 아니기 때문에 이 샘플에서는 생략하였습니다. ValueObject는 서버 사이드에서도 사용하므로 이 Action Script의 클래스에 대응하는 Java의 클래스도 필요합니다. 아래의 리스트는 위의 Action Script에 대응하는 Java의 ValueObject입니다. 이것을 cairngorm-sample/src/sample/vo에 작성해 주세요. 리스트 5 APServerVO.java
Action Script의 ValueObject는 서버 사이드에게 건네지면 Flex의 구조에 의해서 자동적으로 Java의 클래스에 변환됩니다(그림 1 참조). 그 변환을 하기 위해서는 전 회의 로그인 샘플에서도 조금 접했었는데 Object 클래스의 registerClass 메소드를 이용하여 ActionScript와 Java의 클래스를 매핑 해 둘 필요가 있습니다. 이 메소드의 제1 인수에는 Java 클래스의 완전 수식명, 제2 인수에는 Action Script의 클래스명을 지정합니다.
변환을 적절히 실시하기 위해서는 그 외에도 아래와 같은 룰이 있기 때문에 주의해야 합니다.
|
7. Controller의 작성 | |
2007/01/11 | |
| |
■Controller의 작성 다음으로 Controller를 작성합니다. 아래의 리스트는 샘플 애플리케이션의 Controller인 SampleappControl.as입니다. 이것을 cairngorm-sample/WebContent/sample/control에 작성하도록 합니다. 리스트 6 SampleappControl.as
Controller는 Cairngorm Framework의 FrontController 클래스를 계승하여 작성합니다. Controller 클래스에서 구현해야 할 것은 이벤트명을 정의하는 것과 그 이벤트가 일어났을 때 호출하고 싶은 커맨드를 이벤트명으로 대응시켜서 등록하는 것의 2가지입니다. 여기에서는 화면의 버튼을 눌렀을 때 각각 발생하는 검색/등록/갱신/삭제의 각 이벤트를 클래스 변수로서 정의하였습니다. 그 아래의 constructor에서는 부모 클래스의 addCommand 메소드를 사용하여 커맨드 클래스의 인스턴스를 이벤트에 대응시켜 등록하였습니다. |
8. Command의 작성 | ||||
2007/01/11 | ||||
| ||||
■Command의 작성 계속해서 Command를 작성합니다. 아래의 4개의 리스트는 샘플 애플리케이션의 Command입니다. Command는 검색/등록/갱신/삭제의 각 이벤트에 대응하여 4개가 있습니다. 이것을 cairngorm-sample/WebContent/sample/commands에 작성합니다. 리스트 7 APServerSearchCommand.as
리스트 8 APServerRegistCommand.as
리스트 9 APServerUpdateCommand.as
리스트 10 APServerRemoveCommand.as
Command는 Cairngorm Framework의 Command 인터페이스와 Responder 인터페이스를 구현하여 작성합니다. Command 인터페이스에서는 execute 메소드가, Responder 인터페이스에는 onResult와 onFault 메소드가 정의되어 있기 때문에 각각의 Command 클래스에서는 이것들 3개의 메소드를 구현합니다. execute 메소드에서는 서버 사이드의 서비스(Remote Object)에 액세스하기 위해서 BusinessDelegate를 생성하고 그 메소드를 호출합니다. event의 data 속성에는 이벤트를 발생시켰을 때에 건네준 데이터가 들어가 있으므로 각각 적절한 데이터형에 캐스트하였습니다. . onResult 메소드에서는 서버 사이드의 호출에 성공했을 경우의 핸들링을 실시합니다. 검색의 Command에서는 검색 결과를 ModelLocator의 apServerListModel 속성에 유지하도록 하였습니다. 등록/갱신/삭제의 각 Command에서는 단지 메세지를 표시하도록 하고 있을 뿐입니다. onFault 메소드에서는 서버 사이드의 호출에 실패했을 경우의 핸들링을 실시합니다. 여기는 모든 Command로 에러 메세지를 표시하도록 하였습니다. |
9. ModelLocator의 작성 | |
2007/01/11 | |
| |
■ModelLocator의 작성 마지막으로 ModelLocator를 작성합니다. 아래의 리스트는 샘플 애플리케이션의 ModelLocator입니다. 이것을 cairngorm-sample/ Web Content/ sample/ model에 작성합니다. 리스트 11 SampleappModelLocator.as
ModelLocator는 Cairngorm Framework의 ModelLocator 인터페이스를 구현해 작성합니다.ModelLocator에서는 화면에서 표시하는 데이터 모델을 자유롭게 정의할 수 있습니다. 여기에서는 데이터 그리드에 표시하는 검색 결과의 데이터 모델을 속성으로 정의하였습니다. 이상으로 이번 회에는 Cairngorm Framework를 사용하여 샘플 애플리케이션을 작성했습니다. Cairngorm Framework의 흐름을 잊어 버린 독자들은 전 회에 설명한 아키텍쳐의 전체상과 로그인 샘플의 코드를 한번 더 보고 복습해보시기 바랍니다. 다음 회에는 샘플 애플리케이션의 나머지의 부분(서버 사이드 제휴 부분)을 작성하여 샘플 애플리케이션을 완성시킵니다. |