자 바로 소스 들어갑니다.
소스를 먼저 보고 한줄 한줄 어떤 기능인지 분석을 해보겠습니다.
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.utils.ByteArray;
public class XMLCreator extends Sprite
{
public var txtXML: TextField, btnCreate: MovieClip;
public function XMLCreator()
{
this.btnCreate.buttonMode = true;
this.btnCreate.addEventListener( MouseEvent.CLICK, onCreate );
}
private var data: ByteArray
private function onCreate( e: MouseEvent ): void
{
var str: String = this.getText();
this.data = this.getBinary( str );
this.file = this.createFile();
this.file.download( new URLRequest( "http://www.noexistdomain.com" ), "default.xml" );
}
private var file: File
private function onSelect( e: Event ): void
{
this.saveData();
}
private var fileStream: FileStream;
private function saveData(): void
{
this.file.cancel();
this.fileStream = new FileStream();
this.fileStream.open( this.file, FileMode.WRITE );
this.fileStream.writeBytes( this.data, 0, this.data.bytesAvailable );
this.fileStream.close();
}
private function getText(): String
{
var str: String = this.txtXML.text;
try
{
XML( str );
}
catch( e: TypeError )
{
throw new Error( "작성한 텍스트는 XML 형식이 아닙니다." );
}
return str;
}
private function getBinary( str: String ): ByteArray
{
var ba: ByteArray = new ByteArray();
ba.writeMultiByte( str, "utf-8" );
return ba;
}
private function createFile(): File
{
var file: File = new File();
file.addEventListener( Event.SELECT, onSelect );
return file;
}
}
}
| |
UML 대로 이쁘게 나온거 같습니다.
자 그럼 메소드단위로 하나씩 분석해보겠습니다.
public function XMLCreator()
{
this.btnCreate.buttonMode = true;
this.btnCreate.addEventListener( MouseEvent.CLICK, onCreate );
} | |
초기화 생성자 메소드에서는 버튼에 롤오버 효과를 내는 buttonMode 를 설정해주고
MouseEvent.CLICK 이벤트를 받도록 걸어줬습니다.
private var data: ByteArray
private function onCreate( e: MouseEvent ): void
{
var str: String = this.getText();
this.data = this.getBinary( str );
this.file = this.createFile();
this.file.download( new URLRequest( "http://www.noexistdomain.com" ), "default.xml" );
} | |
onCreate 메소드는 getText() 메소드를 통해 저장할 값을 가져오고
getBinary() 메소드를 통해서 바이너리로 변환합니다.
그리고 저장위치를 선택하기 위해서 file 객체를 생성한후
선택하는 브라우져를 띄웁니다.
Tip )
File 클래스에는 browse 관련된 메소드가 많은데 왜 굳이 download 라는 편법을 쓰는가?
AIR Beta 1 때 쓰던 방법인데
현재 Beta 2 에서는 browse 관련된 메소드가 많이 추가되었습니다.
근데 정작 browseForSave() 메소드에는 파일명을 설정하는 옵션이 없습니다.
파일명은 커녕 FileFilter 클래스조차 없죠.
단지 브라우져에 title 정하는 기능뿐입니다.
그래서 파일명을 정해주기 위해서 download 를 쓰게 된 것입니다.
onSelect 는 맨 마지막에 살펴보고
getText 와 getBinary 메소드를 살펴보겠습니다.
private function getText(): String
{
var str: String = this.txtXML.text;
try
{
XML( str );
}
catch( e: TypeError )
{
throw new Error( "작성한 텍스트는 XML 형식이 아닙니다." );
}
return str;
} | |
단순히 텍스트만 가져오는 메소드인줄 알았는데
그 무섭다는 try catch 형제까지 동원됐군요.
이 이유는 우리가 저장할 XML의 형식을 유지해야하기 때문입니다.
XMLCreator 기 때문에 XML 형식인지 아닌지를 체크할 필요가 있습니다.
가장 좋은 방법이 플래시 자체적으로 XML 을 판단하는 룰을 이용하는것이죠.
즉 str 을 XML 로 변환시켜보고
이상이 없으면 투고 쓰리고 가는것이고
이상이 있으면 에러를 발생시키고 중단하는 것입니다.
즉 getText 라는 메소드는 텍스트를 가져오되 XML 에 맞는 텍스트만 돌려준다는 역할이 생긴것이죠.
private function getBinary( str: String ): ByteArray
{
var ba: ByteArray = new ByteArray();
ba.writeMultiByte( str, "utf-8" );
return ba;
} | |
뭐 없습니다.
ByteArray 클래스 하나 만들어주고 텍스트를 우리가 메모장같은데서 열어볼 수 있도록 UTF-8 로 저장해주는 것입니다.
따로 지정하지 않으면 한글은 모두 정보를 잃게됩니다.
자 그리고 파일을 선택하고 나서의 프로세스입니다.
private var file: File
private function onSelect( e: Event ): void
{
this.saveData();
} | |
saveData 에 패스 ㄱㄱ
private var fileStream: FileStream;
private function saveData(): void
{
this.file.cancel();
this.fileStream = new FileStream();
this.fileStream.open( this.file, FileMode.WRITE );
this.fileStream.writeBytes( this.data, 0, this.data.bytesAvailable );
this.fileStream.close();
} | |
우선 다운로드는 그저 경로만 지정받기 위한 용도기 때문에
cancel 로 중지시켜줍니다.
그리고 로컬에 파일을 저장시켜줄 FileStream 객체를 생성합니다.
그리고 파일을 생성하여 저장할 준비를 합니다.
FileStream.open 메소드는 file:File, fileMode:String 파라미터를 요구합니다.
Tip) open 과 openAsync 메소드의 차이는?
기존에 C 나 자바를 다뤄보신분은 아실텐데
우리가 파일을 생성할때는 어느정도 시간이 걸립니다.
이때 open 메소드는 파일을 생성하는 작업이 끝날때까지 프로세스를 멈춰놓는 기능이고
openAsync 메소드는 파일을 생성하는 작업을 걸어놓고 다음 프로세스로 넘어가는 기능입니다.
만약 위에서 open 대신 openAsync 메소드를 사용한다면
write 메소드는 딜레이를 기다렸다가 실행되어야 합니다.
안그럼 파일도 없는데 맨땅에 write 한다고 에러가 발생합니다.
Async 메소드는 open 말고도 많은데 차이점을 잘 파악해두시기 바랍니다.
이렇게 파일을 생성한 후
ByteArray 객체를 0, 즉 처음부터 data.bytesAvailable, 즉 끝까지 write 해줍니다.
걍 data 를 그대로 쓴다고 생각하심 편합니다.
그리고 작업이 완료됐으니 FileStream 을 닫아줍니다.
참 쉽죠~? (밥아저씨 왈)
자 이제 Ctrl + Enter 또는 Ctrl + Shift + Enter 로 테스트를 해볼 수 있습니다.
그럼 마지막 남은 부분은 AIR 파일로 최종 컴파일 하는 작업이 남았네요.
AIR 로 컴파일 하는 작업은
메뉴바 > Commands > AIR - Create AIR File. 메뉴를 선택하면 됩니다.
하지만!
처음에 하면 아마 뭐라 뭐라 그러면서 안될겁니다.
AIR 는 데스크탑 어플리케이션이니만큼 보안이 매우 철저합니다
하지만 그렇다고 모든 기능을 다 막아놓은 AS3 Security Model 같지는 않습니다.
다만 인증을 해야하는것인데요
인증에는 공인인증 (은행의 그것이 아닙니다 ㅎㅎ) 과 개인인증 두가지가 존재합니다.
저도 공인인증을 받고 싶어서 나름 설레발이 쳐봤는데
사이트도 죄다 영어고 가격도 500불정도로 비싼편이어서 걍 개인인증으로 지내기로 했습니다.
개인 인증 받기 :
Create AIR File 위 메뉴인 AIR - Application & Installer Settings 메뉴에 들어가면
AIR 파일에 대한 여러가지 정보를 설정할 수 있습니다.
이곳에서 중간아래쯤 보면
Digital signature 라는 디지털 서명이라는 메뉴가 있습니다.
여기서 Change 버튼을 클릭해서 팝업이 뜨면
기존에 만들어 놨으면 찾아서 비밀번호 치면 되고
없으면 Create 버튼을 클릭해서 몇가지 필요한 정보를 입력하고 발급받으면 됩니다.
따로 인증받는 부분이 없기 때문에 만들기는 매우 쉬운편입니다.
자 그럼 개인인증을 받았으니
AIR 셋팅을 하나씩 하나씩 살펴보겠습니다.
File name 이나 Name, ID 는 굳이 건드리실 필요 없습니다.
Package 의 이름은 해당 프로젝트의 폴더명으로 고정되어 있습니다.
그리고 Version은 해당 어플리케이션의 버젼을 명시합니다.
단순히 설치할때만 필요한게 아니라
Updater 클래스를 이용해서 자체 업데이트를 할때도 이 버젼을 비교해서 설치합니다.
Description 은 설치할때 어플리케이션의 설명글을 달아줄수 있습니다.
(근데 걍 한줄로 쭈욱~ 적어야합니다. 줄바꿈도 안되고 한글도 안되고 암튼 좀 그래요;;)
Copyright 는 업체면 해당 카피문구를 넣으시면 됩니다.
그리고 AIR 의 가장 아름다운 기능중에 하나인
크롬창 기능입니다.
System Chrome : OS 의 창 형식을 그대로 따릅니다.
Custom Chrome (opaque) : OS 의 창을 사용하지 않습니다.
Custom Chrome (transparent) : OS 의 창을 사용하지도 않고 배경색을 투명합니다.
Custom Chrome을 이용하여 다채로운 AIR 를 만들 수 있습니다.
동그란 어플, 바탕화면을 돌아다니는 어플등 배경이 투명하기 때문에 디자인의 폭이 매우 넓습니다.
그리고 어플리케이션의 Icon 을 설정해줄 수 있습니다.
사이즈는 각각 128, 48, 32, 16 입니다.
Beta 1 때는 jpg, bmp, png 를 지원했는데
Beta 2 와서는 png 만 지원하게 됐습니다.
그리고 만약 기존의 Flex 처럼 어플리케이션 설정 파일을 따로 가지고 있으면
Application descripter file settings 에서 설정해주면 되는데 머 이걸 손댈날이 있을지 의문이네요.
그리고 Program menu folder 는 시작메뉴 > 프로그램 > Adobe > Adobe Photoshop 처럼
Adobe 라는 메뉴 폴더를 지정할 수 있습니다.
제품군을 형성할 수도 있다는 이야기겠죠^^
그리고 Destination Folder 는 기본값으로 두시는게 좋을겁니다.
아무래도 컴파일러로 돌리다보니 절대경로가 필요해서 폴더가 변경될 경우를 위해서 메뉴를 둔것 같습니다.
Include File 에는 Flex 의 Assets 처럼 여러가지 필요한 파일들을 포함할 수 있습니다.
휴~
이렇게 여러 설정을 해주고 AIR 파일을 생성 할 수 있습니다.
보통 간단하게
크롬창과 Icon, Digital sign 만 해줘도 무리 없습니다.
모두 설정해준 후에
Publish AIR File 메뉴를 클릭하면
"AIR fle has been created." 라는 문구를 보실 수 있습니다.
그러면 Destination Folder 에 air 파일이 이쁘게 누워있는 것을 보실 수 있습니다.
[
소스 다운 받기 ]
그럼 다음 강좌를 기약하며 ㅂㅂ2~
ps) 도움되셨으면 리플 고고 ↓
이올린에 북마크하기
이올린에 추천하기
XMLCreator.zip