2009/06/08 18:38
Adobe AIR에서 mx:Window 클래스로 투명 창 만들기 IT/컴퓨터 일반2009/06/08 18:38
미투데이 업로더를 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" 와 같이 추가할 수도 있다.
뼈대가 되는 프로그램에서는 다음과 같이 새 창을 호출할 수 있다.
하지만 얼마전 드디어 내가 원하던 방식, 즉 mxml component를 만들어 새창의 디자인을 한 후 뼈대 프로그램에서 투명한 창으로 띄울수 있는 방법을 찾게 되었다. 사실 이 글이 이미 2008년 7월에 쓰여졌기 때문에 내가 처음 업로더를 만들 때부터 존재했던 방법이었지만 프로그래밍 초보인 나로서는 생각할 수 없는 내용이었다. 당시에는 객체지향프로그래밍에 대한 개념조차 잘 서있지 않았기 때문에 mxml 파일 자체가 하나의 클래스라는 사실은 꿈에도 알지 못했다. 아무튼 mx:Window를 기반으로 투명한 창을 띄우는 방법은 다음과 같다.
먼저 mx:Window 기반의 새로운 mxml 컴포넌트를 만든 후 아래를 참조하여 창을 디자인 한다. 아래 소스에서는 chromeless라는 Style일을 적용하였지만 사실 가장 중요한 포인트는 showFlexChrome: false; 부분이다. 다른 스타일은 각자의 환경에 맞게 수정하면 되고 스타일 적용이 필요 없다면 showFlexChrome부분을 mx:Window 코드 뒷부분에 showFlexChrome="false" 와 같이 추가할 수도 있다.
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="75" styleName="chromeless" layout="absolute" verticalAlign="middle" horizontalAlign="center"> <mx:Style> .chromeless { showFlexChrome: false; background-image: ""; background-color: ""; padding: 0px; } </mx:Style> <mx:Image source="@Embed('assets/notifier.png')" id="background" /> <mx:Label id="lbl" color="#ffffff" fontSize="20" textAlign="center" top="25" bottom="25" right="0" left="0" /> </mx:Window>
뼈대가 되는 프로그램에서는 다음과 같이 새 창을 호출할 수 있다.
위의 var win : NotificationWindow = new NotificationWindow(); 에서 NotificationWindow는 앞서 만들었던 컴포넌트(mxml)의 파일명이다. 따라서 이는 사용자가 만든 파일이름에 따라 수정되어야할 부분이다. 이를 통해 간단히 투명한 nativeWindow를 만들 수 있다.
public function createNewWindow() : void { var win : NotificationWindow = new NotificationWindow(); win.systemChrome = NativeWindowSystemChrome.NONE; win.type = NativeWindowType.LIGHTWEIGHT; win.transparent = true; win.open(true); }
'IT/컴퓨터 일반' 카테고리의 다른 글
| 텍스타일(Textyle) 간단한 사용소감 (2) | 2009/07/31 |
|---|---|
| Adobe AIR에서 mx:Window 클래스로 투명 창 만들기 (0) | 2009/06/08 |
| i-FunBox - 아이팟 터치, 아이폰의 음악(mp3), 동영상(mp4) 백업하기 (6) | 2009/05/31 |
| 윈도우 비스타 홈 프리미엄 K 서비스팩2 통합본 설치 (0) | 2009/05/25 |
| 삼성 복원 솔루션 삭제하기 (5) | 2009/05/20 |
| [XE] 호스팅 업체에서 rewrite mod를 지원하는데도 사용할 수 없는 경우 (0) | 2009/04/05 |

댓글을 달아 주세요