머드초보의 블로그

다운로드는 여기서....-_- adobe.com 사이트에 가입하셔야 합니다.

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

BlazeDS버전이 4.X대여야 잘 됩니다. 3.X대면 안되더군요.
그리고 BlazeDS버전이 4.x의 Beta1버전이 있는데, 이걸로 하면 요런 에러가 뜹니다.

PHP는 HTTPService말고 방법이 없을까 하고 찾아보니, Zend에서 AMF를 이용하여 개발한게 있군요. Adobe의 공식 지원으로 만들어진거라 빠르리라고 생각합니다^^ (적어도 HTTPService보단 빠르겠죠!)

암튼, BlazeDS를 하셨다면 그리 어렵지 않군요.
이번에도 간단하게 소녀시대예제를 통해...접근해봅시다-_-;

간단히 데이터를 불러오고, 저장도 해보는 그런 애플리케이션을 만들어봅시다.

우선 Eclipse에서 php가 가능하도록 해야하는데요. 뭐 그냥 editplus에서 해도 상관없습니다. Zend홈페이지에 가면 자기네들 IDE깔라고 합니다-_-; Zend Studio라는 게 있네요. 뭐 php단은 netbeans를 이용해서 개발하셔도 되고, 이클립스에 있는 PDT를 추가하셔서 해도 상관없어요~ ^^ 전 NetBeans를 선호합니다. 좋아요!

DB입니다.
[code]DROP TABLE IF EXISTS `sosi`.`sosi`;
CREATE TABLE  `sosi`.`sosi` (
  `idx` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `sosiname` varchar(45) NOT NULL,
  `height` int(10) unsigned NOT NULL,
  `blood` varchar(45) NOT NULL,
  PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `sosi` (`idx`,`sosiname`,`height`,`blood`) VALUES
 (1,'윤아',166,'B'),
 (2,'수영',170,'O'),
 (3,'효연',160,'AB'),
 (4,'유리',167,'AB'),
 (5,'태연',162,'O'),
 (6,'제시카',163,'B'),
 (7,'티파니',162,'O'),
 (8,'써니',158,'B'),
 (9,'서현',168,'A');[/code]
우선 Flex Project를 만듭니다.
여기서 Application server type을 php로 하세요~ php로 하게 되면 설정된 폴더로 swf를 바로 위치시킬 수 있어요!
Project name은 ZendAmfTest -> Web root는 아파치가 돌아가는 폴더를 지정하면 됩니다.
저는 C:\Program Files\Apache Software Foundation\Apache2.2\htdocs여기군요.
Root URL은 http://localhost/ Finish때려주면 ZendAmfTest-debug폴더에 swf가 생기죠.

요 아래 주소에서 ZendAMF를 받을 수 있습니다.
http://framework.zend.com/download/amf
받은 다음에 압축을 풀면 library폴더 안에 Zend라는 폴더가 있는데 통채로 복사해서 src폴더 아래에 놓습니다.

그리고 php파일을 하나 만드세요. ValueObject입니다. Java에서 bean같은..-_-;
SosiVo.php
[code]<?php
class SosiVo {
    public $idx;
    public $sosiname;
    public $height;
    public $blood;
}
?>[/code]
이제 서비스를 하나 만들어봅시다. SosiService입니다.
SosiService.php
[code]<?php
require_once 'SosiVo.php';

//conection info
define("DATABASE_SERVER", "localhost");
define("DATABASE_USERNAME", "root");
define("DATABASE_PASSWORD", "mudchobo");
define("DATABASE_NAME", "sosi");

class SosiService {
    public function getData() {
        $mysql = mysql_connect(DATABASE_SERVER, DATABASE_USERNAME,
            DATABASE_PASSWORD);
        mysql_select_db(DATABASE_NAME);
        $query = "SELECT idx, sosiname, height, blood FROM sosi";
        $result = mysql_query($query);

        $ret = array();
        while ($row = mysql_fetch_object($result)) {
            $tmp = new SosiVo();
            $tmp->idx = $row->idx;
            $tmp->sosiname = $row->sosiname;
            $tmp->height = $row->height;
            $tmp->blood = $row->blood;
            $ret[] = $tmp;
        }
        mysql_free_result($result);
        return $ret;
    }
}
?>[/code]
php의 array는 ActionScript3의 array와 호환됩니다.
서비스를 만들었으니 EndPoint페이지를 만들어줘야합니다.
amf.php
[code]<?php
require_once 'Zend/Amf/Server.php';
require_once 'SosiService.php';

$server = new Zend_Amf_Server();
$server->setClass("SosiService");
$server->setClassMap("SosiVo", "SosiVo");
echo($server -> handle());
?>[/code]
이제 이것을 연결시켜줄 service-config.xml파일을 만들어야합니다.
[code]<?xml version="1.0" encoding="UTF-8"?>
<services-config>
    <services>
        <service id="amfphp-flashremoting-service"
            class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
            <default-channels>
                   <channel ref="my-zend"/>
            </default-channels>
            <destination id="zend">
                <properties>
                    <source>*</source>
                   </properties>
               </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="my-zend"
            class="mx.messaging.channels.AMFChannel">
            <endpoint uri="http://localhost/ZendAmfTest-debug/amf.php"
                class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>[/code]
우선 default로 my-zend라는 채널을 잡았는데, my-zend는 endpoint uri가 ~~/amf.php입니다. 우리가 좀전에 작성했던 endpoint죠. 새로운 서비스가 추가되어 새로운 endpoint를 작성하게 될 때 endpoint파일을 amf1.php라고 했을 때 이곳에 추가해서 channel에 기입할 수도 있고, <mx:RemoteObject>에서 endpoint를 해당 uri로 바꿔주는 방법 2가지가 있습니다.

그럼 이제 Flex쪽으로 넘어가봅시다.
ZendAmfTest.mxml
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    creationComplete="creationCompleteHandler()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
           
            private function creationCompleteHandler():void
            {
                roSosi.getData();   
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.message.toString());
            }
           
            private function resultGetDataHandler(event:ResultEvent):void
            {
                dgSosi.dataProvider = event.result as Array;
            }
        ]]>
    </mx:Script>
   
    <mx:RemoteObject id="roSosi" fault="faultHandler(event)" destination="zend" source="SosiService">
        <mx:method name="getData" result="resultGetDataHandler(event)" />
    </mx:RemoteObject>
  
    <mx:DataGrid id="dgSosi" width="100%" height="100%">
        <mx:columns>
            <mx:DataGridColumn headerText="아이디" dataField="idx"/>
            <mx:DataGridColumn headerText="소녀시대이름" dataField="sosiname"/>
            <mx:DataGridColumn headerText="신장" dataField="height" />
            <mx:DataGridColumn headerText="혈액형" dataField="blood" />
        </mx:columns>
    </mx:DataGrid>
   
</mx:Application>[/code]
만약 다른 서비스를 추가하게 된다면, <mx:RemoteObject>에서 endpoint를 다른 url로 잡아주면 됩니다.
[code]<mx:RemoteObject id="roAnother" fault="faultHandler(event)"
        destination="zend" source="AnothorService"
        endpoint="http://localhost/ZendAmfTest-debug/another_amf.php">[/code]
아님 service-config.xml에서 channel을 다르게 해서 destination을 다르게 설정해도 되구요.

ps1. 다른 예제에서는 2개의 service를 이용한 예제가 없더라구요. 그래서 사실 저렇게 하는 게 맞는지 잘 모르겠습니다. 다른 방법이 있을 수도 있구요^^ 암튼, 제가 삽질한 바로는 서비스당 1개의 php파일을 만들어야 하더라구요.

ps2. PHP를 시작한지 얼마 안되었는데, DB연동 시 한글이 깨지더라구요. 인코딩을 my.ini과 php.ini에 utf-8로 맞췄는데, ???로 인식해서 나오는 경우가 있더라구요. php파일에서 db정보를 출력하니 이상하게 그냥 로컬에서 쳤을 때에는 utf-8로 나오는데, php파일이 출력한 db정보는 latin으로 나올 때가 있더라구요. 이 경우 my.ini파일에 이 부분을 추가해주면 됩니다.
[mysqld] 아래에
character-set-client-handshake = FALSE
client 인코딩으로 강제 셋팅하는거라고 하더라구요. 저는 처음에 ??? 뜨길래 이걸로 해결봤습니다-_-;
아 또 다른 방법으로 쿼리날리기 전에 set names 'utf8'이라고 먼저 날려줘도 됩니다.
[code]mysql_query("SET NAMES 'utf8'");[/code]
ps3. 이런...생각해보니 client에서 VO를 안만들어줬군요-_-;

참고자료
http://corlan.org/2008/11/13/flex-and-php-remoting-with-zend-amf/

덧. 채널 못찾는 에러는 아래 주너니님의 댓글을 참조하세요~ 컴파일옵션을 추가해야합니다^^
주너니님 감사합니다 ^^

셋팅이 끝났으니 Hibernate Mapping파일을 생성합니다.
New -> Other -> Hibernate -> Hibernate Mapping Files and POJOs from Database선택 -> File Name은 디폴트 ->
Avaliable Tables에서 sosi테이블 add -> JDK 5 Language Features체크, package는 sm.sosi.sosiage.map입력 후 Finish. 여기서 이상한게 매핑파일을 만들었는데, 패키지가 보이지 않습니다. 처음부터 생성되지 않은 패키지를 선택해서 그런 것 같은데, 넷빈즈 껐다 키면 보입니다-_-;(버그인 듯-_-)

이제 Dao를 하나 만들어봅시다.
sm.sosi.sosiage.dao패키지에 AgeDao클래스를 만들어봅시다. 이 클래스에 메소드는 나이를 알려주는 메소드 1개-_-; 이 클래스는 HibernateDaoSupport를 상속받습니다.
AgeDao.java
[code]public class AgeDao extends HibernateDaoSupport {
    public int searchAge(String name) {
        List<Sosi> sosi = getHibernateTemplate().find("from Sosi where name = ?", name);
        if (sosi.size() > 0) {
            return sosi.get(0).getAge();
        } else {
            return 0;
        }
    }
}[/code]
코드는 간단합니다. 제가 아직 하이버네이트를 공부중이라 저거 하나만 객체로 받아오는 걸 못하겠는데요-_-; List로 받아와서 그냥 첫번째꺼 가져오도록 했습니다-_-;

sm.sosi.sosiage.service패키지에 AgeService를 만들어봅시다.
AgeService.java
[code]public class AgeService {
    private AgeDao ageDao;

    public void setAgeDao(AgeDao ageDao) {
        this.ageDao = ageDao;
    }

    public String searchAge(String name) {
        int age = ageDao.searchAge(name);
        String message;

        if (age == 0) {
            message = name + "은/는 소녀시대의 멤버가 아닙니다.";
        } else {
            message = name + "의 나이는 " + age + "세입니다.";
        }
        return message;
    }
}[/code]
간단하게 메세지를 만들어서 리턴해주는 서비스입니다.

심플컨트롤러를 생성해봅시다. New -> Other -> Srpingframework -> Simple Form Controller선택 -> Class Name은 AgeController, package는 sm.sosi.sosiage.controller -> Finish.
AgeController.java
[code]public class AgeController extends SimpleFormController {

    private AgeService ageService;

    public void setAgeService(AgeService ageService) {
        this.ageService = ageService;
    }

    public AgeController() {
        setCommandClass(Sosi.class);
        setCommandName("sosiAge");
        setSuccessView("successView");
        setFormView("formView");
    }

    /*
    @Override
    protected void doSubmitAction(Object command) throws Exception {
        throw new UnsupportedOperationException("Not yet implemented");
    }
    */

    //Use onSubmit instead of doSubmitAction
    //when you need access to the Request, Response, or BindException objects
    @Override
    protected ModelAndView onSubmit(
            HttpServletRequest request,
            HttpServletResponse response,
            Object command,
            BindException errors) throws Exception {
        Sosi sosi = (Sosi)command;
        ModelAndView mv = new ModelAndView(getSuccessView());
        mv.addObject("message", ageService.searchAge(sosi.getName()));
        return mv;
    }
}[/code]
이제 formView와 successView만 작성하면 끝이네요.
Web Pages -> WEB-INF ->jsp에서 New -> JSP -> JSP File Name은 formView -> Finish.
formView.jsp
[code]<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>소녀시대 짱-_-;</title>
    </head>
    <body>
        <form:form commandName="sosiAge" method="post" action="age.htm">
            소녀시대 멤버이름을 입력하세요:
            <form:input path="name" />
            <input type="submit" value="검색">
        </form:form>
    </body>
</html>[/code]
또다른 View파일 JSP File Name은 successView -> Finish.
successView.jsp
[code]<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>소녀시대 나이 결과</title>
    </head>
    <body>
         <h2>${message}</h2>
    </body>
</html>[/code]
이제 dispatcher-servlet.xml에 bean을 등록해봅시다.
dispatcher-servlet.xml
[code]<bean id="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
        <property name="mappings">
            <props>
                <prop key="index.htm">indexController</prop>
                <prop key="age.htm">ageiController</prop>
            </props>
        </property>
    </bean>
   
    <bean id="viewResolver"
          class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          p:prefix="/WEB-INF/jsp/"
          p:suffix=".jsp" />

    <!-- dao -->
    <bean name="ageDao"
          class="sm.sosi.sosiage.dao.AgeDao"
          p:sessionFactory-ref="sessionFactory" />

    <!-- service -->
    <bean name="ageService"
          class="sm.sosi.sosiage.service.AgeService"
          p:ageDao-ref="ageDao"/>

    <!-- controller -->
    <bean name="indexController"
          class="org.springframework.web.servlet.mvc.ParameterizableViewController"
          p:viewName="index" />
    <bean name="ageController"
          class="sm.sosi.sosiage.controller.AgeController"
          p:ageService-ref="ageService" />[/code]
실행해보면
정보: Hibernate: select sosi0_.idx as idx0_, sosi0_.name as name0_, sosi0_.age as age0_ from hibernate.sosi sosi0_ where sosi0_.name=?
이런 쿼리가 날아가네요.
태연 짱-_-; 역시 원더걸스 예제보다 소녀시대 예제가 더 접근성이 높은 듯-_-;

PS. 보니까 Hibernate도 애노테이션으로 할 수 있는 듯 한데, 그것도 좀 해봐야겠네요. 다시 하이버네이트 책을 좀 읽어봐야겠어요-_-;

요즘 하이버네이트3 프로그래밍(최범균 저)를 보고 있는데, 뭔소린지 잘 이해가 안가서 쉬어갈 겸-_-; 넷빈즈에서 스프링이랑 하이버네이트 연동하는 거 정리해서 올립니다-_-;

환경 : GlassFishV3 + SpringFramework 2.5 + Hibernate 3.2.5 + MySQL5.0 + Netbeans6.5

접근성을 높이기 위해(?) 소녀시대를 예제로 작성해봅시다. 멤버이름을 입력하면 멤버의 나이를 알려주는 웹애플리케이션을 만들어봅시다-_-;

Database
[code]CREATE TABLE `sosi` (
  `idx` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(45) NOT NULL,
  `age` int(10) unsigned NOT NULL,
  PRIMARY KEY (`idx`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;

INSERT INTO `sosi` (`idx`,`name`,`age`) VALUES
 (1,'윤아',20),
 (2,'수영',20),
 (3,'효연',21),
 (4,'유리',21),
 (5,'태연',21),
 (6,'제시카',21),
 (7,'티파니',21),
 (8,'써니',21),
 (9,'서현',19);
[/code]

New Project -> Java Web -> Web Application -> Project Name : SosiAge -> Glass Fish V3으로 하구요 -> Spring Web MVC 2.5랑 Hibernate 3.2.5체크합니다.
Hibernate에서 DB를 설정해야하는데, New Database Connection해서 Name을 MySQL로 맞추고, 설정에 맞게 입력한 뒤, 추가한 것으로 선택한 뒤 Finish를 누른 뒤 완료합니다.

한글문제로 인한 web.xml파일에 아래 코드를 추가합니다.
web.xml
[code]<filter>
          <filter-name>Request Encoding</filter-name>
          <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
          <init-param>
               <param-name>encoding</param-name>
               <param-value>UTF-8</param-value>
          </init-param>
     </filter>
     <filter-mapping>
          <filter-name>Request Encoding</filter-name>
          <servlet-name>dispatcher</servlet-name>
     </filter-mapping>[/code]
hibernate를 사용하기 위한 필수작업인 session bean을 생성해야합니다.
applicationContext.xml
[code]<bean id="sessionFactory"
        class="org.springframework.orm.hibernate3.LocalSessionFactoryBean">
        <property name="configLocation" value="classpath:hibernate.cfg.xml" />
    </bean>[/code]
설정을 여기에 다 적고, datasource를 session에 di를 해도 상관없고, hibernate.cfg.xml파일에 설정해도 다 되더군요. 우선 기본적으로 hibernate.cfg.xml파일을 직접 만들어주니 configLocation설정해서 해봅시다.

하이버네이트 설정파일에서 SQL문을 직접볼 수 있는 옵션을 추가합시다.
Source Packages -> default package -> hibernate.cfg.xml파일을 열어봅니다.
design모드에서 Configuration Properties에서 add한 뒤, hibernate.show_sql값 true로 추가합니다. 쿼리를 직접보도록...-_-;

이제 뭐 셋팅이 끝났네요. 셋팅 끝나면 뭐 그냥 쓰기만 하면 됩니다-_-;
다음 장에서......

이거 완전 신기하네요-_-;
HTMLLoader라는 클래스가 AIR전용으로 있는데요.
HTML을 읽어와서 보여주는 역할 뿐아니라 JAVASCRIPT함수를 호출할 수 있으며(ActionScript3에서 자바스크립트 문법을 그대로 사용할 수 있는 듯 합니다-_- 아직많이 해보지는 않았지만-_-), 물론 자바스크립트 프레임워크 메소드도 호출이 가능하겠죠.

한번 해보니 잘 되네요-_-;

AIR로 프로젝트를 만들고, src폴더에 prototype-1.6.0.2.js 파일을 넣구요.
prototypetest.html파일을 아래와 같이 작성했습니다.
[code]
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AIR와 JAVASCRIPT(prototype)연동</title>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">
안녕하세요!<br />
후....추석날 뭔짓이냐..-_-;
</div>
</body>
</html>
[/code]
저기 DIV내용을 FLEX로 가져오겠습니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private var _htmlLoader:HTMLLoader;
           
            private function clickHandler():void
            {
                _htmlLoader = new HTMLLoader();
                _htmlLoader.addEventListener(Event.COMPLETE, completeHandler);
                _htmlLoader.load(new URLRequest("prototypetest.html"));
            }
           
            private function completeHandler(event:Event):void
            {
                Alert.show(_htmlLoader.window.$("myDiv").innerHTML);
            }
        ]]>
    </mx:Script>
   
    <mx:Button label="DIV내용을 프로토타입함수 사용해서 가져오기" click="clickHandler()"/>
   
</mx:WindowedApplication>
[/code]
간단합니다. HTMLLoader를 이용해서 HTML파일을 읽어와서 다 읽어오게 되면, HTMLLoader객체에 포함되어있는 window라는 property가 있는데 이것을 이용해서 prototype함수를 호출하면 됩니다.
$('') 요게 먹힙니다-_-; 아래는 결과입니다.

우선 이게 되서 제가 기쁜게...Oauth인증이.....AIR에서 안되더라구요-_-;
AIR에서도 되는군요-_-; 다시 시도를...-_-;
근데, 신기하게 JAVASCRIPT에서는 되더라구요. 그래서 왠지 JAVASCRIPT를 이용해서 인증하고 사용하면 될 것 같은 느낌이 들어서 시도해보려고 해요. 망할..Oauth-_-;