본문 바로가기

Documents/Example

Vulcan Project로 Application 제작하기(4)-Application 설계

Introduction

이번 예제는 꽤 많은 과정이 포함되어 있습니다. 원래는 Document를 생성하는 방법을 설명하려고 했는데 이미 만들어놓은 코드를 분리하기가 애매해서 다음 몇가지 기능이 함께 포함되게 되었습니다. 이전 예제와 같이 일일이 설명하는 것이 오히려 사족일 수가 있어서 소스 파악은 여러분께 맡기겠습니다. 대신 소스보실때 편하도록 몇가지 사항만 안내해 드릴까 합니다.

이 예제는 이전에 만들었던 MenuBar에서 "새로만들기" 명령을 실행시키고, 화면상에 해당 Document 가 생성되는 것까지 구현해 놓았습니다. (현재 "새로만들기" 이외 메뉴는 Filesystem등의 이유로 에러가 발생할 수 있습니다.) 이 예제를 통해 다음 사항을 살펴볼 수 있습니다.

  • 프레임웍을 확장시키는 기본적인 방법
  • Document를 정의하고 기능을 추가하는 방법
  • 프레임웍 내부에서 독자적인 MVC 구조를 구성하는 방법
  • WindowItem을 구분하여 키 이벤트를 등록하는 방법
  • Document에서 UiCanvas 컴포넌트를 세팅하는 방법

구조 설계

Vulcan Project는 다음과 같은 Application의 구조를 설계한 뒤 이 컨셉에 따라 Application이 개발 되도록 프레임웍이 개발되었습니다.

  1. Vulcan Project에서 지원하는 기본 UI와 사용자가 개발한 UI용 컴포넌트(WindowItem)를 추가하여 기본 Application의 모양을 만듭니다.
  2. Application에 의해 만들어질 결과물에 필요한 자원(Resource Files)을 SWC 파일 형태로 만듭니다. Asset과 클래스가 되겠죠.
  3. 2번의 내용을 XML파일 형태로 명시(Catalog 파일)하면 Application에서 자동으로 사용 가능한 리소스를 세팅합니다. 이를 Visual적으로 보여주는 클래스 리스트창이라던지 속성변경창 등은 1번의 WindowItem으로 개발해야 합니다. 기본적으로 필요한 WindowItem은 Plug-in형태로 제공할 예정입니다.
  4. 사용자 인터렉션에 따라 프레임웍에서 코드생성기에 의해 결과물 코드가 생성, 수정됩니다. 현재 결과코드를 Flex SDK를 이용하여 컴파일하는 것으로 가정하여 (Catalog 파일을 참조하여) MXML코드를 출력하는 코드생성기가 기본으로 제공되고 있습니다. 물론 API 형식의 코드생성기만 교체하면 원하는 포맷의 코드를 만들어 낼 수 있습니다.
  5. 따라서 Application을 개발하기 위해선 사용자 UI (WindowItem), 리소스 파일(SWC), 각종 설정파일이 필요합니다.

따라서 예제의 Application 구조도 이와 다르지 않습니다. Application UI층에서 모양이 결정되고, Contents층에서 Application의 역할과 결과물의 기능이 결정되는 구조입니다. 빨간색으로 표시된 부분이 예제에 적용된 부분입니다.




Configuration Files - XML

Application에 관한 일반적인 설정에 관련하여 중요한 설정 변수들은 모두 외부파일로부터 값을 전달 받도록 하였고, 다음 3개의 XML파일로 Application의 형태를 규정짓도록 하였습니다

WindowItem 설정

Plug-in으로 추가되는 Window Item의 클래스, 초기 생성여부, 단일 인스턴스로 사용 여부등을 설정합니다. 이 파일의 설정 내용에 따라 Application에 사용되는 WindowItem을 초기에 준비하게 됩니다. Applicaton의 프레임 구조는 Skin파일로 디자인되고 Skin파일에 명시된 FrameWindow로 이 파일에 설정된 WindowItem이 생성되어 들어갑니다. 설정 항목은 다음과 같습니다.

Document는 하나의 클래스에서 여러개의 인스턴스를 만들어야 하지만, History 패널같은 경우엔 하나의 인스턴스에서 해당 Document의 데이터만 변경시켜주는게 더 좋겠죠. multitonItems와 singletonItems를 구분하는 기준입니다. item의 key 값은 중복되면 안되는 고유 아이디 값입니다. 아이템의 종류를 구별하는데 사용됩니다.

Class Catalog 설정

동적으로 불러오는 외부 리소스 (SWC) 또는 컴파일시 포함된 클래스 자원에 대하여 노출 항목을 기록한 명세서입니다. 외부 리소스가 로드되어 사용될 때 이 설정파일을 참조하여 속성 변경 가능성등을 판별합니다. 이 파일에는 외부자원(SWC)중 사용자에게 노출될 수 있는 클래스 및 편집 가능한 속성 이벤트, 스타일과 이 후 예제에 추가될 속성 편집기에 사용될 설정 항목등의 정보를 갖습니다.

Document Type 설정

여러 개의 Document 종류를 지원하는 Application의 경우 설정합니다. 이 설정으로 동적으로 Document 종류를 선택할 수 있습니다. 즉 에디터, 컴파일러등을 종류에 따라 변경해 가면서 다양한 작업을 하나의 Application에서 처리하도록 개발할 수도 있다는 의미입니다. 이 문서의 일부 항목은 결과물 저장파일에 기록되어 불러오기 명령시 종류, 버전등의 정보로 어떤 Editor를 사용할 것인지를 선별하는데 다시 사용됩니다. 설정 항목은 다음과 같습니다.


예제 Use Case

예제는 다음 상황을 가정하여 만들어 졌습니다.

  1. Application이 뜨면 MenuBar에서 "새로만들기" 메뉴를 선택합니다.
  2. Document 종류를 선택하는 팝업창이 뜨면 하나를 선택합니다.
  3. 해당 Document에 맞도록 Application이 세팅됩니다.
  4. 화면에 새로 생성된 Document 탭을 확인합니다.
  5. 1~4 과정을 반복합니다.

예제 Work Flow

예제는 다음 상황을 고려하여 기능이 구현되었습니다. 전체적인 흐름을 파악한 뒤 예제 소스를 보는 편이 쉬울겁니다.

  1. Application이 구동되면 windowItem.xml 설정파일을 로드하여 설정을 마침니다.
  2. 초기 구동시 Application에서 구동할 Document에 대한 데이터(documentType.xml)를 불러옵니다.
  3. documentType 데이터로 Document에서 사용할 외부 자원을 로드합니다. (외부 자원은 SWC 파일을 사용합니다.)
  4. 메뉴 선택시 해당 명령을 전달합니다.
  5. 2번의 데이터로 Document 선택 창을 띄웁니다.
  6. Document 컴포넌트로부터 인스턴스를 생성하고 탭에 삽입합니다.
  7. DocumentItem이 추가되고 선택상태가 됩니다.
  8. 다음 예제를 위해 Document의 Mediator에 UiCanvas관련 기능이 구현되었습니다.

Framework 확장

모든 기능은 다음 파일들을 확장 시키는것으로 시작됩니다.