이거 완전 신기하네요-_-;
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-_-;

 
Posted by 머드초보
,
 
책이 나오기 까지 참 많이 힘들었죠 ^^
(에이레네님 수고하셨어요~ ^^)

이 책은 그전에 AIR가 정식 런칭하지 않은 상태에서 그전에 출간되었습니다.
그 후 AIR가 정식 출간되고 나서, 정식버전에 바뀐 내용이 수정되고, 내용이 추가되면서 책이 다시 바뀌게 되었죠.

어쨌든 이제 나오게 되어서 다행이네요 ^^
AIR에 관한 책은 옥상훈님이 쓰신 "예제로 배우는 Adobe 플렉스(개정판)"과 "Flex/AIR Bible"책이 있는데요. 이 책은 Flex와 같이 나온 책이라 순수 AIR책이라고 하기에는 뭔가 맘에 걸립니다-_-;

하지만, 이번에 나오는 AIR in Action은 순수 AIR관련된 책이므로 AIR에 대해서 완벽하게 공부하실 분은 꼭 보셨으면 합니다. AIR에서 특화된 기능을 예제로 잘 만들어서 활용하고, 설명까지 상세히 나와있어서 AIR를 처음 접하는 개발자분들이나 FLEX만 주로하는 개발자들이 봐도 전혀 손색이 없어 보이네요.

http://www.aladdin.co.kr/shop/wproduct.aspx?ISBN=8992939175
알라딘에 판매정보가 떴는데 아직 출간하지 않아서 주문할 수 없네요.

2008년 9월 23일날 출간하려나봅니다 ^^

사용자 삽입 이미지

 
Posted by 머드초보
,
 
저번에 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부분도 똑같습니다.
그냥 자바문법과 비슷하다고 보면 되겠네요.
틀린 점이 있다면 이건 이벤트기반이라는 것이죠 ^^ 비동기적으로 일어납니다.
사용자 삽입 이미지

셀렉트도 잘되네요. 구글크롬에서 해봤어요. 잘 되네요.

사용자 삽입 이미지

머드초보를 2.00로 해서 입력해봅시다.

사용자 삽입 이미지

잘 들어갔네요.

PS. 실무db연동은....서버단언어와 함께하시길 바랍니다 ^^ (JAVA, C# 등등~)
 
Posted by 머드초보
,
 
우선 6장까지 따라해봤습니다.
내용은......매우 그레이트합니다!!!
놀랍습니다 ^^

이 실전 트레이닝 북을 6장까지 따라한 결과 이 책에 나온 내용 대로 그대로 코딩을 하면서 플렉스의 기능들을 익히는 방식으로 진행합니다. 그래서 어떤 식료품 구매 사이트를 만드는 것 같은데, 아직 좀 더 해봐야할 듯 합니다.
오직 6장까지 따라했을 뿐인데, 제가 모르는 내용이 수두룩 했습니다 ㅠ
사용자 삽입 이미지

이런 기능이 있었구나 하는 부분이 매우 많았고, 디자인모드에서 state가 편집이 가능한지도 몰랐습니다 ㅠ
이런 손쉬운 방법으로 state를 편집하는 기능을 알게 되어서 매우 기쁩니다 ㅠ

XML 컨트롤 하는 부분이 세세한 부분까지 잘 나와있으며, 많은 사람들이 헷깔려하는 ArrayCollection에 대해서도 많은 예제와 설명으로 이해를 쉽게 도왔습니다.

그리고 이 책의 번역이 이상하다고 하는 사람들이 많은데, 물론 번역이 잘 되어야 책의 원문의 내용을 살리겠지만, 이 책의 내용은 번역이 좀 어색하긴 하지만 의미전달의 미스가 있는 부분은 많지 않았습니다. 물론, 아직 책을 끝까지 읽지는 않았습니다만, 6장까지 읽으면서 이해는 잘 되었습니다. 하지만, 영어 독해능력이 뛰어나신 분들은 원서를 권해드립니다.
사용자 삽입 이미지

문제의 그부분? 스티커로 처리해놨네요^^


번역은 외국 정서에 맞게 사용한 언어를 한국 정서에 맞게 의역을 해야하는 작업입니다. 그래서 그 의역이 참 힘들기 때문에 번역을 하면서 어색한 부분이 많고 그런 것 같습니다. 대부분의 원서가 그런 책이 좀 많았습니다. 예전에 켄트백의 구현패턴이라는 책도 매우 훌륭한 책이라고 하는데, 번역이 좀 이상한 관계로 매우 읽기 힘들었던 책이였습니다. 이런 이론위주의 책이라면 정확한 번역이 필요로 했겠지만, 지금 이 플렉스3 실전 트레이닝북은 거의 대부분이 실습인 책입니다. 책 내용도 그냥 여기다가 이렇게 코딩하라 이런 말이 거의 대부분이고, 중간중간 설명이 좀 있기는 하지만 이해할 수 있는 수준이었습니다 ^^

그래서 구입을 좀 꺼려하시는 분은 안심하고 구매하셔도 좋습니다 ^^ 그 위키북스에서도 잘못된 내용을 검토하여 재판을 내놓을 생각이 있는 듯합니다. 지금 구매하시는 게 좀 그러시면 그 때 구입하셔도 될 듯 합니다.

PS. 전 절대....위키북스 알바가 아닙니다-_-; 책을 선물로 받았을 뿐?-_-;
사용자 삽입 이미지

감사합니다 ^^

사용자 삽입 이미지

채....책이....OTL...벌써 이렇게 찢어졌어요 ㅠ 너무 열심히 공부해서(설마-_-;)



 
Posted by 머드초보
,
 
이건뭐....프레임워크를 왜 쓴거지-_-;
소스코드만 더 길어졌네.
어쨌든 저의 삽질의 결정체를 공개할랍니다-_-; 나름 열심히 만든거라...ㅠㅠ
보시면 이것저것 신경을 많이 쓴걸(?) 볼 수 있을겁니다-_-;
타이머의 zerofill...-_-;
이걸 분석하면 Mate Flex Framework에서 제공하는 Injector에 대해서 이해하실 수 있을겁니다.

invalid-file

소스파일입니다.

아래에 INSTALL NOW클릭하시면 설치가 될 겁니다.
설치가 안되신다면 http://www.adobe.com/go/getair/ 여기서 AIR를 다운로드하세요.

Alternative content

Get Adobe Flash player

 
Posted by 머드초보
,