아주 간단한 날씨앱을 만들어봤는데, urlLoader가 잘 작동하는지 테스트해봤습니다^^

Flash로 개발하게 되었을 때 이점은 역시나 플래시만의 장점인 쉽게 그래픽을 그리고, 조작할 수 있다는 것이겠죠^^ 게임개발에 유용한...ㄷㄷ
게다가 이번에 안드로이드air까지 지원하면서 한가지의 코드로 데스크탑, 안드로이드, 아이폰앱까지 만들 수 있는 형태가 될 수 있죠(사실 Android와 Desktop은 하나의 프로젝트긴 한데, 아이폰은 AIR프로젝트가 아닌 아이폰OS프로젝트로 생성해야 만들 수 있긴하죠ㅠ).
그리고, iPhone개발을 위해 값비싼 맥북을 사지 않아도 되지요-_-(하지만, 역시....그냥 xcode로 개발하는 게...)
하지만, 모바일 기기 특성상 각각 장단점을 살릴 수 있는 기능들은 일부제한이 됩니다. 그런 기능들을 다 포기한다면 그나마 할 수 있는 분야는 게임분야겠네요^^ 게임분야는 제작하면 좋을 듯 하지만, 또 여기서 퍼포먼스가 좀 걸리네요. 제가 bitmap을 통해 뭔가 그리기 테스트를 해봤는데, 역시나 뭔가 좀 느린 듯한 느낌을 떨쳐버릴 순 없군요ㅠㅠ

일단 뭐 간단한 URLLoader를 이용해 데이터 뿌려주는 것부터 해봤긔...ㅠㅠ

일단 Adobe에서 제공하는 문서에 보면 엄청 잘나와있습니다^^
http://help.adobe.com/ko_KR/as3/iphone/index.html

준비물은 Flash CS5 랑 인증서생성 해주고 발급해주는 OpenSSL만 있으면 될 듯!

1. 인증서발급 및 프로비저닝 프로파일 받기
맥에서는 KeyChain Access라는 프로그램으로 막 만들면 되는데, 윈도우즈에서는 그게 없어요. 그래서 하는 방법이 어도비공식문서 잘 나와있네요~ 여기에서는 윈도우즈에서도 할 수 있는 방법이 있으니까 참조하세요~
http://help.adobe.com/ko_KR/as3/iphone/WS789ea67d3e73a8b2-240138de1243a7725e7-7ffd.html
혹시나.... 99딸라짜리 개발자등록을 안하셨다면 할 수 없습니다ㅠㅠ
근데, 제 아이팟은 탈옥을 해서 그런지, 안드로이드용 .p12파일과 아무 .mobileprovision파일로 해도 잘되더라구요. 기기에 그냥 테스트가 하고 싶으신 분이라면(제가 그랬음!기기에 어떻게 돌아가는지만 궁금했을 뿐), 탈옥(?)을 하셔서 테스트를 해보시는게...ㅠㅠ

2. Flash CS5에서 개발하기

Flash CS5를 열고 그냥 개발하면 됩니다(응?).
일단 새로만들기에 iPhone OS라는 게 있는데, 그걸로 생성하면 320x480사이즈의 플래시문서형태가 나옵니다. 일단 초간단한 구글날씨api를 이용해서 날씨를 불러와서 문서에 보여주는 형태의 코드를 해봤습니다.
[code]
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.errors.IOError;
import flash.utils.Timer;
import flash.events.TimerEvent;

var urlLoader:URLLoader;
var urlRequest:URLRequest;
var timer:Timer;

function init():void
{
    trace("init");   
   
    timer = new Timer(5000, 0);
    timer.addEventListener(TimerEvent.TIMER, timerHandler);
   
    urlLoader = new URLLoader();
    urlLoader.addEventListener(Event.COMPLETE, completeHandler);
    urlLoader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
   
    requestWeather();
}

function timerHandler(event:TimerEvent):void
{
    requestWeather();
}

function requestWeather():void
{
    urlRequest = new URLRequest("http://www.google.co.kr/ig/api?weather=seoul&temp=" + Math.random());
    urlLoader.load(urlRequest);
    timer.reset();
    timer.start();
}

function completeHandler(event:Event):void
{
    var xml:XML = new XML(urlLoader.data);
    trace(xml);
    var currentConditions:XMLList = xml.weather.current_conditions;
    var condition:String = currentConditions.condition.@data;
    var tempC:int = currentConditions.temp_c.@data;
    var humidity:String = currentConditions.humidity.@data;
    var weatherIcon:String = currentConditions.icon.@data;
    var windCondition:String = currentConditions.wind_condition.@data;
    trace(tempC + " " + humidity + " " + weatherIcon + " " + windCondition);
   
    imageLoader.source = "http://www.google.co.kr" + weatherIcon;
    labelTemp.text = tempC + "도";
    labelCondition.text = condition;
    labelWind.text = windCondition;
}

function errorHandler(event:IOErrorEvent):void
{
    trace("error = " + event.text);
    labelCondition.text = "오류발생!";
}

init();[/code]
아오....오늘 하루종일 어둡더니 계속 안개네요... 13일의 금요일이 보통 이런 날씨인데...
사용자 삽입 이미지

잘보면 아이콘이 어도비 에어입니다. 뭐 serversocket도 된다니 air가 맞겠네요^^

3. iPhone용에 넣기위해 ipa파일로 제작하기
파일 -> iPhone OS 설정 에서 보면 셋팅하는 게 있고, 배포탭을 보면 인증서와 프로비저닝 프로파일이 있는데, 그건 아까 1번에서 설명한 대로 넣으면 됩니다.
장치 테스트용 빠른 제작으로 하고 제작을 누르면 ipa를 만들기 시작합니다... ipa 생성까지 백만년 걸리는 것 같았습니다ㅠㅠ 엄청 느립니다ㅠㅠ

ipa파일이 해당 프로젝트 폴더에 생성이 되면 그걸 itunes에 있는 응용프로그램에 넣고, 동기화 시키면 아이폰/아이팟에 들어가 있을겁니다.

4. 아이폰/아이팟에서 확인
사용자 삽입 이미지
아오...나 레티나액정인데, 고화질로는 못만드는건가....ㅠㅠ 그냥 흐리게 나오네요ㅠㅠ

5. 후기의 한말씀-_-
그냥 맥북사시고, objective-c배우세요.

 
Posted by 머드초보
,
 
많은 분들(?)이 제 블로그에 오셔서 질문을 해주셔서 간단한 예제를 통한 설명을....-_- 나중에 저도 참고하려고 기록용-_-

일단, Flash에서 CrossDomain에 걸리는 데이터를 요청할 때 Plicy File인 crossdomain.xml 파일을 root에 정의해둬서 해당 도메인이면 데이터를 허용하게 할 수 있습니다.

소켓도 마찬가지입니다. 해당 도메인에서 해당 포트로 들어온 요청은 받겠다는 정책파일을 작성할 수 있습니다.
최초 소켓이 정책파일을 요청하게 되는 포트는 843포트입니다. 만약 이포트가 열러있지 않다면 현재 연결하려고 하는 포트로 <policy-file-request/>를 날려서 정책파일을 요청하게 됩니다.
그러면 843이든, 해당포트든 간에 정책파일만 날려주면 됩니다.

[code]<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
   <allow-access-from domain="*" to-ports="10000-10001" />
</cross-domain-policy>[/code]
소켓에 대한 정책파일을 정의한 것인데, domain에는 허용할 도메인을 쓰고, to-ports에는 허용할 포트를 쓰면 됩니다.
이걸 날려주면 이제 연결할 포트로부터 데이터를 주고 받을 수 있습니다.

초간단 에코예제!
일단 서버는 자바로...(그나마 자신있는 언어라서ㅠㅠ)

일단 PlicyFileServer를 하나 돌릴 쓰레드를 만듭니다.
PlicyFileServer.java
[code]import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.ServerSocket;
import java.net.Socket;


public class PolicyFileServer extends Thread{
   
    private ServerSocket serverSocket;
    private String policyFile = "<?xml version='1.0'?>" +
                                "<!DOCTYPE cross-domain-policy SYSTEM '/xml/dtds/cross-domain-policy.dtd'>" +
                                "<cross-domain-policy>" +
                                "<allow-access-from domain='*' to-ports='10000' />" +
                                "</cross-domain-policy>";
   
    @Override
    public void run() {
        try {
            serverSocket = new ServerSocket(843);
            while (true) {
                final Socket socket = serverSocket.accept();
                new Runnable() {
                    @Override
                    public void run() {
                        try {
                            socket.setSoTimeout(10000);
                            InputStream in = socket.getInputStream();
                            byte[] buffer = new byte[23];
                            if ( in.read(buffer) != -1 && (new String(buffer)).startsWith("<policy-file-request/>") ) {
                                OutputStream out = socket.getOutputStream();
                                out.write(policyFile.getBytes());
                                out.write(0x00);
                                out.flush();
                                out.close();
                            }
                        } catch (IOException e) {
                            e.printStackTrace();
                        } finally {
                            try { socket.close();} catch(Exception ex){}
                        }
                    }
                }.run();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}
[/code]
내용을 보면 그냥 서버소켓하나 만들어서 요청이 들어오면 그 소켓으로 policy file을 전송하는 형태입니다. 파일은 만들기 귀찮아서-_- 그냥 String으로 선언-_- 보면 모든도메인에 한해서 10000포트를 열어주는 겁니다.

이제 메인서버!
SocketTest.java
[code]import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;


public class SocketTest {

    private ServerSocket server;
   
    public SocketTest() {
        try{
            server = new ServerSocket(10000);
            System.out.println("접속을 기다립니다.");
           
            while (true){
                final Socket socket = server.accept();
                Thread t = new Thread(new Runnable() {
                    @Override
                    public void run() {
                        try {
                            PrintWriter pw = new PrintWriter(new OutputStreamWriter(socket.getOutputStream(), "UTF-8"));
                            BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream(), "UTF-8"));
                            String line = null;
                            while ((line = br.readLine()) != null) {
                                System.out.println("수신데이터 : " + line);
                                pw.println("Hello! " + line);
                                pw.flush();
                            }
                        } catch (Exception e) {
                            try { if(socket != null) socket.close(); } catch (Exception ex) {}
                        }
                    }
                });
                t.start();
               
            }
        } catch(Exception e){
            System.out.println("Error!");
        }
    }
   
    public static void main(String[] args) {
        new PolicyFileServer().start();
        new SocketTest();
    }
}[/code]
데이터를 받으면 다시 Hello!를 붙여서 다시 전송해주는 echo서버를 하나 만듭니다.
그리고 main함수에서는 PolicyFileServer쓰레드를 하나 시작하고, EchoServer를 돌립니다.

이제 Flex!
[code]<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               applicationComplete="application1_applicationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
           
            import spark.components.mediaClasses.VolumeBar;
           
            private var socket:Socket;
           
            protected function application1_applicationCompleteHandler(event:FlexEvent):void
            {
                socket = new Socket("127.0.0.1", 10000);
                socket.addEventListener(ProgressEvent.SOCKET_DATA, socketDataHandler);
                socket.addEventListener(Event.CONNECT, connectHandler);
            }

            protected function btnSend_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                socket.writeUTFBytes(inputMessage.text + "\n");
                socket.flush();
            }
           
            private function connectHandler(event:Event):void
            {
                trace("접속완료!");   
                hbox.visible = true;
            }
           
            private function socketDataHandler(event:ProgressEvent):void
            {
                var message:String = socket.readUTFBytes(socket.bytesAvailable);
                trace("수신메세지 : " + message);
                textResult.text = message;
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
   
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
   
    <mx:HBox id="hbox" visible="false" width="100%" horizontalAlign="center">
        <s:TextInput id="inputMessage" />
        <s:Button id="btnSend" label="송신하기" click="btnSend_clickHandler(event)"/>
    </mx:HBox>
   
    <mx:Text id="textResult" width="100%" textAlign="center"/>
</s:Application>
[/code]
Socket만들어서 10000포트로 연결합니다. 그러면 도메인이 다르게 되면 swf가 843포트로 "<policy-file-request/>"를 날려서 정책파일을 달라고하는데, 서버에서 만들어놓은 PolicyFileServer가 정책파일을 내려주면 받게되면 10000포트로 다시 연결해 연결을 시작하게 됩니다.

몬가 별거 없는데 장황하게 설명해놨네.

그리고, 이런식으로 PolicyFileServer를 서버어플에 통합하면 안되겠죠? 나중에 서버어플이 늘어난다면 계속 새로 추가해야하니, PolicyfileServer를 따로 만들어서 띄워놓으면 되겠죠?^^
일단, 여러 폴리시서버 예제는 구글링하면 많이 나와요~
여기 아래주소는 Java, PHP, C#, VB.NET, Python 등등 예제가 있어요.
http://code.google.com/p/assql/wiki/SecurityInformation
이건 c로 만든거!
http://panzergruppe.hp.infoseek.co.jp/fspfd.html
 
Posted by 머드초보
,
 
최근 스티브잡스횽이 까고 있는 플래시-_-

CS5 한글판이 나와서 한번 깔아봤는데, 역시 전 한글이 편하네요-_- 어설픈 한글로 되어있어도 그냥 영어로 된 것 보단 낫다고 생각하는 1人...

일단 Flash랑 Flash Builder를 둘 다 깔아야해요~
안깔면 안깔려있다고 뭐라그래요~

일단 Flash에서 액션스크립트 편집기가 좋아졌다고 하는데(전 잘 안써봐서-_-), 여전히 안좋은 것 같은 느낌이 드는....
액션스크립트 클래스 편집은 그냥 Flash Builder에서 하면 맘 편하네요~
둘이서 연동이 되어서 빌더에서 에러 수정 및 편집이 매우 용이해요~

일단 플래시화면!
사용자 삽입 이미지
일단 Flash Builder도 같이 띄워놓아야 합니다. 안그러면 선택하라는 거 안나오는 것 같음.
여기서 ActionScript3프로젝트로 새로 만든다음에, ActionScript 3.0 클래스를 새로 만들면
"어떤 응용 프로그램에서 ActionScript3.0 클래스를 만들어야 합니까?"라는 말로 물어보고, Flash Professional인지 Flash Builder인지 선택할 수 있어요.
그러면 Flash Builder에서 해당 Flash프로젝트 파일인 fla파일을 선택하면 되는데요. 그러면 자동으로 프로젝트도 만들고, ActionScript Class만드는 창도 떠서 만들어지게 됩니다.
[code]package
{
    import flash.display.Sprite;

    public class DrawRect extends Sprite
    {
        public function DrawRect()
        {
            this.graphics.beginFill(0x000000);
            this.graphics.drawRect(0, 0, 100, 100);
            this.graphics.endFill();
        }
    }
}[/code]
사각형을 그리고~ flash에서 불러올 때 자동으로 DrawRect라는 클래스가 코드힌트로 나옴!
사용자 삽입 이미지

[code]var drawRect:DrawRect = new DrawRect();
this.addChild(drawRect);[/code]

사용자 삽입 이미지
잼있는 건 Flash Builder에서도 Control + Enter눌러도 된다는......
일단....여전이 Flash에서 ActionScript편집은 불편합니다. 그래서 얘네들이 Flash Builder 연동을 해서 하는 것 같은데, 정말 괜찮은 기능인 듯 합니다.
 
Posted by 머드초보
,
 
문서를 보니..... 향상된 것인지 아님 기능이 더 추가되고 복잡해진 것인지 모르겠군요-_- 익숙해지면 편하겠지만, 지금은 현재 Flex3방식의 state가 더 편해보이네요-_-

예전에 어도비에서 RIA CAMP할 때 STATE기능의 향상이 있을 것이라고 해서 찾아보니 완전히 바뀌었네요.

우선 Flash Builder 4 Beta 2를 다운로드 해서 설치를.....ㅠㅠ

기존 Flex3 방식은 <mx:states> 태그안에 <mx:State>태그가 있는데, 이 안에서 AddChild나 SetProperty태그를 이용해서 해당 state로 변경이 되면 컴포넌트를 삭제하고 추가하거나 값을 변경하는 코드가 들어갔었죠.

Flex4 방식은 위와 같은 방식에서 완전히 바뀌었습니다(사실..flex4로 오면서 거의다 바뀌었다는....).
<s:states>태그안에 <s:State>태그가 들어가는 것은 같지만, 여기서 컴포넌트를 추가하거나 변경하는 코드는 들어가지 않습니다. 그냥 다음에 xml코드에서 해당 컴포넌트들에게 적용을 하게 됩니다. 컴포넌트 태그에 해당 state값에 맞는 코드를 중복으로 선언할 수 있습니다.
해당 State의  Name들이 default, register라면 <s:Panel title="제목" title.register="등록제목" /> 이런형태로 써버리면 currentState가 register로 바뀌면 자동으로 Panel의 title이 title.register값으로 변경이 되게 됩니다.

상세한 기능 및 설명은 Flex 4문서를 보시는 게 더 빠를 듯 합니다.
http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf69084-7fb4.html
http://www.artima.com/articles/flex_4_states.html

1. 디자인모드에서 state설정
그럼 Flash Builder를 실행해서 여기서 State를 설정해봅시다.
Flex로 프로젝트를 하나 만듭니다.
Design모드로 전환!
오른쪽 States View가 있는데, 거기에서 New State를 선택해서 추가합니다.
addbutton이라는 state를 추가합니다. 그리고 기존에 있던 State1은 default로 변경합니다.
그럼 states를 addbutton으로 맞춰놓고, 버튼을 드래그해서 놓습니다.
그리고 Source뷰로 바꾸면 이런 코드가 완성이 되네요^^
[code]<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
    <s:states>
        <s:State name="default"/>
        <s:State name="addbutton"/>
    </s:states>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button includeIn="addbutton" x="308" y="231" label="Button"/>
</s:Application>[/code]
Button에 includeIn이라는 attribute값이 들어가있고 거기에 state값이 있네요. 이 버튼은 addbutton일 때만 보이겠다는 것이죠. 아마 이 새로 바뀐 state형태는 기존 ui를 구성하는 mxml코드를 최대한 방해받지 않게 하려고 만든 것 같습니다.
그리고 재미있는 것은 편집 상단에 Show state: 부분이 있는데, state를 default로 바꾸면 button태그부분이 회색으로 dim처리가 되어버립니다-_- 와 멋지네요. UI작성에 방해받지 않게 하려는 배려인 듯.
사용자 삽입 이미지

dim처리...-_-

2. STATE별 이벤트 추가
state별 이벤트 뿐만 아니라 뭐 다양하게 추가할 수 있어요.
Design모드에서 그냥 addbutton state선택하고, 아까 추가한 버튼을 누르면 Properties를 설정할 수 있는데 In states를 클릭해서 All States로 바꿔줍시다^^
그러면 default에서도 나오는데, 버튼선택해서 오른쪽버튼 누르면 generate Service Call이라는 것이 있는데, 그걸 누르면 자동으로 click이벤트 함수를 만들어줍니다.
두개의 state에서 동시에 만들어버리면 이렇게 나오는군요.
사용자 삽입 이미지

신기함-_- 다른 state함수만 dim처리됨-_-

그 외의 자세한 기능은 문서를 참조하면 돼요. 문서에 샘플예제가 참 잘 나와 있습니다. Flex의 장점은 잘 된 문서화(?)가 아닐까합니다. 한글화가 안되어있는 것이 아쉽긴 하지만....ㅠㅠ

빌더는 여기서 다운로드를...ㅠㅠ


 
Posted by 머드초보
,
 
아.....책은 오래전에 읽었는데, 이제야 서평을 쓰네요. 사실 실습도 안해봐서 내용도 다 까먹은 듯하지만, 불현듯 열이아빠님의 서평이벤트가 생각나서 글을 적어봅니다-_- 내일이 마감임 ㄷㄷ

우선 Flex어플은 그냥 기본으로 제공하는 스킨이 있는데요. 대부분이 그대로 쓰지 않습니다-_- 고객들이 싫어해요-_- 어쨌든 디자....

아놔....갑자기 회의 불려갔다왔네....

암튼, 디자인을 해서 입히고 그러는 작업이 추가적으로 들어가는데, 이거 해보면 해볼수록 스트레스가 만빵이에요. 왠지 디자인대로 안입혀지고-_- 어떻게 입히는지 모르겠고 그런 것이 많은데, 플렉스에 디자인을 입히는 방법을 알려주는 책입니다.
게다가 타 애플리케이션(플래시, 포토샵, 일러스트레이터, 파이어웍스 등)과 쉽게 협업을 할 수 있는 내용도 잠깐 나오구요.
사용자 삽입 이미지

음....왠지 이 디자인패턴책이랑 색감이 좀 맞는데?-_-


이 책의 구조는 조쿰 특이합니다. 앞에 이론이 나오고, 뒤에 실습예제가 나오는....
즉 책의 앞부분서부터 절반은 이런식으로 하면 바꿀 수 있다가 나오고, 절반부터 뒷부분은 약간의 실습예제가 나옵니다. 왜 이런 구조를 택했는지 모르겠지만, 전 이 방식이 적응이 되지 않는군요. 왠지 이론을 설명하고 예제가 바로 뒷바쳐줘야 내용을 그나마 이해를 하는 스타일이라-_- 앞에서 이론을 다 읽고, 뒷부분 예제를 읽으려니 왠지 앞부분이 생각이 안나는군요 ^^

그리고, 뒷부분에 나오는 부록도 참 맘에 드네요. 각각 컴포넌트에 대해서 style속성에 대해서 그림을 통해 잘 나타내어주었구요. 그리고, 필터속성이나 유용한 사이트들도 잘 나왔구요^^
사용자 삽입 이미지

마지막으로 디자이너와 보면 참 좋을 듯 한데...디자이너들이 보기엔 Flex를 좀 알아야할 듯. 디자이너들과 함께 협업하는 그날까지~^^
 
Posted by 머드초보
,