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

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

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


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 테이블명도 보이는군요.
사용자 삽입 이미지

Flash Builder설명하다 튀어나온 NetBeans...-_-

뭐어쨌든, 이제 진짜 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/
 
Posted by 머드초보

댓글을 달아 주세요

 
음 일주일전에 갔었는데, 이제야 후기를 남기네요-_-
아....펜을 안가져가서 메모를 못하고 왔어요-_- 일주일이 지난 지금 내용을 거의 다 까먹었어요ㅠ 더듬더듬 작성해볼랍니다-_-

1. Flash Platform 게임개발 노하우 - 이정웅님
예전에 구글코리아에 갔을 때 FaceBook이나 오픈소셜 애플리케이션이 돈이 된다는(?) 얘기를 듣긴 했습니다만, 플래시게임을 개발하시는 이정웅님 말씀을 들으니 실감이 좀 나네요. 구글코리아에서 다양한 성공사례를 얘기했었는데, 플래시로 만든 게임도 있었죠. SNS에 특성이 맞는 게임을 개발하고 계시는 이정웅님 참 대단한 것 같습니다. 개발하고 계신 데모를 보여주셨는데, SNS요소와 RPG의 만남은 참 기발하더군요. 좀만 더 생각하면 더 멋진 아이디어가 나올 것 같아요^^
 저도 오픈소셜이나 Facebook을 이용하여 뭔가 해보고 싶은데, 좋은 아이디어가 없군요ㅠ Facebook은 AS3용 라이브러리도 나온판에 어서 삽질을 해봐야할텐데ㅠ

2. FlarToolkit으로 구현하는 증강 현실 - 옥상훈님
이건 회사에서 어떤 분이 보여주셔서 알게 되었던 건데, 여기서 다시 보니 새롭네요. 웹캠을 이용해서 어떤 패턴을 인식하여 보여주는 기술인데, 말로 설명하니 뭔 개소리 같네요-_- 직접 보시는 게 가장 빠르죠^^

ActionScript 3.0과 웹캠으로 이런 짓을??? – FLARToolKit, Away3D, WOW-Engine - 지돌스타님 블로그

아직 뭔가 응용할 수 있는 게 나오진 않았지만, 조금만 더 연구하면 멋진 기술이 나올 것 같기도 합니다^^

3. Flash Platform 한글문제 - 이희덕님
음 한글문제가 심각함은 예전부터 좀 느꼈지만, 생각보다 많네요. AIR에서 한글 지울 때 좀 남는거-_-밖에 몰라서-_- 암튼, 공동대응팀에서 이렇게 신경을 써주시니 감사할 따름이네요. 어도비에서 잘 고쳐줬으면 좋겠네요^^ Flex4에서도 발생하는 문제점도 찾으시다니 대단하십니다. Flex4에서는 완벽하게 고쳐졌으면 좋겠네요^^

4. 잡부 Flex 개발자를 위한 Flex 스킨 - 김학영님
음 잡부 Flex개발자.....슬프군요ㅠ

5. Creating visual Experiences with Flex - 이준하님
아....여기서부터 뭔말인지 몰라서 집중력을 잃었습니다. 메모도 안해가지고 오고, 일주일이 지나고 나니, 뭔가 생각이 안나네요-_-

오늘 흥미가 간 주제는 Flash Game이였습니다. 사실, 전 게임개발자를 꿈꿔왔다가 다른 길로 빠져셔-_- 게임에 아직도 미련을 못버리고 있었거든요. 근데, Flash로 MMORPG도 만들고, 정말 멋지군요.
이런 모임을 직접 다 준비하셨다니 정말 대단하군요. 앞으로 이런 모임이 자주 있었으면 좋겠네요^^ 참 즐거운 시간이였습니다^^

PS. 아......마음의 소리 책 갖고 싶었는데.....-_- 제가 39번인가 그랬는데, 38번이 나왔었어요 ㅠㅠ


 
Posted by 머드초보

댓글을 달아 주세요

 
젠장... Flash Player 10에서 생기는 버그를 발견했습니다.
TextInput에서 enter이벤트에 자신의 TextInput의 초기화하는 코드가 있으면 초기화가 안됩니다 ㅠ 9버전으로 컴파일하면 되는데, 10으로 컴파일하니 안되네요 ㅠ 몇시간 잡아먹었어요 ㅠ 하소연은 여기까지....-_-

우선 Stratus라는 기술은 Flash간에 통신을 가능하게 해주는 기술인 듯합니다.
자세한 내용은 아래에......-_-(영어는 잘 못하니....)
http://labs.adobe.com/technologies/stratus/

Adobe RIA공식사이트에서 오창훈님께서 올리신 기술문서 "플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션"를 보고 휠받아서 한번 만들어봤습니다. 채팅이 가능하다면, 오목게임도 가능할꺼라는 생각에.....-_- 참 쓸데없는거 잘만든다-_-

http://mudchobo.tomeii.com/flexomok/
위 사이트에 접속하면 서버랑 클라이언트를 고를 수 있어요.
닉네임을 입력하세요 한명은 서버를 한명은 클라이언트를 해야해요.

서버측
서버를 클릭하고, 생성되는 ID를 클라이언트에게 알려주세요.
클라이언트측
클라이언트를 클릭하고, 서버측의 ID를 입력해서 접속하세요~

오목판이 나오면 접속 성공~ 같이 오목을 즐기면 돼요-_-
사용자 삽입 이미지
소스는 여기에 있어요.
http://my-svn.assembla.com/svn/omok/
Mate Flex Framework를 사용했고(이걸 사용해야 스피드한 개발이.....-_-), 소스도 개판이라 보시는데에는 매우 힘드실겁니다. 저도 참 만든게 신기하군요-_-

참고자료

플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션(로그인 후 볼 수 있습니다)
http://www.adoberia.co.kr/iwt/board/board.php?tn=pds_tech&id=244&mode=view

플래시 P2P RTMFP에 대해(예제 파일 첨부)
http://lovedev.tistory.com/entry/%ED%94%8C%EB%9E%98%EC%8B%9C-P2P-RTMFP%EC%97%90-%EB%8C%80%ED%95%B4


PS1. 버그가 조낸 많습니다. 한명이 나가도 뭔가 반응이 없습니다-_- 채팅에서 글을 쓰고 엔터를 쳐도 TextInput에서 지워지지 않습니다. 하지만, 그냥 한게임 즐기기에는 충분합니다 -_-b
PS2. 구글에서 Stratus를 치시면.....이미지검색에 여자 프로레슬러 트리쉬 스트레터스가 나옵니다-_-; 그냥 그렇다구요-_-
 
Posted by 머드초보

댓글을 달아 주세요

 

http://code.google.com/p/swfobject/
여기서 2.1버전을 다운로드할 수 있습니다.
기존에 1.5에서 사용하는 방식과 완전이 틀려졌습니다.

더욱 간편해지고 더욱 쉬워졌습니다.
해당 파일을 받고 압축을 풀면 매우 쉽게 예제가 나와있습니다.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>SWFObject 2 dynamic publishing example page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
        swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
        </script>
    </head>
    <body>
        <div id="myContent">
            <h1>Alternative content</h1>
            <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
        </div>
    </body>
</html>
[/code]
핵심부분은 저기 swfobject객체의 embedSWF메소드를 호출하면 됩니다.
저런식으로. 아주 간단해요.

만약 파라메터나 flashvars를 넘기고 싶다면
[code]
var flashvars = {
  bridgeName: "mudchobo"
};
var params = {
  menu: "false"
};
var attributes = {};

swfobject.embedSWF ( "test.swf", "myContent", "300", "120", "9.0.0",
    "expressInstall.swf", flashvars, params, attributes );
[/code]
이런식으로 파라메터값을 넘겨줄 수 있습니다.

어떤분은 기존 flex3가 생성하는 html-templete을 기존방식이 아닌 swfobject방식으로 바꿔서 templete을 재구성했더라구요.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기서 받을 수 있습니다.

기존에 AC_FL_RunContent란 메소드를 호출하는 index.templete.html파일을 보면 정말 복잡합니다. 하지만 저 템플릿방식으로 변경하면 소스코드도 이해하기 쉽고, 나중에 javascript를 삽입해서 테스트를 해보고 싶을 때 더욱 쉽게 작업할 수 있겠죠.
 
Posted by 머드초보

댓글을 달아 주세요