머드초보의 블로그

저번에 Beta2예제가 새로운 버전에서 안돌아가는 바람에 다시 만들었습니다-_-;
많은 분들이 안돌아간다고 하셔서 다시 만들었습니다 ㅠ
형식이 조금 바뀌었는데, 별 차이는 없었습니다.
더 편해진 것 같아요. 토큰이라는 것을 이용하네요.

http://code.google.com/p/assql/
다양한 예제와 lib파일은 이곳에서 받을 수 있습니다.

간단하게 insert와 select를 하는 예제를 만들어봤습니다.
테스트 해본 환경은 Eclpse3.4 + Flex Builder 3.0.1 + asSQL Beta 2.7에서 해봤습니다.

DB구조는 다음과 같습니다.
[code]
CREATE TABLE `products` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `description` varchar(45) default NULL,
  `price` decimal(15,2) NOT NULL default '0.00',
  PRIMARY KEY  USING BTREE (`id`,`price`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=utf8;

INSERT INTO `products` (`id`,`description`,`price`) VALUES
 (1,'Lamp','469.80'),
 (2,'Table','3502.62'),
 (3,'Chair','1061.12');
[/code]

아래는 소스코드입니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onCreationComplete()"
    layout="horizontal">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import com.maclema.mysql.ResultSet;
            import com.maclema.mysql.MySqlToken;
            import com.maclema.mysql.Statement;
            import com.maclema.mysql.Connection;
            import com.maclema.mysql.events.MySqlErrorEvent;
            import mx.rpc.AsyncResponder;
            import mx.controls.Alert;
           
            private var con:Connection;
            private var st:Statement;
            private var token:MySqlToken;
            [Bindable]
            private var dataAC:ArrayCollection;
           
            private function onCreationComplete():void
            {
                con = new Connection("DB주소", 3306, "DB아이디", "DB비밀번호", "DB명");
                con.addEventListener(Event.CONNECT, handleConnected);
                con.connect("euckr");
            }
           
            private function handleConnected(e:Event):void
            {
                if (con != null)
                {
                    st = con.createStatement();
                }
            }
           
            private function selectResult(data:Object, token:Object):void
            {
                var rs:ResultSet = ResultSet(data);
                dataAC = rs.getRows();                               
            }
           
            private function insertResult(data:Object, token:Object):void
            {
                Alert.show(token.description + " 삽입성공!");
                selectProcess();
                insertBox.visible = false;
            }
           
            private function fault(info:Object, token:Object):void
            {
                Alert.show("Error: " + info);   
            }
           
            private function selectProcess():void
            {
                var token:MySqlToken = st.executeQuery(
                    "SELECT id, description, price FROM products");
                token.addResponder(new AsyncResponder(selectResult, fault));   
            }
           
            private function insertProcess():void
            {
                st.sql = "INSERT INTO products (description, price) VALUES (?, ?)";
                st.setString(1, inputDescription.text);
                st.setNumber(2, Number(inputPrice.text));
                var token:MySqlToken = st.executeQuery();
                token.description = inputDescription.text;
                token.addResponder(new AsyncResponder(insertResult, fault, token));
            }
        ]]>
    </mx:Script>
   
    <mx:VBox horizontalAlign="center">
        <mx:DataGrid id="productDG" dataProvider="{dataAC}">
            <mx:columns>
                <mx:DataGridColumn headerText="ID" dataField="id"/>
                <mx:DataGridColumn headerText="제품명" dataField="description"/>
                <mx:DataGridColumn headerText="가격" dataField="price"/>
            </mx:columns>
        </mx:DataGrid>
       
        <mx:HBox width="100%" horizontalAlign="center">
            <mx:Button label="SELECT" id="btnSelect"
                click="insertBox.visible = false; selectProcess()"/>
            <mx:Button label="INSERT" id="btnInsert"
                click="insertBox.visible = true"/>
        </mx:HBox>
       
        <mx:VBox id="insertBox" height="100%" horizontalAlign="center" visible="false">
            <mx:Form>
                <mx:FormHeading label="정보 입력" />
                <mx:FormItem label="제품명">
                    <mx:TextInput id="inputDescription" />
                </mx:FormItem>
                <mx:FormItem label="가격">
                    <mx:TextInput id="inputPrice" restrict="0-9,."/>
                </mx:FormItem>
            </mx:Form>
            <mx:Button id="btnInsertProcess" label="추가" click="insertProcess()" />
        </mx:VBox>
       
    </mx:VBox>
       
</mx:Application>
[/code]
좀 이상한 점이 con.connect("euckr")로 해야지 한글이 나오더군요. mysql에서 utf8에는 한글이 없는건가.
어쨌든 인코딩은 어려워요 ㅠ

Connection이라는 클래스를 통해 mysql정보를 이용해 con객체를 생성한다음에 Statement를 생성합니다.
그 뒤에 selectProcess메소드에서 보시면, MySqlToken이라는 클래스를 이용합니다. Statement객체의 executeQuery메소드에 쿼리문을 넣어서 실행하면 token이 발행됩니다.
이 token에 addResponder라는 메소드를 통해 AsyncResponder를 이용해 해당 function넣은 객체를 생성해서 addResponder에 집어넣습니다. 그러면 데이터를 가져오는 시점에서 넣은 function이 호출이 됩니다.

여기서 데이터를 파싱하는 부분에서 엄청 편해진 부분이있는데요.
[code]rs.getRows();
[/code]
getRows라는 메소드가 있는데, 이건 해당 데이터셋을 자동으로 ArrayCollection형으로 변환해서 리턴해줍니다.
그러면 바로 바인딩된 datagrid에 데이터가 뿌려지겠죠. 멋집니다.

insert부분도 똑같습니다.
그냥 자바문법과 비슷하다고 보면 되겠네요.
틀린 점이 있다면 이건 이벤트기반이라는 것이죠 ^^ 비동기적으로 일어납니다.
PS. 실무db연동은....서버단언어와 함께하시길 바랍니다 ^^ (JAVA, C# 등등~)

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네요 ^^