안녕하세요
오늘은 Adobe AIR Badge를 사용한 Application 배포에 대해 포스팅합니다.
오늘은 adobe와 관련된 AS3 / Flex 등으로 개발 된 Application을 쉽게 배포 & 업그레이드 할 수 있는 방법을 소개시켜 드릴까 합니다.
AIR Badge(배지)라는 것을 사용하시면 쉽게 가능하더라구요^^
하지만, 일반적으로 클라이언트에는 AIR 런타임이 설치되어 있지 않은 경우가 많아, AIR 어플리케이션을 배포시 별도의 안내가 필요합니다.
이러한 단점을 극복하기 위해, 2008년 AIR Release와 동시에 플래시 형태의 AIR Badge도 SDK에 함께 포함하여 배포하기 시작하였습니다. AIR badge는 플래시 플레이어 9 이상인 사용자는 누구나 사용할 수 있고, AIR 런타임이 설치되어 있지 않은 환경에서도 Application과 런타임을 함께 설치할 수 있다는 장점이 있습니다.
우선 SDK에 있는 AIR Badge먼저 확인해 보겠습니다.
그러기전에 먼저 Adobe AIR SDK를 다운로드 받아야 겠지요?
http://www.adobe.com/devnet/air/air-sdk-download.html
짜자자잔~~~!
다 끝났습니다~~!!
그럼 이제 Test 시작~!!
우선 local서버에서 위의 주소로 접속 !!!
그럼 설치하기 버튼을 클릭해서 설치를 시작합니다.
아래 와 같은 설치과정을 쭉쭉지나갑니다.
짜잔~!!
이런식으로 Badge를 통해서 배포하게 되면
설치 & 업데이트 버전 관리 등이 정말 편하게 자동으로 할 수 있겠네요^^
다시 주소로 접속하면 이미 설치되었다고 나오네요^^
여기서 바로 Application을 실행 할 수도 있고, 업데이트도 할수 있습니다!
http://www.adobe.com/devnet/air/air-sdk-download.html
저는 Window환경에서 Test해볼 것이므로 Window용으로 다운로드를 하겠습니다.
다운이 다되고 압축을 풀어주시면 아래 경로에 Badge sample이 포함되어 있는 것을 확인하실 수 있습니다.
\AIRSDK_Compiler\samples\badge
sample html을 열어봐서 Test해보려고 했는데...
Install Now를 click해도 반응이 없네요ㅠㅠ
그렇다면 이제 직접!!!
Badge를 customizing 해보도록 하겠습니다
Test해보기 위한 환경은 다음과 같습니다.
- 배포 될 Application이 있어야 합니다. (.air 파일)
- web에서 배포하므로 html page 개발 필요
그럼 먼저 배포 될 flash Application Sample로 만들어 보겠습니다.
Flex Desktop 프로젝트를 하나 생성합니다
그리고 너무 밋밋하지 않게
다음 처럼 Label로 간단하게 Text문구 하나 써줍니다
<!--?xml version="1.0" encoding="utf-8"?--> <s:windowedapplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <s:label width="100%" height="100%" verticalalign="middle" textalign="center" fontsize="30" text="Badge Test Application"> </s:label> </s:windowedapplication>
그리고 이제 중요한 사항!!
-app.xml 파일에서 appID, publisherID로써 배지에서 읽고 배포하므로
두 가지 내용에 대해 필히 꼭 써주시구요. !!
이제 실행 될 sample application에 대한 작업은 끝났습니다.
그럼 release를 해서 .air 파일을 추출해야 겠지요 ㅎㅎ
Export Release Build에서 air package를 선택하고 Next~!
그리고 인증서와 password를 입력하고 패키징 작업 시작~~
짜자자잔~~~!
.air 파일이 생성되었습니다 ㅎㅎㅎㅎ
자 이제 반은 끝났습니다!!
배포될 어플리케이션에 대해서는 작업이 끝났네요~~
그럼 다음은 web page 개발해 볼까요?
저는 web page UI도 간단하게 flex로.. 하겠습니다 ㅋㅋ
우선 프로젝트 생성하구요.
web에서 열수있게 -app.xml 파일에서
<allowBrowserInvocation>의 주석을 풀고 "true"값을 넣어 줍니다.
그리고 UI & 배포관련 control 할 수 있게 작업을 다음과 같이 합니다.
<!--?xml version="1.0" encoding="utf-8"?--> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationcomplete="windowedapplication1_creationCompleteHandler(event)"> <fx:script>
<!--[CDATA[
import mx.events.FlexEvent;
private static const AIRAPI_URL:String = 'http://airdownload.adobe.com/air/browserapi/air.swf ';
private var airswf:Object;
private var appid : String = "com.devdoo.BadgeTestApplication"; //사용자가 실행 시킬 air 어플리케이션의 appid를 입력(xml에 id을 그대로 입력)
private var pubid : String = "46B1249CCE380CAC0025C2FEDDA40A017CA04F82.1"; //사용자가 실행 시킬 air어플리케이션 publisherID를 입력(xml에 publisherID을 그대로 입력, 없으면 소스처럼!)
private var airurl : String = "http://localhost/BadgeTestApp/BadgeTestApplication.air"; // 사용자에게 내려 줄 air 패키징 파일이 있는 경로
private var runtimeversion:String = "1.5";
protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
var airswfloader:Loader = new Loader();
var loadercontext:LoaderContext = new LoaderContext();
loadercontext.applicationDomain = ApplicationDomain.currentDomain;
airswfloader.contentLoaderInfo.addEventListener(Event.INIT, oninit);
airswfloader.load(new URLRequest(AIRAPI_URL), loadercontext);
}
private function oninit(event:Event):void
{
airswf = event.target.content;
/**
* AIR 런타임의 설치여부를 확인한다.
* AIR 런타임이 지원되지 않는 환경의 경우, AIR 애플리케이션 설치가 되지 않기때문에, 이 과정을 거치는것이 좋다.
*/
trace("onInit :: " + airswf.getStatus());
if (airswf.getStatus() == "unavailable") {
vstack.selectedIndex = 2;
} else if (airswf.getStatus() == "available") {
vstack.selectedIndex = 3; // 사용자의 컴퓨터에 AIR 애플리케이션이 설치되어 있는 경우
label_version.text = "please";
} else {
airswf.getApplicationVersion(appid, pubid, onversion); // AIR 애플리케이션의 설치여부를 확인한다.(생략가능)
}
}
private function onversion(version:String):void
{
trace("onversion :: " + version);
if (version == null) {
vstack.selectedIndex = 1; // 사용자의 컴퓨터에 AIR 애플리케이션이 설치되어있지 않은경우
} else {
vstack.selectedIndex = 3; // 사용자의 컴퓨터에 AIR 애플리케이션이 설치되어 있는 경우
label_version.text = version;
}
}
private function airinstall():void
{
// AIR 애플리케이션을 설치한다.
trace("airinstall :: " + airurl + " / " + runtimeversion);
airswf.installApplication(airurl, runtimeversion);
}
protected function airexecute():void
{
// AIR 애플리케이션을 실행한다.
trace("airexecute :: " + appid + " / " + pubid);
airswf.launchApplication(appid, pubid);
}
]]-->
</fx:script> <fx:declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:declarations> <mx:viewstack id="vstack" x="0" y="0" width="230" height="50" creationpolicy="all"> <mx:canvas label="View 1" width="100%" height="100%"> <mx:label text="불러오는중.." fontsize="12" horizontalcenter="0" verticalcenter="0"> </mx:label></mx:canvas> <mx:canvas label="View 1" width="100%" height="100%"> <mx:button label="설치하기" fontsize="12" horizontalcenter="0" verticalcenter="0" click="airinstall();"> </mx:button></mx:canvas> <mx:canvas label="" width="100%" height="100%"> <mx:label text="설치가 불가능한 환경입니다." fontsize="12" horizontalcenter="0" verticalcenter="0"> </mx:label></mx:canvas> <mx:canvas label="" width="100%" height="100%"> <mx:label x="10" y="4" text="이미 설치가 되어있습니다." fontsize="12"> <mx:button x="66" y="23" label="업데이트" fontsize="12" click="airinstall();"> <mx:button x="10" y="23" label="실행" fontsize="12" click="airexecute();"> <mx:label y="6" color="#000000" textalign="right" right="10" id="label_version"> </mx:label></mx:button></mx:button></mx:label></mx:canvas> </mx:viewstack> </s:application>
작업을 마치면 bin-debug 폴더에 작업된 내용의 .swf 파일이 생성 되어있는데요
이 swf 파일을 html 파일에서 사용하도록 하겠습니다.
html 소스는 다음과 같이 작성하구요.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BadgeTest Web Page</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {
"airversion": "1.5.1",
"appname": "BadgeTestApplication",
"appurl": "http://localhost/BadgeTestApp/BadgeTestApplication.air"
};
swfobject.embedSWF("BadgeWeb.swf", "Launcher", "400", "600", "10.0.1", "BadgeWeb.swf", flashvars);
</script>
</head>
<div id="Launcher">
</div>
html에서 swf파일을 읽을 수 있도록, swfobject.js 파일도 가져옵니다.
그럼 이제 다 끝났습니다~!
확인 한번 해볼까요?!
먼저 local서버에 폴더를 하나 만들고 다음과 같이 파일을 넣어 둡니다.
- Flash Application (.air) 패키징 파일
- html에서 보여주는 swf UI 파일 - (bin-debug)에 있는 내용 가져옴.
- html 파일
- html에서 swf를 읽을 수 있도록 하는 swfobject.js 파일
다 끝났습니다~~!!
그럼 이제 Test 시작~!!
우선 local서버에서 위의 주소로 접속 !!!
그럼 설치하기 버튼을 클릭해서 설치를 시작합니다.
아래 와 같은 설치과정을 쭉쭉지나갑니다.
짜잔~!!
이런식으로 Badge를 통해서 배포하게 되면
설치 & 업데이트 버전 관리 등이 정말 편하게 자동으로 할 수 있겠네요^^
다시 주소로 접속하면 이미 설치되었다고 나오네요^^
여기서 바로 Application을 실행 할 수도 있고, 업데이트도 할수 있습니다!
'Dev > Dev:: FLEX & AS3' 카테고리의 다른 글
| [Flex][Mobile] - iOS 에서 "Uncompiled ActionScript" 팝업이 나타나지 않도록 하는 방법 (0) | 2015.06.12 |
|---|---|
| [Flex][Mobile] - ANE(Adobe Native Extension) 적용하기 (0) | 2015.06.12 |
| [Adobe AIR] ANE (Air Native Extension) 소개 (0) | 2015.04.30 |
| [AIR] 크롬에서 네이버 TV중계가 안나오는 문제 해결 (0) | 2015.04.21 |
| [Flex/AS3] Adobe AIR SDK Update (0) | 2015.04.19 |
