본문 바로가기

Documents/Example

Vulcan Project로 Application 제작하기(3)-프레임(화면) 구성하기

Docking System이 적용된 Application을 제작할때 초기 프레임 구조를 변경하는 방법을 소개합니다. 간단히 방법을 설명하자면 프레임(골격)을 구성하는 FrameBase 컴포넌트의 Skin파일을 통해 구조를 변경할 수 있습니다. 차근차근 설명하겠습니다. 이전 예제에 이어서 진행됩니다. 예제에 사용된 Skin파일은 다음 링크를 통해 다운받으실 수 있습니다.


Stap 1 : Skin (Style) 설정

Main.mxml

이전 예제에서 사용된 모든 컴포넌트는 Default Skin이 사용되게끔 정의했었습니다. 이중 FrameBase 클래스의 Skin 클래스를 설정하는 부분을 변경하겠습니다.


Stap 2 : Skin 파일 생성

NewFrameBaseSkin.mxml

위에서 설정한 대로 skins 디렉토리에 NewFrameBaseSkin.mxml 파일을 작성합니다. Flash Builder에서 Skin 클래스를 상속하여 Skin파일을 생성합니다. [New >MXML Skin]

Flash Builder에서 자동으로 생성된 파일 내용입니다.

contentGroup 내용 삭제하고 다음 코드를 삽입 합니다. frameConstructer 객체를 프레임을 구성하는 객체로 사용합니다.


Stap 3 : 프레임 구조 묘사

프레임 스킨

frameConstructer로 지정된 NewFrameConstructer 객체에 프레임 구조를 묘사합니다. 주로 Docking System 컴포넌트에서 지원하는 DockDividedBox_H, DockDividedBox_V, FrameWindow 컴포넌트를 적절히 사용하여 Frame의 기본 형태를 구성할 수 있습니다.

NewFrameConstructer.mxml

FrameConstructer클래스는 기본으로 제공되는 프레임 구조를 정의합니다. 참고로 하여 알맞게 수정합니다.

FrameWindow 클래스의 각 속성으로 프레임의 성격을 규정합니다. 위에서 설정한 속성에 대해 설명하자면

  • groupID : groupID를 설정하면 같은 groupID를 가진 프레임으로만 자식창이 Docking 할 수 있습니다.
  • useCloseButton : 프레임에 닫기 버튼을 표시합니다.
  • selfRemovable : 자식으로 담고있는 창이 제거되거나 닫혀 더이상 표시될 자식이 없는경우 자신의 프레임을 제거할지 여부를 결정합니다.

Main으로 사용될 창과 서브로 사용될 창을 구별하여 속성을 설정해 부어야 하겠죠.


Stap 4 : 인터페이스를 구현

IFrameConstructer 인터페이스를 구현해 줍니다.

NewFrameConstructer.mxml

인터페이스를 구현해 줌으로써 Skin파일을 통해 프레임 구조에 대한 기본 정보를 HostComponent에 전달할 수 있습니다.


Stap 5 : Application 테스트

F11을 눌러 작성된 코드를 확인합니다. 같은 방법으로 Skin을 지정함으로써 창모양, 탭모양등을 자유롭게 변경할 수 있습니다. 다음은 첨부된 Skin 파일을 적용해본 화면입니다.