이전 예제에서 보여드린 Application의 구조도에서 Plug-in부분에 해당하는 부분입니다. 사용자가 이미 개발해 놓은 Component를 WindowItem으로 Application에 추가하는 과정입니다. 이번 예제에서는 외부 자원(SWC)을 읽고 이를 리스트로 보여주는 컴포넌트를 WindowItem으로 추가한 다음 실제로 SWC를 설정하고 Canvas에서 잘 불러들여 지는지 테스트 해보도록 하겠습니다.

테스트 방법

Demo파일로 본 예제의 기능을 테스트하는 방법입니다.

  1. 파일을 다운받아 빌더에서 F11을 눌러 디버깅모드로 Application을 실행합니다. 또는 위 Demo버튼을 클릭합니다. (처음 로딩시간이 있을 수 있습니다.)
  2. [파일 > 새로만들기] 메뉴에서 리소스를 정의한 파일 항목을 선택해 새로운 문서를 만듭니다. (샘플에서는 처음화면 상태 그대로 선택합니다.)
  3. 문서가 열리면서 ComponentWindowItem 창에 해당 리소스 리스트가 나타납니다.
  4. ComponentWindowItem 창에 컴포넌트를 선택하여 더블클릭하거나 Add 버튼을 눌러 문서에 추가합니다.
  5. 문서에 해당 컴포넌트가 추가되어 크기, 위치 등을 지정할 수 있도록 나타납니다.
  6. 직접 확인할 순 없지만 이미 내부에 catalog 파일에 정의된 내용을 기초로 하여 MXML 코드가 생성되고 있습니다.
  7. documentType에 여러 문서를 정의하고 각기 다른 resource를 설정해 주어 생성된 문서 선택을 바꾸면 ComponentWindowItem 창에 나타나는 컴포넌트 리스트의 내용도 바뀌면서 표시됩니다.

Step 1 : 컴포넌트 준비

컴포넌트 생성

Plug-in으로 추가될 컴포넌트를 준비 합니다. 여기에서는 SWC의 컴포넌트(클래스) 목록을 보여줄 것이므로 List계열 컴포넌트를 확장하여 SwcComponentList 컴포넌트를 일단 만들었습니다. 이 컴포넌트는 SWC 리스트를 전달받아 자원을 읽고 표시하는 역할을 합니다.

ComponentWindowItem.mxml

Singleton 구현

인스턴스를 하나만 생성하여 사용합니다. windowItem.xml의 singletonItems노드에 정의할 것이므로 singleton패턴을 구현해 줍니다. 이때 꼭 구현메서드 이름은 getInstance메서드로 해야 하며 그렇지 않은경우 런타임 에러가 발생할 수 있습니다.

ComponentWindowItem.mxml


Step 2 : 설정파일에 추가 (windowItem.xml)

하나의 인스턴스를 만들어 사용할 것이므로 singletonItems노드에 추가해 줍니다. itemProperties 노드에서 컴포넌트의 단순 데이터 타입의 속성을 지정할 수도 있습니다. 설정파일에 아이템을 추가하면 Application은 이 설정파일을 읽어들여 어찌됬든 ComponentWindowItem을 생성하려고 할 것입니다. 생성 시점은 open노드가 true이면 Application이 초기 구동될 때, false이면 사용자가 해당 창을 열도록 명령했을 때 입니다.


Stap 3 : Framework에 연결

컴포넌트를 준비하고 설정이 끝났으니 ComponentWindowItem 인스턴스가 Application상에서 기존 framework에 잘 스며들어 작동할 수 있도록 해 보겠습니다. 나중에 나오겠지만 그 작업을 BuilderBase클래스를 통해 실현할 수 있습니다. BuilderBase클래스는 ComponentWindowItem 인스턴스에 대해 기존의 framework의 facade안에서 자유롭게 MVC패턴을 사용하며 작업할 수 있도록 도와줍니다.

프레임웍에 WindowItem 추가

이전 예제에서 확장된 NewItemBuilderManager 클래스로부터 ComponentWindowItem을 등록하고 MVC를 구축합니다. 이전 DocumentItem을 등록했던 방식과 같습니다. 다음과 같이 ComponentWindowItem을 위해 framework에서 ComponentWindowItemBuilder를 사용하도록 만듭니다. 이런 방법으로 창이 열릴 때 아이템을 위한 MVC 작업공간을 기존의 façade에 동적으로 생성하고 제거할 수 있게 됩니다.

NewItemBuilderManager.as

MVC 빌드

BuilderBase를 상속하여 컴포넌트를 위한 독자적인 MVC 구조를 구축합니다. 새로운 BuilderBase객체가 생성되었다고 해서 새로운 façade가 생성된 것은 아닙니다. SubSystem과 똑 같은 context안에서 MVC 구조가 확장되는 것일 뿐입니다. 같은 방법으로 필요한 Proxy, Command를 등록하여 사용할 수 있고, 창이 닫힐 때 여기에서 등록된 객체들은 자동으로 제거 됩니다.

ComponentWindowItemBuilder.as

Mediator 생성

Mediator를 생성하고 여기에 컴포넌트의 기능을 기술합니다. 이제 ComponentWindowItem에 대해 기존의 framework의 틀(facade) 안에서 자유롭게 MVC패턴을 사용하며 작업할 수 있습니다.

ComponentWindowItemMED.as

테스트

여기까지 테스트 해보면 화면에 컴포넌트 패널이 삽입되어 비활성화 상태로 포커싱을 받고 있습니다.


Stap 4 : 샘플 테스트

Resource 파일 복사

assets/resource 디렉토리에 임의의 SWC(sample.swc와 sample1.swc) 파일을 복사해 놓습니다.Flash Builder에서 테스트할때 bin-debug 폴더에 swc 파일이 복사되지 않을 수가 있으므로 테스트가 제대로 되지 않을 경우 bin-debug 폴더내용을 확인 후 직접 복사해 주어야 합니다.

Resource 파일 정의

documentType.xml파일에 해당 decument에 필요한 resource파일을 기록합니다.

documentType.xml

catalog.xml파일에는 swc파일의 내용중 Tool사용자에게 노출하고 싶은 컨텐츠만을 기록합니다. 이 파일의 내용과 swc 파일을 비교하여 리스트에 나타낼 컴포넌트를 결정하게 됩니다.

테스트

서두에 설명한대로 테스트 합니다.

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

Commentary

댓글을 달아 주세요.

  1. Favicon of http://diebuster.com BlogIcon hika 2010.11.26 13:59 신고  댓글주소  수정/삭제  댓글쓰기

    음음 모듈 리플렉션을 할 때 플렉스는 이미 확정된 인터페이스가 있으니 직접 참조할 대상을 알아서 좋겠다는..
    저도 처음엔 swfclassexplorer를 썼는데 어웨이가 사용하는 wumedia의 parser가 더 좋아서 요즘엔 그쪽을 쓰고 있어요. 일단 wumedia의 파서는 swf에서 벡터를 추출하거나 폰트를 벡터로 추출하는 등의 묘기를 하니까 다분히 그래픽적인 클래스도 많이 커버하고 자원계 클래스에 대해선 훨씬 커버리지가 좋아요.
    짜피 taf가 away를 깔고 있기도 하고 해서 ^^

    전 이런쪽으로 보다 자원의 외재화에 더 관심이 많아서 궁극적으로 ini에 전부 기술할 생각이니까 본체에 남는건 아마 나중엔 flow선언만 남을지도 ㅎㅎ

    • Favicon of http://vulcan9.tistory.com BlogIcon vulcan 2010.11.29 17:16 신고  댓글주소  수정/삭제

      사이트(http://wu-media.com/)에 가보니 SWF파일에서 vector를 추출해 재사용하는 방법이 나와 있군요.
      ByteArray로 읽어들여 파싱해서 그려주는 방식인것 같습니다. 블로그가 개편됬는지 게시물이 별로없네요..


      텍스트 쓰는 방식이 궁금해 구글링좀 해봤더니 꽤 좋은 사이트 하나 발견했습니다.
      (http://lab.polygonal.de)
      별도의 에셋 로드없이 drawing API만으로 폰트를 렌더링하는 방법이 나와 있네요.
      전체적으로 내용이 좀 하이하네요^^

Add a Comment

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

티스토리 툴바