머드초보의 블로그

Windows API정복 이후 간만에 1000페이지가 넘는 책을 구입했습니다. 지금 확인해보니 Windows API정복은 1500페이지 짜리군요. 사실 이런 책 하나쯤은 회사책상 위에 올려놔줘야 간지가 나죠......아 농담이구요-_-

ActionScript에 대해서 너무 모르고 flash계열에 입문을 해버려서-_- 저한테 좋은 책이 나왔네요. AIR IN ACTION의 역자이신 유윤선님과 ActionScript 3.0 CookBook역자이신 송호철님께서 번역을 해주셨네요^^ 둘 다 매우 유용하게 쓰고 좋아하는 책들인데^^ 두분이서 1000페이지를.....-_- 대....대단하십니다-_-

물론 2년전 책이 국내에는 지금 나오긴 했지만, ActionScript만을 심오하게 다룬 책은 국내에 많이 없었던 것이 사실이죠. 대부분 나와있는 Flash계열의 책은 Flex Framework의 사용법이나, Flash책에서 간간히 보이는 ActionScript가 다 인데, 이 책에는 Actionscript의 문법과 특징들을 쉽게 설명해 놓은 것 같습니다.

번역하시느라 너무 수고 많이 하셨어요~

저번에 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# 등등~)

ActionScript에서 상속-_-;













부모클래스
[code]package com.withflex.myclasses
{
 public class MyClass
 {
  protected var myname:String;
 
  public function setMyname(myname:String):void {
   this.myname = myname;
  }
 }
}
[/code]
자식클래스
[code]
package com.withflex.myclasses
{
 public class MySubClass extends MyClass
 {
  public override function setMyname(myname:String):void {
   this.myname = myname;
   trace(myname);
  }
 
  public function getMyname():String {
   return myname;
  }
 }
}

[/code]
MyClass를 상속받았어요. 그래고 setMyname을 오버라이딩하고, getMyname을 추가했네요.

[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="initApp()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.withflex.myclasses.MySubClass;
   import com.withflex.myclasses.MyClass;
   
   private var myObj:MyClass;
   private var mySubObj:MySubClass;
   
   private function initApp():void {
    myObj = new MyClass();
    myObj.setMyname("성종천"); //이눔은 trace안찍힘-_-;
   
    mySubObj = new MySubClass();
    mySubObj.setMyname("성종천"); //이눔은 찍힘-_-;
   }
   
   public function traceName(event:MouseEvent):void {
    Alert.show(mySubObj.getMyname());
   }
  ]]>
 </mx:Script>
 <mx:Button label="버튼입니다" click="traceName(event);"/>
</mx:Application>
[/code]
아....잘되네요.

인터페이스도 되네요.
File -> New -> Action Script interface선택!
[code]
package com.withflex.myclasses.interfaces
{
 public interface IMyClass
 {
  function setName(names:String):void;
 }
}
[/code]

[code]package com.withflex.myclasses
{
 import com.withflex.myclasses.interfaces.IMyClass;
 
 public class MyClass implements IMyClass
 {
  protected var myname:String;
 
  public function setMyname(myname:String):void {
   this.myname = myname;
  }
 }
}
[/code]

그외 액션스크립트 관한 거.

ActionScript는 " "랑 ' '랑 같은 역할을 합니다. 그 이유는 MXML에서는 property값이 ""이기때문입니다.

trace라는 내장함수가 있는데, 디버그모드에서만 작동합니다. 값을 찍어볼 수 있습니다.

도움말은 마우스대고 shift + f2입니다.

액션스크립트에서 생성한 것은 디자인모드에서 안 보입니다.

NaN은 Not a Number의 약자랍니다-_-;(뭔지 몰랐는데 ^^)

var arr:Array = []; 랑   var arr:Array = new Array(); 랑 같은 거랍니다 ^^

C#에서도 있는데 is랑 as연산자가 존재합니다.

/**      */ 라는 주석이 있는데 다큐먼트 주석이랍니다. 좀 더 알아봐야겠습니다 ^^

=== 연산자도 있는데 이것은 값뿐아니라 메모리도 참조하는지 확인한답니다 ^^

delete연산자가 있는데 그냥 변수에 null넣는 거랑 같은 거랍니다-_-;

for in, for each등 편한 for문을 제공합니다 ^^ c#에도 있어요

함수를 변수처럼 사용이 가능해요 ^^

dynamic클래스라는 게 있는데 아무것도 없는 것에 나중에 함수를 추가하고 그럴 수 있다네요. 비추랍니다-_-;

액션스크립트에서도 arguments가 있답니다.

뭐 등등 여러가지 얘기가 많고, 좋은 as3에 관한 ppt를 주셨는데 공개를 하면 안되는 거랍니다 ^^
굉장히 괜찮은 자료네요. 문법은 이것만 있으면 공부할 수 있겠어요 ^^

그리고, 책을 추천해주셨는데 Essential ActionScript 3.0
http://book.naver.com/bookdb/book_detail.php?bid=2882520

가격이.......-_-; 뭐이리 비싸지=-_-;

숙제도 내주셨어요. 컴포넌트익스플로러에서 컴포넌트 쭉 둘러보고 오시고,
ppt준거 한번 씩 해보고 확인해보랍니다. ^^

다음주가 기대되는군요 ^^

아직 저도 잘 모릅니다. 그래도 오늘 많이 삽질했으니 포스팅하겠습니다-_-;

플렉스를 이용한 환경을 다 만들었으면 플렉스를 해봐야겠죠!

FlexBuilder를 실행해봅시다.

익숙한 이클립스가 뜹니다! 덕분에 더 자신감을 가지게 해줍니다-_-; 자바개발자라면 누구나 써본 이클립스로 플렉스를 할 수 있다니!

File -> New -> Flex Project를 선택합니다.
3가지 종류가 나오는데 뭐 잘 모르니까 Basic를 선택합시다-_-;

넥스트를 눌러서 프로젝트 이름은 HelloWorld라고 찍읍시다. 정말 좋아하는 단어입니다.
Finish를 눌러서 프로젝트를 생성합니다.

HelloWorld.mxml 이라는 파일이 처음에 열려있네요.
mxml은 무슨 확장자냐! Machine-oriented extensible markup language 이라고 하더군요. 저도 잘모르겠습니다. 그런데 xml인거 같습니다 ^^ 태그 열고 닫고 하는게 xml과 같습니다.

이 프로젝트에서 ActionScript를 추가해봅시다.
File -> New -> ActionScript를 선택하고, HelloWorld폴더를 선택하고, 이름은 Greeter.as로 씁시다.

여기다가 코딩을 합시다.

[code]
package {
    public class Greeter {
        public static function sayHello():String {
            var greeting:String = "Hello World!";
            return greeting;
        }
    }
}
[/code]

내용을 보시면 package는 잘모르니 생깝시다. class를 정의 했는데 Greeter라는 클래스입니다. 이거의 멤버함수로 sayHello라는 것이 있습니다. 이건 리턴타입을 맨뒤에 써줍니다. 변수는 무조건 var로 선언하고, 타입은 그 뒤에 써줍니다. 안써주면 Object형이 됩니다.

클래스를 작성했으니 이 클래스를 mxml에서 사용해보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"   
 layout="vertical" creationComplete="initApp()"> 
 <mx:Script> 
 <![CDATA[ 
  public function initApp():void { 
       mainTxt.text = Greeter.sayHello(); 
     } 
 ]]> 
 </mx:Script> 
 <mx:TextArea id="mainTxt" width="400" /> 
</mx:Application>
[/code]

script부분의 initApp()함수를 보면 mainTxt.text라는 곳에다가 Greeter클래스의 static함수인 sayHello를 호출해서 넣겠다는 표현으로 보이구요.
아래에는 TextArea를 만드는데 이것의 이름이 mainTxt입니다. 거기의 text를 적겠다는 것 같습니다.

대충 보면 html처럼 위에 script는 자바스크립트라고 생각되고, 아래는 html처럼 input태그가 들어가는 것처럼 생각해도 되려나-_-; 어쨌든 그런 구조인거 같습니다 ^^

위에 플레이버튼 같이 생긴거 run을 클릭하면(Ctrl + F11) 아래와 같은 화면이 뜰껍니다.


정확한 동작구조는 파악을 못했는데요-_-; 좀더 공부해봐야 할꺼같습니다 ^^