'showFlexChrome'에 해당되는 글 1건
2008. 6. 23. 09:30
AIR라는 이름이 붙지 않았던 시절, Apollo 라는 이름을 가지고 있을때
[Apollo] 아폴로 프로젝트를 투명하게 띄워보자.
라는 포스트를 작성했던 적이 있습니다. 뭔가 특별해 보인다고 할까요? 좀 있어보이기도 하고. ;)
뭐, 요즘도 마찬가지입니다. 기본 윈도우는 영~ 해보인다고 할까요... 그래서 기본 지원 Window를 사용하지 않는 AIR 예제를 만들어보았습니다. 기본 지원 윈도우를 벗어나기 위해서는 설정해줘야 할 값이 3가지가 있습니다.

1. 어플이름-app.xml 의 initialWindow 안에 systemChrome의 값을 none, transparent 값을 true 로 아래와 같이 변경하여 주세요.
(수정전에는 해당 값은 주석처리 되어있습니다.)
<initialWindow>
        <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
        <systemChrome>none</systemChrome>

        <!-- Whether the window is transparent. Only applicable when systemChrome is false. Optional. Default false. -->
        <transparent>true</transparent>
..
</initialWindow>
2. 어플이름.mxml의 WindowedApplication 태그에 showFlexChrome 값을 false 로 바꾸어주세요.
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false" >
변경한 값에 대해서는 [AIR] 사용자 Native Window 만들기 1. ( for Flex )의 설명을 참고하시면 되겠습니다.

이렇게 하면 기본 윈도우가 사라집니다! 하지만! 기본 윈도우가 사라지니 큰일입니다. 최소화, 최대화, 닫기 등의 기본 윈도우의 컨트롤이 없어졌으니 직접 구현해야 합니다.

사용자 삽입 이미지
그래서 만들었습니다! 지금 보시는 이미지가 예제로 만든 AIR 어플의 캡쳐화면입니다. 아래의 예제 코드에 보이시는대로 Canvas를 윈도우로 삼아서 그 위에 Button을 이용하여 최대화, 최소화, 닫기,윈도우 움직이기, 윈도우 리사이즈를 구현하였습니다. (버튼 이미지는 SuperPanel 에 것을 썼습니다)

다행이 AIR에서 잘 지원해줍니다. ;) 코드 몇 줄 밖에 안써도 쉽게 구현했습니다. (살 짝 문제들도 있습니다. 바탕이 되는 Canvas가 실제 어플의 상하좌우10씩 margin이 있어서 최대화 하면 margin 값은 반영이 안됩니다.- 실제 어플의 크기과 동일하게 하면 원래의 좌우 하단의 리사이즈 핸들러로 어플 크기 조정이 되어서 margin을 주었습니다)

그러고 보니 기본 윈도우를 없에놔도 없어보이기는 마찬가지군요.... 이 허접한 디자인 실력; ㅜ_ㅜ


 

예제를 설치하시려면 하단의 install now를 클릭하여주세요.
설치하신 다음 실행되면 마우스 오른쪽 버튼으로 view Source 하셔서 소스를 보실 수 있습니다. 좋은 정보 되셨길 바래요 ;)

Adobe AIR Application Installer Page
prev"" #1 next