Vulcan Project로 Application 제작하기(1)

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

Source Files (3.7MB)

---

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가 나타납니다.