머드초보의 블로그

Adobe AIR 2.0 Beta가 Release되었네요.
Adobe AIR Team 블로그 글 - http://blogs.adobe.com/air/2009/11/adobe_air_2_beta_now_available.html

릴리즈노트는 여기서 - http://labs.adobe.com/wiki/index.php/AIR_2:Release_Notes#Overview

저의 짧은 실력의 릴리즈 노트를 보면......-_-

1. 해당 파일에 대한 기본 애플리케이션으로 지정된 프로그램을 실행할 수 있습니다. 이게 뭔 얘기냐면 doc파일이 word에 지정되어있으면 doc파일을 열어서 word를 실행할 수 있는 기능인 듯-_-

2. 마이크 데이터 엑세스. 마이크 데이터를 저장하고 뭐 삽질할 수 있나봅니다.

3. 대용량 저장소에 대한 발견이 가능해졌는데요. 예를 들어 USB를 연결하게 되면 그걸 AIR프로그램에서 인식할 수 있습니다.

4. 업데이트된 WebKit version. air에서 사용하는 브라우저엔진이 그냥 업데이트 됐다는 것 같은.....

5. 글로벌 에러 핸들링은 뭐지.....

6. 새로운 네트워크 지원. AIR프로그램이 서버프로그램이 될 수 있게 ServerSocket을 지원하네요. 그 외에 UDP랑 TLS/SSL도 지원한다고 써있지만, UDP빼곤 잘 몰라서-_-
아.....네트워크 인터페이스 목록이라는 부분은 그거 같은데, 네트워크 정보를 얻어올 수 있는 그런거. 맥어드레스같은 거 AIR에서 못 읽어왔는데, 읽어올 수 있나봅니다.

7. EXE파일의 PACKAGING이 가능. 원래 AIR파일이 나오는데, 이제 exe파일로도 패키징을 할 수 있습니다.

8. native process API. 이건 다른 프로그램을 AIR프로그램이 실행할 수 있는 API인데, 조금 삽질해보니 제약이 좀 있음. 패키징할 때 지정한 것만 되는 것 같음. 좀 더 삽질을 해봐야할 듯 ^^ 암튼, 프로그램을 제약적이지만 실행할 수 있어요.

9. 데이터베이스 트랜젝션 어쩌구 하는데 잘 모르겠음

다 적으려니까 디게 많네.....-_-
그냥 그외에, 향상된 IPv6을 지원하고, Native Window의 최대사이즈를 증가시켰고, 멀티터치지원하고, IME향상시켰고....영어공부해야겠다.

구축하기에 앞서 Flash Builder 4 Beta 2 다운로드

1. 개발환경 구축
사실 개발환경 구축이라고 하기에는 너무나 간단하지만....-_- 그냥 AIR SDK받아서 Flash Builder 4가 설치된 폴더 안에 있는 sdk에 덮어 씌우면 됩니다.
우선 Adobe AIR 2 Beta SDK와 Runtime 다운로드 - http://labs.adobe.com/downloads/air2.html
받은 sdk파일 (air2_b1_sdk_win_11709.zip)을 Flash Builder 2 sdk폴더에 압축을 덮어씌워서 풀어버립니다. 저의 경로는 아래와 같군요.
C:\Program Files (x86)\Adobe\Adobe Flash Builder Beta 2\sdks\4.0.0

2. 개발하면 돼요-_-

3. 예제 작성
[code]<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/halo"
                       width="500" height="500"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import flash.events.StorageVolumeChangeEvent;
            import mx.events.FlexEvent;

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                StorageVolumeInfo.storageVolumeInfo.addEventListener(StorageVolumeChangeEvent.STORAGE_VOLUME_MOUNT, mountHandler);
                StorageVolumeInfo.storageVolumeInfo.addEventListener(StorageVolumeChangeEvent.STORAGE_VOLUME_UNMOUNT, unmountHandler);
            }
           
            private function mountHandler(event:StorageVolumeChangeEvent):void
            {
                trace(event.rootDirectory.nativePath);   
                taInfo.text += "drive = " + event.storageVolume.drive + ", type = " +
                    event.storageVolume.fileSystemType + ", name = " + event.storageVolume.name + "\n";
            }
           
            private function unmountHandler(event:StorageVolumeChangeEvent):void
            {
                taInfo.text += event.rootDirectory.nativePath + " 제거됨\n";
            }
        ]]>
    </fx:Script>
    <s:TextArea id="taInfo" x="6" y="10" width="484" height="480" verticalScrollPolicy="on"/>
</s:WindowedApplication>[/code]

핵심은 StorageVolumeInfo클래스랑 StorageVolumeChangeEvent클래스입니다. 그냥 MOUNT, UNMOUNT이벤트 걸어주면 지가 알아서 다함^^
참조사이트
http://www.adobe.com/devnet/air/flex/articles/exploring_file_capabilities.html

문서를 보니..... 향상된 것인지 아님 기능이 더 추가되고 복잡해진 것인지 모르겠군요-_- 익숙해지면 편하겠지만, 지금은 현재 Flex3방식의 state가 더 편해보이네요-_-

예전에 어도비에서 RIA CAMP할 때 STATE기능의 향상이 있을 것이라고 해서 찾아보니 완전히 바뀌었네요.

우선 Flash Builder 4 Beta 2를 다운로드 해서 설치를.....ㅠㅠ

플래시 빌더4 Beta 2 다운로드

기존 Flex3 방식은 <mx:states> 태그안에 <mx:State>태그가 있는데, 이 안에서 AddChild나 SetProperty태그를 이용해서 해당 state로 변경이 되면 컴포넌트를 삭제하고 추가하거나 값을 변경하는 코드가 들어갔었죠.

Flex4 방식은 위와 같은 방식에서 완전히 바뀌었습니다(사실..flex4로 오면서 거의다 바뀌었다는....).
<s:states>태그안에 <s:State>태그가 들어가는 것은 같지만, 여기서 컴포넌트를 추가하거나 변경하는 코드는 들어가지 않습니다. 그냥 다음에 xml코드에서 해당 컴포넌트들에게 적용을 하게 됩니다. 컴포넌트 태그에 해당 state값에 맞는 코드를 중복으로 선언할 수 있습니다.
해당 State의  Name들이 default, register라면 <s:Panel title="제목" title.register="등록제목" /> 이런형태로 써버리면 currentState가 register로 바뀌면 자동으로 Panel의 title이 title.register값으로 변경이 되게 됩니다.

상세한 기능 및 설명은 Flex 4문서를 보시는 게 더 빠를 듯 합니다.
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf69084-7fb4.html
http://www.artima.com/articles/flex_4_states.html

1. 디자인모드에서 state설정
그럼 Flash Builder를 실행해서 여기서 State를 설정해봅시다.
Flex로 프로젝트를 하나 만듭니다.
Design모드로 전환!
오른쪽 States View가 있는데, 거기에서 New State를 선택해서 추가합니다.
addbutton이라는 state를 추가합니다. 그리고 기존에 있던 State1은 default로 변경합니다.
그럼 states를 addbutton으로 맞춰놓고, 버튼을 드래그해서 놓습니다.
그리고 Source뷰로 바꾸면 이런 코드가 완성이 되네요^^
[code]<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
    <s:states>
        <s:State name="default"/>
        <s:State name="addbutton"/>
    </s:states>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button includeIn="addbutton" x="308" y="231" label="Button"/>
</s:Application>[/code]
Button에 includeIn이라는 attribute값이 들어가있고 거기에 state값이 있네요. 이 버튼은 addbutton일 때만 보이겠다는 것이죠. 아마 이 새로 바뀐 state형태는 기존 ui를 구성하는 mxml코드를 최대한 방해받지 않게 하려고 만든 것 같습니다.
그리고 재미있는 것은 편집 상단에 Show state: 부분이 있는데, state를 default로 바꾸면 button태그부분이 회색으로 dim처리가 되어버립니다-_- 와 멋지네요. UI작성에 방해받지 않게 하려는 배려인 듯.
2. STATE별 이벤트 추가
state별 이벤트 뿐만 아니라 뭐 다양하게 추가할 수 있어요.
Design모드에서 그냥 addbutton state선택하고, 아까 추가한 버튼을 누르면 Properties를 설정할 수 있는데 In states를 클릭해서 All States로 바꿔줍시다^^
그러면 default에서도 나오는데, 버튼선택해서 오른쪽버튼 누르면 generate Service Call이라는 것이 있는데, 그걸 누르면 자동으로 click이벤트 함수를 만들어줍니다.
두개의 state에서 동시에 만들어버리면 이렇게 나오는군요.
그 외의 자세한 기능은 문서를 참조하면 돼요. 문서에 샘플예제가 참 잘 나와 있습니다. Flex의 장점은 잘 된 문서화(?)가 아닐까합니다. 한글화가 안되어있는 것이 아쉽긴 하지만....ㅠㅠ

빌더는 여기서 다운로드를...ㅠㅠ

플래시 빌더4 Beta 2 다운로드

기존에 Flex3에서 HTTPService는 직접 xml을 확인하여 valueobject를 만들던지 자동으로 파싱해주는 객체를 그냥 쓰던지 그런식으로 했었는데요. Flex4에서는 쉽게 Service객체를 만들어주고, ValueObject를 만들어줍니다.

근데, 그냥 기존방식을 쓰는 게 나을 것 같아요-_- 뭔놈의 클래스를 뭐이리 만들지-_-
그래도 제공하는 기능이니까 한번 사용해서 만들어봅시다-_-

다운로드는 여기서....-_-

플래시 빌더4 Beta 2 다운로드

1. 프로젝트 생성
New -> Flex Project -> Application type은 Desktop(구글의 httpservice를 가져올 것이어서 데탑으로-_-) -> Finish.

2. 서비스생성
구글에서 날씨를 가져오는 Service를 추가해봅시다.
아래 Data/Services탭에서 Connect to Data/Service..클릭.
HTTP선택 -> Opearation 첫번째 항목에 getWeather로 변경. url은 http://www.google.co.kr/ig/api?weather=seoul 입력.
url만 입력하면 ?붙은 파라메터는 자동으로 Parameters탭에 들어갑니다. weather가 들어가는데, 캐쉬문제 때무넹 캐쉬파라메터도 하나 추가합니다.
Add누르고, cache입력하고, DataType은 Number.
Service name은 WeatherService로 하죠. Finish.

여기서 이름 네이밍룰에 주의해야하는데, Service name이랑 parameter name이랑 같은 게 있으면 안됩니다. 에러나더군요.

3. 서비스에 대한 리턴타입 지정
이제 리턴타입을 지정해줘야하는데요.
그전에 데이터를 잘 가져오는지 테스트를 해볼 수 있습니다.
방금 생성한 WeatherService의 getWeather를 선택하고 오른쪽버튼 누르면 Configure Return Type이 있습니다.
이거 선택하기전에 Test Opearation이라고 해서 테스트를 해볼 수 있는 게 있네요.
테스트를 쉽게 해볼 수 있어서 참 좋네요. Test를 누르면 데이터를 가져와서 Tree View 또는 Raw View로 볼 수 있습니다.
근데, 이상한 점을 발견했는데, 네이버오픈API나 몇몇 XML은 이걸로 하면 잘 안돼요. 왜그런지 모르겠네요. 이런 에러메세지를 뿜습니다.
InvocationTargetException:The response is not a valid XML or a JSON string
이거 왜그런지 아시는 분은 답변좀....굽신굽신....-_-

암튼, 날씨API는 되니까 해봅시다-_-
Configure Return Type선택 후, Auto-detect the return type from sample data선택. 뭐 그냥 object로 받아도 되는데, 필요한 데이터만 가져온다고 하면 쉽게 valueobject를 만들 수 있는 장점이 있어요.
파라메터 방식을 선택하고, seoul을 입력합니다.
그러면 결과값이 나오는데, 여기서 필요한 건 현재 날씨이기 때문에 select root에서 current_conditions를 선택합니다. 그리고, Finish를 누르면 valueObject가 만들어지는데, 한개의 node마다 클래스가 2개씩 생겨요-_-

4. UI생성
UI를 만들어봅시다.
[code]<s:Button id="btnClose" label="X"  width="29" x="67" y="1" click="btnClose_clickHandler(event)"/>
<mx:Image x="6" y="32" width="40" height="40" id="imgIcon"/>
<s:Label x="0" y="80" width="100" textAlign="center"  id="labelCondition" />
<s:Label x="59" y="45" text="30º" fontSize="20" id="labelTemp"/>[/code]
초간단 UI...UI라고 불리지도 못하는 UI.

5. 데이터 바인딩
이제 데이터를 불러와야해요.
Design모드로 가서 아무라벨이나 붙잡고, 오른쪽버튼 눌러서 Bind To Data를 선택. 그리고 방금 만든 서비스를 바인딩해요. 전 labelCondition을 선택했는데, 그러면 WeatherService, getWeather의 condition을 선택합니다.
그러면 service태그도 알아서 들어가고 해당 라벨에는 creationComplete이벤트핸들러가 추가되었네요.
getWeather파라메터는 "seoul"과 cache는 랜덤값을 넣어줍니다.
그리고 실제 태그에는 condition.@data에 값이 있기 때문에, label의 text부분에 getWeatherResult.lastResult.condition.data로 변경해주시면 됩니다.
[code]protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
{
    getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
}[/code]

6. 완성된 코드
그럼 1분마다 데이터를 가져오는 타이머도 만들고 윈도우틀도 없애서 위젯형태로 만들어버리고, 나머지 label에도 값에 맞게 바인딩 시키면 완성이 됩니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/halo"
                       xmlns:weatherservice="services.weatherservice.*"
                       width="150" height="150"
                       applicationComplete="windowedapplication_applicationCompleteHandler(event)"
                       showStatusBar="false"
                       backgroundColor="#48FF00">
    <fx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import flash.events.TimerEvent;
            import flash.utils.Timer;
           
            import mx.controls.Alert;
            import mx.events.FlexEvent;
           
            import spark.components.mediaClasses.VolumeBar;
           
            private var timer:Timer;
           
            protected function windowedapplication_applicationCompleteHandler(event:FlexEvent):void
            {
                timer = new Timer(1000, 0);
                timer.addEventListener(TimerEvent.TIMER, timerHandler);
                timer.start();
            }
           
            protected function btnClose_clickHandler(event:MouseEvent):void
            {
                nativeWindow.close();
            }

            protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
            {
                requestData();
            }

            protected function labelTitle_mouseDownHandler(event:MouseEvent):void
            {
                nativeWindow.startMove();
            }
           
            protected function timerHandler(event:TimerEvent):void
            {
                requestData();               
            }
           
            private function requestData():void
            {
                getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getWeatherResult"/>
        <weatherservice:WeatherService id="weatherService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"/>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
   
    <s:Label id="labelTitle" text="서울날씨"  x="0" y="0" height="22" width="121" verticalAlign="middle" mouseDown="labelTitle_mouseDownHandler(event)"/>
    <s:Button id="btnClose" label="X"  width="30" x="120" y="1" click="btnClose_clickHandler(event)"/>
    <mx:Image x="25" y="47" width="40" height="40" id="imgIcon" source="http://www.google.co.kr{getWeatherResult.lastResult.icon.data}"/>
    <s:Label x="2" y="114" width="148" textAlign="center"  id="labelCondition"  creationComplete="labelCondition_creationCompleteHandler(event)" text="{getWeatherResult.lastResult.condition.data}"/>
    <s:Label x="92" y="58" fontSize="20" id="labelTemp" text="{getWeatherResult.lastResult.temp_c.data}ºC"/>
</s:WindowedApplication>
[/code]

7. Network Monitor로 데이터 확인
HTTPService 요청이 제대로 갔는지 확인할 수 있는 Network Monitor 기능이 추가되었습니다. 기존에는 확인하려면 직접 그냥 노가다로 해보거나 와이어샤크나 firebug 등의 http watcher를 이용해서 했었죠. 근데 이제 Flash Builder에 포함되어져있네요. 그냥 모니터링 하는거라 조금만 만져보면 알 수 있네요. row데이터로 볼 수도 있고, hex데이터로도 볼 수 있고 그러네요. 근데 한글이 깨지네-_-

아.....책은 오래전에 읽었는데, 이제야 서평을 쓰네요. 사실 실습도 안해봐서 내용도 다 까먹은 듯하지만, 불현듯 열이아빠님의 서평이벤트가 생각나서 글을 적어봅니다-_- 내일이 마감임 ㄷㄷ

우선 Flex어플은 그냥 기본으로 제공하는 스킨이 있는데요. 대부분이 그대로 쓰지 않습니다-_- 고객들이 싫어해요-_- 어쨌든 디자....

아놔....갑자기 회의 불려갔다왔네....

암튼, 디자인을 해서 입히고 그러는 작업이 추가적으로 들어가는데, 이거 해보면 해볼수록 스트레스가 만빵이에요. 왠지 디자인대로 안입혀지고-_- 어떻게 입히는지 모르겠고 그런 것이 많은데, 플렉스에 디자인을 입히는 방법을 알려주는 책입니다.
게다가 타 애플리케이션(플래시, 포토샵, 일러스트레이터, 파이어웍스 등)과 쉽게 협업을 할 수 있는 내용도 잠깐 나오구요.

이 책의 구조는 조쿰 특이합니다. 앞에 이론이 나오고, 뒤에 실습예제가 나오는....
즉 책의 앞부분서부터 절반은 이런식으로 하면 바꿀 수 있다가 나오고, 절반부터 뒷부분은 약간의 실습예제가 나옵니다. 왜 이런 구조를 택했는지 모르겠지만, 전 이 방식이 적응이 되지 않는군요. 왠지 이론을 설명하고 예제가 바로 뒷바쳐줘야 내용을 그나마 이해를 하는 스타일이라-_- 앞에서 이론을 다 읽고, 뒷부분 예제를 읽으려니 왠지 앞부분이 생각이 안나는군요 ^^

그리고, 뒷부분에 나오는 부록도 참 맘에 드네요. 각각 컴포넌트에 대해서 style속성에 대해서 그림을 통해 잘 나타내어주었구요. 그리고, 필터속성이나 유용한 사이트들도 잘 나왔구요^^

마지막으로 디자이너와 보면 참 좋을 듯 한데...디자이너들이 보기엔 Flex를 좀 알아야할 듯. 디자이너들과 함께 협업하는 그날까지~^^

테스트의 중요성은 저번 스프링 강의시간에 충분히 느꼈습니다. 하지만, 역시 귀차니즘 때문에 잘 안만들게 되는 게 테스트인 듯 합니다. 하지만, 한번 만들어놓으면 이래저래 매우 유용한 것이 테스트죠.

다운로드는 여기서....-_-

플래시 빌더4 Beta 2 다운로드

Java에서는 Junit이라는 것이 있는데, 4버전에서는 Annotation(@)을 이용해서 쉽게 테스트를 만들곤 했는데요. Flex에서도 비슷한 기법을 이용합니다. 메타데이터를 위에다가 붙여서-_- 손쉽게 테스트를 만들 수 있습니다.
[code][Test]
public function testMyTest():void
{
}[/code]
와....Flash Builder를 보면 Java를 많이 따라한 것을 볼 수 있습니다. 예전엔 폴더생성으로만 만들 수 있었던 패키지가 직접적인 패키지 생성메뉴를 만들어서 Package Explorer에서 패키지형태로 볼 수 있습니다.
암튼, 자바와 닮아가는 듯-_-

1. 간단한 프로젝트 생성
Flex Project하나 생성.

2. 서비스 클래스 생성
덧셈 뺄셈 클래스하나 작성
com.mudchobo.test패키지의 Calc클래스 생성
Calc.as
[code]package com.mudchobo.test
{
    public class Calc
    {
        public function Calc()
        {
        }
       
        public function addition(a:Number, b:Number):Number
        {
            return a + b;
        }
       
        public function subtraction(a:Number, b:Number):Number
        {
            return a - b;   
        }
    }
}[/code]

3. 테스트 생성
New -> Test Case Class -> New FlexUnit 4 test선택. Name은 CalcTest로하고 Finish.
CalcTest.as
[code]package flexUnitTests
{
    import com.mudchobo.test.Calc;
   
    import flexunit.framework.Assert;

    public class CalcTest
    {
        private var calc:Calc;
       
        public function CalcTest()
        {
        }
       
        [Before]
        public function before():void
        {
            calc = new Calc();   
        }
       
        [Test]
        public function testAddition():void
        {
            var result:Number = calc.addition(50, 50);
            Assert.assertEquals(result, 100);
        }
       
        [Test]
        public function testSubtraction():void
        {
            var result:Number = calc.subtraction(50, 50);
            Assert.assertEquals(result, 0);
        }
    }
}[/code]
여기까지 작성하면 FlexUnitCompiler.mxml이라는 파일이 자동으로 생겼을겁니다. 이건 건드리지 않습니다. 검색해보니 이전방식으로 core생성해서 UIListener를 넣어서 하려고했는데, 이거 그렇게 하는게 아니더군요-_-
심지어 UIListener클래스는 없습니다-_-

4. 테스트 실행
테스트 실행은 package explorer에서 테스트클래스의 오른쪽 마우스버튼을 누르면 "Execute FlexUnit Tests"라는 메뉴가 있습니다. 그걸 선택하면 테스트가 됩니다. FlexUnitApplication.mxml파일도 같이 생기는군요.
테스트단축키는 Alt + Shift + E, F입니다....-_- 해당 편집파일에서 누르면 됩니다.
테스트 결과는 Junit처럼 이렇게 보여줍니다.
Junit이랑 똑같네.

5. 테스트 Suite 생성
이건 테스트를 다 모아서 실행하는 건데, 통합테스트를 할 때 사용하는 듯-_-
New -> Test Suite Class -> New FlesxxUnit4 test 하면 include할 테스트를 패키지에서 선택할 수 있습니다. 선택 후 Finish.
SuiteTest.as
[code]package flexUnitTests
{
    import flexUnitTests.CalcSecondTest;
    import flexUnitTests.CalcTest;
   
    [Suite]
    [RunWith("org.flexunit.runners.Suite")]
    public class SuiteTest
    {
       
        public var test1:flexUnitTests.CalcSecondTest;
        public var test2:flexUnitTests.CalcTest;
    }
}[/code]
그냥 저렇게 선언해두고, 오른쪽버튼 눌러서 "Execute FlexUnit Tests" or 알트 + 쉬프트 + E, F하면 통합테스트를 합니다.

6. 그외의 기능
저도 더 써봐야 알 것 같은데, Flex는 이벤트기반이다보니 Async와 UI구조가 많은데요. Async구조도 손쉽게 테스트를 할 수 있습니다.
[code][Test(async,ui)][/code]
이런식으로 하면 될 듯 한데, 안해봐서 잘 모르겠네요-_-

참고자료
http://www.insideria.com/2009/05/flashbuilder4-will-support-fle.html
http://balajisridhar.wordpress.com/2009/10/05/flexunit-integration-in-flash-builders-new-awatar-in-beta2/