머드초보의 블로그

Mate is a tag-based, event-driven Flex framework.

http://mudchobo.tomeii.com/tt/318

새로운 버전에서 방식이 바뀌었습니다.

여기위에것을 보고 하세요 ^^

우연히 지돌스타님 블로그를 구독하다가 좋은 정보가 있어서 보고 있었습니다.
Flex에서 db와 연동하는 좋은 드라이버가 있다는 정보입니다.
http://blog.jidolstar.com/312


그래서 제가 삽질해봤습니다-_-;

보통 DB랑 연동하려면 JAVA, PHP, ASP 등 다른 언어와 연동이 필요합니다.
근데 이 asSQL이라는 것을 이용하면 그냥 Flex단에서 DB와 연결해줍니다.
우선 asSQL을 받아봅시다.
http://code.google.com/p/assql/
여기서 오른쪽에 보면 2.0.1버전용과 3.0.0버전용이 있습니다.
저는 Flex3으로 할 것이기에 3.0.0을 받아보도록 하겠습니다. assql_Beta2_Flex3.0.0.swc
DB에는 이런 테이블과 이런 데이터가 있다고 합시다.

[code]
CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `description` varchar(255) default NULL,
  `price` decimal(15,2) default NULL,
  PRIMARY KEY  (`id`),
  KEY `products_description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr;

INSERT INTO `products` (`id`, `description`, `price`) VALUES
(1, 'Lamp', 469.80),
(2, 'Table', 3502.62),
(3, 'Chair', 1061.12);
[/code]
그럼 플렉스 빌더를 실행합니다.
File -> New -> Flex Project 선택합니다. Project name은 FlexMysqlTest 라고 합시다.
Web application선택하고, Application server type은 None으로 하고 Finish 선택!

libs폴더가 있는데요. 아까 받은 assql_Beta2_Flex3.0.0.swc 파일을 libs폴더에 복사합니다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="init();" width="400" height="400">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.maclema.mysql.events.MySqlErrorEvent;
   import com.maclema.mysql.events.MySqlEvent;
   import mx.collections.ArrayCollection;
   import com.maclema.mysql.ResultSet;
   import com.maclema.mysql.Statement;
   import com.maclema.mysql.Connection;
 
   [Bindable]  
   private var ac:ArrayCollection;
   private var con:Connection;
   private var st:Statement;
     
   private function init():void {
    con = new Connection("DB주소", 3306,
      "DB아이디", "DB비밀번호", "DB이름");
    con.addEventListener(Event.CONNECT, onConnect);
    con.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
    con.connect();
   }
   
   private function onConnect(e:Event):void {
        st = con.createStatement();
        st.addEventListener(MySqlEvent.RESULT, onResult);
        st.addEventListener(MySqlEvent.RESPONSE, onResponse);
        st.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
 
    st.executeQuery("SELECT id, description, price FROM products");
   }
   
   private function onResult(event:MySqlEvent):void {
    //FOR SELECT
    var resultset:ResultSet = event.resultSet;
    ac = resultset.getRows();
   }
   
   private function onResponse(event:MySqlEvent):void {
    //FOR INSERT, UPDATE, etc.
   }
   
   private function onError(event:MySqlErrorEvent):void {
    Alert.show(event.text);
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{ac}"/>
 
</mx:Application>
[/code]
소켓을 이용해서 하는거라 connect를 호출하고 연결한 뒤 소켓으로 막 보내는 것 같아요.
어쨌든 저렇게 하면 되네요. 참 쉽죠?(밥로스 버전-_-)

INSERT, UPDATE 와 SELECT는 이벤트가 서로 틀립니다.
INSERT,UPDATE는 RESPONSE고, SELECT는 RESULT네요 ^^

우선 service-config.xml파일을 수정해야합니다.
<factories>
  <factory id="springfactory" class="flex.messaging.factory.SpringFactory" />
</factories>
를 추가합니다.

그 다음 remote-config.xml파일을 수정해야합니다.
<destination id="productmanager">
 <properties>
  <factory>springfactory</factory>
  <source>productManager</source>
 </properties>
</destination>
자세히 보시면 factory는 위에 service-config.xml파일에 정의한 놈이고, source는 bean이름입니다.
즉 applicationContext.xml파일에 정의한 그 bean이름을 저기에 적어 놓으면 됩니다.
그러면 그 bean을 flex로 가져와서 쓸 수 있습니다.

아 그리고 프로젝트에서 이상하게 contextroot가 WebContent로 되어있는데 프로젝트이름으로 고쳐줍시다-_-;
프로젝트 이름에 대고 마우스오른쪽버튼(alt+enter) properties를 선택, Flex Server부분 클릭.
context root를 프로젝트이름(SpringAndBlazeds)으로 바꿔줍시다.

자 그러면 flex_src에 있는 SpringAndBlazeds.mxml을 수정해봅시다.
SpringAndBlazeds.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 applicationComplete="init();">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.remoting.RemoteObject;
   
   private function init():void {
    var remoteObject:RemoteObject = new RemoteObject();
    remoteObject.destination = "productmanager";
    remoteObject.addEventListener(ResultEvent.RESULT, resultHandler);
    remoteObject.addEventListener(FaultEvent.FAULT, faultHandler);
    remoteObject.getProducts();
   }
   
   private function resultHandler(event:ResultEvent):void{       
       dg.dataProvider = event.result;  
      }     
  
      private function faultHandler(event:FaultEvent):void{       
       Alert.show("실패 메세지 : " + event.fault.message);  
      } 
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" />
</mx:Application>
[/code]
간단하게 Manager에 있는 getProducts를 호출해서 DataGrid에 넣는 코드입니다.

자 이제 실행해봅시다-_-;
이클립스 오른쪽아래에 server에다가 SpringAndBlazeds프로젝트를 추가합니다.
서버에 대고, 오른쪽버튼누르면, Add and Remove Project클릭해서 추가하면 됩니다.
서버를 가동합니다.
Run Flex Application을 실행해봅시다!-_-;

이제 Manager클래스를 만들어봅시다.
실제로 BlazeDS를 이용해서 가져오는 놈은 이 Manager클래스가 되겠죠^^

Java Resources: src에서 오른쪽버튼 클릭하고, New를 해서 interface를 구현합니다.
[code]
package springapp.service;

import java.util.List;
import springapp.domain.Product;

public interface ProductManager {
 public List<Product> getProducts();
}
[/code]
getProducts라는 메소드가 하나 있군요! 구현해봅시다!!!
[code]
package springapp.service;

import java.util.List;

import springapp.dao.ProductDao;
import springapp.domain.Product;

public class ProductManagerImpl implements ProductManager {

 private ProductDao productDao;
 
 @Override
 public List<Product> getProducts() {
  return productDao.getProductList();
 }

 public void setProductDao(ProductDao productDao) {
  this.productDao = productDao;
 }
}
[/code]
getProducts라는 함수는 Dao에서 getProductList를 호출하는 놈이네요.
요 아래에는 setter가 있네요. 이건 spring에서 DI를 하기위해 존재하는 setter입니다^^
서비스도 완성이 되었네요! 이제 설정파일을 작성해봅시다.

applicationContext.xml
[code]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:p="http://www.springframework.org/schema/p"
 xmlns:aop="http://www.springframework.org/schema/aop"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
 http://www.springframework.org/schema/aop
 http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
 http://www.springframework.org/schema/tx
 http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">

 <!-- Enable @Transactional support -->
 <tx:annotation-driven />

 <!-- Enable @AspectJ support -->
 <aop:aspectj-autoproxy />

 <aop:config>
  <aop:advisor pointcut="execution(* *..ProductManager.*(..))"
   advice-ref="txAdvice" />
 </aop:config>

 <tx:advice id="txAdvice">
  <tx:attributes>
   <tx:method name="save*" />
   <tx:method name="get*" read-only="true" />
  </tx:attributes>
 </tx:advice>

 <bean id="productManager"
  class="springapp.service.ProductManagerImpl">
  <property name="productDao" ref="productDao" />
 </bean>

</beans>
[/code]
Dao부분의 설정파일인 applicationContext-ibatis.xml파일을 봅시다.
applicationContext-ibatis.xml
[code]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns:p="http://www.springframework.org/schema/p"
 xmlns:aop="http://www.springframework.org/schema/aop"
 xmlns:tx="http://www.springframework.org/schema/tx"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
    http://www.springframework.org/schema/aop
    http://www.springframework.org/schema/aop/spring-aop-2.5.xsd
    http://www.springframework.org/schema/tx
    http://www.springframework.org/schema/tx/spring-tx-2.5.xsd">

 <bean id="propertyConfigurer"
  class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer"
  p:location="classpath:properties/jdbc.properties" />

 <bean id="dataSource"
  class="org.springframework.jdbc.datasource.DriverManagerDataSource"
  p:driverClassName="${jdbc.driverClassName}" p:url="${jdbc.url}"
  p:username="${jdbc.username}" p:password="${jdbc.password}" />

 <!-- Transaction manager for iBATIS Daos -->
 <bean id="transactionManager"
  class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
  <property name="dataSource" ref="dataSource" />
 </bean>

 <!-- SqlMap setup for iBATIS Database Layer -->
 <bean id="sqlMapClient"
  class="org.springframework.orm.ibatis.SqlMapClientFactoryBean">
  <property name="dataSource" ref="dataSource" />
  <property name="configLocation"
   value="classpath:springapp/dao/SqlMapConfig.xml" />
 </bean>

 <!-- Add additional Dao definitions here -->
 <bean id="productDao"
  class="springapp.dao.ProductDaoImpl">
  <property name="sqlMapClient" ref="sqlMapClient" />
 </bean>
 
</beans>
[/code]
jdbc.properties파일은 properties라는 package를 만들고, jdbc.properties파일을 넣어버립시다.
[code]
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://DB주소
jdbc.username=DB아이디
jdbc.password=DB비밀번호
[/code]
이 설정들의 bean들의 관계를 보고 싶다면-_-;
Spring Elements에서 오른쪽버튼 클릭하고 properties를 선택.
Bean Support를 선택, Add한 뒤 두개의 설정파일(applicationContext.xml, applicationContext-ibatis.xml)선택.
Config set에서 New하고 Name에 applicationContext라고 하고, 두개다 체크 오케이~
그럼 이제 스프링 설정파일에서 에러를 찾아낼 수 있어요!
bean들의 관계를 그래프로도 볼 수 있네요!
Config set에 추가한 applicationContext에다가 마우스오른쪽버튼을 클릭하면 open graph로 볼 수 있어요!

이제 클라이언트 구현으로....다음 시간에-_-;

http://mudchobo.tomeii.com/tt/236 에 이어서-_-;
이제 셋팅이 끝났으면 코딩을 해봅시다.

※이 예제는 스프링프레임워크에서 제공하는 스텝바이스텝 예제의 일부를 조금 수정한 것 입니다.

우선 DB구조입니다-_-;
[code]
CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `description` varchar(255) default NULL,
  `price` decimal(15,2) default NULL,
  PRIMARY KEY  (`id`),
  KEY `products_description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr;

INSERT INTO `products` (`id`, `description`, `price`) VALUES
(1, 'Lamp', 391.50),
(2, 'Table', 2918.85),
(3, 'Chair', 884.27);
[/code]

그냥 src폴더는 자바서버단 폴더구요. flex_src폴더는 플렉스클라이언트단 폴더입니다^^
우선 스프링을 사용할 수 있게 web.xml파일을 수정해봅시다.
web.xml파일을 열어서 코드를 추가합니다.

web.xml
[code]
<context-param>
       <param-name>contextConfigLocation</param-name>
       <param-value>/WEB-INF/applicationContext*.xml</param-value>
</context-param>

<listener>
  <listener-class>
   org.springframework.web.context.ContextLoaderListener
  </listener-class>
 </listener>
[/code]
applicationContext*라고 적어 놓은 이유가 ibatis랑 분리를 하려고-_-;
설정파일은 applicationContext.xml과 applicationContext-ibatis.xml 두개를 사용할껍니다.

src에다가 코딩을 해봅시다.
java는 perspective를 Java EE로 바꾸고 합시다-_-;

우선 domain부분에 ValueObject를 하나 만들어봅시다-_-;
Java Resources:src에다가 New를 하고 class를 선택합니다.
package는 springapp.domain이라고 하구요.
Name은 Product라고 하고 Finish
[code]
package springapp.domain;

public class Product {

 private int id;
 private String description;
 private Double price;

 public int getId() {
  return id;
 }

 public void setId(int id) {
  this.id = id;
 }

 public String getDescription() {
  return description;
 }

 public void setDescription(String description) {
  this.description = description;
 }

 public Double getPrice() {
  return price;
 }

 public void setPrice(Double price) {
  this.price = price;
 }
}
[/code]
ProductDao를 만들어봅시다.
Java Resource:src에 New해서 interface를 추가합시다.
package에다가 springapp.dao라고 써놓고,
Name에다가 ProductDao라고 씁시다-_-;
[code]
package springapp.dao;

import java.util.List;

import springapp.domain.Product;

public interface ProductDao {
 public List<Product> getProductList();
}
[/code]
딸랑 ProductList만 가져오는 메소드가 있어요!
저 Dao인터페이스를 구현해봅시다!!!
[code]
package springapp.dao;

import java.util.List;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.orm.ibatis.support.SqlMapClientDaoSupport;

import springapp.domain.Product;

public class ProductDaoImpl extends SqlMapClientDaoSupport implements
  ProductDao {

 protected final Log logger = LogFactory.getLog(getClass());

 @SuppressWarnings("unchecked")
 @Override
 public List<Product> getProductList() {
  logger.info("Getting products!");
  return getSqlMapClientTemplate().queryForList("getProductList");
 }
}
[/code]
ibatis부분인데요. 설정파일을 보도록 하겠습니다.

SqlMapConfig.xml
[code]
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE sqlMapConfig     
    PUBLIC "-//ibatis.apache.org//DTD SQL Map Config 2.0//EN"     
    "http://ibatis.apache.org/dtd/sql-map-config-2.dtd">

<sqlMapConfig>
 <typeAlias alias="Product" type="springapp.domain.Product"/>

 <sqlMap resource="springapp/dao/MySQLProduct.xml" />
</sqlMapConfig>
[/code]
alias지정해주고, resource는 MySQLProduct.xml파일이네요. 보도록 합시다.

MySQLProduct.xml
[code]
<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE sqlMap     
    PUBLIC "-//ibatis.apache.org//DTD SQL Map 2.0//EN"     
    "http://ibatis.apache.org/dtd/sql-map-2.dtd">

<sqlMap namespace="Product">

 <resultMap id="ProductMap" class="Product">
  <result property="id" column="id" />
  <result property="description" column="description" />
  <result property="price" column="price" />
 </resultMap>

 <select id="getProductList" resultMap="ProductMap">
  select id, description, price from products
 </select>

</sqlMap>
[/code]
getProductList라는 것은 products테이블에서 내용을 select하는 것이네요.
Dao가 완성되었네요! 너무 길어지니 다음이시간에-_-;