달력

03

« 2010/03 »

  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  
  •  
  •  
  미투데이 업로더를 0.3으로 업데이트 하면서 LIGHTWEIGHT 형식의 윈도우나 State 등을 활용해 UI를 개선하였다. 사실 0.2.x 버전의 업로더를 만들때만 하더라도 State라는 개념이 있는지조차 모르고 있었고 따라서 '프로그램 내에서 화면전환은 어떻게 할 수 있는지'가 나의 가장 큰 고민이었다. 특히 메신저에서 다른 사람이 접속하면 뜨는 작은 창처럼 알림기능을 하는 창을 만들고 싶었는데 인터넷에서 자료를 찾아보면 - 물론 대부분의 자료는 영어다. 한국에서는 아직도 AIR/Flex 관련 자료를 찾는 것이 쉽지 않다 - 대부분 액션스크립트를 이용해 Display Object를 일일이 Addchild 시켜주는 방식이어서 직관적인 설계를 하기가 힘들었다. 그래서 지난 버전에서는 결국 새 창 띄우는 것을 포기하고 Popup manager를 이용하는 것으로 만족했었다.

  하지만 얼마전 드디어 내가 원하던 방식, 즉 mxml component를 만들어 새창의 디자인을 한 후 뼈대 프로그램에서 투명한 창으로 띄울수 있는 방법을 찾게 되었다. 사실 이 글이 이미 2008년 7월에 쓰여졌기 때문에 내가 처음 업로더를 만들 때부터 존재했던 방법이었지만 프로그래밍 초보인 나로서는 생각할 수 없는 내용이었다. 당시에는 객체지향프로그래밍에 대한 개념조차 잘 서있지 않았기 때문에 mxml 파일 자체가 하나의 클래스라는 사실은 꿈에도 알지 못했다. 아무튼 mx:Window를 기반으로 투명한 창을 띄우는 방법은 다음과 같다.

먼저 mx:Window 기반의 새로운 mxml 컴포넌트를 만든 후 아래를 참조하여 창을 디자인 한다. 아래 소스에서는 chromeless라는 Style일을 적용하였지만 사실 가장 중요한 포인트는 showFlexChrome: false; 부분이다. 다른 스타일은 각자의 환경에 맞게 수정하면 되고 스타일 적용이 필요 없다면 showFlexChrome부분을 mx:Window 코드 뒷부분에 showFlexChrome="false" 와 같이 추가할 수도 있다.

  1. <mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="75"
  2.     styleName="chromeless" layout="absolute" verticalAlign="middle"
  3.     horizontalAlign="center">
  4.     <mx:Style>
  5.         .chromeless
  6.         {
  7.             showFlexChrome: false;
  8.             background-image: "";
  9.             background-color: "";
  10.             padding: 0px;
  11.         }
  12.     </mx:Style>
  13.     <mx:Image source="@Embed('assets/notifier.png')" id="background" />
  14.     <mx:Label id="lbl" color="#ffffff" fontSize="20"
  15.         textAlign="center" top="25" bottom="25" right="0" left="0" />
  16. </mx:Window>

  뼈대가 되는 프로그램에서는 다음과 같이 새 창을 호출할 수 있다.
  1. public function createNewWindow() : void
  2. {
  3.     var win : NotificationWindow = new NotificationWindow();
  4.     win.systemChrome = NativeWindowSystemChrome.NONE;
  5.     win.type = NativeWindowType.LIGHTWEIGHT;
  6.     win.transparent = true;
  7.     win.open(true);
  8.          }
  위의 var win : NotificationWindow = new NotificationWindow(); 에서 NotificationWindow는 앞서 만들었던 컴포넌트(mxml)의 파일명이다. 따라서 이는 사용자가 만든 파일이름에 따라 수정되어야할 부분이다. 이를 통해 간단히 투명한 nativeWindow를 만들 수 있다.
저작자 표시 비영리 변경 금지
Posted by 엔하늘

댓글을 달아 주세요