머드초보의 블로그

초간단 방명록 시리즈~!-_-

예전에 포스팅한 Zend Amf사용후기- http://mudchobo.tomeii.com/tt/398
Zend Amf가 이번에 출시된 Flash Builder4 Beta에서 기능으로 포함되어있습니다. 사용하기도 더 편해졌구요. 설정 같은 것은 전혀 안해줘도 Flash Builder4가 알아서 다하네요.

우선 Flash Builder4 Beta를 설치해야합니다.(adobe.com 회원가입 후 받을 수 있음!)

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

New Flex Project -> Project Name은 FlexGuestBook, Application type은 Web, Server technology는 PHP!
Next하면 서버 셋팅을 해야하는데요. 우선 Apache와 Mysql깔려있다는 가정하에 진행!-_-
Server location에서 Web root는 htdocs위치, Root URL은 http://localhost.
Output folder는 냅둬도 돼요^^ 바로 Finish!

htdocs/FlexGuestBook-debug생기면 성공!

아...디비부터 만들어야겠군요.
[code]DROP TABLE IF EXISTS `mudchobo`.`guestbook`;
CREATE TABLE  `mudchobo`.`guestbook` (
  `idx` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `author` varchar(45) NOT NULL,
  `content` text NOT NULL,
  `date` datetime NOT NULL,
  PRIMARY KEY (`idx`)
);[/code]
그럼 PHP코딩해봅시다.
저같은 경우 NetBeans를 사용해서 하는데, 그게 정신건강에 좋아요-_- PHP는 NetBeans와 함께-_-
아까Web root에서 FlexGuestBook폴더를 만듭니다.
PhpClass파일을 하나 만듭니다.
GuestBookService.php
[code]<?php
class GuestBookService {
    private $connection;

    private function connect()
    {
        $this->connection = mysqli_connect("localhost", "root", "mudchobo", "mudchobo")
            or die(mysqli_connect_error());
    }

    public function getList()
    {
        $this->connect();
        $sql = "SELECT * FROM guestbook order by idx desc limit 0, 10";

        $result = mysqli_query($this->connection, $sql)
            or die("Query failed: " . mysqli_error($this->connection));

        $rows = array();
        while($row = mysqli_fetch_object($result))
        {
            $rows[] = $row;
        }

        mysqli_free_result($result);
        mysqli_close($this->connection);

        return $rows;
    }

    public function insert($author, $content)
    {
        $this->connect();
        $sql = "INSERT INTO guestbook (idx, author, content, date) VALUES (null, '" .
            $author . "', '" . $content . "', now())";

        $result = mysqli_query($this->connection, $sql)
            or die("Query failed: " . mysqli_error($this->connection));

        mysqli_close($this->connection);
    }
}
?>[/code]
클래스에 초간단 insert함수와 getList()함수가 있어요. 여기서 잠깐! NetBeans6.7의 새로운 기능-_-
쿼리문의 코드힌트가 가능해요!!! idx, author, content, date가 다보여요. guestbook 테이블명도 보이는군요.
뭐어쨌든, 이제 진짜 FlashBuilder로 가는거임.
FlashBuilder에서 하단에 Data/Services가 있는데요. Connect Data/Service를 클릭하면 PHP가 있는데, 클릭하고, ServiceName은 GuestBookService로 하고, Php Location은 아까 작성한 GuestBookService.php를 선택합니다.
이 과정에서 Zend Amf가 설치가 안되어있으면 설치할꺼냐고 물어봅니다. 설치해야합니다^^
설치할 때 htdocs/ZendFramework폴더에 자동으로 설치됩니다.
Finish! 그려면 services.guestbookservice패키지에 뭔가 생겼을 겁니다.
그럼  getList와 insert가 보이는데요. 리턴타입을 설정해야해서 getList에 오른쪽버튼 누르면, Configure Return Type이 있는데, Create a new custom data type에서 GuestBook을 입력하고, Finish를 하면 모든 타입이 String으로 된 Bean같은 것을 만듭니다-_-(Bean마다 타입은 지정이 안되는데, 왜그런지 모르겠음 ㅠ)
insert는 기존에 있는 타입에서 void로 고르고!^^

그럼 이제 진짜 Flex로 와서 Design모드로 바꾸고, DataGrid를 넣어봅시다.
데이터그리드에 대고 오른쪽 버튼을 누르면 Bind To Data라는 메뉴가 생겼습니다. 누르면 아래와 같은 메뉴가 나옵니다.
OK누르면 자동으로 코드도 입력해주네요.
예전에는 Php로 Service랑 설정파일 작성하고 그랬는데, 그럴필요가 없어요. 알아서 다 만들어주거든요.
Insert하고 getList하는 것도 다 추가하면 아래와 같은 코드를 완성할 수 있어요.
[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" xmlns:guestbookservice="services.guestbookservice.*">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Alert;

            protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
            {
                getListResult.token = guestBookService.getList();
            }

            protected function btnWrite_clickHandler(event:MouseEvent):void
            {
                if (inputAuthor.text.length < 1)
                {
                    Alert.show("글쓴이를 입력하세요");
                    return;
                }
                if (taContent.text.length < 1)
                {
                    Alert.show("내용을 입력하세요");
                    return;
                }
               
                guestBookService.insert(inputAuthor.text, taContent.text);
                inputAuthor.text = "";
                taContent.text = "";
               
                getListResult.token = guestBookService.getList();
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:CallResponder id="getListResult"/>
        <guestbookservice:GuestBookService id="guestBookService" destination="GuestBookService" endpoint="http://localhost/PhpFlexGuestBook/gateway.php" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" source="GuestBookService"/>
    </fx:Declarations>
    <mx:DataGrid x="72" y="21" width="489" height="307" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getListResult.lastResult}">
        <mx:columns>
            <mx:DataGridColumn headerText="content" dataField="content" showDataTips="true" dataTipField="content"/>
            <mx:DataGridColumn headerText="author" dataField="author" showDataTips="true" dataTipField="author"/>
            <mx:DataGridColumn headerText="idx" dataField="idx"/>
            <mx:DataGridColumn headerText="date" dataField="date"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Label x="70" y="370" text="내용 :"/>
    <s:TextArea id="taContent" x="111" y="369" width="447"/>
    <s:Button id="btnWrite" x="279" y="524" label="글쓰기" click="btnWrite_clickHandler(event)"/>
    <mx:Label x="59" y="344" text="글쓴이 :"/>
    <s:TextInput id="inputAuthor" x="112" y="343"/>
   
</s:Application>[/code]
위에 부분 댓글인줄 알고 낚이는 사람 있겠다-_-

참고자료 : http://sujitreddyg.wordpress.com/2009/06/01/building-flex-application-for-a-php-class-using-flash-builder-4/

Flex ANT관련 자료는 지돌스타님이 자세히 써주셨기때문에 참고해주세요.
http://blog.jidolstar.com/505

mxmlc로 컴파일을 해본적이 없어서 작성하는데에 욕봤습니다.
우선 ANT에서 제공하는 태그들이 있는데요. 그걸 이용해서 하려고 하는데 잘 안돼서-_- 그냥 exec로 작성했습니다 ㅠㅠ

그냥 rsl을 사용하지 않은 프로젝트는 ant로 매우 쉽게 할 수 있는데, RSL을 사용하면 조금 복잡해집니다.

RSL로 사용할 Flex Library Project를 하나 만듭니다. 그리고 클래스나 MXML을 추가하게 되면 bin디렉토리에 *.swc파일이 생깁니다. 이걸이용해서 메인프로젝트에서 컴파일을 해야합니다. 또한 *.swc파일을 이용해서 optimizer된 *.swf를 만들어야합니다.
[code]<target name="optimizer">
    <unzip src="${SWC파일}" dest="${SWC파일을 풀어놓을 디렉토리}" />
    <exec executable="${optimizer.exe파일 경로}">
        <arg line="-input '${SWC파일 풀어놓은 디렉토리}/library.swf'" />
        <arg line="-output '{아웃풋할 파일명.swf}'" />
    </exec>
</target>[/code]
몰랐는데, SWC파일 풀면 library.swf가 나오는데, 그걸 optimizer.exe한 것이 Flex Builder에서 나오는 swf파일이랑 같은것이더라구요(알고보니 나만 몰랐던거....다 알고있었음!-_-)
이렇게 하면 swf파일이 만들어집니다.
그럼 메인프로젝트 컴파일 하려면 이런식으로 하면 됩니다.
[code]<target name="compile">
    <exec executable="${mxmlc.exe파일 경로}">
        <arg line="-verify-digests=false" />
        <arg line="-runtime-shared-library-path '${rsl swc파일경로}' '${rsl경로위치url}'" />
        <arg line="-o '${아웃풋 경로}'" />
        <arg line="'${소스mxml메인파일}'" />
    </exec>
</target>[/code]
compile하기전에 optimizer target을 depends해야함^^
아마 verify-digests는 properties에서 설정할 때 체크하는 그것일꺼에요. 음..저는 이런식으로 하니까 되더라구요-_- -runtime-shared-library-path에서 swc파일 경로랑 rsl경로위치url(나중에 파일을 올릴 때 해당 위치에 있어야할 url입니다)로 지정하니 되더군요. 이것때문에 고생을 좀 해서-_-
메인프로젝트에 SWC파일을 LIB로 사용한다면 이런식으로 해야하구요^^
[code]<arg line="-library-path+='${basedir}/libs/Mate_08_8_1.swc'" />[/code]
ftp올리는 것도 지돌스타님 블로그에 잘 정리 되어있음!
http://blog.jidolstar.com/506
이러면 원클릭 배포가 가능해짐-_- 귀차니즘을 위한 ANT임!-_-

음... air.swf를 이용하면 설치된 애플리케이션을 실행할 수 있으며, Adobe AIR가 설치가 되어있지 않으면 설치도 할 수 있는 기능이 있는 SWF입니다.
http://airdownload.adobe.com/air/browserapi/air.swf

음....문제점이 한쪽에서 air.swf를 로딩하고 나서 getApplicationVersion(애플리케이션이 설치되었는지 확인하는 함수)을 하고 있습니다. 그런데 다른 한쪽에서 air.swf를 로딩해서 getStatus(air가 설치되어있는지 상태값 받기)를 하면 air가 설치 되어있음에도 불구하고 available(AIR설치는 안되어있으나 설치가 가능함)을 받는 경우가 발생합니다.

그래서 더 찾아보니 우야꼬님의 글을 보다가 알았는데요. air.swf 없이도 AIR애플리케이션을 설치하고 실행할 수 있다고 한다는 글을 보았습니다. 그래서 이 현상이 버그인지 확인해보려고 직접 구현하려고 했지만........-_-
생각보다 조낸 어렵네요-_- 우야꼬님께서 ProductManager클래스를 이용해야 한다는 힌트만 주셔서 ㅠ
ProductManger는 뭐하는 놈인지 검색해도 잘 안나와요-_- 어디서 뜯어봐야하는지ㅠ 근데 이놈을 이용해서 AIR애플리케이션을 리스타트하는 프로그램을 만들 수도 있더라구요.
http://www.hufkens.net/2009/03/how-to-restart-an-air-application-from-code/
productmanager가 air프로그램 실행하고 그러는 것 같긴 한데, launch라는 함수가 있는데 이것에 대한 커맨드라인 명령어 같은 게 설명이 잘 안나왔네요 ㅠ

암튼, air.swf를 로딩해서 getApplicationVersion을 무한 반복하는 애플리케이션을 만들고, 그걸 2개를 띄워볼께요-_-
AirService.as
[code]package
{
    import flash.display.Loader;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.net.URLRequest;
    import flash.system.ApplicationDomain;
    import flash.system.LoaderContext;
   
    public class AirService extends EventDispatcher
    {
        private var _loader:Loader;
        public var _service:Object;
       
        public function AirService()
        {
            _loader = new Loader();
            var context:LoaderContext = new LoaderContext();
            context.applicationDomain = ApplicationDomain.currentDomain;
            _loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
            var swf:String = "http://airdownload.adobe.com/air/browserapi/air.swf";
            var request:URLRequest = new URLRequest(swf);
            _loader.load(request, context);
        }
       
        private function initHandler(event:Event):void
        {
            _service = _loader.content;
            dispatchEvent(new Event(Event.COMPLETE));
        }
       
        public function getStatus():String {
            return _service.getStatus();
        }
       
        public function getApplicationVersion(applicationId:String, publisherId:String, callback:Function):void
        {
            _service.getApplicationVersion(applicationId, publisherId, callback);
        }
       
        public function installApplication(url:String, runtimeVersion:String, parameters:Array = null):void
         {
            _service.installApplication(url, runtimeVersion, parameters);        
         }
        
         public function launchApplication(applicationId:String, publisherId:String, parameters:Array = null):void
         {
             _service.launchApplication(applicationId, publisherId, parameters);
         }
    }
}[/code]
Main.mxml
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical" verticalAlign="middle"
    applicationComplete="applicationCompleteHandler()" width="100%" height="100%">
   
    <mx:Script>
        <![CDATA[
            import adobe.utils.ProductManager;
           
            private var airService:AirService;
           
            private function applicationCompleteHandler():void
            {
                airService = new AirService();
                airService.addEventListener(Event.COMPLETE, completeHandler);
            }
           
            private function completeHandler(event:Event):void
            {
                trace(airService.getStatus());
                ta.text += airService.getStatus() + "\n";
                if (airService.getStatus() == "installed")
                {
                    airService.getApplicationVersion("AirApplication",
                        "2D0F512A27635B8D26E3FE2622F4AAEDDA9D3CFC.1",
                        applicationVersion);
                }
            }
           
            private function applicationVersion(version:String):void
            {
                trace("version=" + version + ", status = " + airService.getStatus());
                ta.text += "version=" + version + ", status = " + airService.getStatus() + "\n";
                ta.verticalScrollPosition = ta.maxVerticalScrollPosition;
                airService.getApplicationVersion("AirApplication",
                    "2D0F512A27635B8D26E3FE2622F4AAEDDA9D3CFC.1",
                    applicationVersion);
            }
           
        ]]>
    </mx:Script>
    <mx:TextArea id="ta" height="100%" width="50%"/>
</mx:Application>[/code]
두개를 띄워보면
한놈은 available을 받습니다-_- 왜그러지-_-
대체 getApplicationVersion에서 어떤 일을 하는지 궁금해지기 시작했습니다.

그래서 대처 방법으로는....-_- getApplicationVersion을 동시에 하지 않으면 돼요-_- 사용자가 클릭할 때 하면 되는데, 이렇게 되면 launchApplication을 할 때에 또 클릭해줘야 해요. launchApplication은 사용자 액션에 의해서만 되더라구요.

PS. 혹시......이 글을 보게 되시는 분들중에서.....AIR애플리케이션을 launch하는 사이트를 목격 하시면 댓글 달아주세요ㅠ

해결방법 같은 건 아니구요-_- 그냥 이렇게 하니까 짤리지는 않더라 정도 입니다-_-

혹시....맥에서 Flex Builder 쓰시는 분도 그런가요?-_- 맥에선 컴파일을 안해봐서 잘 모르겠네요.
암튼, Windows용 Flex Builder로 컴파일한 swf는 맥에서는 한글이 짤려서 보이네요.
버그리포팅을 하고 싶지만.....영어도 딸리고...말주변도 없고....에이레네님께 부탁을 ㄷㄷㄷ

우선 style에서 fontFamily를 "돋움"으로 주니 맥에서 저렇게 보이더군요.
그래서 fontFamily에다가 Arial을 추가해줍니다-_-(석경씨가 발견! 짱!)
[code]font-family: "돋움", Arial;[/code]
그럼 윈도우폰트도 적용할 수 있고, 맥에서는 글씨도 안짤릴 수 있고...하지만, 맥에서는 폰트를 바꿀 수 없습니다-_- 그냥 나오는대로 보셔야합니다ㅠ

PS. 다른 방법 알고 계신 분 알려주세요ㅠㅠ
PS2. 보너스로~ 내 윈도우에서 돌아가는 Mac OS X Leopard.....인터넷 밖에 안된다는...ㅠㅠ

보통 DataGrid에서 ScrollBar는 아이템개수가 화면에 표시하는 개수보다 많으면 생기는데요. 개수가 많을 수록 Thumb부분이 더 작아지죠. 이 Thumb크기를 고정시키려면 찾아본 결과 Scrollbar속성에 scrollThumb부분이 있는데, 그걸 없애고, 새로 고정된 Thumb으로 교체를 시키는 방법이 있더라구요.

http://npacemo.com/wordpress/2008/05/20/flex-3-designer-scrollbar-fixed-size-scrollthumb/
소스는 자세히 보시면 그리어렵지 않지만, 이분께서 유틸을 너무 잘 만드셔서-_- 그냥 가져다 쓰시면 됩니다-_-

저 글에서는 Canvas의 스크롤바를 했지만, DataGrid라고 뭐 다를 거 없습니다.
음....데이터그리드는 커스텀 컴포넌트를 만드셔서 updateDisplayList를 오버라이딩해주시면 됩니다..

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import com.soribada.utils.fixedthumb.ScrollBarUtil;
           
            use namespace mx_internal;
           
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                ScrollBarUtil.replaceScrollThumb(verticalScrollBar);
            }
        ]]>
    </mx:Script>
</mx:DataGrid>
[/code]
DataGrid는 verticalScrollBar라는 객체가 있는데, 이것을 고정된 ScrollBar로 바꿔주면 됩니다^^

PS. 그냥 뭐 전 찾는데 오래걸려서 혹시나 필요한 사람이 있을까봐 올립니다ㅠ