Vulcan Project로 Application 제작하기(1)

Vulcan Project를 Flex framework에 적용시키는 방법에 대해 직접 Sample Application을 제작하는 과정을 통해 설명해 나가도록 하겠습니다. 본 예제는 다운로드 받으실 수 있습니다.


Stap 1 : Flex 프로젝트 생성

Flash Builder에서 com.vulcan.application.framework_airSample 라는 이름으로 Flex 프로젝트를 하나 생성했습니다. Desktop(AIR) Application으로 예제를 진행하겠지만 그냥 Web Application으로 만드셔도 상관없습니다.

SWC 라이브러리 복사

최신버전 Vulcan Project swc 라이브러리 파일을 libs 디렉토리에 복사합니다.

Main.mxml 코드

debug 속성은 Vulcan Project의 내부 trace 구문의 출력 여부를 결정합니다. 이 코드로 인한 초기화 과정은 "Vulcan Project 초기화 과정" 을 참고하세요.


Stap 3 : Facade 생성

SubSystem 클래스 상속

PureMVC의 Facade 클래스를 상속받은 클래스가 SubSystem 클래스입니다. 이 클래스를 상속받아 Application에 사용될 NewSubSystem 클래스를 정의합니다. 클래스 내용은 PureMVC를 적용시키는 코드와 거의 같습니다.

NewSubSystem.as

코드에서 NAME과 NAME_TYPE static 상수가 보입니다. 이 상수는 proxy, mediator 클래스에서 모두 정의해야 하는 상수입니다. facade를 통해 클래스 객체에 접근하는 방식은 너무 장황한 코드라인을 필요로 하기 때문에 인스턴스 접근방식을 바꾸기 위해 도입한 속성입니다. [NAME, NAME_TYPE 속성을 이용한 인스턴스 찾기]

NewSubSystem.as

NewSubSystem 클래스에서 SubSystemBuilder을 확장합니다. BuilderBase 계열 클래스는 PureMVC를 위한 환경을 자동으로 구축해 주는 역할을 합니다.


Stap 3 : MVC 구조 빌드

BuilderBase 파생 클래스

BuilderBase계열 클래스를 이용하여 위에서 생성한 SubSystem (Facade)에 각 Proxy, Command, Mediator를 등록할 수 있는 환경을 조성합니다.

NewSubSystemBuilder.as

SubSystemBuilder에는 기본적으로 3개의 XML파일이 로드되도록 설정되어 있습니다. 이 XML 파일들은 각각 Application 설정, Plugin으로 추가될 아이템, Document를 설정하는 파일입니다. 일단 테스트를 위해 위 두 메서드를 Overriding하여 XML 파일 로드 작업이 무시 되도록 합니다.


Stap 4 : Application UI 설정

Application UI에 Docking System을 적용합니다. Style 태그에 각 컴포너트의 스킨 클래스를 정의합니다.

Main.mxml

Docking System UI에 필요한 기본 Style 코드를 추가합니다.

Docking System Component를 추가합니다.


Stap 5 : Component 인스턴스 참조 설정

Vulcan Project에서는 MXML로 정의된 Application 클래스의 컴포넌트 인스턴스를 직접적으로 참조하지 않습니다. InstanceGroup 클래스를 통해 필요한 인스턴스에 접근합니다.

NewSubSystem.as

SubSystem에 다음 코드를 추가하여 InstanceGroup을 확장 합니다.

NewInstanceGroup.as

InstanceGroup을 상속받아 인스턴스 참조 메서드를 정의합니다. dockFrame의 경우 getDockFrame 메서드가 미리 정의되어 있으므로 Overriding합니다.

Application MXML의 인스턴스를 참조하는 방법

만약 Application MXML에 새로운 컴포넌트를 추가한 경우 InstanceGroup에 get 함수를 추가하여 사용합니다. 예를 들어 MXML에 아이디가 menuToolBar인 컴포넌트를 추가 했다면 InstanceGroup에 다음 코드 형태로 추가한 후 InstanceGroup객체를 통해 참조합니다.


Stap 6 : Application 테스트

F11을 눌러 테스트하면 기본 스킨이 적용된 Application UI가 나타납니다.


저작자 표시 비영리 변경 금지
신고
TAG
트랙백 ( 0 )개 , 댓글 ( 2 ) 개가 달렸습니다.

Commentary

댓글을 달아 주세요.

  1. Favicon of http://diebuster.com BlogIcon hika 2010.10.29 23:45 신고  댓글주소  수정/삭제  댓글쓰기

    구경하고 있자면 프레임웍을 방대하게 짠것 만큼이나 방대한 기술문서를 만들어내지 않으면 안되는 문제가 있군요. 그마나 코드는 코드만 짜면 그만이지만 기술문서는 아기자기하고 이미지까지 넣어야하니 참..
    고생도 이런 고생이 없을 듯. 일본의 progression 프로젝트가 도움이 많이 되실 것 같긴 합니다.
    현재 뿐만 아니라 미래에 어떻게 가져가야할지에 대해서도 스터디 케이스가 될 듯하기도 하구요.
    프로그레션은 일서로 프레임웍을 설명하는 도서까지 출판했을 정도니 나름 성공했다고 할만한데, 그들이 연 세미나들에 대한 자료와 책내용같은게 향후 이 프로젝트도 어떻게 발전시키고 키워갈지에 대한 좋은 샘플이 될 수 있을듯합니다.

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.11.01 02:42 신고  댓글주소  수정/삭제

      네..거의 한달째 코드를 못만지고 있습니다. 하지만 문서작업 도중에 사용자 입장에서 좀더 디테일한 부분까지 체크하게 되는 장점도 있네요.
      progression 프로젝트(http://progression.jp)는 주제 자체가 가려운데를 삭삭 긁어주는 프로젝트 같네요. 사용자층에서도 꽤 대중성이 있고요. 여러가지로 참고가 많이 될것같아요. 프로젝트 성패를 가늠하는 가장 중요한 부분은 유용하게 써먹는 사람들이 많아져야한다는 점일텐데요..보고만 지나치지 마시고 제발 써주시길 쩜쩜쩜 요즘 제가 이런 마음입니다.ㅎㅎ
      그러니까 문서화 역시 공을 들이지 않을 수가 없더군요. 좋은 자료 고맙습니다.

Add a Comment

comment에 대한 답변글은 해당 글상자에 있는 "R"(reply)버튼을 클릭하여 작성해 주시기 바랍니다.

티스토리 툴바