'Dev/AIR'에 해당되는 글 4건
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
2008. 6. 18. 17:22
이 AIR App 는 Lee Brimelow 라는 분이 TheFlashBlog 에 올려 놓으신 NativeWindower AIR Application 포스트를 보고 만들었습니다.

유럽에서 AIR 투어할때에 보여줬던 demo 라는군요. 주 내용은 NativeWindow를 어떻게 생성하는지에 대한 것입니다. Flash 로 만들어 놓으신 것을 소스와 함께 올려놓으셨네요. 소스 그대로 Flex용으로 만들어보았습니다.

Adobe AIR Application Installer Page

설치하시려면 인스톨 클릭해주시면 되겠습니다. ;)
제가 만든 AIR 의 소스는 실행중에 컨텍스트 메뉴의 'view source'를 선택하시면 보실 수 있습니다. ;)
view source를 사용했더니 AIR 파일이 너무 커지네요 ^^;
하단의 코드를 참고하시고 소스는 를 클릭하셔서 다운받으시면 되겠습니다.
영구기 님이 만드신
Apollocation Badge Studio 를 이용했습니다. ;) 영구기님 짱 ㅋ

2008. 4. 15. 15:14

이번 포스트에서는 드림위버에서 AIR application을 개발할 때 AIR 관련 설정에 관해서 알아보고 간단한 예제를 한번 만들어보도록 하겠습니다. 자세한 내용은 드림위버 extension 문서 중에서 'Using the AIR Extension for Dreamweaver' 를 참고하세요.

(드림위버용 AIR extension 설치 관련은 [AIR] 드림위버에서 AIR application을 개발해보자. #1 을 참고하세요)

1. Site를 설정한다.
우선 AIR App 용 패키징할 폴더를 만들어야됩니다. Site > New Site 하시면 다음과 같은 창이 뜹니다.

우선 간단하게 Local Info 에서 Site nameLocal root folder 만 설정합니다. 저는 AirDemo 라고 정했습니다. OK 누르세요.

2. 사용할 html 파일을 만든다.

아래의 소스처럼 main.html 을 만들겠습니다.
 


3. Site를 AIR App 로 세팅한다.

Site > AIR Application Settings 를 선택하시면 아래와 같은 창이 뜨게됩니다.


* 표가 붙어 있는 곳은 무조건 채워넣어야됩니다.
*File name : 실행파일 이름입니다.
Name : 설치된 App의 이름입니다.
ID : App ID 입니다.
*Version : 현재 App의 버전입니다. 이 버전정보로 추후에 업데이트 기능이 활성화되죠.
*Initial content : 처음 시작되는 페이지를 설정해주시면 됩니다. 위에서 만든 main.html 을 지정하시면 되겠죠.
Description : 설명 적어주시고요. (인스톨시에 출력됨)
Copyright : 저작권 관련 적어주시고.
Window style : 윈도우 스타일 지정합니다. 운영체제의 윈도우 스타일이나 자체적인 스타일 지정하시면 되겠네요.
Window size : 초기 App의 윈도우 크기 설정해주시면 됩니다.
Icon : 아이콘 설정해주세요.
Associated file type : App에서 사용할 파일 타입 정의해주시고요.
Application Updates : 버전업시에 업데이트 여부.
Included files : 추가로 가지고 있어야 할 파일 추가해주세요.
*Digital signature : Digital signature를 선택합니다.  추가 설명은 아래에 계속됩니다.
Program menu folder : 윈도우 시작메뉴에서 아이콘의 위치 설정입니다. (매킨토시는 필요없음)
*Destination : AIR 파일 만들때 위치입니다.

※ Digital signature 추가 설명
Digital signature(전자서명)는 AIR App가 위변조 되지 않았다고 인증해주기 위해서 필요합니다.  모든 AIR App에서 필요한데요, 없으면 설치가 되지 않습니다. 만약에 Digital signature가 없으면 직접 만들수 있습니다.

1. 위의 창에서 Set 버튼을 누릅니다.
2. Digital signature가 있다면 Browse 버튼을 눌러 선택하시고 아니면 Create 버튼을 눌러 생성합니다.
3. Create 버튼을 누르면 다음과 같은 창이 뜹니다.

4. 배포자 이름, 부서, 조직이름, 국가, 비밀번호, 저장할 장소, RSA 타입을 설정하시고 OK누르세요.
5. OK 누르면 저장되었다는 메세지가 뜹니다.
6. 방금 만든 Digital signature가 설정되어 있는 것을 보실 수 있습니다. 패스워드를 입력하세요.
 (주의 : Remember password for this session 을 선택하지 않으시면 AIR 생성시 인증서 패스워드를 매번 입력해야됩니다.)  
OK 누르시면 Digital signature 설정 완료.
  
 

세팅이 완료되면 application.xml 파일이 생긴 것을 확인 할 수 있습니다.


Flex 에서 AIR 생성시와 마찬가지로 여러가지 정보들이 들어있는 것을 확인할 수 있습니다.

4. 만든 AIR App 를 미리보기

File > Preview in Browser > Preview in Adobe AIR 선택하시거나 단축키 Ctrl + Shift + F12 누르시면 다음과 같은 AIR App 가 실행되는 것을 보실 수 있습니다.



5. AIR 배포하기
Site > Create AIR File 선택하시거나 단축키 Ctrl + Shift + B 누르시면 AIR 파일이 생성됩니다.
(인증서 패스워드를 다시 입력해야 되는 경우가 있으니 당황하지는 마세요)
생성완료 후에 다음과 같은 창이 뜹니다.


생성된 AIR 파일을 더블클릭하면 설치가 진행됩니다.

이상으로 허접하게 드림위버에서 AIR App 를 만들려면 어떻게 해야되는지 간단하게 알아보았습니다.
문의 사항이 있으시면 덧글로 남겨주시면 감사하겠습니다. ;)

2008. 4. 14. 17:16

AIR로 application을 개발하는 방법은 AIR 공식 페이지 에 가보면 3가지 타입으로 나뉩니다.

드림위버CS3, Flex 3.0, Flash CS3 에서 AIR를 경험해보실 수 있습니다.

이처럼 3가지 타입의 개발자의 경우를 소개하고 있습니다.
이 포스트에서는 Ajax 개발자를 위한 드림위버에서 AIR application을 개발하기 위한 준비과정을 설명합니다.

1. 우선 드림위버 CS3 가 필요합니다. 여기를 클릭하셔서 다운로드 받도록 하세요.
드림위버는 설치되어 있다고 보고 생략하도록 하겠습니다.

2. 그리고 여기를 클릭하여 AIR 런타임을 받도록 하세요.
실행하시면 다음과 같은 창이 뜹니다.

사용자 삽입 이미지


I Agree 선택하셔서 진행하시죠~
설치가 완료되면 다음과 같이 뜹니다.


Finish 누르면 끝납니다.
이 것으로 AIR 런타임을 설치 완료되었습니다.

3. 드림위버 CS3 를 설치하시고 난 뒤에는 여기를 클릭하셔서 드림위버용 AIR extension 을 받도록 합니다.
원래 다운로드 할 수 있는 페이지는 여기 인데요, 보시면 안내사항이 적혀있습니다.
드림위버용 Adobe AIR extension은 MXP 포멧으로 제공됩니다.
이것은 Adobe Extension Manager로 설치가능합니다.
Adobe Extension Manager를 이용해 extension을 설치전에 이전버전은 삭제하세요.

설치하는 방법은 2가지중 택일 하시면 되겠네요.
- 받은 MXP 파일을 더블클릭하여 Adobe Extension Manager를 실행시켜 설치하기
- Adobe Extension Manager에서  파일 > Extension 설치 를 선택해 MXP 파일을 선택하고 설치하기

현재 설치된 AIR extension 의 현재 버전을 확인해보시고 과거버전일 경우 꼭 extension 을 삭제해주시기 바랍니다. 설치된 extension의 버전과 AIR 런타임의 버전이 다를경우 기껏 만든 프로그램 설치도 못하는 일이 생깁니다.
 
전 귀찮으니까 그냥 더블클릭 하겠습니다. ;)
더블클릭하면 다음과 같은 창이 뜹니다.


동의하면 설치가 완료 됩니다.


설치가 완료되면 Adobe Extension Manager에 다음과 같이 나옵니다.


설치된 extension 이 나오고요, 하단에 설명이 나오고 있습니다.

블라블라.. 어쩌고저쩌고..

해당 extension에 대한 문서는 다음의 주소에서 읽으심 되고요,
http://www.adobe.com/go/learn_dw_air
AIR의 마지막 버전에 대한 release note는 다음 주소에서 읽으심 되요,
http://www.adobe.com/go/learn_air_relnotes

또 블라블라..


아무튼 설치는 이 것으로 끝났습니다.
다음 포스트에서 간단한 예제를 만들어보죠. ;)

ps. 쓰고나니 너무 간단하네. ㅡㅡ;
prev"" #1 next