'dreamweaver'에 해당되는 글 2건
2008.04.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 를 만들려면 어떻게 해야되는지 간단하게 알아보았습니다.
문의 사항이 있으시면 덧글로 남겨주시면 감사하겠습니다. ;)

신고
Creative Commons License
Creative Commons License
정형재 | 2010.02.01 13:50 신고 | PERMALINK | EDIT/DEL | REPLY
만나서 반갑습니다.
오오 이것 유용한 정보입니다!

기존에 만들어둔 자바스크립트 가득한 페이지가 AIR 로 뚝딱 나오기도 할까요??
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.02.05 22:28 신고 | PERMALINK | EDIT/DEL
바로 뚝딱 나올리는 없습니다만(보안적인 이슈 등 컨버팅에 이슈는 있을 것입니다), AIR 로 인터넷 브라우저와 독립적으로 실행 될 수는 있을 것입니다 ;)
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.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. 쓰고나니 너무 간단하네. ㅡㅡ;
신고
Creative Commons License
Creative Commons License
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next