본문 바로가기

IT/Flex

제2회 Flex의 체제, Cairngorm를 사용해 보자

출처 : http://2005elc.elancer.co.kr/eTimes/page/eTimes_view.html?str=c2VsdW5vPTQ1MjE=

1. Flex의 인스톨
2006/12/12  

Flex의 인스톨

 우선 가장 먼저 Flex를 인스톨합니다. Flex는 J2EE(Java EE) 애플리케이션 서버 상에서 동작하기 때문에 동작시키려면 JDK와 애플리케이션 서버가 필요합니다. 여기에서는 이러한 인스톨도 함께 실시하도록 하겠습니다.

 Flex는 최신 버젼 2.0을 사용하고 싶지만 아직 베타판 릴리스이기 때문에 이번에는 정식 릴리스가 되어 있는 버젼 1.5를 사용하도록 하겠습니다.

 Flex 1.5는 JDK 5.0에는 대응하고 있기 때문에 JDK는 1.4계를, 애플리케이션 서버는 Apache Tomcat의 5.0계를 각각 사용합니다. 이번 호에는 개발 환경에 Eclipse를 이용하는 방법을 소개하는 것이므로 Flex Builder에 대해서는 따로 인스톨 할 필요는 없습니다.

Eclipse 상에서 개발하는 준비

 이번회에는 Flex 애플리케이션의 개발 환경으로서 Java 엔지니어에게는 이미 필수 개발툴이 된 Eclipse를 사용해 보고자 합니다. Flex 애플리케이션의 개발 환경으로서는 Macromedia가 제공하고 있는 Flex Builder라는 IDE(통합 개발 환경)가 있는데 프로세스가 무겁게 Eclipse와 양립해서 시작되었으며 스펙이 낮은 머신에서는 동작이 늦어지거나 불안정해지기도 합니다. 또, 트라이얼판에서는 60일간의 사용 제한이 있어서 시간이 지나면 사용할 수 없게 되어 버린다는 단점도 있습니다.

 이번에 소개할 것은 Eclipse 상에서 MXML의 코드 어시스트를 가능하게 하는 방법입니다. 유감스럽게도 Flex Builder와 같이 컴포넌트를 드래그&드롭하여 GUI 와 비슷하게 개발할 수 없습니다. 그렇다면 Eclipse 상에서 개발하는 준비를 진행시키도록 합시다.

Flex Builder 2.0

Flex 2에서는 개발 환경으로서 Flex Builder 2.0이라는 제품이 제공됩니다. Flex Builder 2.0은 Eclipse 베이스의 개발 환경이며 본 연재에서 소개하는 MXML의 코드 어시스트는 물론, 컴포넌트를 드래그&드롭하여 GUI와 비슷한 화면을 작성하는 것도 Eclipse 상에서 가능해집니다.

Eclipse와 WTP의 인스톨

 이번 회에는 Eclipse의 에디터 상에서 MXML의 코드 어시스트를 가능하게 하기 위해서 WTP(Web Tools Platform)라는 제품을 사용합니다. WTP는 Eclipse의 WTP 프로젝트에서 개발이 진행되고 있으며 웹 개발에 필요한 툴들을 Eclipse의 플러그 인으로서 제공하고 있습니다. WTP는 GEF나 EMF 등 그 외에 필요한 몇가지의 플러그 인이 있기 때문에 WTP를 인스톨할 때 그것들도 함께 인스톨할 필요가 있습니다. WTP를 번들이 완료된 Eclipse도 있기 때문에 Eclipse를 새로 인스톨하는 경우에는 편리한 이 사용을 추천합니다.

 또한, 본 연재 집필 시점의 최신 버젼은 WTP 1.0.2입니다. 이번에는 이 버젼의 WTP 번들이 완료된 Eclipse(Eclipse의 버젼은, 3.1.1)을 사용하여 설명하도록 하겠습니다. Eclipse의 WTP 프로젝트의 페이지의 오른쪽에 있는 버젼 「WTP 1.0.2」를 클릭하여 열린 페이지의[Download WTP 1.0.2]를 클릭하여 그 앞의 다운로드용 페이지에서 [wtp-all-in-one-sdk-R-1.02-XXX]라는 이름이 붙어 있는 파일을 다운로드합시다.

2. XML 에디터의 설정(1)
2006/12/12  

XML 에디터의 설정

 Eclipse와 WTP의 인스톨이 끝났으면 그 다음으로 MXML의 코드 어시스트를 가능하게 하기 위해서 XML 에디터를 설정합니다. 우선, Eclipse의 도구모음 창에서 설정을 선택합니다. 그러면, 아래와 같은 설정 다이얼로그가 나타납니다. 여기서 왼쪽의 트리에서 [일반]→ [컨텐츠 형식]을 선택합니다. 오른쪽의 컨텐츠 형식 표시란에 컨텐츠 형식의 트리가 나타나므로 [Text]→[XML]를 선택합니다.

화면 1 컨텐츠 형식의 설정 다이얼로그

 추가 버튼을 누르면 아래와 같은 다이얼로그가 표시되므로 파일 형식에“*.mxml”라고 입력하고 OK버튼을 누릅니다. 그러면 연결 파일 칸에 *.mxml가 더해집니다.

화면 2 파일 형식의 새로 만들기 추가

 계속해서 설정 다이얼로그의 왼쪽 트리에서 [Web and XML]→ [XML Catalog]를 선택합니다. 오른쪽의[XML Catalog Entries]표시란에[XML Catalog]의 목록이 표시되면 [User Specified Entries]를 선택합니다.

화면 3 XML Catalog의 설정 다이얼로그


3. XML 에디터의 설정(2)
2006/12/12  

 Add 버튼을 누르면 아래와 같이 다이얼로그가 나타나므로 [URI]에 MXML의 XML schema 파일의 장소를 지정합니다. schema 파일은 Flex를 인스톨한 디렉토리/extras/schema/mxml.xsd가 되므로 각자의 환경에 맞추어 지정하시기 바랍니다. URI를 입력하면 [Key Type]과 [Key]에는 자동적으로 값이 들어가므로 그곳은 변경하지 않고 OK버튼을 누릅니다.

화면 4 XML Catalog의 추가

 여기까지 되었다면 Eclipse의 적당한 프로젝트에 MXML 파일을 작성하고 [Ctrl 키]+[스페이스 키]를 눌러 아래와 같이 MXML의 코드 어시스트가 가능하게 되는지를 확인하기 바랍니다. .

화면5 MXML의 코드 어시스트의 확인

Action Script Development Tool(ASDT)

Eclipse에는 Action Script의 코드 어시스트나 키워드의 강조 표시를 가능하게 하는 ASDT라는 플러그 인이 있습니다. 본 연재에서는 자세히 해설하지 않지만 흥미가 있는 분들은 sourceforge의 웹 사이트에서 다운로드할 수 있으므로 시험해보시기 바랍니다. 다만, 제대로 사용하려면 Action Script 컴파일러(MTASC 등)을 별도로 인스톨하여 설정할 필요가 있고 사용하는 것이 조금 어렵습니다. Flex Builder 2.0에서는 Action Script의 코드 어시스트도 가능해집니다.



4. Tomcat 기동/정지의 설정(1)
2006/12/12  

Tomcat 기동/정지의 설정

 다음으로 Eclipse 상에서 Tomcat을 기동/정지할 수 있도록 합시다. 사실 조금 전 인스톨한 WTP에는 Eclipse 상에서 Tomcat를 기동/정지하는 기능이 준비되어 있습니다. Sysdeo 등이 제공하고 있는 Tomcat 플러그 인을 사용해도 동일하게 실현될 수 있지만 이번 회에는 모처럼 WTP를 인스톨했으므로 이쪽을 사용합니다. 우선, Eclipse의 도구모음 창에서 설정을 선택합니다. 그러면 아래와 같은 설정 다이얼로그가 표시됩니다. 이 때 왼쪽의 트리에서 [Server]→[Installed Runtimes]를 선택합니다.

화면 6 Installed Runtimes의 설정 다이얼로그

 Add 버튼을 누르면 아래와 같은 다이얼로그가 나타나며 [Apache]→[Apache Tomcat v5.0]을 선택하여 다음 버튼을 누릅니다.

화면 7 Server Runtime에 Tomcat v5.0을 선택



5. Tomcat 기동/정지의 설정(2)
2006/12/12  

 그러면, 아래와 같은 다이얼로그가 나타나고 [Tomcat installation directory]에 Tomcat을 인스톨한 디렉토리를, JRE에 Eclipse로 설정되어 있는 JRE를 지정합니다. Name은 임의이므로 원하는 이름으로 변경할 수도 있지만 여기에서는 디폴트 그대로 둡니다. 입력이 끝나면 종료 버튼을 누릅니다.

화면 8 Server Runtime에 Tomcat을 추가

JRE의 지정

JRE의 지정 부분에서 경우에 따라서는 「JSP 파일을 컴파일하기 위해서 Tomcat이 JDK를 원합니다」라는 메세지가 표시되는 경우가 있습니다. 이것은 JSP 컴파일러가 JRE에는 포함되어 있지 않기 때문에 표시되는 것으로 이 경우 JRE는 아니며 JDK를 지정합니다. Eclipse의 인스톨이 끝난 JRE에 표시되는 JRE의 로케이션이 C:\ProgramFiles 아래(Windows 환경의 경우) 등으로 되어 있는 경우 JRE가 설정되어 있기 때문에 JDK를 인스톨한 디렉토리(ex : C:\j2sdk1.4.2_06등)로 로케이션을 변경해 주세요.


  아래의 설정 다이얼로그의 오른쪽 칸에 지금 추가한 Tomcat이 나타난 것을 확인하고 체크 박스에 체크를 하고 OK버튼을 누릅니다. 이것으로 Eclipse 상에서 Tomcat를 기동/정지할 준비가 갖추어졌습니다.

화면 9 Tomcat의 추가를 확인



6. Cairngorm Framework의 다운로드
2006/12/13  

Cairngorm Framework의 동작 확인

 개발 환경의 구축이 끝났다면 그 다음으로 Cairngorm Framework에 부속되어 있는 로그인의 샘플 애플리케이션을 사용하여 동작을 확인해보겠습니다.

·Cairngorm Framework의 다운로드

 우선 iteration::two사의 웹 사이트에서 Cairngorm Framework 0.99를 다운로드합니다. 다운로드한 파일을 적당한 디렉토리를 지정하여 풀고 내용을 보도록 합시다. 아래의 5개의 디렉토리가 있을 것입니다. 각 디렉토리의 내용은 아래와 같습니다.

디렉토리 내용
bin 프레임워크의 클래스를 아카이브한 파일(SWC 파일)과 설정 파일이 포함되어 있습니다
build 프레임워크의 아카이브를 생성하기 위한 Ant 스크립트가 포함되어 있습니다
docs 프레임워크의 API 문서(AS2Doc)가 포함되어 있습니다
flex 프레임워크 본체의 원시 코드가 포함되어 있습니다
samples 샘플 애플리케이션이 포함되어 있습니다
표 1 Cairngorm Framework의 디렉토리 구성




7. 프로젝트의 작성
2006/12/13  

·프로젝트의 작성

 이어서 로그인 샘플을 가동하기 위한 프로젝트를 작성합니다. 우선,[패키지 익스플로러]상에서 오른쪽 클릭 →[새로만들기]→[그 외]를 선택합니다. 그러면 아래와 같은 다이얼로그가 표시되고 [웹]→[Dynamic Web Project]를 선택한 후 다음 버튼을 누릅니다.

화면 10 프로젝트 선택의 마법사

 그러면 아래와 같은 다이얼로그가 표시되므로, 여기에서는 Project Name에 cairngorm-login와 입력합니다.Target Runtime에 방금전 설정한 Tomcat가 선택되고 있는 것을 확인하면, 종료 버튼을 누릅니다.

화면 11 Dynamic 웹 Project의 작성

 이어서 이 cairngorm-login 프로젝트를 Flex 애플리케이션으로 하기 위해서 Flex 애플리케이션의 모형인 flex.war를 풀어서 WEB-INF 이하 전부를 cairngorm-login/WebContent/WEB-INF에 겹쳐쓰기 복사해 주세요. flex.war는 Flex를 인스톨 한 디렉토리의 바로 아래에 있습니다.

 여기까지로 Flex 애플리케이션의 모형이 생겼습니다.다음에, 로그인 샘플을 움직이기 위해서 필요한 파일을 cairngorm-login 프로젝트에 배치합니다. 아래에 방금 전 Cairngorm Framework의 zip 파일을 풀어서 생긴 samples 디렉토리를 SAMPLES로 합니다.

1. cairngorm.swc 배치 SAMPLES/bin/cairngorm.swc를 cairngorm-login/WebContent/WEB-INF/flex/user_classes에 둔다.

2. cairngorm-manifest 배치 SAMPLES/bin/cairngorm-manifest.xml를 cairngorm-login/WebContent/WEB-INF/flex에 둔다.

3. 로그인 샘플의 원시 코드 배치 SAMPLES/login/src 아래를 cairngorm-login/src 아래에 둔다. SAMPLES/login/웹app 아래를 cairngorm-login/WebContent에 덧쓰기 복사한다.

Ant의 이용

이번은, Cairngorm Framework를 움직이기 위해서 필요한 파일을 파악받기 위해서, 수작업으로 프레임워크의 파일과 샘플의 원시 코드를 배치했습니다만, Ant의 빌드 파일도 준비되어 있기 때문에 이쪽을 사용하는 것도, 로그인 샘플을 움직이기 위해서 필요한 파일 일식을 배치할 수 있습니다.자세한 것은, Cairngorm Framework의 다운로드 페이지로 공개되고 있는인스톨 가이드를 참조해 주세요.



8. 로그인 샘플의 실행(1)
2006/12/13  

·로그인 샘플의 실행

 이상으로 로그인 샘플을 움직일 준비를 할 수 있었습니다. Tomcat를 가동하여 브라우저에서 동작을 확인해 봅시다. 패키지 익스플로러 상의 cairngorm-login 프로젝트를 오른쪽 클릭하여 [실행]→ [Run On Server]를 선택해 주세요. 그러면 아래와 같은 다이얼로그가 표시되므로 server type에 Tomcat v5.0 Server가, Server runtime에 방금 전 설정한 Tomcat가 선택되어져 있음을 확인합니다. cairngorm-login 프로젝트로 이 Tomcat 서버를 디폴트로 하기 위해 Server runtime아래의 체크 박스에 체크를 하고 다음 버튼을 눌러 주세요.

화면 12 Run On Server 다이얼로그

 아래와 같이 Eclipse에 새롭게 Servers 뷰가 더해졌으며 거기에 설정한 Tomcat이 표시되어 있다고 생각합니다. 이 Tomcat 서버를 오른쪽 클릭하여 메뉴에서 Start를 선택하고 Tomcat를 가동합니다. 정지할 때는 똑같이 Tomcat 서버를 오른쪽 클릭하여 메뉴에서 Stop을 선택합니다.

화면 13 Servers 뷰


9. 로그인 샘플의 실행(2)
2006/12/13  

 Status가 Started가 되면 가동이 완료된 것이므로 브라우저에서 아래의 URL에 액세스합니다.

http://localhost:8080/cairngorm-login/Index.mxml

 Flex를 잘아는 Initializing처리가 시작되고 아래와 같은 화면이 나타납니다. 여기에서 사용자에게 “iteration”, 패스워드에 “two”라고 입력한 후 로그인 버튼을 누릅니다.

화면 14 로그인 화면

 아래와 같이 로그인한 일자와 시간이 표시되면 로그인 샘플은 정상적으로 동작하고 있습니다(사용자명과 패스워드를 잘못 입력했을 경우에는 에러 메세지가 표시됩니다).

화면 15 로그인 성공 화면

 이상으로 이번 회에는 개발 환경의 구축과 Cairngorm Framework의 동작을 확인해보았습니다. Flex Builder를 사용하지 않아도 Eclipse의 에디터 상에서 MXML의 코드 어시스트가 가능해지므로 그 편리함을 알아주셨으면 합니다.

 단, 이 방법에서는 컴포넌트를 드래그&드롭하여 GUI와 유사한 화면을 작성할 수 없기 때문에 실제 개발에서는 화면의 큰 범위만 우선 Flex Builder로 드래그&드롭으로 만들어 버리며 그 후의 상세한 레이아웃 수정 등은 Eclipse의 XML 에디터를 사용하는 것이 좋을지도 모릅니다. 또한, Cairngorm Framework의 도입에 대해서도 파일을 소정의 위치에 두는 것만으로 끝나기 때문에 간단하게 할 수 있다는 것도 알 수 있을 것입니다.

 다음 회에는 방금전 동작 확인에 사용한 로그인 샘플을 구성하는 클래스들을 살펴보면서 Cairngorm Framework의 아키텍쳐에 대하여 해설할 예정입니다.