야훔의 ActionScript

Twitter! OAuth를 이용한 어플리케이션 만들기 #1

2011-01-07T17:31:00.000+09:00

트위터 어플리케이션 만들기 준비작업을 지난 시간에 마무리 했습니다.

이제 PHP 코드를 작성하면 되는데요.

보통 제 블로그 오시는 분들은 대부분 플래시를 하시는 분이고 서버사이드 언어를 잘 모르는 분들이 많을 거라고 생각합니다.

사실 저도 미대를 졸업하고 개발자가 된거라 PHP나 C#이나 JAVA나 이런거 실무나와서 책보고 공부한게 전부라 덜덜덜 하면서 보곤 했는데 막상 다루고 나면 별것 없고 특히나 트위터 연동같은건 너무 많은 사람들이 글을 써 올려주시는 바람에 소스만 읽고 분석할 줄 아는 능력만 있다면 너무 걱정하지 마세요.

(그런 능력이 없으신 분들은 어떻게 하냐고 물으실까봐 하는 말입니다만 그렇다 해도 너무 걱정하지 마세요)

너무 걱정할 필요가 없는 이유 하나는 지난 시간 다운로드 받았던 코드 있지요? 거기에 다 있습니다.

github.com에서 받아온 소스 있잖아요. 인증하는 샘플소스.

그걸 풀어놨던 곳도 기억하시나요? 일단 그 위치로 가보시죠.

거기가 보시면 config.php 파일 있습니다.

그 파일을 열어보도록 하지요.

[code php]
<?php
/**
* @file
* A single location to store configuration.
*/
define('CONSUMER_KEY', 'xxxxxxxxxxxxxxxxxxxxxx');
define('CONSUMER_SECRET', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
define('OAUTH_CALLBACK', 'http://127.0.0.1/twitterOauth/callback.php');
[/code]
뭐 이런식으로 되어있을겁니다. CONSUMER_KEY가 뭔가요? CONSUMER_SECRET이 뭔가요? OAUTH_CALLBACK은 또 뭐죠? 하실거에요. 물론 잘 알고 계시는 분들도 계시겠지만 모르는 분 위주로 설명할게요.

consumer key라는것은 간단하게 이야기 하면 어플리케이션 키입니다. 어플을 트위터에서 발급해주는 인증키를 기준으로 찾아갈 수 있게 해 놓은거죠. secret은 같은 맥락으로 인증된 키만 갖고는 사용자 정보를 전달하기엔 보안상 문제가 될 수 있으니 secret 키를 둬서 매칭되는지 확인한 후에 접근 가능하도록 해놓습니다. 거기에 하나 더 필요한 것은 callback URL인데요. 어플리케이션을 등록할 당시에 지정한 callBack URL과 리다이렉션 URL이 다르면 인증 절차가 invalid되서 진행할 수 없도록 막아놓고 있습니다.

결국 관리자 외에는 어플리케이션을 컨트롤 할 수 없도록 보안장치를 만들어놓았다는 거죠.

자신의 cunsumer key와 secret키를 보고 싶다면 지난시간에 어플리케이션을 등록하고 나면 http://dev.twitter.com/apps 에 가보면 자신이 등록한 어플리케이션을 확인할 수 있다고 이야기 했는데요. 여기서 consumer key와 secret을 확인할 수 있습니다.

그럼 config.php에 적절하게 입력해줍니다. 그런데 OAUTH_CALLBACK에 뭘 넣어야 할지 모르겠다는 분들 계실텐데요. 아까전에도 말씀 드렸다시피 어플리케이션 등록할 당시에 입력했던 Callback URL을 입력해 줘야합니다. 틀리면 인증절차가 무효되서 User Token을 얻어올 수 없어요.

지난 시간 말씀드렸듯 저는 http://127.0.0.1/twitterOauth/callback.php 이라고 넣어놨습니다.

물론 저 주소를 넣었을때 확인할 수 있는 페이지도 있어야겠지요?

config.php파일을 수정했으면 아파치를 기동하고 http://127.0.0.1/twitterOauth 에 접속합니다.

그런데 좀 어이없는게 왜 index.php파일이 열리는게 아니라 connect.php 파일이 열리는 건지 당최이해할 수가 없군요.. 라고 말하기 전에 일단 index.php 파일을 열어서 확인해보도록 합니다.

[code php]
<?php
/**
* @file
* User has successfully authenticated with Twitter. Access tokens saved to session and DB.
*/
/* Load required lib files. */
session_start();

require_once('twitteroauth/twitteroauth.php');
require_once('config.php');

/* If access tokens are not available redirect to connect page. */
if (empty($_SESSION['access_token']) ||
empty($_SESSION['access_token']['oauth_token']) ||
empty($_SESSION['access_token']['oauth_token_secret']))
{
header('Location: ./clearsessions.php');
}
[/code]
이라고 코드가 짜여져 있을건데요. $_SESSION내에 access_token, access_token 내의 oauth_token, oauth_token_secret 값이 있는지 확인해보고 없으면 clearsessions.php로 이동시킵니다.

clearsessions.php는 걸려있는 세션을 지우고 connect.php로 이동시키게 되지요.

[code php]
<?php
/**
* @file
* Clears PHP sessions and redirects to the connect page.
*/

/* Load and clear sessions */
session_start();
session_destroy();

/* Redirect to page with the connect to Twitter option. */
header('Location: ./connect.php');
[/code]

이런 이유로 connect.php가 화면에 보여지게 됩니다.

그렇다면 access_token은 어디서 얻을 수 있을까요?

일단 사용자 로그인을 해야합니다. 화면에 있는 "Sign in with Twitter" 버튼을 클릭합니다.

"Sign in with Twitter" 버튼을 클릭하게 되면 내부적으로 redirect.php 파일에 접근해서 해당 어플리케이션이 접근을 해도 괜찮은 인증된 어플리케이션인지 확인을 하게 됩니다. 인증된 어플리케이션임을 확인하게 되면 Twitter에서는 사용자에게 로그인 창을 띄우고 만약 로그인을 하고 있었다면 해당 어플리케이션과 자신의 계정을 연결할 것인지 묻는 창이 나오게 됩니다.(물론 로그인 창에서 로그인을 하면 자동으로 이 페이지가 나옵니다.)

이때 "Allow"를 선택하게 되면 리다이렉트 주소를 호출하여 접근하는데 그 주소는 이 어플리케이션을 생성할 당시에 http://127.0.0.1/twitterOauth/callback.php 이라고 등록했었지요. 그 페이지로 이동하게 됩니다.

그리고 아래와 같은 화면이 등장하면 이제 글쓰기 준비는 완료 되었습니다.

오늘은 여기까지 하고 다음시간에 위와같은 절차로 가져온 사용자 토큰을 갖고 글쓰기를 만들어 보도록 하겠습니다.

p.s 제가 보기엔 xml 형식으로 받아오는 것도 좋긴 합니다만 jason 으로 받는게 더 편한거 같더라구요.

xml 방식으로 받아오고 싶기도 한데... 어떤 주소를 호출해야할지 못찾겠어요; 누군가 도와주세요.

Twitter! OAuth를 이용한 어플리케이션 만들기 #0

2011-01-04T20:14:00.000+09:00

오랜만에 블로그를 하는군요.

요즘에 이것저것 갑자기 일들이 몰려와서 정신없이 바쁘다가

대충 정리가 되어 이렇게 포스팅을 할 수 있게 되었습니다.

뭐 오늘은 Twitter의 API를 이용해서 간단하게 내 계정의 글을 다른 어플리케이션에서 갖고 오거나

글을 쓰거나 정보를 갖고 오거나 하는 방법에 대해서 쭉 설명해보려고 합니다.

한 3편정도 되려나요.. 쓰다보면 알게되겠지요.

아, 전에 쓰기로한 Sound 컨트롤은 요 담에 쓸게요.

왠지 계속 손에 안잡혀서;;

Twitter에서는 다른 어플리케이션에서 이용하기 쉽게 하기 위해서 API를 제공 하고 있지요.

http://dev.twitter.com/

게다가 이 곳에선 자신의 어플리케이션을 등록할 수 있기도 하고 Twitter에서 제공하는 API 메서드 명령들도 실행해 볼 수 있도록 서비스 해주고 있습니다.

API Console이라는 기능이죠. 멋진 기능이에요.

그리고 가이드 문서도 제공하고 있습니다. http://dev.twitter.com/doc

뭐.. 서론은 이만 각설하고 일단 이 블로깅의 목적을 정리하고 가지요.

Twitter에 내 App 등록하기
PHP 코드를 이용해서 Twitter의 내 계정에 접근할 수 있는 토큰값 가져오기
토큰값을 이용해서 내 Twitter계정에 글 쓰기

이정도로 정리하겠습니다.

일단 테스트 환경부터 만들텐데 아파치와 PHP와 MySQL을 설치해보신적 없으신분 계신다면

여기로 가주세요. -> http://www.apmsetup.com/

근사모 홈페이지 인데 여기가서 APMSetup을 설치하도록 합니다.

APMSetup은 버젼이 지금 현재 7까지 나왔고 APMSetup7에는 Apache 2.2.14, PHP 5.2.12, Zend Optimizer v3.3.3, MySQL 5.1.39, phpMyAdmin 3.2.3가 들어있고( CUBRID , JRE도 들어있어요) 클릭 한방에 서버셋팅까지 다해주니 급하게 테스트 환경만들기엔 안성맞춤.

APMSetup이든 직접손수 작업했든 일단 다 준비하고 나면 php.ini 파일을 열어서

"extension=php_curl.dll" 이 부분을 찾아 주석을 풀어주세요.

물론 이 php.ini를 수정하였으면 아파치를 재기동시켜야 합니다.

php_curl.dll의 주석을 제거하는 이유는 OAuth 라이브러리에서 사용하기 때문인데요.. 조금 있다가 다운로드할 파일중 "twitteroauth.php"라는 파일이 있습니다. 요녀석이 이번에 하고자하는 핵심파일이죠.

저 안에 보면 이런 코드가 있습니다. 199번째 라인에 보면

[code php]
$ci = curl_init();
/* Curl settings */
curl_setopt($ci, CURLOPT_USERAGENT, $this->useragent);
curl_setopt($ci, CURLOPT_CONNECTTIMEOUT, $this->connecttimeout);
curl_setopt($ci, CURLOPT_TIMEOUT, $this->timeout);
curl_setopt($ci, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ci, CURLOPT_HTTPHEADER, array('Expect:'));
curl_setopt($ci, CURLOPT_SSL_VERIFYPEER, $this->ssl_verifypeer);
curl_setopt($ci, CURLOPT_HEADERFUNCTION, array($this, 'getHeader'));
curl_setopt($ci, CURLOPT_HEADER, FALSE);
[/code]

이런 부분이 있습니다. 이 부분때문에 php_curl.dll 의 주석을 풀어주는 거에요.

만약에 이것을 깜빡하고 넘어가셨다면 이런 오류 메시지를 받아보실 수 있을겁니다.

Fatal error: Call to undefined function curl_init()

이를 미연에 막고자하는 작업입니다.

그런다음 아래의 링크를 따라가 주세요.

https://github.com/abraham/twitteroauth

여기 보시면 OAuth를 이용한 Twitter 계정받아오기 샘플 소스가 있습니다. 다운로드 버튼을 클릭해서 저장합니다.

압축을 풀고 아파치 컨텍스트 루트... 에.. 그러니까.. "htdocs"라고 써있는 디렉토리에 압축을 풀어주세요.

APMSetup 을 기준으로 말씀드리면 설치디렉토리 가보시면 아래의 이미지처럼 있을 텐데

빨간 테두리되어있는 디렉토리에 압축을 풀어주시면 됩니다.

일단 이것으로 준비는 됐고.. Twitter에 어플리케이션 등록을 합시다.

등록을 해야하는 이유는 Consumer Key, ConsumerSecret을 받고 callBack URL을 입력하기 위해서 입니다.

이렇게 해야 사용자 계정에 대응하는 토큰값을 가져와서 제어할 수 있습니다.

어플리케이션 등록은 여기서 하면 됩니다. http://dev.twitter.com/apps/new

위와 같은 창에서 어플리케이션 이름, 설명, 어플리케이션 웹사이트 등등을 입력하는데

가장 중요한건 Application Type을 Browser로 하고 Callback URL에 적절한 주소를 저장하는데 있습니다.

물론 다른데도 잘 입력해야 등록이 되겠지만 저 두개의 값때문에 삽질을 얼마나 했던지;;;

저의 경우엔 http://127.0.0.1/twitterOauth/callback.php 이라고 넣었습니다.

모든 필드에 입력을 마치고 Save 버튼을 클릭하시면 Consumer Key, ConsumerSecret 값들과 뭐 다른 URL 주소들이 나오는데 지금 가장 중요한건 저 두개의 Consumer Key, ConsumerSecret 값들입니다.

아, 물론 http://dev.twitter.com/apps 에 들어가서 보시면 자신의 등록된 어플리케이션을 확인할 수 있습니다.

물론 정보를 수정할 수도 있고 Consumer Key, ConsumerSecret 이 값들도 새로 받을 수 있습니다.

오늘은 여기까지 하고 내일은 php소스 코드를 이용해서 토큰값을 받아오는 것을 구현해 보겠습니다.

사운드. 도데체 어찌 사용해야하나요 - #0 프롤로그

2010-11-09T19:24:00.000+09:00

돌아온 김에 글하나를 써보려고 합니다. ㅎ

사운드 제어에 관련된 내용을 써보려구요.

사실 사운드 제어는 어떻게 보면 참 간단합니다.

"그냥 로드해서 Play 메서드 호출하면 되잖아!"

라고 하실 수도 있습니다만 제가 하려는건 그런게 아니라 사운드를 어떻게 가져다 쓸 것인지

여러 상황들에 대해 한번 정리하는 시간을 가져보려고 합니다.

어떤 상황들이냐 하면

1. 그냥 mp3파일을 SWF안에 Embed 할지

2. 스트림으로 로드를 할 것인지

3. 아니면 다른 SWF 파일을 Embed해서 그 안에 정의되어 있는 사운드 객체를 가져다 쓸 것인지

입니다.

오늘은 간단히 사운드 객체를 재생하면서 사운드 객체 모형에 대해 고민해 보도록 합시다.

사운드를 재생하기 위해서 어찌합니까 라는 질문을 하기전에

ActionScript Language Reference(API라고도 하죠) 를 확인해 보도록 합니다.

여기를 클릭해 보시면 ActionScript Language Reference에 있는 Sound 클래스 페이지 입니다.

일단 Sound객체는 외부에서 사운드를 스트림으로 불러오던지

혹은 Embed된 Sound객체를 재생하거나 할 수 있습니다.

내부에서 어떻게 돌아가는지 정확히 잘 모르겠지만 "소리를 내는 역할을 하는" 객체 임에는

틀림없는 듯 합니다.

그런데 Sound 객체를 처음 접하시는 분들은 이런 말씀을 하실 수도 있습니다.

"어라? SoundChannel은 뭐에 쓰는거야?" 라고 하실 수 있습니다.

Example 쪽을 보시면 이런 코드가 있거든요.

[code as3]
private var url:String = "MySound.mp3";
private var song:SoundChannel;

public function SoundExample()
{
var request:URLRequest = new URLRequest(url);
var soundFactory:Sound = new Sound();

soundFactory.addEventListener(Event.COMPLETE, completeHandler);
soundFactory.addEventListener(Event.ID3, id3Handler);
soundFactory.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
soundFactory.addEventListener(ProgressEvent.PROGRESS, progressHandler);
soundFactory.load(request);
song = soundFactory.play();
}
[/code]

"SoundChannel가 뭐길래 Sound.play(); 메서드를 호출할때 SoundChannel을 반환하나요?"

라고 하시는 분도 종종 계시지요.

일단 Sound객체를 알아가기 위해서는 SoundChannel도 알아야하므로 SoundChannel을 어떻게 설명해 놓았는지 API를 읽어보도록 합시다.

사운드 채널 클래스는 Flash 어플리케이션 내에 있는 사운드 객체를 제어 한다고 하는데 어떤 내용들을 제어 할 수 있냐면 일단 가장 중요한 기능으로 stop() 메서드가 있고 사운드의 볼륨을 모니터링할 수 있는 속성들을 제공합니다. 그리고 SoundTransform 객체를 위한 속성도 제공 하지요. 볼륨을 제어할때 SoundChannel의 SoundTransform 을 이용해 제어합니다.

SoundTransform은 볼륨이나 좌우 Pan 값을 제어하는데 사용되는 클래스 입니다.

뭔가 상당히 복잡하지 않나요?

그냥 사운드에서 죄다 제어하면 될걸 왜 다 분리해놓고

Sound를 로드한 담에 재생 할 적에 SoundChannel이랑 연결해 놓더니 거기서 stop()이니 position이니 하는 메서드나 속성을 확인하거나 실행하더니 또 볼륨을 제어하려니까 거기서 SoundChannel에 있는 SoundTransform 을 가져다가 볼륨을 제어하고 Pan 값을 제어하게 두다니!

(게다가 재생이 완료되면 거기에 대한 이벤트는 SoundChannel에서 발생합니다. Sound는 뭐하는 애니??)

이거 Sound를 쓰라는거야 말라는거야 하시는 분들 계실 겁니다.

ActionScript에서 사용되는 Sound관련된 클래스들은 Sound 그 자체와 그것을 제어하는 것을 철저히 분리하여 설계되었습니다.

Sound는 말 그대로 소리에 대한 역할만 수행할뿐 나머지 제어는 다른 클래스로 분업화 하였습니다.

그래서 사용하기가 조금 어려워 지긴 했지만 뭐.. 이해만하면 그리 어렵지는 않아요.

이렇게 분리해 놓으면 그것대로 장점도 있으니까요.

오늘은 대충 Sound와 그의 친구인 SoundChannel객체에 대해 맛만 보고 이정도로 정리하고

다음 시간을 기대하세요

2010년 11월 - Came Back

2010-11-09T19:00:00.000+09:00

아... 안녕하세요.

"야훔의 저렴한 개발" 시리즈를 쓰다가 돌연 잠적하더니 다시 돌아왔습니다.

여러가지 시리즈로 매일매일 글을 쓰다가 올 4월 말에 2박 3일 예비군 훈련을 마치고

회사로 돌아가니 팀이 해체되어 공중분해 되는 사태가 있었지요.

이유야 여러가지였지만 어쨋든 그 덕에 회사를 나오고 프리랜서로 한 4~5개월정도 보내다가

새로이 자리를 잡고 앉게 되어 다시 글을 쓸 수 있게 되었습니다.

그동안 많은 일들이 있었지만

UI 개발자 같지 않게 "인도네시아"까지 개발 출장도 다녀오고

알바를 받았는데 드롭도 시켜보고

돈 때문에 좌절도 해보고 이것저것 방황 하다가 간신히

새 보금자리에서 새로운 사람들과 호흡을 맞출 수 있게 되었네요.

이제 다시 시작합니다.

"야훔의 저렴한 개발"

저렴한 개발 SVN

2010-04-05T10:56:00.000+09:00

http://dev.naver.com/projects/cheapas3/

네이버 개발자 센터에 있는 SVN 저장소를 이용하기로 했습니다.

여태 소개했던 예제파일들을 서로 공유하는 장소가 있으면 좋겠다.. 하고 생각했는데

저 혼자서 블로깅하고 예제파일들을 만드는 것이 아니라 여러사람들과 소통하고 코드를 만들어가는게

더 "즐겁지 않을까"하고 생각했습니다.

그래서 네이버 개발자 센터와 Google 개발자 센터중 어디를 택할지 고민하다

네이버 개발자 센터를 이용해보는 것도 괜찮을것 같아 네이버에 둥지를 틀었습니다.

다만 다운로드는 익명으로도 할 수 있게 해놨는데.. 잘 될지는 모르겠습니다.

안되시는 분들은 댓글달아주세요.

참. SVN 사용법을 모르시는 분들을 위해 오늘 저녁에 설명서를 올려드리도록 하겠습니다.

일단 SVN 다운로드 페이지는 먼저 소개해 놓을께요.

SVN 홈페이지 : http://subversion.tigris.org/

SVN 다운로드 : http://tortoisesvn.net/downloads

SVN subclipse 버젼 다운로드(이클립스 혹은 빌더 사용) : http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA

p.s 저렴한 개발이므로 이클립스나 빌더로 개발하지 않아요. 그래서 SVN을 이용해 "빌더"에서 다운로드 하셨을 경우 정식 프로젝트로 적용되지 않으니 이점 기억해주세요.

저렴하게 빌더없이 개발하기 - EditPlus 편

2010-03-30T11:32:00.000+09:00

플래시 액션스크립트 카페에서 테크트리님께서 한 말씀 하셨더랬죠...

네.. 그래서 EditPlus로 개발하는 방법을 알려드리는 시간을 갖도록 하겠습니다.

아주 간단한 설정으로 Flex SDK를 이용한 개발방법이지요.

일단 EditPlus를 엽니다.

여기서 일단 "도구 > 기본설정"을 클릭합니다.

클릭을 하면 위와 같은 화면이나옵니다. 좌측 트리메뉴에서 "파일"을 클릭하여 "새 파일형식"과 "기본 인코딩"부분을 아래와 같이 수정합니다.

보통은 UTF-8이 아니라 ANSI 로 되어있는데 영문만 사용하시는 거라면 문제가 없겠지만 한글이라던가 제3국언어를 사용하시게 되면 문자 인코딩이 깨져서 컴파일 되게 됩니다.

그 다음 좌측 트리메뉴에서 "설정 및 구문강조"를 선택하고 "추가"를 클릭합니다.

"파일 종류 설명 입력"이라고 뭔가를 입력하라는데 그냥 알기쉬운 이름 지어준다 생각하고 적어주시면 됩니다. 저는 귀찮아서 그냥 "as"라고 적었습니다. "확인"을 클릭하면 "파일 종류"리스트에 "as라는 항목이 추가 되면 아래와 같이 설정을 맞춰주시면 됩니다.

파일확장자는 as와 mxml만 설정했습니다. 문제는 구문파일이나 자동완성 파일인데.. 저 파일을 어디서 구할수 있느냐... 하면 EditPlus 홈페이지에서 구할 수 있지요.

저 파일을 다운받고 싶으시다면 클릭 고고.

다운로드 받은 뒤에 압축을 풀면 몇몇개 파일이 있습니다. 그 파일들을 적당한 장소에 옮기신 후에 EditPlus로 돌아와 "..." 버튼을 눌러 적용하시면 됩니다.

설정하시고 나면 일단 기본적인 코드 읽기가 가능해집니다.

저는 구문강조 색상을 설정해 제 취향에 맞춰서 만들었습니다.

적절하게 읽기도 좋아지고 보기도 좋아진것 같습니다. 이제 컴파일 옵션을 맞춰줄 시기가 왔군요.

일단 컴파일은 간단하게 "mxmlc file경로 file명을 제외한 디렉토리\파일명.swf" 명령어로 처리됩니다.

"도구 > 사용자 도구 구성"으로 가볼까요?

위와같이 아무것도 없는 창이 뜨게 될텐데 일단 그룹이름을 세련되게 지어주도록 하지요.

오른쪽에 있는 "그룹 이름..." 이라는 버튼을 클릭해 이름을 지어줍니다.

저는 이번에도 귀찮아서 "as" 라고 지어줬습니다.

그 다음 "그룹 이름..." 밑에 있는 "추가(D)>>"라고 클릭해주세요.

추가를 클릭하게 되면 하위 메뉴가 나오는데 그때 "프로그램(P)"를 클릭하면 됩니다.

그럼 위와 같이 리스트에 하나가 추가 되는데요. 메뉴 제목에 적절한 이름을 지어줍니다.

저는 이번에도 귀찮아서 as Compile이라고 지어줬지요.

사실 이름짓는게 가장 귀찮은 작업이라고 생각해요. 그냥 나중에 알아보기에 편하기만 하면 됩니다.

그 다음 명령 입력필드 오른쪽에 있는 "..." 버튼을 클릭하고 "SDK 디렉토리\bin" 으로 이동합니다.

저의 경우엔 "D:\Dev\02.Util\sdks\flex_sdk_3.5\bin"가 되겠네요.

이동하게 되면 아래와 같은 화면이 나옵니다.

컴파일을 하기 위해선 mxmlc.exe가 필요하니 mxmlc.exe 파일을 선택하고 "열기"를 클릭합니다.

그리고 "인수(O)" 입력필드 오른쪽에 있는 ▼ 버튼을 클릭합니다.

자.. 이제 아래와 같은 설정이 되었는지 확인해 봅니다.

위와 같은 화면이 되었다면 일단 컴파일 셋팅은 끝났습니다.

컴파일을 해볼까요?

"도구" 메뉴를 보시면 as Compile이라는 메뉴가 생긴걸 볼 수 있지요.

저 메뉴를 클릭하셔도 되고 "Ctrl + 1"을 누르셔도 괜찮습니다. 바쁜 스케쥴때문에 마우스에 손을 대기 귀찮군요. 저는 Ctrl + 1을 누르겠습니다.(아, 경로 중간에 띄어쓰기가 있으면 안됩니다.)

예전에 작업했던 Point 예제를 컴파일 했습니다.

그럼 컴파일이 되었습죠. 컴파일한 as 파일과 같은 경로에 말입니다. 에러가 나올땐 이렇게 나옵니다.

참고로 저기 괄호안에 (27) 이라고 나온것이 몇번째 라인에서 에러가 나온 것인지 알려주는 거에요.

자.. 컴파일도 했으니 실행을 시켜봐야할텐데.. 사실 빌더에서처럼 자동으로 HTML도 만들어주고 익스플로러도 실행하고 그럼 좋겠으나 EditPlus잖아요. 현실을 받아들입시다.(Ant라던가 뭐.. 다른 방법으로도 할 수 있는 방법이 있겠으나 그걸 다 썼다간 저 오늘 집에 못갈지도 몰라요.)

간단하게 Flash Player로 실행하는 것으로 타협하고 셋팅해 볼께요.

아까 "as Compile" 했던 "도구 > 사용자 도구 구성"메뉴로 들어갑니다. 그 담은 뭐 일사천리에요.

프로그램 추가하시고 이름은 "flash player" 라고 지었습니다.

자.. 이제부터 중요한 "명령"부분. 그냥 Flash Player를 설정해주면 되지 않냐. 라고 하시는데요.. 사실 다들 브라우져에서 보는 플러그인 방식의 Flash Player만 있지 로컬에서 Stand Alone으로 swf를 실행하는 거라곤 "곰 플레이어"밖에 없으신 분들 많으실 겁니다. 아시는 분은 아실지 모르겠습니다만 Adobe에서는 SDK를 배포할때 Flash Player를 같이 배포하고 있지요. "SDK 경로\runtimes\player\10\win" 위치로 가보시면 아래와 같이 Flash Player를 확인하실 수 있습니다.

저의 경우엔 "D:\Dev\02.Util\sdks\flex_sdk_3.5\runtimes\player\10\win"경로지요.

아무튼 파일을 선택하시고 "열기"합니다.

그 담에 "인수"가 중요한데요. 좀 복잡합니다.

명령이 "FlashPlayer.exe 파일디렉토리\확장자를 뺀 파일이름.swf" 이렇게 나와야 하기 때문이에요.

왜냐하면!!! 그냥 "파일경로"를 넣어버리면 지금 보고있는 as 파일을 재생하기 때문이지요. 그럼 그저 하얀 화면만 보게 됩니다. 그래서 "파일 경로"를 넣는 것이 아니라 "디렉토리\확장자를 뺀 파일이름.swf"라고 인수를 넘겨주는 것이지요.

아래와 같이 셋팅합니다.

위와 같이 셋팅이 되셨으면 됩니다. 아, 마지막으로 "출력 내용 캡쳐"를 선택해 주세요. 저걸 선택하게 되면 trace로 나오는 메시지를 캡쳐해 화면에 보여주게 됩니다.

자.. 이제 실행해 볼까요?

새로 메뉴도 생겼고.. 저는 이번에도 Ctrl + 2 로 실행했습니다.

아주 잘 실행됩니다. trace도 확인할 수 있어요.

이렇게요.

간단한가요? 저는 사실 실무 들어와서 약 1년 6개월간을 Edit Plus로 프로젝트를 진행해서 이런 셋팅에 이골이 날 지경이지만 처음 하시는 분들은 조금 어려울지도 모르겠네요. 라이브러리 셋팅이라던가 보다 세부적인 컴파일러 설정을 하려면 좀더 어렵겠지만 (아예 따로 컴파일러를 셋팅하는 경우도.... 덜덜) 간단한 예제같은 것은 이런 설정만으로도 만들 수 있으니까요. 한번 해보시는 것도 괜찮을 듯 합니다.

p.s :

결코 EditPlus를 권장하지 않습니다. 단지 이렇게도 작업할 수 있다는 것만 알아두시는 것이 좋을듯.

사실 Builder라는 좋은 툴을 두고 EditPlus로 개발하는 짓은 좀 웃기는 일이지요.

저는 단지 Builder라는 툴을 사용하지 못할 경우라던가 돈이 없어 Builder를 사용하지 못하는 분들을 위해 방법을 소개함을 다시한번 말씀드립니다.

목표가 생기면

2010-03-26T11:10:00.000+09:00

목표가 생기면 무작정 달려들어야지

실패를 두려워할 여유같은건 없을 때니까.

Interface Class #2 - 존재의 이유

2010-03-25T10:26:00.000+09:00

지난번 포스팅에서 너무 두서없이 이야기해서 혼란스러운 분들이 계실까봐 일단 한번 정리하고

넘어가도록해보겠습니다.

Interface Class의 존재 이유

다중상속을 받기위한 하나의 방법으로 제공
해당 Interface Class를 구현하여 본 클래스가 제공하는 기본기능을 유추할 수 있음
코딩하는데 있어 개발자의 실수를 미연에 방지(메서드를 안만들거나 하는)
서로 다른 클래스를 하나의 인터페이스 클래스로 캐스팅 할 수 있어 확장성에 도움이 됨

사실 2번이나 3번 같은 이유로 Interface Class를 만든다는건 좀 우습긴하지만 어찌됐든 저런 이유로 Interface Class를 만들기도 하니까요.

2번이나 3번의 경우엔 개발자가 좀더 신경써서 코딩하거나 네이밍 하게 되면 해결되는 문제로 이런 것만으로는 Interface Class의 존재이유가 될 수 없지요. 일단 인터페이스 클래스를 사용하게 되면 도움이되는 팁을 한번 알아볼까요?

1. 클래스 구조상 어떤 클래스가 들어올지 예측할 수 없는 경우.

대표적인 예로 아이템 렌더러가 있을 수 있지요. 데이터 그리드 내에 있는 아이템 렌더러는 반드시 포함되어야할 요소들이 몇가지 있는데요. IDataRenderer, IDropInListItemRenderer, IListItemRenderer. 이렇게 3개의 인터페이스가 구현되어야만 합니다. (총 5개인데 그중 2개는 UIComponent에서 이미 구현했거든요..:D)

저 3가지 인터페이스를 구현함으로써 아이템렌더러는 기본적으로 data라는 속성. listData라는 속성을 포함하게 됩니다. 그로인하여 DataGrid 내부적으로는 어떤 형식으로 만들어진 아이템렌더러가 들어오더라도 위의 3가지 인터페이스를 구현했다고 가정함으로써 처리가 가능해 지는 것입니다.

그래서 별별 희안한 아이템 렌더러도 만들 수 있게 되는 것이지요. 이런것들 처럼요.

썩... 별별 희안한 아이템 렌더러는 아닙니다만 어찌되었든 복잡한 클래스 구조 안에서 다양한 방법으로 클래스를 처리함으로써 보다 넓게 클래스를 확장할 수 있게 됩니다. 폐쇄적인 클래스 구조가 아니라 좀더 개방적인 코드를 만들어 냄으로 써 코드의 재사용성을 높일 수 있게 되는 것이지요.

2. 코드의 구현 중 디버깅.

예를 들어 어떤 클래스군(群)을 만들어 내는데 있어 필요한 요소중 하나가 andromeda와 general_idea 라는 속성이 있어야 한다고 정의한다고 할 때 개발자가 1인일 경우 큰 문제가 되지 않습니다.

허나 거의 모든 SI 프로젝트가 그렇듯 개발자가 1인일 경우는 거의 드물지요. 다른 개발자들과 같이 협업하게 되는 경우가 많습니다. 그럴경우 코드를 배포하고 개발하게 되었을때 첨에 말씀드린 클래스군(群)을 다같이 만든다고 했을 때 누군가가 필수요소 코드인 andromeda와 general_idea를 빼먹었다면? 당연히 컴파일 중 에러가 속출할테고 원인을 분석하기 위해 시간을 버려야만 하는 문제가 발생하게 됩니다.

1분 1초가 아까운 시점에서 이런 에러때문에 시간을 버려야만 한다면 그것은 분명 시간의 "낭비"입니다.

그런 부분을 보완하기 위한 방법으로 Interface class를 사용합니다.

아래와 같이 Interface class를 정의하고

[code as3]
package classes.core
{
public interface IMain
{
function set andromeda(value:String):void;
function get andromeda():String

function set general_idea(value:String):void;
function get general_idea():String;
}
}
[/code]
Main 클래스를 아래와 같이 작성합니다.

[code as3]
package
{
import flash.display.Sprite;
import classes.core.IMain;
public class Main extends Sprite implements IMain
{
public function Main()
{
super();
}
}
}
[/code]

위와 같이 코딩해서 컴파일 하게 되면 아래와 같은 메시지가 등장하게 되지요.

이렇게 컴파일 단계에서 미리 에러를 보여줘 디버깅하는데 도움을 주게 됩니다.

개인적인 작업을 할때보다 단체로 작업할 때 큰 도움을 주지요.

인터페이스 클래스는 반드시 필요하지않은 것도.. 그렇다고 반드시 필요한 것도 아닐지 모르겠지만 코드가 명확해지고 목적을 갖게 하면서 보다 넓은 확장성을 갖게 합니다.

특히 SDK 작업을 할때엔 반드시 작성되어야할 코드이기도 하지요.

이번은 여기까지 하구요. 다음 시간엔 Interface Class의 마지막 시간이 계속 됩니다.

p.s 개인 적인 사정으로 지난주 2일분이 빠지게 되었군요. 회사일이 좀 줄어들거든 메꾸도록 하겠습니다. :)

Interface Class #1 - 존재의 이유

2010-03-24T13:04:00.000+09:00

Interface Class라고 들어봤나요? 도데체 뭘하는 녀석들일까요? 이상한 클래스입니다.

사실 필요성 같은거 별로 알고 싶지 않기도 하고 이런거 없이도 잘 살아왔어요.

사실입니다!

이렇게 말씀하시는 분 손한번 들어주세요.

Interface 클래스는 거참.. 말씀드리기가 어려운 내용입니다.

왜냐하면 논리적으로 "불필요하다"라고 단정적으로 이야기 할 수 없고

"반드시 필요하지!"라고 말하기도 애매한 내용일 수 있기 때문입니다.

하지만 개발자들은 Interface 클래스를 이용합니다. 심지어 저번에 포스팅했던 아이템 렌더러까지도요.

인터페이스들을 구현하지 않으면 아이템렌더러가 제대로 작동하지 않게 설계되었기 때문인데요.

그거 외에도 수많은 인터페이스 클래스들이 존재합니다.

왜 그럴까요? 왜!

아시모프님께서 좋은 설명을 해주셨는데요(관련글 : http://silverktk.tistory.com/134)

인터페이스를 쓰는 가장 큰 이유는 다중상속을 지원하지 않는 자바에서 다중상속의 장점을 가져오기 위해서입니다.

라고 말씀하셨네요. 자바로 설명을 주셨지만 액션스크립트라고 크게 다르지 않습니다.

C개발하시는 분들이 종종 질문하시는 내용중에 하나인데요. "액션스크립트에서는 다중 상속이 안되느냐?"라고 물어보시곤 합니다.

다중상속이라함은 다른 여러 클래스를 다중으로 상속받게 하는 것인데 자바나 액션스크립트에서는 지원하지 않고 있지요. 대신 인터페이스 클래스라는 것을 이용하게 합니다. 이를 통하여 얻을 수 있는 장점은 부모 클래스에서 무조건적으로 받아내는 상속이라는 개념대신 자식 클래스에서 필요한 매서드를 구현하여 부모 클래스의 불필요한 부분을 걷어내고 자식 클래스에 맞게끔 새로 구현할 수 있게 된다는 것이지요.

그리고 보다 넓은 확장성을 기대할 수 있게 합니다. 예를 들어 이렇게 되겠지요.

IContent라는 인터페이스 클래스가 있고 안에는 3가지 메서드가 있다고 했을때 그것들을 구현한 ImageContent와 FLVContent, SWFContent는 기본적으로 play(), stop(), pause() 라는 메서드가 있게 됩니다. 의심할 여지가 없지요.

코드로 보면 이렇게 됩니다.

[code as3]
package classes.controls
{
import classes.controls.IContent;
import flash.display.Sprite;

public class ImageContent extends Sprite implements IContent
{
public function ImageContent()
{
super();
}

public function play():void
{
//
}

public function pause():void
{
//
}

public function stop():void
{
//
}
}
}
[/code]

예를 들어 위와같이 IContent를 구현해 내고 나면 저 클래스를 가져다 쓰는 곳에서는 이렇게 사용할 수 있게 됩니다.

[code as3]
package
{
import classes.controls.ImageContent;
import classes.controls.IContent;

import flash.display.DisplayObject;
import flash.display.Sprite;

public class Main extends Sprite
{
public function Main()
{
super();

if(!child)
{
child = new ImageContent();
}

IContent(child).play();
}

private var child:DisplayObject;
}
}
[/code]

위와 같이 코드를 작성할 수 있게 됩니다. 뭔가 좀 이상한 구석이 있으시다면 코드를 저렇게 만들어 두시고 컴파일해보시면 이해하실 수 있을까요.. child라는 녀석이 DisplayObject이지만 IContent를 구현한 ImageContent로 생성해 놓고 나중에 IContent로 캐스팅 할 수 있게 된다는 사실은 논리적으로 하자가 없지요.

게다가 만약에 IContent말고 예를들어 IDestroy같은 인터페이스 클래스가 있다고 가정했을 때

[code as3]
public class ImageContent extends Sprite implements IContent, IDestroy
[/code]

라고 해서 구현해 놓으면 나중에 IDestroy(child)라고 캐스팅할 수 있게 됩니다.

아, 물론 IDestroy(child).play() 이렇게 할 수는 없지요. IDestroy는 IContent와 다르니까요.

복잡하신가요? 오늘은 이정도로 맛만보구요. 담부터는 좀더 자세하고 섬세하게 알아보는 시간을 갖었으면 좋겠습니다.

Flex DataGrid ItemRenderer #3- 또다른 전쟁의 서막

2010-03-23T11:22:00.000+09:00

지난 시간 제기한 문제점은 아래와 같았습니다.

1. "Y", "N" 값으로만 작동하게 되어있다.

2. CheckBox를 클릭하면 뭔가 다른 행동을 하고 싶을땐 어떻게 하나.

외부에서 들어오는 데이터가 "0"이나 "1"이면 어떻한다?(혹은 true 나 false일지도..)

CheckBox를 클릭하면 Alert 창이 떠야한다면?

이럴때마다 ItemRenderer를 열어서 수정해야한다면 말이 안되겠지요.

일단 2번 같은 경우는 제가 알기로는 두가지 방법이 있습니다만 그중 하나는 Bubbles라는 이벤트 속성을 이용하는 방법입니다만 ItemRenderer에서 이벤트를 발생시키면서 bubbles 속성을 true로 지정해주면 DataGrid 밖에서 이벤트를 받아올 수 있지요.

다만.. bubbles라는 녀석의 특성상 데이터가 많이 꼬일 염려가 있다는게 문제입니다.

(꼬인다는건 "디버깅"이 어려워질 수 있다는 말을 쉽게 풀어 쓴 말입니다.)

그래서 저는 가장 확실한 방법으로 CallBack 함수를 지정해 놓는 방법을 선택했습니다.

아래의 코드를 봐주세요.

Main.mxml
[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:renderers="classes.controls.renderers.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{index:1, description:"test1", toggle:"Y"},
{index:2, description:"test2", toggle:"N"},
{index:3, description:"test3", toggle:"N"},
{index:4, description:"test4", toggle:"Y"},
{index:5, description:"test5", toggle:"N"},
{index:6, description:"test6", toggle:"N"},
{index:7, description:"test7", toggle:"Y"},
{index:8, description:"test8", toggle:"N"},
{index:9, description:"test9", toggle:"N"},
{index:10, description:"test10", toggle:"N"},
{index:11, description:"test11", toggle:"N"},
{index:12, description:"test12", toggle:"N"}
]);

public function checkBoxRendererClickHandler(data:Object):void
{
Alert.show("click by " + data.description);
}
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="index" dataField="index" />
<mx:DataGridColumn headerText="description" dataField="description" />
<mx:DataGridColumn headerText="radio" dataField="toggle">
<mx:itemRenderer>
<mx:Component>
<renderers:CheckBoxRenderer onClickFunction="{outerDocument.checkBoxRendererClickHandler}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

CheckBoxRenderer.as
[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
// Import
//
//-----------------------------------------------------------------------------
import flash.events.MouseEvent;

import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.events.FlexEvent;

use namespace mx_internal;

public class CheckBoxRenderer extends CheckBox
{
//-----------------------------------------------------------------------------
//
// Constructor
//
//-----------------------------------------------------------------------------
/**
   * Constructor.
   */
public function CheckBoxRenderer()
{
super();
}

//-----------------------------------------------------------------------------
//
// Variables
//
//-----------------------------------------------------------------------------
/**
   * @private
   * 데이터 변경 확인 플래그
   */
private var dataChanged:Boolean = false;

//-----------------------------------------------------------------------------
//
// Properties
//
//-----------------------------------------------------------------------------
//-------------------------------------
// onClickFunction
//-------------------------------------
/**
   * @private
   */
private var _onClickFunction:Function;
/**
   * 클릭시 실행할 콜백함수 속성
   */
public function set onClickFunction(value:Function):void
{
_onClickFunction = value;
}
/**
   * @private
   */
public function get onClickFunction():Function
{
return onClickFunction;
}
//-----------------------------------------------------------------------------
//
// Override Properties
//
//-----------------------------------------------------------------------------
override public function set data(value:Object):void
{
super.data = value;

dataChanged = true;
invalidateProperties();
}

//-----------------------------------------------------------------------------
//
// Override Methods
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
override protected function createChildren():void
{
super.createChildren();
}

/**
   * @private
   */
override protected function commitProperties():void
{
super.commitProperties();

if(dataChanged)
{
dataChanged = false;
updateProperties();
}
}

/**
   * @private
   */
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

currentIcon.x = (unscaledWidth - currentIcon.width) / 2;
}

//-----------------------------------------------------------------------------
//
// Methods
//
//-----------------------------------------------------------------------------
/**
   * @private
   * CheckBox의 속성을 변경
   */
private function updateProperties():void
{
if(listData.label == "Y")
{
selected = true;
}
else
{
selected = false;
}

invalidateDisplayList();
}

//-----------------------------------------------------------------------------
//
// Override EventHandler
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);

//data[DataGridListData(listData).dataField] = selected ? "Y" : "N";

if(selected)
{
data[DataGridListData(listData).dataField] = "Y";
}
else
{
data[DataGridListData(listData).dataField] = "N";
}

if(_onClickFunction != null)
{
_onClickFunction(data);
}
}
}
}
[/code]

위와같이 코딩하게 되면 아래와 같은 산출물이 나오게 됩니다.

CheckBoxRenderer를 클릭해보세요. Alert창이 뜨는걸 볼 수 있지요.

그럼 2번 문제는 해결된것 같습니다. 그럼 1번 문제인 "Y", "N" 이외의 다른 문자열이 들어올땐 어떻게 할까요? 라는 문제는 방금 2번 문제를 해결한것과 같이 해결하면 될것 같습니다.

아래 처럼요.

[code as3]
package classes.controls.renderers
{
//-----------------------------------------------------------------------------
//
// Import
//
//-----------------------------------------------------------------------------
import flash.events.MouseEvent;

import mx.core.IDataRenderer;
import mx.controls.CheckBox;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
import mx.events.FlexEvent;

use namespace mx_internal;

public class CheckBoxRenderer extends CheckBox
{
//-----------------------------------------------------------------------------
//
// Constructor
//
//-----------------------------------------------------------------------------
/**
   * Constructor.
   */
public function CheckBoxRenderer()
{
super();
}

//-----------------------------------------------------------------------------
//
// Variables
//
//-----------------------------------------------------------------------------
/**
   * @private
   * 데이터 변경 확인 플래그
   */
private var dataChanged:Boolean = false;
//-----------------------------------------------------------------------------
//
// Properties
//
//-----------------------------------------------------------------------------
//-------------------------------------
// onClickFunction
//-------------------------------------
/**
   * @private
   */
private var _onClickFunction:Function;

/**
   * 클릭시 실행할 콜백함수 속성
   */
public function set onClickFunction(value:Function):void
{
_onClickFunction = value;
}

/**
   * @private
   */
public function get onClickFunction():Function
{
return onClickFunction;
}

//-------------------------------------
// selectedFlag
//-------------------------------------
/**
   * @private
   */
private var _selectedFlag:Array = ["Y", "N"];

/**
   * <p>true, false를 처리할 flag를 Array형태로 받아 처리.</p>
   * <p>이때 selectedFlag의 length는 2를 초과할 수 없음.</p>
   * @default    ["Y", "N"]
   */
public function set selectedFlag(value:Array):void
{
if(value.length > 2)
{
throw(new Error("selectedFlag:Array의 값은 두개를 초과할 수 없습니다."));
}
_selectedFlag = value;
}

/**
   * @private
   */
public function get selectedFlag():Array
{
return _selectedFlag;
}
//-----------------------------------------------------------------------------
//
// Override Properties
//
//-----------------------------------------------------------------------------
override public function set data(value:Object):void
{
super.data = value;
dataChanged = true;
invalidateProperties();
}
//-----------------------------------------------------------------------------
//
// Override Methods
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
override protected function createChildren():void
{
super.createChildren();
}

/**
   * @private
   */
override protected function commitProperties():void
{
super.commitProperties();

if(dataChanged)
{
dataChanged = false;

updateProperties();
}
}

/**
   * @private
   */
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

currentIcon.x = (unscaledWidth - currentIcon.width) / 2;
}

//-----------------------------------------------------------------------------
//
// Methods
//
//-----------------------------------------------------------------------------
/**
   * @private
   * CheckBox의 속성을 변경
   */
private function updateProperties():void
{
if(data[DataGridListData(listData).dataField] == _selectedFlag[0])
{
selected = true;
}
else
{
selected = false;
}

invalidateDisplayList();
}

//-----------------------------------------------------------------------------
//
// Override EventHandler
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);

//data[DataGridListData(listData).dataField] = selected ? _selectedFlag[0] : _selectedFlag[1];

if(selected)
{
data[DataGridListData(listData).dataField] = _selectedFlag[0];
}
else
{
data[DataGridListData(listData).dataField] = _selectedFlag[1];
}

if(_onClickFunction != null)
{
_onClickFunction(data);
}
}
}
}
[/code]

이렇게 수정하고 나면 눈으로 보기엔 아무 바뀐게 없어 보일지 모르겠지만 데이터가 "Y", "N"이 아니라 true나 false로 들어온다 하더라도 selectedFlag를 변경해주면 바로 적용할 수 있게 된다.

(163번째 줄 확인 꼭 하셔야합니다. label로 되어있던걸 data에서 바로 값을 뽑아서 비교하게끔 했어요. 이유는 true나 false같은 경우는 String이 아니기때문에 비교식 성립이 안되거든요.)

아래와 같이 Main.mxml 파일을 수정해보면 알 수 있다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:renderers="classes.controls.renderers.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
   {index:1, description:"test1", toggle:true},
   {index:2, description:"test2", toggle:false},
   {index:3, description:"test3", toggle:false},
   {index:4, description:"test4", toggle:true},
   {index:5, description:"test5", toggle:false},
   {index:6, description:"test6", toggle:false},
   {index:7, description:"test7", toggle:true},
   {index:8, description:"test8", toggle:false},
   {index:9, description:"test9", toggle:false},
   {index:10, description:"test10", toggle:false},
   {index:11, description:"test11", toggle:false},
   {index:12, description:"test12", toggle:false}
   ]);

public function checkBoxRendererClickHandler(data:Object):void
{
Alert.show("click by " + data.description);
}
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="index" dataField="index" />
<mx:DataGridColumn headerText="description" dataField="description" />
<mx:DataGridColumn headerText="radio" dataField="toggle">
<mx:itemRenderer>
<mx:Component>
<renderers:CheckBoxRenderer
selectedFlag="{[true, false]}"
onClickFunction="{outerDocument.checkBoxRendererClickHandler}" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</mx:Application>
[/code]

이제 대충 감이 오시나요?

Renderer에 대해서 감이 오셨다면 다행입니다.

하지만 "CheckBox"는 대충 알겠는데 "ComboBox"는? "ComboBoxRenderer"는 어떻게 만드나요? 라고 하신다면 1, 2, 3회에 걸쳐 Renderer에 대해 설명한 이유가 없어요. 다시 한번 훑어보시고 연구하시면 될거 같아요.

답은 스스로 만들어가는 것.

다음 시간엔... HeaderRenderer를 해볼까 하다가 좀 다른게 만져보고 싶어져서.. 기대하세요.

Flex DataGrid ItemRenderer #2 - 전면전

2010-03-17T19:50:00.000+09:00

경력사원임에도 불구하고 나이가 어려서 그런지 신입사원 연수를 다녀오라는 지시에 지난 목요일 금요일 다녀오는 바람에 ItemRenderer 이야기가 늦어졌습니다. 기다리신 분 계신가요?? 죄송합니다. 본의아니게;;

아무튼 DataGrid ItemRenderer 라는 뜨거운 감자를 삼키기위해 어떤 모양의 ItemRenderer를 만들지 한번 생각해보도록 할까요.

처음이니 간단하게 CheckBox 아이템 렌더러를 만들도록 해봅시다.

일단 메인 어플리케이션을 만들어 놓습니다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
   {index:1, description:"test1", toggle:"Y"},
   {index:2, description:"test2", toggle:"N"},
   {index:3, description:"test3", toggle:"N"},
   {index:4, description:"test4", toggle:"Y"},
   {index:5, description:"test5", toggle:"N"},
   {index:6, description:"test6", toggle:"N"},
   {index:7, description:"test7", toggle:"Y"},
   {index:8, description:"test8", toggle:"N"},
   {index:9, description:"test9", toggle:"N"},
   {index:10, description:"test10", toggle:"N"},
   {index:11, description:"test11", toggle:"N"},
   {index:12, description:"test12", toggle:"N"}
   ]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="index" dataField="index" />
<mx:DataGridColumn headerText="description" dataField="description" />
<mx:DataGridColumn headerText="check" dataField="toggle" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

위와같이 코딩하고 컴파일하게되면 아래와 같이 산출물이 나오게 됩니다.

그럼 우리는 ratio라고 적혀있는 곳에 ItemRenderer를 적용할겁니다.

CheckBox를 상속받아 작업할겁니다. 왜 "UIComponent 안쓰고!"라고 말씀하신다면

그 이유는 UIComponent를 상속받은 클래스이기도 하고 지난시간 말했던 IDataRenderer, IDropInListitemRenderer, IListItemRenderer 이렇게 세 인터페이스가 이미 구현되어있으며 우리가 원하는 아이템 렌더러는 CheckBox아이템 렌더러이기 때문이지요.

초벌로 createChildren, commitProperties, updateDisplayList도 확장해 두고 아이템 랜더러로 사용하기 위한 준비를 마쳤습니다.

그리고 메인 어플리케이션은 아래와 같이 수정하고 컴파일 합니다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{index:1, description:"test1", toggle:"Y"},
{index:2, description:"test2", toggle:"N"},
{index:3, description:"test3", toggle:"N"},
{index:4, description:"test4", toggle:"Y"},
{index:5, description:"test5", toggle:"N"},
{index:6, description:"test6", toggle:"N"},
{index:7, description:"test7", toggle:"Y"},
{index:8, description:"test8", toggle:"N"},
{index:9, description:"test9", toggle:"N"},
{index:10, description:"test10", toggle:"N"},
{index:11, description:"test11", toggle:"N"},
{index:12, description:"test12", toggle:"N"}
]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="index" dataField="index" />
<mx:DataGridColumn headerText="description" dataField="description" />
<mx:DataGridColumn headerText="radio" dataField="toggle" itemRenderer="classes.controls.renderers.CheckBoxRenderer" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

일단 아래와 같은 결과가 나오면 성공입니다.

CheckBox 가 "Y"냐 "N"이냐에 따라 selected가 처리되는 로직이 필요합니다. 그러기 위해서는 그 코드를 어디에 넣는것이 좋을지 고민해봐야하는데 아까도 말했듯 모든 속성처리는 commitProperties에서 하게 됩니다. commitProperties를 호출하기 위해서는 저번에 이야기 했었던 대로 invalidateProperties() 메서드를 호출하면 됩니다. 그렇다면 코드를 아래와 같이 수정합니다.

위와 같이 코딩하게 되면 아래와 같은 산출물이 나오게 됩니다.

썩 잘나오는거 같습니다. 몇가지 마음에 안 드는 것이 있는데 일단 CheckBox가 셀의 중앙에 갔으면 좋겠고 CheckBox를 클릭하고 휠을 돌려보면 Check가 풀려버리는 버그가 있다는 것이지요.

CheckBox를 중앙에 놓으려면 CheckBox의 너비를 알아야하는데 그것은 CheckBox는 기본적으로 14픽셀의 넓이를 갖습니다. 그것을 어떻게 아냐구요?

measuredWidth를 trace 해보면 간단하게 알 수 있습니다. 아, measuredWidth는 컨포넌트 객체의 기본 너비를 이야기 합니다.

위의 두가지 문제점을 해결하기 위해 아래와 같이 코드를 수정합니다.

currentIcon이라는 생소한 속성을 위에서 보실 수 있습니다. 그것은 체크박스에서 체크되는 아이콘을 지칭합니다. 그 currentIcon이란 녀석은 mx_internal이라는 접근자를 이용하고 있고 LanguageReference에는 표시되지 않고 있어서 그 존재를 모르는 사람이 많습니다.

예전에 저도 그것을 몰라서 HBox에다가 넣고 horizontalAlign="center"를 주는 바보같은 짓을 일삼았는데 이 사실을 알고 난뒤에 Container를 사용하지 않고 좀더 가볍게 itemRenderer를 만들어 낼 수 있었지요.

그래서 updateDisplayList() 메서드에서 좌표를 잡아서 셀의 중앙에 놓고 clickHandler라는 메서드를 확장하여 변경된 값을 data에 반영하게 합니다. 그렇게 되면 아래와 같은 결과물이 나오게 되지요.

오. 그럴싸하게 작동하는 것 같습니다만 몇가지 아쉬운점이 있습니다.

1. "Y", "N" 값으로만 작동하게 되어있다.

2. CheckBox를 클릭하면 뭔가 다른 행동을 하고 싶을땐 어떻게 하나.

이렇게 두가지 사항인데요.

이 부분에 대해서는 다음시간에 알아보도록 해요~

Flex DataGrid ItemRenderer #1 - 전초전

2010-03-17T10:42:00.000+09:00

사실 Flex를 개발하다보면 DataGrid를 밥먹듯이 사용하는 경우가 많지요.

하지만 모두가 알다시피 DataGrid를 이용하는데 있어서 가장 큰일이 바로 아이템렌더러를 만드는 것일지도 모르겠습니다.(모르는게 아니에요. 당연할거라고 생각하고 있습니다.)

하지만 아이템렌더러.. 만들기 쉽지 않습니다.

저는 심지어 이런 코드도 봤지요.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.collection.ArrayCollection;

[Bindable]
private var ac:ArrayCollection = new ArrayCollection([
{check: true, description: "test1"},
{check: true, description: "test1"},
{check: true, description: "test1"},
{check: true, description: "test1"},
{check: true, description: "test1"}]);
]]>
</mx:Script>
<mx:DataGrid dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn dataField="check">
<mx:itemRenderer>
   <mx:Component>
   <mx:CheckBox />
   </mx:Component>
   </mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="description" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
[/code]

이렇게 하면 아래처럼 나오긴 하겠지요.

하지만 문제는 아다시피 저기서 아무리 체크박스를 눌러대도 실데이터는 바뀌지 않는다는 사실입니다.

그 다음에 밀려오는 문제는 "데이터가 변하지 않아요? 어쩌죠?" 하는 질문을 올려서 답변을 받아보거나 책을 찾아보거나 뭐.. 여러가지 행동들을 할 수 있을테지만 문제는 늘 그렇듯 근본적인 해결이 되지 않는 다는 사실입니다.

Flex 프로젝트를 1년간 11개나 해치워보니 알 수 있는건 당연하게도 매번 아이템 렌더러를 그때 그때마다 새로 만든다는게 엄청나게 귀찮은 일이었고 화면설계서를 받아보면 경악하여 기획자와 디자이너를 닥달하며 "구현이 불가능한 기능"이라는 사실을 강조하고 화면설계를 수정하자 요구 했었습니다.

사실 뭐.. 프로젝트에 투입되고 본격적인 개발이 시작되고 난뒤 약 40%정도의 시간을 그렇게 설득하고 우회하는 방법을 찾느라 소비했지요.

그렇다면 근본적인 해결점을 찾아보는 것이 어떻지 고민해보는 것이 좋겠다 싶었습니다.

괜찮은 아이템 렌더러를 만들어 놓고 앞으로 계속해서 이용하는 것이지요. 일단 그런 아이템 렌더러를 만들기 위해서는 데이터 그리드가 어떻게 만들어졌는지 알아야 합니다.

데이터 그리드의 구조 입니다.

전체적으로 각 객체의 컨트롤을 맡고 있는 DataGrid 상위 객체 안에 DataGridColumn들이 Array형태로 들어가 있고 DataGridColumn 안에 Header와 ItemRenderer가 같이 들어있습니다.

(단순하게 표현하면 그렇다는 거지요.. 실제로는 더 까다롭고 복잡한 구조입니다..)

일단 저정도만 알고 있으면 우리가 만들려는 DataGridItemRenderer가 어떤 놈인지 mx 패키지에서 확인해볼 필요가 있습니다.

TextField군요.. DataGridRenderer를 확장해서는 버튼이나 콤보박스같은건 넣을 수가 없겠다고 판단됩니다. 그럼 결국 DataGridItemRenderer에서 몇가지 인터페이스 클래스를 구현하여 아이템 렌더러를 만들어 내지요. 뭐. 저것도 사람이 만든건데 우리라고 만들지 말란법은 없으니까요.

일단 구현해야할 인터페이스 클래스는 IDataRenderer, IDropInListItemRenderer, IListItemRenderer 이렇게 3가지면 괜찮습니다. ILayoutManagerClient나 IStyleClient는 왜 구현하지 않냐고 물어보시면 우리는 UIComponent를 상속받아 아이템 렌더러를 만들것이기 때문이라고 말씀드리고 싶습니다.

왜냐하면 UIComponent는 ILayoutManagerClient나 IStyleClient를 구현하고 있기 때문이지요.

이러한 연유로 IDataRenderer, IDropInListItemRenderer, IListItemRenderer 이렇게 3가지 인터페이스만 구현해 볼까 합니다.

중요한 첫번째 내용이 끝이 났어요.

두번째 내용은 Flex의 UIComponent의 라이프 사이클(Life Cycle)에 대해 알아야할 순서입니다.

UIComponent의 Protect 접근자 클래스를 잘 이해해야하는데요.

그 중에서도 특히 updateDisplayList() 메서드와 createChildren()메서드. 그리고 commitProperties() 메서드를 잘 이해해야합니다.

이 updateDisplayList라는 메서드는 자식객체를 그리거나 혹은 자식객체의 사이즈나 위치를 변경할 때 사용됩니다. 그리고 Flex에서 이 메서드를 호출하기 위해서는 invalidateDisplayList()라는 메서드를 호출하거나 자식객체를 addChild할때 실행되게 되어있는 메서드입니다.

한마디로 자식객체에 변경이 생겨서 새로 화면을 그려내야할때 사용되는 녀석인데요.

자칫 잘못하면 본의아니게 계속해서 호출해 시스템을 다운시키는 원인이 될 수 있으니 조심히 사용해야합니다.

자식객체를 생성할때 호출하는 녀석으로 컨포넌트를 최초에 생성시킬때 한번 호출되고 다음부터는 고의로 호출하지 않는이상 호출되지 않는 메서드입니다.

commitProperties 메서드는 자식객체를 addChild()하거나 invalidateProperties() 에서드를 호출하면 실행되는 메서드로 이때 자식객체의 프로퍼티를 지정하고 변경값을 적용하는 역할을 합니다.

이정도만 알고 있으면 어느정도 아이템렌더러를 만들 수 있는 구색은 갖춰졌습니다.

다음시간에 본격적으로 시작해 보도록 할까요?

FileRefernce는 뭔가요? #3

2010-03-16T12:05:00.000+09:00

이번시간엔 FileReference.save()메서드가 무엇인지 알아보는 시간을 가져보려고 합니다.

이 기능은 지난번에 말씀드렸다시피 Flash Player 10에서 부터 지원되는 기능으로

Flex SDK 3.3 이후 버젼에서만 작동이 가능하며 Flash CS3에서 이기능을 이용하고 싶으시다면

업데이트를 받으셔야 합니다.(CS4에서는 기본 탑재입니다.)

아, 그리고 Flex SDK로 save기능을 사용하고 싶으시다면 [SDK 경로]\framework\flex-config.xml 파일을 열어서 아래와 같이 수정해줘야 합니다.

[code xml]


<target-player>10.0.0</target-player>
[/code]

Flash Player버젼은 10으로 바꿔주셔야만 save기능을 이용할 수 있습니다.

(원래는 9.0.124 버젼으로 되어있거든요)

save라는 기능은 LanguageReference에서 이렇게 설명하고 있습니다.

사용자의 로컬 파일시스템에 파일을 저장하는 다이얼로그 파일을 열어준다는 건데요. 사실 뭐.. 무슨말인지 모르겠어서 save 메서드 관련 소스를 찾아보았습니다.

아, Language Reference에서도 샘플소스가 있습니다.

[code as3]
var MyTextField:TextField = new TextField();
var MyButtonField:TextField = new TextField();
var MyFile:FileReference = new FileReference();

MyTextField.border = true;
MyTextField.type = TextFieldType.INPUT;

MyButtonField.background = true;
MyButtonField.backgroundColor = 0x339933;
MyButtonField.x = 150;
MyButtonField.height = 20;
MyButtonField.text = "Click here to save";

addChild(MyTextField);
addChild(MyButtonField);
MyButtonField.addEventListener(MouseEvent.CLICK, clickhandler);
function clickhandler(e:MouseEvent): void {
MyFile.save(MyTextField.text);
}
[/code]

이건 Flash에서 작동하는 코드니까요. 저는 저렴하게 Flash 툴없이 작동하게끔 코드를 손봤습니다.

[code as3]
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.FileReference;
import flash.text.TextField;
import flash.text.TextFieldType;

public class Main extends Sprite
{
public function Main()
{
super();
MyTextField.border = true;
MyTextField.type = TextFieldType.INPUT;
MyButtonField.background = true;
MyButtonField.backgroundColor = 0x339933;
MyButtonField.x = 150;
MyButtonField.height = 20;
MyButtonField.text = "Click here to save";
addChild(MyTextField);
addChild(MyButtonField);
MyButtonField.addEventListener(MouseEvent.CLICK, clickhandler);
}

private var MyTextField:TextField = new TextField();
private var MyButtonField:TextField = new TextField();
private var MyFile:FileReference = new FileReference();

private function clickhandler(e:MouseEvent): void
{
MyFile.save(MyTextField.text);
}
}
}
[/code]

이렇게 코딩하고 컴파일하면 아래와 같이 결과물이 나오게 됩니다.

아무 글이나 쓰시고 click hear to save를 클릭하시면 왼쪽에 작성된 글이 save됩니다.

(글쓰고 저장하는 모습)

(저장된 text파일 확인하는 모습)

정상적으로 저장이 됩니다!

음.. 그럼 Text 파일만 저장하게 하면 왠지 아쉽잖아요.

그래서 곰곰히 생각하다 이미지 저장도 하면 괜찮겠다 싶어서 캠을 이용해 스크린샷을 찍게하는 걸 만들어보기로 했습니다.

[code as3]
package
{
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;;
import flash.media.Camera;
import flash.media.Video;
import flash.net.FileReference;
import flash.utils.ByteArray;
import mx.graphics.codec.PNGEncoder;

public class CameraMain extends Sprite
{
public function CameraMain()
{
super();
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

setCamera();
setSaveButton();
}

private var video:Video;
private var saveBtn:Sprite;

private function setCamera():void
{
var camera:Camera = Camera.getCamera();

if (camera != null)
{
video = new Video(camera.width * 2, camera.height * 2);
video.attachCamera(camera);

video.x = 10;
video.y = 10;

addChild(video);
}
else
{
//trace("You need a camera.");
}
}

private function setSaveButton():void
{
if(!saveBtn)
{
saveBtn = new Sprite();
saveBtn.x = video.x + video.width + 10;
saveBtn.y = 10;
addChild(saveBtn);
}

var g:Graphics = saveBtn.graphics;
g.clear();
g.beginFill(0xFF0000, 1);
g.drawRect(0, 0, 80, 20);
g.endFill();
saveBtn.addEventListener(MouseEvent.CLICK, saveClickHandler);
}

private function saveClickHandler(event:MouseEvent):void
{
var bitmap:BitmapData = new BitmapData(video.width, video.height, false);
bitmap.draw(video);

var pngEncoder:PNGEncoder = new PNGEncoder();
var ba:ByteArray = pngEncoder.encode(bitmap);

var fr:FileReference = new FileReference();
fr.save(ba, "cam_test.png");
}
}
}
[/code]

참고로 위의 코드는 웹캠을 이용한 소스로 웹캠이 없으면 작동하지 않습니다.

mx 패키지에서 제공하는 PNGEncoder 클래스를 이용해 PNG이미지를 저장하는 샘플입니다.

아래처럼 나온다면 성공!

웹캠이 없으신 분을 위해 스크린샷을 조금 찍어서 보여드리지요 ㅎㅎ

이렇게 확인하시면 되겠습니다.

이것으로 FileReference는 끗!

다음번엔 무얼할까요? ㅋㅋ

FileRefernce는 뭔가요? #2

2010-03-16T00:25:00.000+09:00

FileReference는 전에 말씀드렸다시피 사용자 PC와 서버사이의 파일 업로드, 다운로드를 할 수 있게해준다고 했는데요.

일단 지난시간엔 업로드에 대해 알아봤었는데 이번시간에 다운로드를 해볼까 합니다.

다운로드를 하기 위해선 일단 파일이 필요하지요.

지난번에 우리가 만들었던 php 파일을 조금 수정할까 합니다.

업로드를 한 파일에 대해 서버경로를 보여줄 수 있게 해주는 거지요.

[code php]
<?php
$errors = array();
$data = "";
$success = "true";
$uploadURL = "";

function return_result($success,$errors,$data,$uploadURL)
{
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
<upload_url><?=$uploadURL;?></upload_url>
</results>
<?
}

function echo_errors($errors)
{
for($i=0;$i<count($errors);$i++)
{
?>
<error><?=$errors[$i];?></error>
<?
}
}

switch($_REQUEST['action'])
{
case "upload":
$file_temp = $_FILES['file']['tmp_name'];
$file_name = iconv("UTF-8", "EUC-KR", $_FILES['file']['name']);
$file_path = $_SERVER['DOCUMENT_ROOT']."/upload";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name))
{
//complete upload
$filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
$uploadURL = "/upload/".$file_name;

if(!$filestatus)
{
$success = "false";
array_push($errors,"Upload failed. Please try again.");
}
}
else
{
$success = "false";
array_push($errors,"File already exists on server.");
}
break;
default:
$success = "false";
array_push($errors,"No action was requested.");
}
return_result($success,$errors,$data, $uploadURL);
?>
[/code]

중간에 보면 "$uploadURL = "/upload/".$file_name;" 이라고 하는 구절 보이시나요? 42번째 라인입니다.

그리고 return_result 함수에 파라미터가 하나 늘었습니다. 이 이유는 업로드를 하고 난뒤에 어떤 경로로 업로드가 됐는지 알려주기 위해서 입니다. 일단 다운로드를 하려면 업로드가 되어야하니깐요.

그럼 Flex 코드도 좀 수정해보도록 하지요.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLRequestMethod;
import mx.controls.Alert;

private const HOST:String = http://127.0.0.1;
private const UPLOAD_HOST:String = "/upload.php";

private var fr:FileReference;
private var downloadAdd:String;

private function configureListeners():void
{
fr.addEventListener(IOErrorEvent.IO_ERROR, frIOErrorHandler);
fr.addEventListener(ProgressEvent.PROGRESS, frProgressHandler);
fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, frDataUploadCompleteHandler);
fr.addEventListener(Event.SELECT, frSelectHandler);
}

private function selectBtnClickHandler(event:MouseEvent):void
{
if(!fr)
{
fr = new FileReference();

configureListeners();
}

// File 선택 창 띄우기
fr.browse();
}

private function uploadBtnClickHandler(event:MouseEvent):void
{
var requestData:URLVariables = new URLVariables();
requestData.action = "upload";

var request:URLRequest = new URLRequest(HOST + UPLOAD_HOST);
request.method = URLRequestMethod.POST;
request.data = requestData;
fr.upload(request, "file");
}

private function frSelectHandler(event:Event):void
{
uploadBtn.enabled = true;
try
{
fileName_lb.text = fr.name;
fileSize_lb.text = fr.size + "bytes";
fileType_lb.text = fr.type;
}
catch(e:Error)
{
//파일 다운로드시에는 get size() 프로퍼티 요청시 exception 에러 발생
}
}

private function frIOErrorHandler(event:IOErrorEvent):void
{
Alert.show("File upload IO Error 발생.", "Error");
}

private function frProgressHandler(event:ProgressEvent):void
{
progress.setProgress(event.bytesLoaded, event.bytesTotal);
}

private function frDataUploadCompleteHandler(event:DataEvent):void
{
trace(event.data);
var xmlData:XML = new XML(event.data);
if(xmlData.success == "true")
{
Alert.show("File Upload Complete", "Success");
downloadAdd = xmlData.upload_url;
downloadBtn.enabled = true;
}
else
{
Alert.show(xmlData.error, "Error");
}
}

private function downloadClickHandler(event:MouseEvent):void
{
var request:URLRequest = new URLRequest(HOST + downloadAdd);
fr.download(request);
}
]]>
</mx:Script>

<mx:Panel title="File Upload Sample" width="350" height="300" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5">

<mx:VBox width="100%" height="100%">

<mx:Form>
<mx:FormHeading label="File Information" />

<mx:FormItem label="File Name : ">
<mx:Label id="fileName_lb" width="150" />
</mx:FormItem>

<mx:FormItem label="File Size : ">
<mx:Label id="fileSize_lb" />
</mx:FormItem>

<mx:FormItem label="File Type : ">
<mx:Label id="fileType_lb" />
</mx:FormItem>
</mx:Form>

</mx:VBox>

<mx:ProgressBar id="progress" width="100%" direction="right" mode="manual" />

<mx:HBox width="100%" horizontalAlign="right">
<mx:Button id="selectBtn" label="select File" click="selectBtnClickHandler(event);" />
<mx:Button id="uploadBtn" label="upload File" enabled="false" click="uploadBtnClickHandler(event);" />
<mx:Button id="downloadBtn" label="download File" enabled="false" click="downloadClickHandler(event);" />
</mx:HBox>
</mx:Panel>
</mx:Application>
[/code]

위와 같이 코딩을 하면 아래와 같은 화면이 등장하게 됩니다.

"download File"이라는 버튼도 새로 생겼고 Panel의 사이즈도 좀 늘어났고 중요한건 파일 업로드가 성공했을 때 돌아오는 xml값도 조금 바뀐다는 사실.

[code xml]
<?xml version="1.0" encoding="utf-8"?> <results>
<success>true</success>
<upload_url>/upload/Kingnare.zip</upload_url>
</results>
[/code]

기존에는 success여부만 넘어오던것이 업로드된 경로도 같이 반환하게 되었습니다.

download File을 클릭하게 되면 방금 업로드한 파일을 다시 받아올 수 있게 한것이지요.

그래서 download File을 클릭하게 되면 아래와 같은 화면이 등장하게 됩니다.

그리고 "저장"버튼을 누르게 되면 다운로드를 진행하게 하는데 이때 ProgressEvent가 발생하면서 ProgressBar가 다운로드 받는 양을 표시하게 됩니다.

FileReference의 꽃 save() 메서드가 남았습니다.

이 기능은 Flash Player 10이 나오면서 등장한 기능으로 SDK가 최신 버젼이 아니면 사용할 수가 없습니다.

아, 물론 Flash Player도 버젼이 10이 되어야겠지요.

다음 시간엔 FileReference.save() 를 알아보도록 하겠습니다.

FileRefernce는 뭔가요? #1

2010-03-15T15:49:00.000+09:00

사실 이 블로그를 만들면서 스스로 다짐한것이 하루에 꼭 하나씩은 블로깅하자.

단, 주말은 쉬자. 였는데 지난주 목요일에 하루쉬는 바람에 오늘은 두개를 올려야겠다고 생각했습니다.

그래서 시작합니다. FileReference.

간혹 Flash에서 파일을 업로드하는 기능이 있는지 궁금해 하시는 분들이나

파일업로드를 어떻게 하는지 질문하시는 분들이 종종 있습니다.

이 두가지 질문에 대해서 답변드리자면

1번. 업로드가 가능합니다.

2번. 서버사이드 언어(php, jsp, asp 와 같은..)로 파일을 업로드 할 수 있는 서블릿 파일에 접속하여 파일을 업로드 할 수 있습니다.

라고 말씀 드릴 수 있지요.

그럼 일단 FileReference에 대해 Language Reference에서는 뭐라고 하는지 찾아보도록 할까요?

Language Reference에서 제공된 내용중 제일 처음 언급된 내용은 아래와 같습니다.

The FileReference class provides a means to upload and download files between a user's computer and a server

FileReference 클래스는 사용자의 컴퓨터와 서버사이의 파일 업로드와 다운로드 수단을 제공합니다.

느낌이 오시나요? FileReference는 업로드, 다운로드등등등을 제공합니다.

오. 괜찮군요. 오늘은 일단 한번 업로드만 해보도록 할께요.

업로드는 몇가지 준비물이 있습니다. 아까 말했던 파일을 업로드할 수 있는 서블릿 파일. 그리고 테스트 환경을 만들기 위한 로컬 서버 구축이 그것이지요.

아! 로컬 서버 구축 어려운거 아닌가? 라고 생각하실지 모르겠지만 5분만에 만들수가 있습니다.

APM(Aphach PHP, MySQL)이라는 것 때문이지요. 여기에 가보시면 APMSETUP이라는 프로그램을 받을 수가 있습니다. 로컬서버를 자동으로 만들어주는 프로그램이지요. Aphach와 PHP, 그리고 MySQL을 자동으로 설치해주고 셋팅해줍니다.

다운로드 경로 : http://kldp.net/frs/download.php/5636/APMSETUP7_2010010300.exe

다운로드를 받고 설치해보도록합시다.

계속 "다음"을 클릭하고 "동의함"을 클릭하면 알아서 죄다 설치하고 셋팅을 합니다.

그리고 아래와 같은 창을 띄우지요.

이런 창들이 뜨고 작업표시줄 Tray에 AMP 아이콘이 떴다면 일단 설치가 완료되었다고 보시면 됩니다.

요녀석이 제대로 작동하는지 보고 싶으시다면 저 Tray 아이콘을 더블클릭해서

위와같은지 확인해보고 브라우져를 띄워서 127.0.0.1을 입력합니다.

위의 화면이 나왔다면 로컬 서버 셋팅은 완료되었습니다.

그리고 아래와 같은 php파일을 만드시면 됩니다.

[code php]
<?php
$errors = array();
$data = "";
$success = "true";
function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>
<?
}
function echo_errors($errors) {
for($i=0;$i<count($errors);$i++) {
?>
<error><?=$errors[$i];?></error>
<?
}
}
switch($_REQUEST['action']) {
case "upload":
$file_temp = $_FILES['file']['tmp_name'];
$file_name = iconv("UTF-8", "EUC-KR", $_FILES['file']['name']);
$file_path = $_SERVER['DOCUMENT_ROOT']."/upload";
//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {
   //complete upload
   $filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);
   if(!$filestatus) {
   $success = "false";
   array_push($errors,"Upload failed. Please try again.");
   }
}
else
{
$success = "false";
array_push($errors,"File already exists on server.");
}
break;
default:
$success = "false";
array_push($errors,"No action was requested.");
}
return_result($success,$errors,$data);
?>
[/code]

이 소스를 만들고 공개해주신 Cahlan 님께 감사합니다.

(Thanks Cahlan. Your source was very useful for me.)

원본 링크 : http://weblog.cahlan.com/2006/09/uploading-files-with-flex-and-php.html

중간에 iconv 함수를 이용해서 UTF-8의 문자셋으로 되어있는 파일명을 EUC-KR로 바꿔주는데요. 이는 APMSETUP으로 구축된 서버는 EUC-KR 문자셋으로 되어있기 때문입니다. (이걸 UTF-8로 바꿔주고 싶은데 서버쪽은 전혀.. 문외한이라;; 누구 아시는 분 없으신가요??)

어쨌든 이렇게 서블릿 파일도 만들어졌겠다 ActionScript 작업만 하면되겠습니다.

음.. 오늘은 Flex로 작업해야겠어요. 아무래도 UI 만드는 작업이 오래걸려서;;

아, 물론 ActionScript로 업로드하는건 Flash에서도 동일하게 적용됩니다.

UI 인터렉션만 Flex라고 생각하시면 되요.

업로드 샘플은 아래와 같습니다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLVariables;
import flash.net.URLRequestMethod;

import mx.controls.Alert;

private const UPLOAD_HOST:String = "http://127.0.0.1/upload.php";
private var fr:FileReference;
private function configureListeners():void
{
fr.addEventListener(IOErrorEvent.IO_ERROR, frIOErrorHandler);
fr.addEventListener(ProgressEvent.PROGRESS, frProgressHandler);
fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, frDataUploadCompleteHandler);
fr.addEventListener(Event.SELECT, frSelectHandler);
}

private function selectBtnClickHandler(event:MouseEvent):void
{
if(!fr)
{
fr = new FileReference();
configureListeners();
}

// File 선택 창 띄우기
fr.browse();
}

private function uploadBtnClickHandler(event:MouseEvent):void
{
var requestData:URLVariables = new URLVariables();
requestData.action = "upload";
var request:URLRequest = new URLRequest(UPLOAD_HOST);
request.method = URLRequestMethod.POST;
request.data = requestData;
fr.upload(request, "file");
}

private function frSelectHandler(event:Event):void
{
uploadBtn.enabled = true;

fileName_lb.text = fr.name;
fileSize_lb.text = fr.size + "bytes";
fileType_lb.text = fr.type;
}

private function frIOErrorHandler(event:IOErrorEvent):void
{
Alert.show("File upload IO Error 발생.", "Error");
}

private function frProgressHandler(event:ProgressEvent):void
{
progress.setProgress(event.bytesLoaded, event.bytesTotal);
}

private function frDataUploadCompleteHandler(event:DataEvent):void
{
var xmlData:XML = new XML(event.data);
if(xmlData.success == "true")
{
Alert.show("File Upload Complete", "Success");
}
else
{
Alert.show(xmlData.error, "Error");
}
}
]]>
</mx:Script>
<mx:Panel title="File Upload Sample" width="300" height="300" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5">

<mx:VBox width="100%" height="100%">

<mx:Form>
<mx:FormHeading label="File Information" />

<mx:FormItem label="File Name : ">
<mx:Label id="fileName_lb" width="150" />
</mx:FormItem>

<mx:FormItem label="File Size : ">
<mx:Label id="fileSize_lb" />
</mx:FormItem>

<mx:FormItem label="File Type : ">
<mx:Label id="fileType_lb" />
</mx:FormItem>
</mx:Form>

</mx:VBox>

<mx:ProgressBar id="progress" width="100%" direction="right" mode="manual" />

<mx:HBox width="100%" horizontalAlign="right">
<mx:Button id="selectBtn" label="select File" click="selectBtnClickHandler(event);" />
<mx:Button id="uploadBtn" label="upload File" enabled="false" click="uploadBtnClickHandler(event);" />
</mx:HBox>

</mx:Panel>
</mx:Application>
[/code]

아, 깜빡하고 말을 안했는데 APMSetup이 설친된 폴더에 가보시면 "htdocs"이라는 디렉토리가 있습니다.

그 안에 upload.php라고 만들어두면 http://127.0.0.1/upload.php 로 접근이 가능해집니다.

그리고 upload라고 디렉토리를 만들어둡니다. 그럼 업로드를 해볼까요?

일단 swf를 실행하면 아래와 같은 화면이 나옵니다.

음.. 그럴싸한데요 ㅎ

select File 버튼을 클릭하게 되면 36번째 행의 FileReference.browse() 메서드가 실행되면서 아래와 같은 화면이 나타나게 됩니다.

오! 왠지 파일을 업로드 할 수 있을것만 같은 화면이 등장합니다.

일단 아무파일이나 선택해볼까요?

저는 sample_1.swf 이라는 파일을 선택했습니다.

선택함과 동시에 FileReference.name, FileReference.size, FileReference.type 속성을 읽어와 화면에 표시해주지요. 일단 업로드할 파일도 만들었으니 업로드 한번 해볼까요? upload File 버튼을 클릭합니다.

와우! 파일 업로드에 성공했습니다!

업로드 된 파일은 아까 만들었던 upload 디렉토리에 저장되게 됩니다.

한번 확인해볼까요?

성공적이군요!

파일 업로드는 소스를 보시면서 천천히 분석해보시면 될것 같습니다.

서버사이드와 붙어서 작업되는거라 처음 하시는 분들은 겁을 먹고 어렵지 않을까 고민하시는 분들이 많지만

사실은 별거 없습니다. 모두들 한번씩 도전해 보시는 것이 어떨까요?

다음 시간은 FileReference.download 메서드에 대해 한번 알아보는 시간을 가져볼까요?

p.s FileFilter라는 클래스가 있는데 여기에 대해서는 개인적으로 알아보는 시간이 있으셨으면 좋겠어요.

Point 클래스의 미학 #3

2010-03-15T12:45:00.000+09:00

Point 클래스의 마지막 시간입니다.

오늘은 interpolate의 사용하는 방법에 대해 설명하려고 합니다만

요 메서드가 어떤 역할을 하는지가 한번 살펴보도록해요.

음. static 함수고 두점사이의 sepcified를 밝힌다고 써있는데 이 이야기가 무어냐.. 하면

두 접사이의 비율지점을 알려준다는 이야기입니다. "악 영어로도 모르겠고 한글로 풀어도 모르겠다!" 라고 한다면 한번 예제를 만들어 볼까요?

[code as3]
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFieldType;
import flash.ui.Keyboard;

public class Main extends Sprite
{
//-----------------------------------------------------------------------------
//
// Constructor.
//
//-----------------------------------------------------------------------------
/**
   * Costructor.
   */
public function Main()
{
super();
createCircle();
createTextField();
}

//-----------------------------------------------------------------------------
//
// Variables
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
private var cir1:Sprite;

/**
   * @private
   */
private var cir2:Sprite;

/**
   * @private
   */
private var cir3:Sprite;
/**
   * @private
   */
private var textField:TextField;

/**
   * @private
   */
private var betweenRatio:Number = 0.5;

//-----------------------------------------------------------------------------
//
// Methods : About Object Create..
//
//-----------------------------------------------------------------------------
/**
   * @private
   * TextField 만들기
   */
private function createTextField():void
{
if(!textField)
{
textField = new TextField();

textField.x = 10;
textField.y = 10;
textField.width = 150;
textField.height = 20;
setTextFieldProperties(textField, TextFieldType.INPUT, TextFieldAutoSize.NONE, true);

textField.text = "";

textField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
addChild(textField);
}
}

/**
   * @private
   * 원을 그려서 화면에 붙이기
   */
private function createCircle():void
{
if(!cir1)
{
cir1 = new Sprite;
drawCircle(cir1, 0xFF0000);
cir1.x = 20;
cir1.y = 100;
cir1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cir1.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
addChild(cir1);
}

if(!cir2)
{
cir2 = new Sprite;
drawCircle(cir2, 0x00FF00);
cir2.x = 200;
cir2.y = 100;
cir2.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cir2.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
addChild(cir2);
}

if(!cir3)
{
cir3 = new Sprite;
drawCircle(cir3, 0x0000FF);

var p:Point = Point.interpolate(new Point(cir1.x, cir1.y),
new Point(cir2.x, cir2.y),
0.5);
cir3.x = p.x;
cir3.y = p.y;
addChild(cir3);
}
}

/**
   * @private
   * 원을 그린다.
   *
   * @param target    원을 그려낼 타겟
   * @param color 원의 색상(uint 형으로 입력)
   * @param radius    원의 반지름(픽셀)
   */
private function drawCircle(target:Sprite, color:uint, radius:Number = 10):void
{
var g:Graphics = target.graphics;
g.clear();
g.beginFill(color, 1);
g.drawCircle(0, 0, 10);
g.endFill();
}

/**
   * @private
   * TextField의 속성을 설정한다.
   *
   * @param textField 속성을 설정할 TextField
   * @param type    TextFieldType.INPUT 인지 TextFieldType.DYNAMIC 인지 결정
   * @param autoSize    TextFieldAutoSize를 설정
   * @param background    배경색을 보일지 안보일지 결정
   * @param backgroundColor 배경색 설정
   * @param multiline multiline 설정
   */
private function setTextFieldProperties(textField:TextField,
type:String = "dynamic",
autoSize:String = "left",
background:Boolean = false,
backgroundColor:uint = 0xFFFFFF,
multiline:Boolean = false):void
{
textField.type = type;
textField.backgroundColor = backgroundColor;
textField.background = background;
textField.multiline = multiline;
textField.autoSize = autoSize;
}

//-----------------------------------------------------------------------------
//
// Methods : About Point Move..
//
//-----------------------------------------------------------------------------
/**
   * @private
   * cir3의 좌표를 interpolate를 이용해 이동
   */
private function movePoint():void
{
var p:Point = Point.interpolate(new Point(cir1.x, cir1.y),
new Point(cir2.x, cir2.y),
betweenRatio);
cir3.x = p.x;
cir3.y = p.y;
}

//-----------------------------------------------------------------------------
//
// Event Handlers
//
//-----------------------------------------------------------------------------
/**
   * @private
   */
private function keyDownHandler(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.ENTER || !event)
{
//숫자 확인
if(isNaN(Number(textField.text)) ||
   Number(textField.text) > 1 ||
   Number(textField.text) < 0)
{
textField.text = "";
return;
}

betweenRatio = Number(textField.text);
movePoint();
}
}

/**
   * @private
   */
private function mouseUpHandler(event:MouseEvent):void
{
Sprite(event.currentTarget).stopDrag();
movePoint();
}

/**
   * @private
   */
private function mouseDownHandler(event:MouseEvent):void
{
Sprite(event.currentTarget).startDrag();
}
}
}
[/code]

위와 같이 코딩하면 아래와 같은 결과물이 나오게 됩니다.

빨간 원과 녹색 원을 드래그해서 이동시키거나 혹은 TextField에 입력된 값에 따라서 그 가운데 파란점이 적절한 비율을 유지하며 빨간 원과 녹색원 사이에 배치되게 됩니다.

아, 여기서 TextField에 입력되는 값은 (0 <= x =< 1) 입니다. 그러면 interpolate 메서드의 f:Number값에 대입되어 비율을 계산하게 하는 것이지요.

interpolate에 대해서 조금 이해가 되셨는지 모르겠습니다.

Point 클래스는 이정도 까지만 하구요.. Display 객체에 대해 좀더 다뤄볼까 하다가

통신쪽을 한번 다뤄보는게 좋겠구나 싶어서 다음시간엔 FileRefernce에 대해 알아보는 시간을 가져볼까 합니다.

기대하세용~

저렴하게 디자인 요소 삽입하기

2010-03-12T12:58:00.000+09:00

원래는 Point #3을 이야기 해야하는데 왠지 날도 꿀꿀하고 업무가 많아

간단하게 포스팅할 수 있는 것으로 뭐가 있을까 하다가

이미지 요소를 삽입하고 싶을때 어찌하면 좋을까 고민하시는 분들이 계실까봐 적어봅니다.

보통 Flex에서는 별도의 디자인툴(Builder에서 제공하고 있긴합니다만...)이 없어서

이미지를 Flash에서처럼 삽입할 수 있을지에 대해서 고민하곤 합니다만

Flex SDK를 이용하시면 [Embed] 메타테그를 이용해 간단히 해결할 수 있습니다.

일단 보통 플렉스에서 개발할때는 이런식으로 코드를 넣지요?

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Embed(source="/assets/shutUp.jpg")]
private const DONT_DELETE:Class;
]]>
</mx:Script>
<mx:Image source="{DONT_DELETE}" />
</mx:Application>
[/code]

물론 로드방식으로 넣는것도 있지만 제목에서 보셨듯이 "삽입"하는거니까요.

암튼 이렇게 Embed해서 이미지를 넣어두면 아래와 같은 결과가 나옵니다.

오호.. 그렇다면 Flex 를 이용하지 않고 ActionScript에서는 어떻게 될까요?

[code as3]
package
{
import flash.display.DisplayObject;
import flash.display.Sprite;

public class Main extends Sprite
{
[Embed(source="/assets/shutUp.jpg")]
private const SHUT_UP:Class;

public function Main()
{
super();

stage.align = "TL";
stage.scaleMode = "noScale";

createImage();
}

private var shutUpImage:DisplayObject;

private function createImage():void
{
shutUpImage = new SHUT_UP();

addChild(shutUpImage);
}
}
}
[/code]

위와 같이 코딩하면 되겠습니다. 결과화면은 아래 보시는 바와 같습니다.

그냥 [Embed] 메타테그를 이용하면 간편하지요.

아, 물론 이미지의 사이즈를 조정하려면 width와 height만으로도 충분히 제어가 가능합니다.

하지만 이런 질문이 들어올 수도 있습니다.

"Flash에서는 Embed 메타테그 따위는 없는데 어떻게 하느냐!"

라고 하신다면 사실 제 포스트는 "저렴한"개발이기 때문에 Flash와 같은 툴을 이용한다는건 본래취지와 어긋나는 관계로 모르겠다! 라고 하고 싶지만 그럴 수는 없으니 하나 소개시켜 드리자면

Flash에서 Flex SDK의 라이브러리를 추가하여 [Embed] 테그를 이용할 수 있게끔 하는 방법을 소개해놓은 글이 있습죠.

글을 찾은 곳 : http://grotesq.tistory.com/104

실재 링크 : http://www.adobe.com/devnet/flash/articles/embed_metadata.html

이것을 이용하면 Flash에서도 메타테그를 사용할 수 있습니다.

멋지지요.

담시간에 Point 마지막 시간을 갖도록 해요.

Point 클래스의 미학 #2

2010-03-10T14:41:00.000+09:00

Point 클래스가 할 수있는 일은 정말 다양합니다.

특히나 제 생각엔 polar() 메서드 같은경우가 그렇습니다.

polar() 메서드엔 2가지 파라미터가 필요한데 그것은 length, angle 입니다.

그림으로 설명하면 이렇게 되겠지요.

Length는 0, 0에서 부터의 길이고 Angle은 보시는 것과 같이 중심점으로 부터의 "각"을 이야기 합니다.

polar() 메서드는 이 두가지 값을 이용해 하나의 Point를 만들어 내게 됩니다. 잘 모르시겠다면 예제를 만들어 보는게 좋을거 같습니다.

오늘 예제는 좀 많이 길군요;;;;;

[code as3]
package
{
import flash.display.Sprite;
import flash.geom.Point;
import flash.display.Graphics;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import flash.text.TextFieldAutoSize;
import flash.ui.Keyboard;
public class Main extends Sprite
{
//-----------------------------------------------------------------------------
//
// Constructor.
//
//-----------------------------------------------------------------------------
/**
   * Contructor.
   */
public function Main()
{
super();

// TextField 생성
createTextField();
createButton();
}

//-----------------------------------------------------------------------------
//
// Variables
//
//-----------------------------------------------------------------------------
/**
   * @private
   * length 입력 텍스트필드
   */
private var lengthField:TextField;

/**
   * @private
   * angle 입력 텍스트 필드
   */
private var angleField:TextField;

/**
   * @private
   * spriteButton
   */
private var spriteButton:Sprite;

//-----------------------------------------------------------------------------
//
// Methods : About Sprite Button..
//
//-----------------------------------------------------------------------------
private function createButton():void
{
if(!spriteButton)
{
spriteButton = new Sprite;

var g:Graphics = spriteButton.graphics;
g.clear();
g.beginFill(0xFF0000, 1);
g.drawRect(0, 0, 50, 20);
g.endFill();

spriteButton.x = 400;
spriteButton.y = 10;
spriteButton.buttonMode = true;
spriteButton.useHandCursor = true;
spriteButton.addEventListener(MouseEvent.ROLL_OVER, buttonRollOverHandler);
spriteButton.addEventListener(MouseEvent.ROLL_OUT, buttonRollOutHandler);
spriteButton.addEventListener(MouseEvent.MOUSE_DOWN, buttonDownHandler);
spriteButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
addChild(spriteButton);
}
}

//-----------------------------------------------------------------------------
//
// Methods : About TextField..
//
//-----------------------------------------------------------------------------
/**
   * @private
   * TextField 생성
   */
private function createTextField():void
{
// length 관련 TextField 생성
if(!lengthField)
{
// length 표시
var lengthText:TextField = new TextField();
lengthText.text = "length : ";
lengthText.x = 10;
lengthText.y = 10;
setTextFieldProperties(lengthText);
addChild(lengthText);
// length 입력
lengthField = new TextField();

lengthField.x = lengthText.textWidth + 10;
lengthField.y = 10;
lengthField.width = 150;
lengthField.height = 20;

setTextFieldProperties(lengthField, TextFieldType.INPUT, TextFieldAutoSize.NONE, true);

lengthField.restrict = "0-9";
lengthField.text = "";

lengthField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
addChild(lengthField);
}

// angle 관련 TextField 생성
if(!angleField)
{
// angle 표시
var angleText:TextField = new TextField();

angleText.text = "angle : ";
angleText.x = lengthField.x + lengthField.width + 10;
angleText.y = 10;

setTextFieldProperties(angleText);
addChild(angleText);

// angle 입력
angleField = new TextField();
angleField.x = angleText.x + angleText.textWidth;
angleField.y = 10;
angleField.width = 150;
angleField.height = 20;
setTextFieldProperties(angleField, TextFieldType.INPUT, TextFieldAutoSize.NONE, true);
angleField.restrict = "0-9";

angleField.text = "";
angleField.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
addChild(angleField);
}
}

/**
   * @private
   * TextField의 속성을 설정한다.
   *
   * @param textField 속성을 설정할 TextField
   * @param type TextFieldType.INPUT 인지 TextFieldType.DYNAMIC 인지 결정
   * @param autoSize TextFieldAutoSize를 설정
   * @param background    배경색을 보일지 안보일지 결정
   * @param backgroundColor 배경색 설정
   * @param multiline multiline 설정
   */
private function setTextFieldProperties(textField:TextField,
type:String = "dynamic",
autoSize:String = "left",
background:Boolean = false,
backgroundColor:uint = 0xFFFFFF,
multiline:Boolean = false):void
{
textField.type = type;
textField.backgroundColor = backgroundColor;
textField.background = background;
textField.multiline = multiline;
textField.autoSize = autoSize;
}

//-----------------------------------------------------------------------------
//
// Methods : About Point polar Method..
//
//-----------------------------------------------------------------------------
/**
   * @private
   * 라인 그리기
   */
private function drawPoint():void
{
var cx:Number = stage.stageWidth / 2;
var cy:Number = stage.stageHeight /2;
var length:Number = Number(lengthField.text);
var angle:Number = Number(angleField.text);

var p:Point;
p = Point.polar(length, (Math.PI * 2 * angle) / -360);

var g:Graphics= this.graphics;
g.clear();
g.lineStyle(1, 0x000000);
g.moveTo(cx, cy);
g.lineTo(cx + length, cy);
g.moveTo(cx, cy);
g.lineTo(p.x + cx, p.y + cy);
}

//-----------------------------------------------------------------------------
//
// EventHandler
//
//-----------------------------------------------------------------------------
/**
   * @private
   * TextField에서 Enter를 눌렀을때 처리
   */
private function keyDownHandler(event:KeyboardEvent):void
{
if(event.keyCode == Keyboard.ENTER)
{
drawPoint();
}
}

/**
   * @private
   * 버튼 이벤트 처리
   */
private function buttonRollOverHandler(event:MouseEvent):void
{
var g:Graphics = Sprite(event.currentTarget).graphics;
g.clear();
g.beginFill(0xFF5500);
g.drawRect(0, 0, 50, 20);
g.endFill();
}

/**
   * @private
   * 버튼 이벤트 처리
   */
private function buttonRollOutHandler(event:MouseEvent):void
{
var g:Graphics = Sprite(event.currentTarget).graphics;
g.clear();
g.beginFill(0xFF0000);
g.drawRect(0, 0, 50, 20);
g.endFill();
}

/**
   * @private
   * 버튼 이벤트 처리
   */
private function buttonDownHandler(event:MouseEvent):void
{
var g:Graphics = Sprite(event.currentTarget).graphics;
g.clear();
g.beginFill(0xFFFF55);
g.drawRect(0, 0, 50, 20);
g.endFill();
}

/**
   * @private
   * 버튼 이벤트 처리
   */
private function buttonClickHandler(event:MouseEvent):void
{
var g:Graphics = Sprite(event.currentTarget).graphics;
g.clear();
g.beginFill(0xFF5500);
g.drawRect(0, 0, 50, 20);
g.endFill();

drawPoint();
}
}
}
[/code]

위의 코드의 산출물은 아래와 같습니다.

코드로만 다 그려내려니 많이 길어졌지만 기본적으로 Point의 polar 메서드를 이용해 정해진 길이와 각도로 그림을 그려낼 수 있게 하였습니다.

코드가 너무 길어져 주석을 달게 되었네요.. ㅎㅎ 뭐.. 개발자의 기본자세지요. 주석. 허허

Point클래스에는 nomalize나 add, subtract, offset, interpolate같은 메서드들도 있으나 전부를 다루기엔 내용이 너무 많아지니 다음시간에 interpolate 메서드 까지만 하고 Point는 정리하는게 좋을 것 같습니다.ㅎㅎ

그럼 다음시간에 ㅎㅎ

Flash Player로 SWF 실행할때 파라미터체크?

2010-03-09T17:31:00.000+09:00

우리는 보통 HTML안에 SWF 를 삽입할 때 아래처럼 작성하곤하는데

[code html]
<object width='100%' height='100%' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='test'>
<param name='movie' value='test.swf'></param>
<param name='wmode' value='transparent'></param>
<param name='FlashVars' value='id=1590'></param>
<param name='allowScriptAccess' value='always'></param>
<embed src='test.swf' type='application/x-shockwave-flash' wmode='transparent' width='100%' height='100%' allowScriptAccess='always'></embed>
</object>
[/code]

중간에 FlashVars 라는 파라미터 값을 Command Line 상에서 Flash Player를 실행하면서 전달할 수 있을까 하는 점이 문제가 되어 테스트를 하게 되었습니다. 일단 아래의 Flex 소스를 위에 제시된 HTML 태그를 이용해 표시하는 것부터 테스트 해봐야 겠다고 생각해서..

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
import mx.utils.ObjectUtil;

private function creationCompleteHandler(event:FlexEvent):void
{
Alert.show(ObjectUtil.toString(Application.application.parameters));
}
]]>
</mx:Script>
</mx:Application>
[/code]

이런 Flex코드와 아래의 HTML 코드를 이용해 테스트 했습니다.

[code html]
<html>
<head></head>
<body>
<object width='100%' height='100%' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='test'>
<param name='movie' value='Main.swf'></param>
<param name='wmode' value='transparent'></param>
<param name='FlashVars' value='id=1590'></param>
<param name='allowScriptAccess' value='always'></param>
<embed src='Main.swf' type='application/x-shockwave-flash' wmode='transparent' width='100%' height='100%' allowScriptAccess='always'></embed>
</body>
</html>
[/code]

결과는 성공.

일단 값은 넘어가는게 확인 되었고.. Comman Line에서 값을 넘겨야할때는 어떻게 하느냐가 문제가 되었다.

여느 프로그램 실행시키듯 한번 추가해볼까..

안된다.. 어쩐다.. 하면서 구글을 검색하다가 하나 걸린 것이 Flex Developer Guide의 어떤 한 페이지였습니다.

http://livedocs.adobe.com/flex/3/html/help.html?content=passingarguments_3.html

flashVars를 넘겨주는 방법에 대해서 나와있는 페이지인데 commandLine에서 값을 넘겨주는 방법은 안나와있지만

이런식으로도 flashVars 파라미터를 넘긴다니!

그래서 명령어를 바꿔보았지요.

넘어간다!!! 사실 약 한시간여 삽질끝에 알아낸 방법이라 눈물을 왈칵 쏟을뻔했습니다.

그냥 간단하게 웹에서 파라미터 넘기듯이 넘기면 되는 줄알았으면... 아아.. 내 한시간 삽질...

p.s 값을 여러개 넘기고 싶을때는 어떻게 해야할지 아직 모르겠습니다..혹시 아시는 분?..-_-;;

Point 클래스의 미학 #1

2010-03-08T11:52:00.000+09:00

Point 클래스라는 것에 대해 간단히 짚고 넘어가야 할 듯 합니다.

사실 저는 데이터 처리나 파싱같은것에 관심이 많아서 그 쪽으로 많은 작업을 하지만

나름 Front-END 개발자다 보니 기본적인 Display 객체에 대한 이해는 있어야 할듯 하여 짧게나마

글을 적어보려고 합니다.

Point라는 클래스는 그냥 "점"입니다.

좌표를 나타내는 점이지요. Point라는 것에 대해 원래 많은 의미가 있지만 적어도 ActionScript에서는 방위를 나타내는 점을 의미합니다.

하지만 점이라는 것이 항상 그렇듯 그저 x, y의 기본 좌표만 갖고 있기엔 Point 클래스의 의미가 너무 약하고.. 그럴바에야 왜 클래스로 만들어서 사람 머리 복잡하게 하는걸까 라고 생각하기엔 Point라는 클래스는 의외로 많은 역할을 하고 있습니다.

예를 들어 점과 점 사이의 거리를 한번 구해보도록 할까요?

1. distance() 메서드

간단히 점과 점사이의 거리를 구해라. 라고 말한다면 여러가지 방법(?)이 있을지 모르겠지만 난 적어도 한가지 방법을 알고 있습니다. "피타고라스의 정리"를 이용하면 되는데 이 방법은 삼각함수의 기초가 되는 정리인데요. 이 distance() 메서드는 방금 말했던 "피타고라스의 정리"를 고민할 필요없이 그냥 점과 점사이의 거리를 계산 할 수 있게 합니다. 이렇게 말이지요.

[code as3]
package
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.IEventDispatcher;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.text.TextField;
public class Main extends Sprite
{
public function Main()
{
super();

createPoints();
createTextField();
}

private var point1:Sprite;
private var point2:Sprite;

private var textField:TextField;

private var isDragging:Boolean = false;

private function createTextField():void
{
if(!textField)
{
textField = new TextField();
textField.width = 150;
textField.height = 30;
textField.x = 10;
textField.y = 10;
textField.text = "distance : ";
addChild(textField);
}
}

private function createPoints():void
{
var g:Graphics;

if(!point1)
{
point1 = new Sprite();

g = point1.graphics;
g.clear();
g.beginFill(0xFF0000, 1);
g.drawCircle(0, 0, 5);
g.endFill();

point1.x = 50;
point1.y = 50;

addChild(point1);
configureListeners(point1);
}

if(!point2)
{
point2 = new Sprite();

g = point2.graphics;
g.clear();
g.beginFill(0x00FF00, 1);
g.drawCircle(0, 0, 5);
g.endFill();

point2.x = 100;
point2.y = 100;

addChild(point2);
configureListeners(point2);
}
}

private function configureListeners(dispatcher:IEventDispatcher):void
{
dispatcher.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dispatcher.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
dispatcher.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

private function displayNewPoint():void
{
var p1:Point = new Point(point1.x, point1.y);
var p2:Point = new Point(point2.x, point2.y);

textField.text = "distance : " + Point.distance(p1, p2);
}

private function mouseDownHandler(event:MouseEvent):void
{
Sprite(event.currentTarget).startDrag();
isDragging = true;
}

private function mouseMoveHandler(event:MouseEvent):void
{
if(isDragging)
{
displayNewPoint();
}
}

private function mouseUpHandler(event:MouseEvent):void
{
Sprite(event.currentTarget).stopDrag();
isDragging = false;
}
}
}
[/code]

아무래도 저렴하게 개발하려다 보니 Flash를 사용하지 않아 코드가 점점 길어지는군요;;

아무튼 이렇게 코딩하고 컴파일을 돌려서 확인합니다.

1.2kb짜리 파일이라니.. Flex에선 감히 상상도 못할 용량이로군요.. 이렇게 컴파일을 하면 아래와 같은 산출물이 생겨나게 됩니다. (아래의 산출물에 있는 두개의 점을 드래그 해보세요)

피타고라스의 정리를 사용하려고 직각삼각형을 만들어서 빗변의 길이의 제곱을 루트해줄 필요가 없이 Point클래스에 있는 distance 메서드 만으로도 거리를 측정할 수 있습니다.(물론 내부적으로는 피타고라스의 정리를 이용했을거라고 추측합니다만..)

다음 시간엔 Point의 polar() 메서드를 알아보도록해요.

이벤트란 무엇인가요? #4

2010-03-05T15:56:00.000+09:00

이벤트에 대해 쓰면 쓸 수록 점점더 내용이 많아지는 것 같아 걱정입니다.

일단 여기까지 진행하면서 배운건

addEventListener, 사용자 정의 이벤트, bubbles, target, currentTarget 정도가 되겠네요.

아, dispatchEvent도 포함시켜서.

오늘할 cancelable만 마저 정리하고 이벤트는 마치는걸로...

cancelable이라는걸 본적이 있으신지 모르겠습니다.(액션스크립트를 하면서 늘 궁금했었더랬죠.. 저는)

레퍼런스에 보면 이렇게 저렇게 적혀있는데..

번역기를 돌려보겠습니다. 왜냐하면 한글말로 되어있어도 모를거 같은데 영어로 된걸 보면 머리아프니까;;

번역기를 돌려봐도 외국어 같은게 무슨말인지 모르겠습니다.

이런땐 구글에 검색을 요청해야겠지요.(아래 링크를 클릭하세요)

http://www.lmgtfy.com/?q=ActionScript Event cancelable

위의 링크는 장난이었구요

실제로 도움이 되었던 링크는 http://vulcan9.tistory.com/28 여기 입니다.

cancelable 자체는 큰 역할이 있는게 아니라 이벤트의 Default함수 호출을 할 수 없게끔 막아 줄 수 있는 문을 하나 만들어 둔다고 생각하면 됩니다.

실재로 Default 함수 호출을 막는 메서드는

이 메서드 입니다. preventDefault 메서드는 Event.cancelable 속성이 true 일 경우 이벤트가 발생해서 Listener에 등록된 핸들러 내에서 Default 함수 처리를 하지 못하도록 막게 할 수 있습니다.

그렇다면 bubble phase를 막으려면 어떻게 해야할까요.

stopPropagation()이라는 메서드와 stopImmediatePropagation() 메서드. 이 두가지 메서드가 마련 되어있습니다. 이 두가지 메서드의 차이는 다음과 같습니다.

stopPropagtion() : 현재 이벤트를 Listen 하고 있는 객체에서만 이벤트 흐름을 중단하게 됩니다. 결국 다음 객체에 이벤트를 계속해서 전파하게 하지요.

stopImmediatePropagation() : 이벤트를 그냥 죄다 멈추게 합니다. 더이상의 전파도 없고 단절시켜서 이벤트의 흐름을 막지요.

다만 위의 두 메서드는 Default 함수 호출에 대한 행동은 막을 수 없습니다. 그것은 preventDefault 메서드를 참조해야하구요.

사실상 cancelable에 관련되어 메서드 호출가부가 결정되는것은 preventDefault 메서드 입니다.

cancelable에대해 설명한다고 했으나 많이 부족한듯 하여 아쉽네요.

cancelable이 첨엔 있으나 없으나 별것 없구나.. 싶은듯 하지만 이벤트 흐름과도 관계가 있는 부분이라 함부로 하기 어려운 속성입니다. 이해하기도 어렵구요.(글을 쓰고 있는 저도 어려워요..-_-;)

샘플이라도 있었으면 좋으련만. 오늘은 개인적인 사정으로 그 것은 어려울 듯하고 조만간에 어서 만들어 올리도록 하겠습니다.

이벤트란 무엇인가요? #3

2010-03-04T16:29:00.000+09:00

이벤트 이야기 세번째입니다.

오늘은 bubbles와 cancelable에 대해서 설명해보려고 합니다.

일단 bubbles를 알아야 cancelable에 대해서 알아 볼 수 있지요.

bubbles라는 것에 대해 Language Reference에서 확인을 좀 해봤습니다.

....

무슨 소리지? -_-

해서 구글번역기로 돌려봤습니다.

영어를 한글로 바꾼다는 것이 좀 문제가 있으니 저정도의 어휘들은 이해하도록 하고.....-_-;;;

일단 거품이라는게 bubble을 직역을 하다보니 저렇게 표시가 된건데 이것은 이벤트가 어떤 거품이 터지는것과 비유하여 사용하게 되었다 합니다.(사실 어디선가 주워들은 이야기 ㅎ)

우리가 집중해서 봐야할 부분은 "이벤트 흐름의 세 단계를 통해 이동" 이라는 부분인데요.

이벤트에 대해서 이해하기 전에 사실 액션스크립트에서는 객체들을 XML로 뽑아내어줄 수 있다는 사실을 알고 있는게 좀 도움이 될 것 같습니다.(flash.utils.describeType() 메서드를 보면 도움이 될까요?) 이는 곧 무슨이야기냐 하면 어떤 객체가 있다면 그 객체 내부적으로 어떤 객체를 갖고 있을 수 있는지 XML로 파악할 수 있다는 이야기이고 그런 하이라키(Hierarchy)구조에서는 각 객체들의 계층관계를 파악할 수 있다는 이야기지요.

위에서 표시되는 "대상 노드"라는 것은 방금 이야기한 XML의 각 노드라고 이해하면 됩니다.(객체간 관계가 정리되어있는 XML의 각 노드지요. 족보라고 생각하면 이해가 빠릅니다.)

그래서 이벤트가 발생되는 단계를 세단계로 쪼개서 확인해보면

1. 대상 노드가 표시 목록 계층 구조의 상단에서 노드의 흐름을 캡처 단계직전.

- 이 이야기는 어떤 객체가 이벤트가 발생했을 때 이를 수신하는 상위 객체가 이벤트를 받기 직전의 상태를 이야기 합니다.

2. 이벤트를 받는 순간

3. 상위 노드로 이벤트를 계속적으로 발생시킬지에 대한 판단

이렇게 나눌 수 있습니다. 여기서 3번과정에서 판단의 기준이 되는 것이 bubbles 가 되겠습니다. 이해하기 어렵다면 예제를 만들어보면 쉽게 이해할 수 있습니다.

일단 클래스 구조를 이런 형태로 만들어 볼까요.

(위의 그림에서 화살표는 데이터의 흐름을 의미합니다.)

각각의 객체들은 Main 클래스 하위에 붙어있고 실질적으로 이벤트를 발생시키는 곳은 SubClass뿐입니다.

이벤트를 수신하는 곳은 Main클래스와 ExampleClass 이렇게 두 곳으로 두고 있습니다.

여기서 주의 할 점은 Main은 ExampleClass에서 이벤트를 수신한다는것을 조건으로 해야 이번에 만드는 샘플이 의미가 있습니다.

오늘 샘플은 Flex로 만들어 볼까요? (그래야 만들기 쉬우니까요...)

/Main.mxml
[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:example="classes.example.*"
creationComplete="creationCompleteHandler(event);">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
import classes.events.CustomEvent;

private function creationCompleteHandler(event:FlexEvent):void
{
exampleRect.addEventListener(CustomEvent.SAMPLE_EVENT, exampleRectSampleEventHandler);
exampleRect.sub.addEventListener(CustomEvent.SAMPLE_EVENT, subSampleEventHandler);
}

private function bubblesChkClickHandler(event:MouseEvent):void
{
exampleRect.bubbles = bubblesChk.selected;
}

private function subSampleEventHandler(event:CustomEvent):void
{
ta.text += ("event Listen : subClass eventListen\n");
}

private function exampleRectSampleEventHandler(event:CustomEvent):void
{
ta.text += "event Listen : exampleRect event Listen\n";
}
]]>
</mx:Script>
<mx:TextArea id="ta" width="300" height="200" editable="false" />
<mx:CheckBox label="bubbles" id="bubblesChk" click="bubblesChkClickHandler(event);" />
<example:Example id="exampleRect" width="30" height="30" />
</mx:Application>
[/code]

/classes/example/Example.as
[code as3]
package classes.example
{
import flash.display.Graphics;
import flash.display.Sprite;
import flash.events.MouseEvent;

import mx.core.UIComponent;

import classes.example.SubClass;

public class Example extends UIComponent
{
public function Example()
{
super();
}

private var rect:Sprite;

public var sub:SubClass;

public var bubbles:Boolean = false;

public var cancelable:Boolean = false;

override protected function createChildren():void
{
super.createChildren();

if(!rect)
{
rect = new Sprite();
rect.addEventListener(MouseEvent.CLICK, rectClickHandler);
addChild(rect);
}

if(!sub)
{
sub = new SubClass();
addChild(sub);
}
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

if(rect)
{
var g:Graphics = rect.graphics;

g.clear();
g.beginFill(0xFF0000, 1);
g.drawRect(0, 0, 30, 30);
g.endFill();
}
}

private function rectClickHandler(event:MouseEvent):void
{
sub.test(bubbles, cancelable);
}
}
}
[/code]

/classes/example/SubClass.as
[code as3]
package classes.example
{
import flash.display.Sprite;

import classes.events.CustomEvent;

public class SubClass extends Sprite
{
public function SubClass()
{
super();
}

public function test(bubbles:Boolean = false, cancelable:Boolean = false):void
{
dispatchEvent(new CustomEvent(CustomEvent.SAMPLE_EVENT, bubbles, cancelable));
}
}
}
[/code]

/classes/events/CustomEvent.as
[code as3]
package classes.events
{
import flash.events.Event;

public class CustomEvent extends Event
{
public static const SAMPLE_EVENT:String = "sampleEvent";
public function CustomEvent(type:String, bubbles:Boolean = true, cancelable:Boolean = true)
{
super(type, bubbles, cancelable);
}
}
}
[/code]

위의 예제대로 만드셨다면 컴파일 ㄱㄱ

음. 확실히 flash 패키지만으로 코딩한 것과는 용량 차이가 많습니다. Flex는 용량이 커요. 역시. 하지만 그만큼 제공되거나 개발 속도도 flash 패키지만으로 작업한것보다 더 좋은건 사실입니다. 딜레마에요. 딜레마.

어찌되었든 컴파일이 성공적으로 이뤄졌다면 결과물을 확인해봐요.

bubbles 를 체크한것과 체크하지 않은 것에 대해 이벤트 버블링이 어떻게 처리되는지 확인 할 수 있습니다.

자신이 속해있는 디스플레이 객체에만 전달할 것인지 아니면 그보다 상위 객체에 전달하게 할것인지 결정할 수 있다는 이야기인데요. bubbles 속성이 true인 대표적인 이벤트가 MouseEvent 입니다.

자. 그럼 여기서 문제로 거론되는 건데요.

bubbles가 true인 이벤트를 받았을때 addEventListener 되는 객체가 실제로 해당 객체인지 아닌지에 대해 고민해 볼 필요가 있습니다.

위의 예제를 살펴보면 Example 클래스에서 addEventListener해도 받을 수 있고 Example클래스 안에있는 SubClass라는 클래스에서도 받을 수 있지요. 하지만 실질적으로 Example에서 받은 이벤트는 실제로 Example 클래스에서 발생시킨게 아니지요. 이벤트를 실제로 발생시킨 객체와 이벤트를 bubbles의 여부에 따라 중계해준 클래스. 이 두개의 상황에 대해 이벤트는 아주 괜찮은 방법을 제시하고 있습니다.

currentTarget과 target이라는 속성들이지요.

이것들을 레퍼런스에서 확인해보면

라고 정의 되어있습니다.

사실 저는 무슨말인지 번역기를 돌려봐도 모르겠어서 그냥 위에서 만든 샘플을 조금 손보기로 했습니다.

/Main.mxml
[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:example="classes.example.*"
creationComplete="creationCompleteHandler(event);">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
import classes.events.CustomEvent;

private function creationCompleteHandler(event:FlexEvent):void
{
exampleRect.addEventListener(CustomEvent.SAMPLE_EVENT, exampleRectSampleEventHandler);
exampleRect.sub.addEventListener(CustomEvent.SAMPLE_EVENT, subSampleEventHandler);
}

private function bubblesChkClickHandler(event:MouseEvent):void
{
exampleRect.bubbles = bubblesChk.selected;
}

private function subSampleEventHandler(event:CustomEvent):void
{
ta.text += ("event Listen : subClass eventListen\n");
ta.text += "sub currentTarget : " + event.currentTarget + "\n";
ta.text += "sub target : " + event.target + "\n";
}

private function exampleRectSampleEventHandler(event:CustomEvent):void
{
ta.text += "event Listen : exampleRect event Listen\n";
ta.text += "example currentTarget : " + event.currentTarget + "\n";
ta.text += "example target : " + event.target + "\n";
}
]]>
</mx:Script>
<mx:TextArea id="ta" width="300" height="200" editable="false" />
<mx:CheckBox label="bubbles" id="bubblesChk" click="bubblesChkClickHandler(event);" />
<example:Example id="exampleRect" width="30" height="30" />
</mx:Application>
[/code]

이렇게 수정하고 확인해보면 이렇습니다.

(이미지입니다. 클릭해서 낚이는 불상사는 피해주세요)

Example에서 수신된 이벤트의 currentTarget은 이벤트를 발생시킨 SubClass가 아닌 자신을 반환하고

target은 실제로 이벤트를 발생시킨 SubClass인것을 확인할 수 있습니다.

사실 이번시간에 cancelable까지 다 손을 보려고 했습니다만 너무 양이 많아졌네요.

cancelable은 다음시간에 이야기하도록 해요.

p.s 마지막에 target과 currentTarget을 확인하려고 만든 샘플은 이 밑에 있어요.

Flex를 해볼까?

2010-03-03T19:11:00.000+09:00

음.. 사실 이벤트 세번째 이야기를 하긴해야하는데 target과 currentTarget을 어떻게 설명해야할까..

고민하다가 적당히 생각이 안나서 Flex 이야기를 먼저해보려고 합니다.

"Flex랑 Flash랑 뭐가 다른가요?" 라는 질문들이 많은데 사실 Flash랑 Flex랑 뭐가 다른지에 대해 한마디로 설명하자면 "그냥 툴이 달라요" 정도랄까.

사실 Flex와 Flash는 사용하는 "툴"외에 다른걸 궂이 꼬집자면 태그를 이용해서 개발할 수 있다는 정도일까..

뭐 대충 그런식이다.

보통 맨처음 Flex를 배울때는 이런식으로 테스트 하곤한다.

[code xml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Hello World" />
</mx:Application>
[/code]

이렇게 컴파일 하고 나면

이렇게 결과물이 나오게 됩니다.

이걸 ActionScript로 개발해볼까? 하고 생각하면 낭패를 봅니다.

왜냐하면 Application을 확장해 만들게 되면 오류가 발생하니까.

(왜 이런오류가 나는지 아시는 분 있으면 말씀 좀 주세요)

어쨌든 가상으로 코딩하게되면 아마도 이렇게 되지 않을까

[code as3]
package
{
import mx.core.Application;
import mx.controls.Label;

public class Main extends Application
{
public function Main()
{
super();
}

public var tempLabel:Label;

override protected function createChildren():void
{
super.createChildren();
if(!tempLabel)
{
tempLabel = new Label();
addChild(tempLabel);
}
}

override protected function commitProperties():void
{
super.commitProperties();
if(tempLabel)
{
tempLabel.text = "Hello World";
}
}
}
}
[/code]

왜 Flex로 개발하는지 알겠는 분들은 손을을 들어주세요.

Flex mxml로 개발하게되면 4줄이면 만들 수 있는 것을 만약 as 코드로 개발한다면 30줄도 넘게 코딩이 되어야한다는 문제도 있고 컨포넌트를 이용하는데 있어서 간편하기 때문입니다.

그렇다고 Flex가 모든게 좋은것만은 아니에요.

모션을 만드는데도 힘들거니와 리소스를 많이 잡아먹기때문에 상황에 따라 잘 선택해야합니다.

아.. 오늘은 건강이 안좋군요.

그래서 오늘은 여기까지만 하겠습니다.

다음엔 이벤트 4번째이야기를 계속할께요.

이벤트란 무엇인가요? #2

2010-02-26T14:13:00.000+09:00

#1 에서 이벤트 등록하고 핸들러를 작동하는 것까지 확인해봤는데요..

어차피 이벤트라는게 다 사람이 만든건데 그거 내가 만들어서 작동 못할것도 없잖아요.

그래서 만들어봅니다. 커스텀 이벤트!

근데 커스텀 이벤트를 만들겠다고 거창하게 이야기했지만 결국 뭐 부터 시작해야할지 모르겠군요.

일단 우리가 흔히 보는 MouseEvent를 한번 확인해보도록 하지요.

Language Reference에서 보면 MouseEvent의 족보에 대해 파악해 볼수가 있습니다.

flash.events 패키지에 위치하고 있고 public class고 Event를 상속받았군요.

Subclasses들은 뭐.. MouseEvent를 상속받은 놈들을 알려주는 거니까요. 지금은 신경쓸 필요는 없어 보이네요.

일단 Event라는 놈들은 원래 죄다 flash.events.Event 클래스를 상속받습니다. 물론 Event클래스를 만들 수도 있을지 모르겠습니다만 나중에 이벤트를 발생시킬때 Event 를 상속받은 놈들만 발생시킬 수 있거든요.

그렇다면 일단 Event를 상속받아 보지요.

[code as3]
package classes.events
{
import flash.events.Event;

public class CustomEvent extends Event
{
   public function CustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
   {
   super(type, bubbles, cancelable);
   }
}
}
[/code]

요렇게 하면 일단 이벤트는 상속받았고.. 일단 Event를 만들었으니 잘 작동하나 볼까?... 했지만 이것만 갖고는 뭘 어떻게 해야할지 감이 안옵니다.

좀 그럴싸하게 이벤트 상수를 만들어보도록해요.

[code as3]
package classes.events
{
import flash.events.Event;

public class CustomEvent extends Event
{

   public static const SAMPLE_EVENT:String = "sampleEvent";

   public function CustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
   {
   super(type, bubbles, cancelable);
   }
}
}
[/code]

저렇게 해놓고 이벤트를 발생시킬 클래스가 필요하니 클래스를 하나더 만들어보아요.

[code as3]
package classes.example
{
import flash.events.EventDispatcher;

import classes.events.CustomEvent;

public class ExampleEventDispatcher extends EventDispatcher
{
   public function ExampleEventDispatcher()
   {
   super();
   }

   public function checkDispatch():void
   {
   dispatchEvent(new CustomEvent(CustomEvent.SAMPLE_EVENT));
   }
}
}
[/code]

그럼 chkeckDispatch메서드를 호출생하기만 하면 CustomEvent.SAMPLE_EVENT가 발생하게 됩니다.

그럼 한번 테스트 해볼까요.. 테스트할 Main.as 는 이렇게 만들어 봅시다.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
import flash.text.TextField;

import classes.events.CustomEvent;
import classes.example.ExampleEventDispatcher;

public class Main extends Sprite
{
   public function Main()
   {
   super();

   setTextField();
   setGreenButton();
   setExample();
   }

   private var textField:TextField;

   private var greenBtn:Sprite;

   private var exam:ExampleEventDispatcher;

   private function setExample():void
   {
   if(!exam)
   {
   exam = new ExampleEventDispatcher();

   exam.addEventListener(CustomEvent.SAMPLE_EVENT, examSampleEventHandler);
   }
   }

   private function setTextField():void
   {
   if(!textField)
   {
   textField = new TextField();

   textField.width = 200;
   textField.height = 300;
   textField.y = 10;
   textField.multiline = true;
   textField.background = true;
   textField.backgroundColor = 0xFFFFFF;
   }

   addChild(textField);
   }

   private function setGreenButton():void
   {
   if(!greenBtn)
   {
   greenBtn = new Sprite();

   var g:Graphics = greenBtn.graphics;

   g.clear();
   g.beginFill(0x00FF00, 1);
   g.drawRect(0, 0, 50, 50);
   g.endFill();

   greenBtn.x = 210;
   greenBtn.y = 10;

   greenBtn.buttonMode = true;
   greenBtn.useHandCursor = true;

   greenBtn.addEventListener(MouseEvent.CLICK, greenBtnClickHandler);
   }

   addChild(greenBtn);
   }

   private function greenBtnClickHandler(evnet:MouseEvent):void
   {
   exam.checkDispatch();
   }

   private function examSampleEventHandler(event:CustomEvent):void
   {
   textField.appendText("Listen from ExampleEventDispatcher\n");
   }
}
}
[/code]

컴파일을 하고 실행시키면 아래처럼 나오게 되면 성공..

녹색버튼을 마구마구 누르면 왼쪽의 텍스트 필드에 메시지가 찍히게 됩니다. 이게 바로 사용자 정의 이벤트. 커스텀 이벤트의 기초적인 내용이에요. 좀더 복잡한 내용이 있지만 오늘은 여기까지.

궁금한게 있다면 Google을 애용해주세요. ㅎ

이벤트란 무엇인가요? #3 예고편! 두둥!

1. bubbles는 뭔가요? cancelable은요?

2. target? currentTarget? 다 거기서 거기 아닌가요?

3. 악 왜 에러가 나는거에요! clone 메서드의 존재이유.

저렴하게 AIR 개발하기

2010-02-26T02:01:00.000+09:00

새벽에 잠이 들어야하는데 (아침 출근길이 걱정입니다) 잠이 안와 이벤트 시리즈와는 별도로 저렴하게 AIR를 개발하는 법을 소개하려고 합니다.

Flex Builder나 그외 IDE 툴로 개발하면 무척이나 편리하지만 기본적인 원리를 알게 되면

혹여나 다른 열악한 환경에서도 개발하게 되더라도 도움이 되지 않을까 생각되서 소개하려고 합니다.

일단 AIR는 Flex와는 다르게 좀 환경이 복잡합니다. 기본적으로 소개는 여기를 확인하면 됩니다.

AIR를 개발하려면 (Ajax AIR는 제 전문분야가 아니라서 생략하도록 할께요) 기본적으로 "AIR application descriptor file" 이라는 것을 작성해야합니다.

Builder에서 개발할때 기본적으로 만들어지는 코드 파일 외에 [프로젝트명_app.xml] 파일이 생겨날 것인데 이게 바로 방금 말했던 AIR application descriptor file 입니다.

이 파일에는 AIR를 실행하거나 혹은 패키징할때 필요한 정보들을 담게 되는데요. 이 파일이 없으면 아무것도 할 수 없습니다. 그러니 이 셋팅은 매우 중요합니다.(여기를 참고하세요)

Flex 3 Developer Guide에 명시된 내용을 한번 볼까요.

[code xml]
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
<id>samples.flex.HelloWorld</id>
<version>0.1</version>
<filename>HelloWorld</filename>
<initialWindow>
<content>HelloWorld.swf</content>
<visible>true</visible>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<width>400</width>
<height>200</height>
</initialWindow>
</application>
[/code]

요래 적혀있습니다. 각 노드마다 설명은 다음과 같습니다.

id : 어플리케이션의 기본 아이디로 어떤 어플리케이션인지 알만한 단어로 써주면 좋습니다.
version : 어플리케이션의 버젼인데 나중에 배포할때 이것을 기준으로 업데이트 할지 말지 결정합니다.
filename : 어플리케이션의 메인 파일이 무엇인지 명시합니다. 이때는 확장자는 제외합니다.
initialWindow : 어플리케이션 실행시 표시되는 윈도우 속성들은 제어합니다.
content : 어플리케이션에서 표시될 content가 무슨 파일인지 명시합니다.
visible : 우리가 알고 있는 일반적인 visible 속성과 같습니다.
systemChrome, transparent : 설명이 기니 링크를 따라가세요.
width, height : 어플리케이션 윈도우의 너비와 높이입니다.

일단 이만큼만으로도 샘플 파일을 컴파일하거나 실행시킬 수 있습니다.

그 외에 아이콘이라던가 하는 부분들도 있습니다만 오늘은 살짝 맛만 보도록하지요. ㅎ

그럼 일단 위의 모양대로 파일을 하번 만들어 보지요. 이왕에 하는거 HelloWorld.as 파일도 만들어 보아요.

HelloWorld.as 파일의 내용은 아래처럼 합니다.

[code as3]
package
{
import flash.display.Sprite;
public class HelloWorld extends Sprite
{
public function HelloWorld()
{
super();
trace("Hello World");
}
}
}
[/code]

컴파일을 해야겠는데 AIR 컴파일은 amxmlc 명령어로 컴파일합니다.

이렇게 컴파일을 하고 난 뒤에 우리 한번 실행을 해야겠는데 무턱대고 swf 를 Flash Player로 실행하면 안됩니다. 이때 명령어는 adl 이라는 것을 이용하는데요. 이것은 AIR Debug Launcher 의 약자로 디버그용으로 확인할때 사용합니다.

개발중에 패키징하고 인스톨해서 실행해보는 모든과정을 일일이 하면 얼마나 귀찮습니까. 그래서 adl을 통해 실행합니다.

일단 오늘은 맛만 보는거니까 이렇게만 실행해 볼까요.

참. 아까도 적어놨지만 실행을 할때는 AIR application descriptor file를 이용해서 실행합니다.

이렇게...

하려고 했으나 "error while loading initial content"라고 하면서 실행이 안됩니다. 왜 이러지? 라고 생각하면서 Developer Guide를 뒤지고 난리법석을 피웠었는데 이유는 의외의 곳에서 문제가 있습니다. SDK가 3.2 버젼 이후부터는 xmlns="http://ns.adobe.com/air/application/1.0"이게 아니라 xmlns="http://ns.adobe.com/air/application/1.5"로 변경되었습니다.(Adobe 이것들. Developer Guide도 수정을 안해놓다니.. 사람 뻘짓하게..)

게다가 systemChrome이라던가 transparent라던가 하는 옵션값을 좀 수정을 해야합니다.

왜냐하면 위에서 소개한 옵션으로는 투명한데다가 systemChrome도 없어서 어플리케이션이 실행되었어도 눈에 보이지 않기 때문이지요.

AIR application descriptor file을 아래와 같이 수정합니다.

[code xml]
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>HelloWorld</id>
<version>0.1</version>
<filename>HelloWorld</filename>
<name>Hello World</name>
<initialWindow>
<title>Hello World</title>
<content>HelloWorld.swf</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<width>640</width>
<height>480</height>
</initialWindow>
</application>
[/code]

그럼 좀전에 했던것 같이 컴파일 하고 adl을 이용해 실행해볼까요.

위와같은 빈창이 뜨게 됩니다. 와우. 성공. 그리고 프롬프트 창을 확인하면

저렇게 Hello World를 화면에 표시해줍니다.

와우.. 그냥 웹용으로 개발할때는 그럭저럭 할만하다가 AIR로 개발할라 치니까 복잡해 죽겠네요. :)

셋팅할것도 많고.. 하지만 어느날 갑자기 이클립스도 어떻게 설치할 수 없는 열악한 상황에서도

이런 방법을 통해 개발을 진행할 수 있다는 것만 알아두세요.(평소엔 그냥 Builder 개발 고고)

참고로 java 를 통해서도 컴파일이 가능하니 그건 Developer Guide를 참고 하시면 도움이 될거에요.

이제 슬슬 잠이 옵니다. 오늘은 이만할게요.

이벤트란 무엇인가요? #1

2010-02-25T11:20:00.000+09:00

내가 처음 3.0을 접했을때가 불과 2년전이었는데 그때 가장 어렵게 느껴졌던게

도무지 "이벤트"라는 녀석과 친해지기 어렵다는 사실이었다.

도데체 왜 "이벤트"라는 놈을 갖고 코드를 작성해야만 할까.

"이벤트"없이 코딩할 수 있지 않을까?

라는 고민으로 수없이 많은 생각들을 하곤했었는데

그것에 대한 결론으로는 여기를 확인하면 좀 도움이 되리라 생각된다.

결론적으로는 ActionScript의 태생적 이유때문이라는 것인데 ECMAScript를 모태로 삼고있는

ActionScript로써는 개발자가 원하는 흐름대로 코드를 진행하기 위해서는 이벤트를 사용해야만 한다고

결론 지었다.

또다른 결론이 하나 더 있는데 이는 어플리케이션을 구성하는데 있어서 구조적으로 "약한결합"을 사용해야 유지보수, 클래스의 컨포넌트 화(化), 등이 용이하다는 결론.

위와같은 결론 덕에 결국 이벤트를 사용하긴 해야겠는데 뭘 어떻게 써야하는 것인지 당최 배우기가 마땅찮다.

그래서 일단 이벤트를 추가하고(import), 등록하고(addEventListener), 행동(Handler) 하는 3가지 단계를 마스터 해보자.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;

import flash.text.TextField;

public class Main extends Sprite
{
   public function Main()
   {
   super();

   createSprite();
   createTextArea();
   }

   private var sp:Sprite;
   private var ta:TextField;

   private function createSprite():void
   {
   if(!sp)
   {
   sp = new Sprite();

   addChild(sp);

   drawSprite();
   }
   }

   private function drawSprite():void
   {
   if(sp)
   {
   var g:Graphics = sp.graphics;

   g.clear();
   g.beginFill(0x00FF00, 1);
   g.drawRect(0, 0, 100, 100);
   g.endFill();

   configureSpriteListeners();
   }
   }

   private function createTextArea():void
   {
   if(!ta)
   {
   ta = new TextField();
   ta.width = 200;
   ta.height = 300;
   ta.x = 110;
   ta.y = 0;
   ta.multiline = true;
   ta.background = true;
   ta.backgroundColor = 0xFFFFFF;

   addChild(ta);
   }
   }

   private function configureSpriteListeners():void
   {
   sp.addEventListener(MouseEvent.CLICK, spriteClickHandler);
   }

   private function spriteClickHandler(event:MouseEvent):void
   {
   ta.appendText("click sprite! \n");
   }
}
}
[/code]

위의 코드를 한글로 번역을 하자면 이렇다.

"sp라는 Sprite객체를 만들어서 너비 100, 높이 100 사이즈의 초록색 네모를 그린다음 클릭하면 "click sprite!"라는 메시지를 ta라는 TextField객체에 출력해라!"

라는 것이다. 컴퓨터 나라말은 참 다양하지만(JAVA, C, C++, ActionScript, JavaScript.. 등등) 번역하고 보면 별거 없는 것같은 기분이다.

어쨌든 저 코드를 컴파일 해보자.

그럼 저 Main.swf를 실행해볼까.. (아래의 녹색 상자를 클릭해보세용)

간단하게 CLICK 이벤트를 등록하고 작동하게하는 예제를 만들어 봤다.
나름 간단하게 작성된 예제인데 여기서 드는 의문점은 해당 클래스에 등록할 수 있는 이벤트들은 어디서 확인하느냐는 의문.
그런 이벤트에 관련된 사항은 Language Reference를 확인하면 된다.
예를들어 방금 사용한 Sprite 클래스를 확인해보면

어떤 이벤트를 등록(addEventListener) 할 수 있는지 확인할 수 있다.
게다가 친절하게도 어떤 시점에서 이벤트가 발생하는지 설명도 해줬다. 좀 괜찮은데?

예전에 같이 일하던 분이 요런 말씀을 해주셨더랬다.
"궁금하면 API 뒤져봐"
그말이 진리. ㅎㅎㅎ

Sprite 클래스는 내부적으로 스스로를 클릭하면 CLICK 이벤트를 발생하게끔 설계되어있다.
그럼 우리는 그런 이벤트를 수신할 수 있도록 addEventListener를 통해 이벤트를 등록한다.
이때 같이 들어가는 Handler는 이벤트가 수신했을 때 실행하게 된다.

대략 이런 모양.

이미지 출처는 제가 그렸으므로 함부로 퍼가면 안됩니다. 말씀은 해주시고 퍼가세요.

Sprite는 addEventListener를 하든 말든 어차피 클릭을 하면 CLICK이벤트를 발생시킨다.
그럼 어떤 누군가는 addEventListener를 해서 핸들러를 실행시키겠지.
이벤트의 등록과 핸들러의 실행의 구조적인 모양새는 이런 모양이다.

그럼 클래스도 누군가가 만들어 사용하는 걸텐데 (적어도 신이 만든건 아닐거 아냐) 나도 만들어 볼 수 있지 않을까??

두둥. "이벤트란 무엇인가요? #2" 예고편.

1. 내가 만든 이벤트?

2. dispatchEvent?

3. 오오오오.....(뭐지???)

ActionScript Class 만들기(기본)

2010-02-24T16:59:00.000+09:00

Actionscript 3.0 은 클래스 단위로 프로그램을 구성한다.(적어도 내 생각엔)

그럼 어떤 프로그램을 만들기 위해서 가장 먼저 선행되어야 하는 것은 클래스를 만들 줄 알아야한다는 것이니

한번 시작해보자.

일단 준비물을 살펴보자.

Flex SDK 3.5.0 : 다운로드

빌더, 혹은 에디터 툴.(난 Editplus로 개발하니깐 Editplus)

뭐 이정도로 간단하게 준비가 끝났으면 시작해보자.

일단 간단하게 소스 저장용 폴더와 파일 하나를 하나 만들자.

여기서 파일명은 Main.as 로 하자.

Main.as 파일에는 이렇게 코딩해볼까.

[code as3]
package
{
import flash.display.Sprite;
public class Main extends Sprite
{
   public function Main()
   {
   super();
   }
}
}
[/code]

이러면 우리 클래스를 만든거다.

실행하려면 아까 우리가 준비했던 Flex SDK를 이용해 컴파일을 하면 swf 파일이 떨어진다.

아까 sdk 파일 폴더로 가자. 그 폴더안에 가보면 "bin" 이라는 폴더가 있는데

그 안에 살펴보면 mxmlc라는 파일이 있다.

저 명령어를 이용하면 된다.

아까의 작업폴더로 이동한 뒤(프롬프트 창에서) 아래와 같이 입력한다.

[mxmlc가 있던 sdk의 bin 폴더]\mxml Main.as -o Main.swf

결과화면은 아래와 같다.

오. Main.swf 파일이 생성되었다. 556bytes 뿐이다.

폴더를 확인했더니

정상적으로 파일이 생성된것을 확인할 수 있다.

그럼 실행해볼까.

아무것도 없는 빈파일이다. 이렇게 그냥 끝내면 아쉬우니까 네모칸 하나 만들어 넣자.

아까의 Main.as 소스를 아래와 같이 수정한다.

[code as3]
package
{
import flash.display.Sprite;
import flash.display.Graphics;

public class Main extends Sprite
{
   public function Main()
   {
   super();

   drawRect();
   }

   private function drawRect():void
   {
   var g:Graphics = this.graphics;

   g.clear();
   g.beginFill(0xFF0000, 1);
   g.drawRect(0, 0, 100, 100);
   g.endFill();
   }
}
}
[/code]

수정한뒤에 다시 첨에 했던것처럼 컴파일.

그담에 생성된 swf 파일을 확인해보자.

예상한대로 빨간 사각형이 그려졌다.

음. 좋군. 클래스 만들기 별것 아니로구나.

도움글 :

http://livedocs.adobe.com/flex/3/html/help.html?content=Part2_DevApps_1.html

액션스크립트와 자바, C++ 용어비교

2010-02-23T18:07:00.000+09:00

액션스크립트	자바	C++
인스턴트 변수	필드 또는 인스턴스 변수	데이터 멤버
인스턴스 메서드	메서드	멤버 함수
static 변수	클래스 변수	static 데이터 멤버
static 메서드	클래스 메서드	static 멤버 함수

출처 : Essential ActionScript 3.0 (콜린 무크 저)

야훔.

2010-02-22T13:27:00.000+09:00

사실 야훔이라는 대화명. 혹은, 닉네임은 큰 이유가 있어서 만들어진게 아니라는 사실인 것은 눈치가 빠른 사람은 알고 있을지 모르겠다.

나의 아이디는 인터넷을 사용하기 시작한 1998년도부터 사용된 igna라는 것인데, "이그나"라고 발음한다.

히브리어로 "번개"라고 들었다.(사실확인유무는 거치지 않았으니 틀려도 상관없다)

실수로 한글 입력상태에서 igna를 타이핑하면 "ㅑ훔" 이라고 나오게 된다.

그래서 탄생한 닉네임 "야훔".

지금은 네이버 "플래시 액션스크립트" 카페에서 활동중이고

Flex, AIR, Flash를 주요 툴로 ActionScript 2.0 /3.0 을 사용한다.

주로 SI 사업에서 뛰다가 요즘은 솔루션 개발쪽으로 틀었고

경험했던 통신환경은 HTTP통신, Socket통신, RTMP통신(LCDS, BlazeDS) 등.

스터디 Team:FP(Flash Quick Crash Progress)를 운영중.

이정도면... 내소갠 끝난건가? ㅎ

Ajax가 리치 웹의 끝인가?

2007-09-24T12:12:00.000+09:00

상당히 오랜만의 RSS 검색에서 읽어본 누군가의 Ajax와 리치웹에 대한 포스팅을 읽었다.
요즘 내가 하는 고민중 하나였던
"아, 내가 무슨 언어를 집중해서 파야 할까?"
하는 것이엇다.
세상에 웹 2.0플랫폼을 갖고 만들어진, 혹은 바라보고 만들어진 언어들이 어림잡아도
5개, 6개.. 게다가 엑션스크립트나 Flex 2.0, MS에서 만들어진 Silverlight까지
브라우져기반 어플리케이션들이 속속 등장하는 찰나에
앞으로 5년간 웹 시장이 어떻게 변할지 거시적인 시야로 바라보기 힘들어졌다.
그런데 이 블로거는 내 걱정같은 걸 날려버릴 한가지 방법을 제시했는데.
"SW 엔지니어는 상황에 따라 다른 언어를 사용하는거다"
라는 것이다. 고로 모든 언어를 다 사용할 줄 알아야한다는 것.
사실 프로그래밍 언어라는 건 다 거기서 거기라 서로 다른 특징들을 조금만 알고 있으면
배우는 데는 어렵지 않다.
아래에 그 내용을 퍼왔다.
(물론 내가 본 내용과 이 사람이 이야기한 내용이 다를 수 있지만..)

http://channy.tistory.com/149

Ajax가 리치 웹의 끝인가?

Ajax, 리치웹 리치 웹 기술이 뜨고 있다. Ajax라고 하는 기술 접근을 통해 '소프트웨어 웹'을 구성하는 방법을 찾게 된 것이다. 아직도 MS guy들은 그걸 DHTML이라고 부르더라. DHTML과 Ajax의 차이는 무엇일까? 바로 공개 표준(Open Standards)과 공개 프레임웍(Open Framework)이다. 90년대 DHTML은 웹 브라우저의 상용 기술만 판쳤던 과거의 유물이다.

웹2.0 의 가장 큰 이득은 웹을 플랫폼으로 봐 주었고 그걸로 돈을 벌수 있다는 증명을 해 준 것이다. 웹 브라우저 안에 잡지 웹을 데이터 웹으로 끌어 내 준 것이다. 이제 웹 플랫폼 기업들은 웹 브라우저 기반 잡지 수준에서 머물기 보다 오픈 API와 데이터 플랫폼을 지향한다. Ajax가 바로 그 선상에 있다. 브라우저 밖의 웹, 소프트웨어 웹을 가르키고 있는 것이다. 즉, Ajax는 리치 웹을 향한 최초의 제대로 된 접근이지 끝이 아니라는 말이다.

LAMP(Linux+Apache+MySQL+PHP) 역시 기술에 대한 접근 방식이다. 즉, 오픈 소스와 빠른 웹 개발을 위한 경량 플랫폼의 성공을 말해 주는 것이다. 이와 마찬 가지로 Ajax는 기술 그 자체가 아니라 리치 웹을 위한 접근 방식이라는 것이다.

리치 웹 기술은 몇 가지 공용 기술을 기반으로 발전하고 있다. XML 기반 GUI 기술, 동적 언어(Dynamic Languages), CSS 그리고 Data API이다. 잠깐 살펴 볼까?

- Ajax : (X)HTML+CSS+ DOM+ JavaScript <-> Data API
- WPF/e : XAML+CSS+XBL+CLR(JavaScript/Ruby/Python) <-> Data API
- Flex: MXML+CSS+ActionScript <-> Data API
- Widget: HTML(Canvas)+ CSS+ JavaScript <-> Data API
- Firefox: XUL+CSS+JavaScript(XPCOM) <-> Data API
- WHATWG: HTML5 + CSS+ DOM+ JavaScript <-> Data API

많 은 사람들이 Ajax, WPF/e, Apollo(Flex), HTML5 중에서 무엇을 공부해야 될 것인가를 나에게 물어 본다. 리치 웹 기술은 클라이언트 기반의 새로운 기술 셋을 제공하고 있다. 이 분야는 그동안 등한시 하였던 (서버 기반 개발자도 참여하고 있지만) 웹 디자이너, HTML 코더, UI 개발자 등이 관여해야될 문제이다.

SW 엔지니어들은 그들이 사용하는 언어(Langauge)에 구애 받지 않는다. 자바를 쓰든 PHP를 쓰든 적절한 상황에 적절한 언어를 통해 개발을 할 뿐이다. 프로토 타입에 RoR을 쓰고 실 서비스에는 Java를 쓰더라도 백엔드 SW에는 PHP나 Python을 사용하는 게 생산성이 높듯이 말이다.

따라서 리치 웹 개발자들도 기술 종류에 구애 받지 않고 자유 자재로 원하는 요구 사항에 적절한 기술을 사용할 것을 요구 받을 것이다. 리치 웹 벤더들은 공개 기술을 제공하기 시작했고 그것이 원하는 목표에 맞기 때문에 현재의 상황은 매우 희망적이라고 생각한다.

Ajax가 가르키는 손가락을 보지 말고 소프트웹어 웹(Software Web)이 가르키는 미래를 바라봐야 할 것이다.