검쉰의 블로그 - 영원의 헤아림

[후기] 파워플(Powerfl) 킥오프 모임

검쉰 — Wed, 28 Apr 2010 10:13:47 +0900

강남 교보타워에 위치한 한국어도비 대회의실에서 파워플(Powefl) 킥오프 모임이 열렸습니다. (지용호님이 ACP라서 그런지 어도비 대회의실을 빌려 진행을... ) 간만에 지용호님 얼굴도 볼겸, 맹기완님과 처음 뵙고 인사도 나눌 겸 해서 구경을 다녀왔습니다. 거의 30명에 가까운 많은 분들이 평일 저녁에 모이셨습니다. ;)

발표중인 지용호님

화면에 잘 보시면 오신 분들이 보입니다. ;)

발표중인 맹기완님

파워풀(Powerfl)에 대한 이야기부터 해서 피와 살이 되는 좋은 이야기들도 들었습니다. 역시 가보실 잘 했던 것 같습니다. ;) 막판에 지용호님이 설문지를 주셔서 살짝 당황했습니다. 쪽지시험 수준이라... :^) 저 같은 하수에게는 너무나도 어려운 문제들만... ㅎㅎ

어떠한 분들이 참가하시고 진행이 될지는 아직 명확한 것은 없었습니다만, 잘 되면 정말 재미있는 놀이터(?)가 될 것 같습니다. 기대되네요 ;^)

(맥북으로 동영상도 촬영하시던데, 영상으로 공유가 될지는 모르겠습니다만, 저는 우선 사진 2장만 올리겠습니다 ^^)

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Flex] Flash Builder 4 의 약간의 불평불만

검쉰 — Sat, 27 Mar 2010 21:20:25 +0900

Flash Builder 4가 약속했던 것 보다 더 늦게 출시가 되었습니다. 그만큼 기대가 너무 컸던 것일까요? 좀 만져보니 한가지씩 맘에 안드는 것들이 눈에 보이기 시작하네요. 불평분자가 되는 것은 싫습니다만, 문제점에 대한 해결책을 찾는 좋은 방법은 다른 분들의 의견을 듣는 것이기 때문에 글을 작성해보겠습니다. 이 글을 읽으시는 분들께서도 버그나 불편한 점 등을 알려주시면 감사하겠습니다 ;)

1. Flash Builder 4가 단독형으로 설치는 잘 되었으나 플러그인 형식으로는 설치가 안되는 문제가 나타났습니다. 엉뚱하게도 Eclipse 의 버전문제로 이유가 모아졌었습니다. 하지만 엉뚱한 것을 원인으로 생각한 것이더군요. (앞서 포스트에서 말씀드렸던 것 같이 Beta 2 까지는 Eclipse Ganymede (3.4)를 기반으로 만들어졌습니다만, 정식판에서는 Eclipse Galileo (3.5)를 기반으로 만들어져있습니다. 기존의 Beta 판에서는 버전간 호환문제로 Ganymede 에 설치하기를 권유했습니다만, 정식판에서는 Galileo 기반이기때문에 Galileo 에 설치하셔도 상관없습니다. 저도 Galieo(3.5.2)에 설치를 하였습니다.)
설치가 안되는 증상은, 설치 진행시 설치진행 프로그래스바 1칸에서 정지되어버리는 것인데, 맹기완님도 동일한 문제로 단독버전을 설치하셨다고 하시더군요. 물론 아무런 문제 없이 설치 되시는 분도 계셨습니다. 설치 안되는 문제는 한글폴더명 때문이더군요. 지용호님 블로그에 정영훈님이 써주신 덧글을 보고 알았습니다. :-S
설치를 위해 설치파일을 실행하면 추출을 위해 아래와 같이 폴더를 지정하게 됩니다.

설치파일 추출

기본위치로 바탕화면에 폴더가 생성이 되는데, 저 한글 폴더명때문에 문제가 되더군요. 바탕화면이 아니라 c 드라이브에 바로 폴더생성해서 압축을 풀었더니 잘 설치가 됩니다. (웃기게도 단독버전또한 동일하게 바탕화면에 추출이 됩니다만, 설치에 문제는 없습니다. 왜 플러그인만 안되는지 모르겠네요.)

설치가 된 후에는 지용호님의 글에서 언급한 Run, Debug 버튼이 사라지는 문제는 저도 동일하게 나타나더군요. 글 참고하시면 좋겠습니다. 참고로 저는 Eclipse Classic 3.5.2 를 다운받아 설치하였습니다.

2. Flex Project 를 생성 시 Flex SDK 를 3.5를 설정하게 되면 아래와 같은 에러가 발생합니다.

Description Resource Path Location Type
unable to open 'C:\Program Files\Adobe\Adobe Flash Builder 4 Plug-in\sdks\3.5.0\frameworks\locale\ko_KR' 프로젝트 명 Unknown Flex Problem

이는 컴파일러 옵션에 '-locale ko_KR' 라는 명령행이 붙어서 나는 에러입니다. Flex 3.5 SDK 에는 locale 폴더에 ko_KR이 존재하지 않습니다. Flex 4.0 에는 ko_KR을 포함한 16개 언어에 대한 파일들이 존재하는데, 이때문에 기본적으로 '-locale ko_KR' 로 잡아주는 것 같습니다.

Flex Complier 설정

이를 '-locale en_US' 로 변경하여 주시면 에러는 나지 않습니다. (Flex 4.0 에 있는 ko_KR도 뭐 한글화는 안되있는 것 같긴 한데 말이죠...)

3. subversive 를 설치하면 빌더 먹통 된답니다. 저는 subclipse 만 써보았는데, 마찬가지 SVN을 위한 플러그인이라고 하더군요. 연찬익군이 알려줘서 알게 되었네요. 저는 실제 설치해본적이 없어서 ... =ㅂ= 아무튼 조심하시길;

4. 디자인뷰에서 'Show Surrounding Containers' 기능은 지원 안되는 걸까요?

3.5 SDK를 사용

4.0 SDK 를 사용

위의 이미지에서 볼 수 있듯, 3.5 SDK로 생성한 프로젝트에서는 해당 기능이 동작합니다만, 4.0 SDK로 생성한 프로젝트에서는 기능이 비활성화 되네요. 구현이 불가능한건지... 잘 쓰던 기능이라 아쉽네요.

5. Dynamic Help 가 정상동작하지 않네요. 연찬익군의 제보에 따르면 Beta2 에서는 정상동작하였다고 하는데 정식판에서는 제대로 동작하지 않습니다. 예를 들어 코드를 this.dispatch 라고 입력하였을 때 Dynamic Help 창에 아래와 같이 뜨게 됩니다.

Dynamic Help 화면

이때 dispatchEvent 를 클릭하게 되면 dispatchEvent 에 대한 정보가 나와야되는데, 도움말 메인 화면이 뜨네요; mx.core.UIComponent 나 Boolean 은 제대로 뜹니다. 일부 API 를 못찾는 것 같습니다.

엉뚱한 화면이 나오는 Help

Flash Builder 4가 정식출시 되었지만, 2% 부족한 모습이 눈에 보입니다. 좀 안타깝네요. =ㅂ=; 하지만 뭐 알아서 피해가야죠...;
다른 버그들이나 참고할 정보들이 알려지는 데로 해결책과 함께 업데이트 하도록 하겠습니다. 함께해요~

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Flex] Flash Builder4 에서 ANT 개발환경 구축하기

검쉰 — Thu, 25 Mar 2010 04:21:04 +0900

우선 Flash Builder 4가 정식 출시된 것을 환영합니다 ;) 아이콘이 책 모양으로 바뀌었네요. 기존에 Flex 4의 상징이던 회색 아이콘이 아니라 약간 맘에 안들기도 합니다만 ^^ 나름 봐줄만 하네요 ;)

Flash Builder 4 초기 실행 화면

본론으로 들어가보도록 하겠습니다.
아래의 이미지에서 확인 할 수 있듯, Flex Builder 3 와 마찬가지 Flash Builder 4 에서도 ANT를 지원하지만, 동일하게 JDT는 없는 관계로 Flash Builder 4에서도 JDT 및 기타 플러그인을 설치하여야 합니다. (설치하면 아래의 이미지에서 ANT View 가 나오겠죠?)

ANT View 가 없군요!!!

Flash Builder Beta 2까지만 하더라도, Eclipse 3.4^[각주:1] 버전을 기반으로 제작이 되었던 터라, 기존의 방법으로 JDT 를 설치할 수 있었는데요, Flash Builder 4 가 정식버전으로 나오면서 Eclipse 3.5^[각주:2] 를 기반으로 제작이 되어있는 관계로 JDT를 설치하는 방법이 조금은 달라졌습니다. 저처럼 헤매는 분들을 위해 포스트를 남겨봅니다.

Flash Builder 4의 Help 메뉴에서 Install New Software 를 선택하게 되면 아래의 이미지와 같은 화면이 나옵니다. Eclipse 의 경우 기존의 방법과 마찬가지로 'The Eclipse Project Update' 같은 항목을 선택하여 JDT를 설치가능 했습니다만, Flash Builder 4 에서는 해당 항목이 기본적으로 존재하지 않습니다. 아래의 이미지에서와 같이 'Add' 버튼을 눌러 항목을 추가하도록 하겠습니다.

'Add' 버튼을 눌러 항목을 추가

이때 Site는 아래의 이미지와 같은 접속정보를 넣도록 하겠습니다.
Name : The Eclipse Project Updates
Location : http://download.eclipse.org/eclipse/updates/3.5

Site 입력

이렇게 추가가 되면 아래와 같이 해당 항목이 선택이 되며 잠시 뒤 설치할 수 있는 항목들이 나타나게 됩니다. 이때, Flash Builder 4의 기반 Eclipse 버전은 3.5.1 인데 반해, 기본적으로 최신 버전을 설치하려고 할 것이기 때문에 (글 쓰는 시간 기준 3.5.2 버전이 최신) 아래의 'Show only the latest versions of available software' 체크를 풀어서 Eclipse SDK 3.5.1 버전을 설치하도록 하겠습니다.

Eclipse SDK 3.5.1 버전을 설치

위에서 Next 버튼을 누르게 되면 설치하게 되는 항목에 자세한 내용이 아래의 이미지와 같이 출력이 됩니다. 이때 ANT를 위해 필요한 것들은 1. JDT Plug-in Developer, 2. Java Development Tools 입니다.

Eclipse SDK 3.5.1 버전을 설치

라이센스 정책에 대해 수락하고 나면 바로 설치 가능합니다. 'Finish' 를 누르시죠!

설치하는 중입니다. 꽤나 오랜 시간이 걸리니 기다려보시기 바랍니다 ;)

설치가 다 되면 재시작을 묻는데 'Yes'를 눌러 재시작 하시도록 하겠습니다.

설치는 종료가 되었습니다. 그런데 문제가 있습니다. =ㅂ=;

Eclipse SDK 를 설치했더니 이클립스 처럼 되어버렸네요 :^( 이럴수가!!!!

아무튼 ANT는 잘 보이는 것을 확인 하실 수 있습니다. Eclipse 에 Plugin 형식으로 설치하는 것이 나을런지도 모르겠네요 ;^) 아마도 위의 필요한 플러그인만 따로 복사하면 될 것 같기도 합니다만... ^^;

Eclipse Ganymede (3.4) - http://www.eclipse.org/downloads/packages/release/ganymede/r [본문으로]
Eclipse Galileo (3.5) - http://www.eclipse.org/downloads/packages/release/galileo/r [본문으로]

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Flex] ASDoc 생성 (in MXML)

검쉰 — Tue, 09 Mar 2010 02:00:42 +0900

정말 오랫만에 글을 쓰는 것 같네요. ;) 먹고 살기 바쁜터라 통 블로그에 신경을 못썼습니다. 그래도 꾸준히 찾아주신 분들께 감사드립니다.

이번 포스트에서는 ASDoc을 위한 작업에 대한 Tip 과 MXML 에서 ASDoc 을 작성하는 것에 대해 알아보려고 합니다. 많은 분들이 아실 만한 내용입니다만, 정리하는 차원에서 작성해보겠습니다.

우선 ASDoc 을 생성하는 방법은 지용호님의 Flex 프로젝트 문서화 - ASDoc 사용하기 라는 포스트로 알아보시면 되겠습니다. 한번 작업해보시면 아시겠지만, 콘솔에서 asdoc.exe를 실행시켜 작업하는 것이 여간 불편한 것이 아닙니다. 이미 지용호님이 그에 따른 해법으로 ANT^[각주:1]를 이용하는 방법에 대해 Flex Builder 3에서 ANT 사용하기 포스트를 해두셨습니다. (짝짝짝) 저희는 그대로 읽기만 하면 됩니다. :)

위의 2개의 포스트을 읽고 실습해보셨다면 '이렇게 좋은 기능이!!!' 라고 감탄하셨지 모르겠지만, ASDoc Comment를 입력하는 것 자체가 사실 좀 귀찮기는 합니다. 물론 'Ctrl + Shift + D' 를 눌러 ASDoc Comment 구문을 자동생성 할 수 있는 있습니다만, @param, @return 등을 일일이 입력하는 것 자체가 상당히 귀찮습니다. 이때 유용하게 쓸 플러그인을 하나 소개합니다.

Flex Formatter 입니다. 이미 알고 계신분이 많을 것 같습니다. 예전에 sugo님 블로그인 Apollo9 에서 Flex Builder MXML/AS Code Formatter 라는 포스트로 소개되었던 플러그인인데요, Flex Builder 3에서 가장 아쉬운 기능인 소스코드 포멧팅을 지원해주는 매우 나이스한 플러그인입니다. 이 Flex Forrmatter가 upgrade 되면서 ASDoc 관련 기능들이 추가되었습니다. 자동으로 ASDoc Comment 를 추가해주는 기능입니다. 설치방법은 우야꼬님의 블로그에 Flex Formatter - FlashBuilder Plugin 라는 포스트로 소개가 되어있으니 참고하시면 되겠습니다. (Flex Formatter는 현재 글 쓰는 시간을 기점으로 0.7.1 버전이 최신입니다.)

Flex Builder 3에서 Flex Formatter를 설치하면 위와 같이 좌측상단에 아이콘들이 추가됩니다.

총 5개의 버튼이 나타나게 되는데 간단히 설명해보면 왼쪽에서 오른쪽으로 각 버튼들은 다음과 같은 기능을 합니다.

1. 파일 내에 설정값에 따라 ASDoc Comment 생성
2. 커서가 위치한 열에 ASDoc Comment 생성
3. 코드 포멧팅 적용
4. 들여쓰기 적용
5. 코드 재배치

1번 'Generate ASDoc comments for file' 버튼을 클릭하여 ASDoc Comment를 생성하여보도록 하겠습니다.

위와 같은 테스트코드를 작성 후 'Generate ASDoc comments for file' 버튼을 클릭하게 되면 아래와 같이 주석이 자동으로 생성되게 됩니다.

여기에 ASDoc 문서에서 볼 수 있게 설명을 아래와 같이 적어보도록 하겠습니다.

이렇게 작성된 클래스는 아래와 같이 ASDoc 파일이 생성됩니다.

위의 AS을 참고하여 생성된 ASDoc

하지만 아쉽게도 AS 파일에서만 지원되고, MXML에서는 아직 지원되지 않네요. ;-(

이번에는 MXML에서 ASDoc 를 생성하는 것에 대해 알아볼텐데요, MXML에서도 ASDoc Comment를 입력하면 ASDoc을 생성할 수 있습니다만, AS와는 달리 Class 수준의 Comment를 달수 없었다는 것이 문제였습니다. (위에서 '간단한 테스트용 클래스인 MyClass'라고 출력되는 부분) 부끄럽게도 그간 ActionScript로 작성된 라이브러리에만 ASDoc을 만들었터라 MXML에서는 ASDoc을 생성해보지 않아서 해결책 찾을 생각도 안해보았는데, 이번에 한번 해보려고 열심히 구글링~ 해보았더니 떡하니 이런 문서가 있더군요!

Flex 4 에서 해당 기능이 추가되었네요. 기존의 MXML의 Comment 방식이었던  과 구별하기 위해  (dash 3개)를 사용하게 정의하고 있네요. Flex Builder 3를 사용하시는 분들께서도 Flex 4 sdk 를 내려받으셔서 Flex 4의 asdoc.exe 를 사용하시면 위와 같이 MXML에서 Class 수준의 Comment를 입력할 수 있습니다. ;)

위의 MXML을 참고하여 생성된 ASDoc

Flash Builder 가 정식발매 된 후에는 당연한 듯 사용할 지도 모를 정보입니다만, 기록의 차원에서 정리하여보았습니다. ASDoc 관련 정보는 LiveDoc의 Using ASDoc에 잘 나와있으니 참고하시면 좋겠네요. ;)

자바기반의 빌드 자동화 툴. (http://ant.apache.org/) [본문으로]

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

2010년 티스토리 탁상달력 사진 공모전 참여

검쉰 — Mon, 16 Nov 2009 15:41:42 +0900

2010년에도 티스토리 탁상달력을 받기 위해~ 사진을 올려봅니다. ;) 사진은 블로그에서도 말씀드렸듯, 제주도에 여행다녀왔던 사진들입니다.
즐거웠던 기억이 한아름 담겨 있는 사진들을 공모전도 참여하고, 여러분께 보여드리고 싶어 포스트 하려고요. 감상해주세요~ ;)

섭지코지

용머리 부근 어딘가의 바닷가

산굼부리

김녕해수욕장 근처

내년에도 시간이 된다면 다시 가보고 싶네요 ;)
달력 꼭 주세요!! ㅎㅎ

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[Flex] Flex 에서 데이터의 사용

검쉰 — Fri, 30 Oct 2009 10:52:25 +0900

오랫만에 블로그 유입경로를 보다가 코리아몽키라는 분의 블로그를 알게 되었습니다. [Actionscript 3.0] 간단하게 만들어 본 XML to arrayColection 함수 라는 글에서 제 글을 인용하셨더라구요. ;) 위의 글 말미에 코리아몽키님이 가진 의문이 있으셔서 덧글을 달다가 덧글이 좀 길어질 듯 하여, 간만에 포스팅을 하려고 합니다. ;)

'왜 XML을 Object로 파싱하여 그 데이터를 처리하고 이용하는 방법에 대해서 정리된 자료가 없는 것인가?' 라는 의문은 다른 각도로 접근해봐야 할 것 같습니다. '왜 방법이 없는가'에서 'XML을 Object로 파싱하지 않고 사용할 방법이 있는가?' 라는 것으로 말이죠. 단도직입적으로 말씀드리자면, XML 을 받은 것을 Object 로 변환해야할 필요성이 크지 않다는 것입니다(꼭 필요한 경우도 있겠습니다만). 게다가 XML 그대로 사용하는 것도 가능하고 HTTPService를 이용하면 XML을 Object로 변환 한 결과를 바로 받을 수도 있기 때문입니다.

그럼 먼저 HTTPService 를 이용하여 다양한 형태로 결과를 받는 방법에 대해서 알아보겠습니다.

HTTPService 의 resultFormat
HTTPService에는 resultFormat 이라는 속성이 존재합니다. 이는 HTTP를 호출하여 받은 결과값을 어떤 식으로 파싱할 것인지에 대해서 설정하는 속성인데, 아래의 표와 같이 총 6가지로 설정 가능합니다.

`object`	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환합니다. (기본값)
`array`	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환되나, 최상위의 Object가 Array가 아니라 새로 생성된 Array의 첫 번째 아이템이 됩니다. 만약 makeObjectsBindable 속성이 true로 설정되어 있을 경우 최상위 Array는 ArrayCollection으로 반환됩니다.
`xml`	ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.
`flashvars`	ActionScript Object로 name과 value가 쌍으로 되어 있는(page=1) 텍스트를 파싱하여 반환합니다.
`text`	받은 그대로를 text로 반환합니다.
`e4x`	ECMAScript for XML(E4X)를 이용할 수 있는 ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.

resultFormat를 object나 array로 설정하면 Object로 변환된 XML 데이터(서버측이 전달해준)를 전달받게 됩니다. 따로 파싱할 필요가 없는 것이죠. 물론 e4x나 xml로 설정하여 XML로 받아와서 사용할 수도 있습니다. 또는 특정 프로토콜에 의해 생성된 데이터라면 text로 설정하여 String 으로 받은 다음 프로토콜에 맞게 파싱하여 사용할 수도 있을 것입니다. (마치 구분자를 이용하여 소켓통신시 데이터 전달하는 것과 같이)

Object로 파싱하여 사용

rss 구조 (이미지 클릭하여 보세요.)

object로 resultFormat을 설정하여 데이터를 받아오는 예제를 한번 보겠습니다.
본 블로그의 rss를 읽어서 DataGrid에 넣어주는 예제인데, 우선 RSS 정보를 읽기 위해 구조를 먼저 보면 (우측이미지 참조) channel이라는 노드의 하위에 블로그의 정보들(타이틀, 주소, 이미지정보 등)이 있고 포스트의 정보는 item 이라는 노드들에 들어있습니다.

예제에서는 이 item 노드들을 가져다가 DataGrid에 넣어줄 것입니다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	width="600" height="300" fontSize="12" creationComplete="{init()}" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" 
	borderStyle="solid">
	
	<mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="object"
		url="http://blog.flashplatform.kr/rss" 
		result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private function init():void
			{
				myHTTPService.send();	
			}
			
			private function resultHandler(event:ResultEvent):void
			{
				var rssData:Object = event.result.rss;
				var items:ArrayCollection = rssData.channel.item;
				
				myDataGrid.dataProvider = items;
			}
			
			private function faultHandler(event:FaultEvent):void
			{
				Alert.show("RSS 를 가져오지 못했습니다.", "알림");	
			}
			
		]]>
	</mx:Script>
	<mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/>
	<mx:Label y="10" text="resultFormat - object" right="10"/>
	<mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35">
		<mx:columns>
			<mx:DataGridColumn headerText="제목" dataField="title"/>
			<mx:DataGridColumn headerText="작성자" width="60" dataField="author"
				textAlign="center"/>
			<mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

위의 예제에서 resultHandler 메소드를 잠시 보시면 위에서 말한 item 노드들을 찾아서 DataGrid 에 넣어주는 구문을 보실 수 있으십니다. 위의 rss의 트리구조와 같이 Object 로 파싱되어 있기 때문에 동일하게 rss.channel.item 이런 식으로 item 을 읽어오고 있습니다. (하단 이미지 참조)

Object로 받아온 데이터

XML 그대로 사용하기
Flex의 DataGrid, Tree 와 같이 자주 사용하는 컴포넌트의 설계적 특성상 Object 혹은 XML 중 어떤 하나가 더 빠르다는 이야기는 둘째 치고라도 위의 예제같은 경우는 XML을 그대로 사용하시는 것이 오히려 개발 시에는 편할 수도 있습니다. 왜냐하면 resultHandler에 구현된 로직때문인데, resultFormat 속성을 e4x로 설정하여 결과로 받은 XML은 E4X를 사용할 수 있기 때문입니다. E4X에 대한 설명은 생략하도록 하겠습니다. 간단한 E4X에 대한 예제는 여기를 참고하세요.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	width="600" height="300" fontSize="12" creationComplete="{init()}" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" 
	borderStyle="solid">
	
	<mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="e4x"
		url="http://blog.flashplatform.kr/rss" 
		result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private function init():void
			{
				myHTTPService.send();	
			}
			
			private function resultHandler(event:ResultEvent):void
			{
				var rssData:Object = event.result as XML;
				
				myDataGrid.dataProvider = rssData..item;
			}
			
			private function faultHandler(event:FaultEvent):void
			{
				Alert.show("RSS 를 가져오지 못했습니다.", "알림");	
			}
			
		]]>
	</mx:Script>
	<mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/>
	<mx:Label y="10" text="resultFormat - e4x" right="10"/>
	<mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35">
		<mx:columns>
			<mx:DataGridColumn headerText="제목" dataField="title"/>
			<mx:DataGridColumn headerText="작성자" width="60" dataField="author"
				textAlign="center"/>
			<mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/>
		</mx:columns>
	</mx:DataGrid>
</mx:Application>

resultFormat 속성을 e4x로 설정하고, resultHandler 메소드에서 e4x를 사용하여 간단하게 item을 DataGrid에 넣도록 구현하였습니다. 위의 예제와 비교하여 보셔도 크게 다른 것은 느끼지 못하실 것입니다. 오히려 위의 예제에서는 item 노드를 찾기가 훨씬 쉽게 되어있죠.

XML로 받아온 데이터

개발자 마다 스타일에 따라 차이는 있겠습니다만, 저의 경우는 HTTPService를 이용하는 어플의 경우 XML을 기반으로 데이터를 운용하고 있고, RemoteObject의 경우에는 VO를 기준으로 데이터를 운용하고 있습니다. 아무래도 HTTPService를 사용하는 경우는 서버와 주고받는 데이터를 XML기반으로 움직이는 것이 E4X 때문에 무지 편한 느낌이라.. ;^)

다른 분들은 어떻게 데이터를 운용하시는지 저도 궁금하네요. ;^) 트랙백 부탁드립니다.

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

비주얼 플렉스 UX 디자인 (Creating Visual Experiences with Flex 3.0)

검쉰 — Fri, 11 Sep 2009 11:51:54 +0900

간만에 책 추천해드리려고 합니다 ;)

'Creating Visual Experiences with Flex 3.0' 이 '비주얼 플렉스 UX 디자인' 라는 이름으로 번역되어 예약판매중입니다. 저는 이 책을 읽다가 난감함에 빠져버렸습니다. '어 이건 나만 알고 있었던 것 같은데...' 같은 생각들이 계속 들더라고요. ;-( 혼자만의 테크닉이라고 생각했던 것들이 책에 나오고 있으니 책은 좋은데, '이거 왠지 아깝다' 라는 생각도 들고요. :-) (물론 대단한 것들은 아닙니다 ㅎㅎ)
생각지도 못했던 테크닉들도 있고 참신한 방법들도 많아 책을 읽는 내내 재미있었던 기억이 나네요.

번역은 '열이아빠'라는 닉네임으로 활동중이신 이준하님께서 고생해주셨어요. 저는 별로 도움 안되는 베타리더로 활동할 수 있어서 번역하신 원고도 재미있게 읽고, 원서도 선물 받았답니다. (감격!)

Flex 라는 것이 아무리 지지고 볶고 하더라도 Client Side 라는 사실은 변함이 없습니다. 아무리 내부코드가 멋지고 훌륭하게 작성되었다고 하더라도 사용자가 느끼는 것은 UX라는 것이죠. (약간의 처리속도 차이도 있겠군요) 운영체제인 Windows (95,ME, XP,Vista, 7)가 새로나올때마다 사용자들은 '우와 이쁘다' 라는 감탄사를 내뱉었을뿐 실제 내부는 어떻게 되었는지 궁금해하지는 않았죠 ;)

Flex 또한 마찬가지, UX 로 평가받는 것이기때문에, 이 책이 아주 훌륭하다고 할 수 있겠습니다. 보다 훌륭한 UX를 가진 어플리케이션을 작성하는데 있어서 필수적으로 알아야 될만한 것들로 가득차 있습니다. 베타리더로 읽어본 것이 전부라, 실제 책의 편집상태 등의 상황은 제가 알 수 없으나, 에이콘 출판사에서 나오는 책이니 만큼 깔끔하게 해주실 꺼라 믿어 의심치 않습니다.

원서와 번역서 크기 비교

원서

번역서

번역서를 받고 궁금해하실 분들이 있으실 것 같아서 원서와 비교사진을 찍어봤습니다. (노이즈는 양해를..) 원서처럼 깔끔하게 나와서 좋네요. 레이아웃도 깔끔하니 잘 나온 것 같습니다. 다음에 Flex 디자인 관련 강의를 이 책으로 해보려고 합니다. 깔끔하니 참 좋게 나왔더라고요 ;)

번역하신 열이아빠님께서 블로그에 예약판매 이벤트를 하고 있으시니 도전해보시는 것도 좋을 것 같습니다 ;) 예약판매 이벤트는 종료되고 서평 이벤트를 계획중이시다고 하시네요 :) 책 구매하셔서 읽어보시고 서평이벤트를 노려보시는 것도...

번역하신다고 고생하신 열아아빠님께도 감사의 인사를 드려요~ 책을 번역한다는 자체는 일종의 '봉사정신'이 없고서는 힘든 일이죠. (영어에 무척 약한 저로써는 감히 손대지도 못할 일이지만,) 그 많은 페이지들을 읽고 고민하면서 번역한다는 것. 게다가 직장생활하시면서 주업무도 바쁘실텐데, 퇴근후 시간을 쪼개서 열정을 가지고 하셨다는 것. 정말 '봉사정신'이 없다면 못할 일입니다. 정말정말 고생하셨습니다 ;)

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[근황] 검쉰 살아있습니다 ! ;)

검쉰 — Fri, 04 Sep 2009 00:26:02 +0900

안녕하세요? 그동안 블로그에서 한참을 인사를 못드렸네요.
다들 잘 지내셨을꺼라 생각합니다 ;)

그동안 프로젝트 막바지여서 상당히 정신이 없었던 관계로 블로그에 신경을 못썼습니다 :-(
얼마전 프로젝트 종료 후 이제 아주 Free 해 졌어요 ;) 마음이 편해지니 세상이 맑아보이는 효과가 있더군요 ㅎ

강의를 또 진행합니다. 부족한 실력이지만 한달전에 Flex 강의를 맡아서 진행하였는데, 이번에도 동일하게 다음주 주말부터(12일) 동일하게 주말강의를 진행합니다. (지난번 강의때 열심히 들어주셔서 감사했습니다. 질문이 있으시면 메일로 꼭 연락주세요!)
그리고 주말에 시간을 못내시는 분들을 위해 21일부터 주중 저녁 7시부터 10시까지 저녁강의를 하나 더 진행하게 되었어요. 구로 근처에 직장다니시는 분들이 들으시면 좋을 것 같네요 ;) 자세한 내용은 위의 링크를 눌러서 확인해주시면 되겠습니다.

저는 여러모로 더더욱 열심히 준비하고 강의하겠습니다 ^^;

남는 시간에는 그동안 못했던 위의 Flash Builder4와 Flex4, 그리고 Catalyst 공부도 좀 하고, 여행도 다녀올 생각입니다.
아쉽게도 기술 포스팅은 지금까지 마찬가지 당분간 쭈욱 없을 것 같아요 :) 죄송합니다 ^^;;;
열심히 Flex4 공부해서 아는게 생기면 그때 포스팅 하도록 하겠습니다.

그리고 염장소식. 다음주에는 제주도로 떠납니다! ;)

김녕 해수욕장 근처 어디~ photographed by 연월

푹 쉬고~ 돌아오겠습니다 ;)

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

[ActionScript] Array를 왜 Hash로 쓰나요? Object 놔두고.

검쉰 — Wed, 01 Jul 2009 10:16:49 +0900

Flex3 in Action 이미지 출처 : 강컴

ActionScript에서 배열은 Array 를 사용하게 됩니다.
Java 와 달리 동적배열이어서 크기를 정하지 않고 임의대로 push, pop 등의 메소드를 통해 편리하게 사용할 수 있습니다. (Java에서는 ArrayList를 사용하시면 편리하죠!)

얼마전에 읽었던 Flex3 in Action 에 보면 'Working with ActionScript' chapter에 Array에 대해서 설명하고 있는데요, 여기에 다름과 같이 배열에 대해서 정의를 하고 있습니다.

1. Indexed arrays
2. Associative arrays

1번 Indexed arrays 는 우리가 흔히 사용하는 Array를 말합니다. 숫자 인덱스를 가지고 다음과 같이 값에 접근을 하게됩니다.

그리고 2번 Associative arrays는 흔히 연관배열 또는 해시(Hash)라고 부르는 배열로 key 값을 가지고 접근하게 됩니다. 책의 예제는 다음과 같습니다.

위의 예제는 이상없이 잘 동작합니다만, ActionScript 에서 연관배열(해시)를 위와 같이 사용하면 안됩니다.
그 이유는 Livedocs 에 잘 나와있습니다.

Array 클래스를 사용하여 번호가 매겨진 요소 대신 명명된 요소가 들어 있는 데이터 구조인 연결 배열(해시) 을 만들지 마십시오. 연결 배열을 만들려면 Object 클래스를 사용해야 합니다. ActionScript에서 Array 클래스를 사용하여 연결 배열을 만들 수는 있지만 이렇게 하면 연결 배열에 Array 클래스 메서드나 속성을 사용할 수 없습니다.

Livedocs 에서 발췌

ActionScript 에서는 Object 클래스를 이용하여 해시를 구현하라고 설명하고 있습니다. 물론 Object가 모든 클래스의 기본이 되기때문에, Array를 이용하여 연관배열(해시)를 만들 수는 있습니다. 하지만 해당 클래스를 만든 의미가 없어지죠. Array는 index를 이용한 배열로 설계된 것이기 때문입니다. 예를 들어 임의로 인스턴스화 시킬 수 있는 Sprite 객체를 연관배열로 사용한다는 것은 정말 황당한 일이라고 할 수 있겠습니다. 해당 목적에 맞게 사용해야 된다는 것이죠 ;)
아래에 Object로 연관배열을 사용하는 방법에 대해서 발췌했습니다.

Object 클래스를 사용하여 연결 배열을 만들 수 있습니다. 기본적으로 연결 배열은 Object 클래스의 인스턴스이며 키-값 쌍은 각각 속성과 속성 값으로 표현됩니다. 결합적 배열을 Object 데이터 유형을 사용하여 선언해야 하는 또 다른 이유는 이 경우 객체 리터럴을 사용하여 결합적 배열을 채울 수 있기 때문입니다. 단, Object 데이터 유형으로 선언하는 경우에만 가능합니다. 다음 예제에서는 객체 리터럴을 사용하여 연결 배열을 만들고 도트 연산자와 배열 액세스 연산자를 사용하여 항목에 액세스한 다음 새 속성을 만들어 키-값 쌍을 새로 추가합니다.

Livedocs 에서 발췌

위와 같이 Object를 이용하여 연결배열(해시)를 만들수 있습니다.
그리고 추가적으로 해당 값의 키(Key)값을 다른 객체로 하기 위해서 ActionScript 3.0에서는 Dictionary 클래스를 제공합니다.

Dictionary 클래스를 사용하면 키 비교에 완전 항등 연산자(===)를 사용하는 동적 속성 컬렉션을 만들 수 있습니다. 객체를 키로 사용하는 경우 객체에 toString()을 호출하여 반환되는 값이 아니라 객체의 ID가 객체를 찾는 데 사용됩니다.

다음 명령문은 Dictionary 객체와 키 객체 사이의 관계를 보여 줍니다.

var dict:Dictionary = new Dictionary(); var obj:Object = new Object(); var key:Object = new Object(); key.toString = function() { return "key" } dict[key] = "Letters"; obj["key"] = "Letters"; dict[key] == "Letters"; // true obj["key"] == "Letters"; // true obj[key] == "Letters"; // true because key == "key" is true because key.toString == "key" dict["key"] == "Letters"; // false because "key" === key is false delete dict[key]; //removes the key

Livedocs 에서 발췌

실제 해당 클래스의 구현 목적대로 사용하여야 오동작을 막을 수 있습니다. 게다가 협업시에 큰 걸림돌이 될 수 도 있습니다.
이 글을 읽으시는 분들은 사용하시는 클래스가 구현된 목적대로 사용하고 계신가요?

좋은 하루 되세요 :-)

ps. 책이 한글판으로 발간된다는 소식은 없는데, 만약 된다면 위의 오류에 대해서는 수정해서 나왔으면 좋겠네요.
ps2. AS 한글문서에는 연관배열이 아닌 연결배열로 번역이 되어있더군요. 정확하게 무엇이 맞는지는 저도 잘 모르겠네요 :)

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

Flex 강의를 맡게 되었습니다. ;^)

검쉰 — Mon, 29 Jun 2009 09:00:00 +0900

감사하게도 오라클자바교육센터에서 Flex 주말 강의를 진행하게 되었습니다. :^)
과목명은 '전문가와 함께하는 Flex' 입니다. 제목이 너무 거창합니다만 ^^;; Flex를 처음 배우고자 하는 분들을 위한 강의입니다.
기본적인 Flex Builder 사용법에서 부터 각종 컴포넌트의 사용, 커스텀 컴포넌트 제작. 그리고 서버와의 통신등 Flex로 개발을 하기 위한 기본적인 지식과 노하우를 전해드리고자 합니다. 가능한한 실습위주로 강의를 진행하여 처음 Flex를 접하시는 분들께 많은 도움이 될 수 있게 하겠습니다.

자세한 일정 및 내용은 아래의 링크를 참고하시면 좋겠네요.
http://www.oraclejava.co.kr/oraclejavanew/curri/curri-45.html

오라클자바교육센터와는 제가 부매니저를 맡고 있는 Flex 동영상 강의 카페인, Flex4U 와의 인연으로 이렇게 강의까지 진행할 수 있게 되었습니다. 강의장이 구로디지털단지 쪽이라, 구로나 가산쪽에 근무하시는 분들이 수강하시기에 편하실 듯 합니다.

누군가에게 자신이 알고 있는 지식을 전한다는 것은 참 즐거운 일인 것 같습니다. 설명을 하면서 오히려 제가 더 도움이 되기도 하고, 강의 준비를 통해 잊고 있었던 것이나 몰랐던 사실들도 알게 됩니다. '배워서 남주나' 라고 하는 말이 있습니다만, '배워서 남주는' 일은 참 즐거운 일이죠.
2008년 초 'Adobe RIA World 2008' 행사때 ACC이신 엄진영님께서 세션을 진행 도중에 무대위에서 발표를 하는 건 정말 '짜릿짜릿' 하다는 말씀을 하셨었죠. 저도 강의장에서 많은 분들에게 강의할 것을 생각하니 벌써부터 '짜릿짜릿' 합니다 ;) 정말 기대되네요 ;-) 즐거운 경험이 될 것 같습니다.

좋은 하루 보내세요~ ;)

Creative Commons License

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.