[Flex/AIR] Flash Builder 4의 Data/Services기능을 이용한 HTTPService요청 - 간단한 날씨위젯
에어(AIR) 2009. 11. 15. 19:17기존에 Flex3에서 HTTPService는 직접 xml을 확인하여 valueobject를 만들던지 자동으로 파싱해주는 객체를 그냥 쓰던지 그런식으로 했었는데요. Flex4에서는 쉽게 Service객체를 만들어주고, ValueObject를 만들어줍니다.
근데, 그냥 기존방식을 쓰는 게 나을 것 같아요-_- 뭔놈의 클래스를 뭐이리 만들지-_-
그래도 제공하는 기능이니까 한번 사용해서 만들어봅시다-_-
다운로드는 여기서....-_-
1. 프로젝트 생성
New -> Flex Project -> Application type은 Desktop(구글의 httpservice를 가져올 것이어서 데탑으로-_-) -> Finish.
2. 서비스생성
구글에서 날씨를 가져오는 Service를 추가해봅시다.
아래 Data/Services탭에서 Connect to Data/Service..클릭.
HTTP선택 -> Opearation 첫번째 항목에 getWeather로 변경. url은 http://www.google.co.kr/ig/api?weather=seoul 입력.
url만 입력하면 ?붙은 파라메터는 자동으로 Parameters탭에 들어갑니다. weather가 들어가는데, 캐쉬문제 때무넹 캐쉬파라메터도 하나 추가합니다.
Add누르고, cache입력하고, DataType은 Number.
Service name은 WeatherService로 하죠. Finish.
여기서 이름 네이밍룰에 주의해야하는데, Service name이랑 parameter name이랑 같은 게 있으면 안됩니다. 에러나더군요.
3. 서비스에 대한 리턴타입 지정
이제 리턴타입을 지정해줘야하는데요.
그전에 데이터를 잘 가져오는지 테스트를 해볼 수 있습니다.
방금 생성한 WeatherService의 getWeather를 선택하고 오른쪽버튼 누르면 Configure Return Type이 있습니다.
이거 선택하기전에 Test Opearation이라고 해서 테스트를 해볼 수 있는 게 있네요.
테스트를 쉽게 해볼 수 있어서 참 좋네요. Test를 누르면 데이터를 가져와서 Tree View 또는 Raw View로 볼 수 있습니다.
근데, 이상한 점을 발견했는데, 네이버오픈API나 몇몇 XML은 이걸로 하면 잘 안돼요. 왜그런지 모르겠네요. 이런 에러메세지를 뿜습니다.
InvocationTargetException:The response is not a valid XML or a JSON string
이거 왜그런지 아시는 분은 답변좀....굽신굽신....-_-
암튼, 날씨API는 되니까 해봅시다-_-
Configure Return Type선택 후, Auto-detect the return type from sample data선택. 뭐 그냥 object로 받아도 되는데, 필요한 데이터만 가져온다고 하면 쉽게 valueobject를 만들 수 있는 장점이 있어요.
파라메터 방식을 선택하고, seoul을 입력합니다.
그러면 결과값이 나오는데, 여기서 필요한 건 현재 날씨이기 때문에 select root에서 current_conditions를 선택합니다. 그리고, Finish를 누르면 valueObject가 만들어지는데, 한개의 node마다 클래스가 2개씩 생겨요-_-
4. UI생성
UI를 만들어봅시다.
[code]<s:Button id="btnClose" label="X" width="29" x="67" y="1" click="btnClose_clickHandler(event)"/>
<mx:Image x="6" y="32" width="40" height="40" id="imgIcon"/>
<s:Label x="0" y="80" width="100" textAlign="center" id="labelCondition" />
<s:Label x="59" y="45" text="30º" fontSize="20" id="labelTemp"/>[/code]
초간단 UI...UI라고 불리지도 못하는 UI.
5. 데이터 바인딩
이제 데이터를 불러와야해요.
Design모드로 가서 아무라벨이나 붙잡고, 오른쪽버튼 눌러서 Bind To Data를 선택. 그리고 방금 만든 서비스를 바인딩해요. 전 labelCondition을 선택했는데, 그러면 WeatherService, getWeather의 condition을 선택합니다.
그러면 service태그도 알아서 들어가고 해당 라벨에는 creationComplete이벤트핸들러가 추가되었네요.
getWeather파라메터는 "seoul"과 cache는 랜덤값을 넣어줍니다.
그리고 실제 태그에는 condition.@data에 값이 있기 때문에, label의 text부분에 getWeatherResult.lastResult.condition.data로 변경해주시면 됩니다.
[code]protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
{
getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
}[/code]
6. 완성된 코드
그럼 1분마다 데이터를 가져오는 타이머도 만들고 윈도우틀도 없애서 위젯형태로 만들어버리고, 나머지 label에도 값에 맞게 바인딩 시키면 완성이 됩니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:weatherservice="services.weatherservice.*"
width="150" height="150"
applicationComplete="windowedapplication_applicationCompleteHandler(event)"
showStatusBar="false"
backgroundColor="#48FF00">
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.mediaClasses.VolumeBar;
private var timer:Timer;
protected function windowedapplication_applicationCompleteHandler(event:FlexEvent):void
{
timer = new Timer(1000, 0);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();
}
protected function btnClose_clickHandler(event:MouseEvent):void
{
nativeWindow.close();
}
protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
{
requestData();
}
protected function labelTitle_mouseDownHandler(event:MouseEvent):void
{
nativeWindow.startMove();
}
protected function timerHandler(event:TimerEvent):void
{
requestData();
}
private function requestData():void
{
getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
}
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getWeatherResult"/>
<weatherservice:WeatherService id="weatherService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="labelTitle" text="서울날씨" x="0" y="0" height="22" width="121" verticalAlign="middle" mouseDown="labelTitle_mouseDownHandler(event)"/>
<s:Button id="btnClose" label="X" width="30" x="120" y="1" click="btnClose_clickHandler(event)"/>
<mx:Image x="25" y="47" width="40" height="40" id="imgIcon" source="http://www.google.co.kr{getWeatherResult.lastResult.icon.data}"/>
<s:Label x="2" y="114" width="148" textAlign="center" id="labelCondition" creationComplete="labelCondition_creationCompleteHandler(event)" text="{getWeatherResult.lastResult.condition.data}"/>
<s:Label x="92" y="58" fontSize="20" id="labelTemp" text="{getWeatherResult.lastResult.temp_c.data}ºC"/>
</s:WindowedApplication>
[/code]
7. Network Monitor로 데이터 확인
HTTPService 요청이 제대로 갔는지 확인할 수 있는 Network Monitor 기능이 추가되었습니다. 기존에는 확인하려면 직접 그냥 노가다로 해보거나 와이어샤크나 firebug 등의 http watcher를 이용해서 했었죠. 근데 이제 Flash Builder에 포함되어져있네요. 그냥 모니터링 하는거라 조금만 만져보면 알 수 있네요. row데이터로 볼 수도 있고, hex데이터로도 볼 수 있고 그러네요. 근데 한글이 깨지네-_-
근데, 그냥 기존방식을 쓰는 게 나을 것 같아요-_- 뭔놈의 클래스를 뭐이리 만들지-_-
그래도 제공하는 기능이니까 한번 사용해서 만들어봅시다-_-
다운로드는 여기서....-_-
1. 프로젝트 생성
New -> Flex Project -> Application type은 Desktop(구글의 httpservice를 가져올 것이어서 데탑으로-_-) -> Finish.
2. 서비스생성
구글에서 날씨를 가져오는 Service를 추가해봅시다.
아래 Data/Services탭에서 Connect to Data/Service..클릭.
HTTP선택 -> Opearation 첫번째 항목에 getWeather로 변경. url은 http://www.google.co.kr/ig/api?weather=seoul 입력.
url만 입력하면 ?붙은 파라메터는 자동으로 Parameters탭에 들어갑니다. weather가 들어가는데, 캐쉬문제 때무넹 캐쉬파라메터도 하나 추가합니다.
Add누르고, cache입력하고, DataType은 Number.
Service name은 WeatherService로 하죠. Finish.
여기서 이름 네이밍룰에 주의해야하는데, Service name이랑 parameter name이랑 같은 게 있으면 안됩니다. 에러나더군요.
3. 서비스에 대한 리턴타입 지정
이제 리턴타입을 지정해줘야하는데요.
그전에 데이터를 잘 가져오는지 테스트를 해볼 수 있습니다.
방금 생성한 WeatherService의 getWeather를 선택하고 오른쪽버튼 누르면 Configure Return Type이 있습니다.
이거 선택하기전에 Test Opearation이라고 해서 테스트를 해볼 수 있는 게 있네요.
테스트를 쉽게 해볼 수 있어서 참 좋네요. Test를 누르면 데이터를 가져와서 Tree View 또는 Raw View로 볼 수 있습니다.
InvocationTargetException:The response is not a valid XML or a JSON string
이거 왜그런지 아시는 분은 답변좀....굽신굽신....-_-
암튼, 날씨API는 되니까 해봅시다-_-
Configure Return Type선택 후, Auto-detect the return type from sample data선택. 뭐 그냥 object로 받아도 되는데, 필요한 데이터만 가져온다고 하면 쉽게 valueobject를 만들 수 있는 장점이 있어요.
파라메터 방식을 선택하고, seoul을 입력합니다.
그러면 결과값이 나오는데, 여기서 필요한 건 현재 날씨이기 때문에 select root에서 current_conditions를 선택합니다. 그리고, Finish를 누르면 valueObject가 만들어지는데, 한개의 node마다 클래스가 2개씩 생겨요-_-
4. UI생성
UI를 만들어봅시다.
[code]<s:Button id="btnClose" label="X" width="29" x="67" y="1" click="btnClose_clickHandler(event)"/>
<mx:Image x="6" y="32" width="40" height="40" id="imgIcon"/>
<s:Label x="0" y="80" width="100" textAlign="center" id="labelCondition" />
<s:Label x="59" y="45" text="30º" fontSize="20" id="labelTemp"/>[/code]
초간단 UI...UI라고 불리지도 못하는 UI.
5. 데이터 바인딩
이제 데이터를 불러와야해요.
Design모드로 가서 아무라벨이나 붙잡고, 오른쪽버튼 눌러서 Bind To Data를 선택. 그리고 방금 만든 서비스를 바인딩해요. 전 labelCondition을 선택했는데, 그러면 WeatherService, getWeather의 condition을 선택합니다.
그러면 service태그도 알아서 들어가고 해당 라벨에는 creationComplete이벤트핸들러가 추가되었네요.
getWeather파라메터는 "seoul"과 cache는 랜덤값을 넣어줍니다.
그리고 실제 태그에는 condition.@data에 값이 있기 때문에, label의 text부분에 getWeatherResult.lastResult.condition.data로 변경해주시면 됩니다.
[code]protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
{
getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
}[/code]
6. 완성된 코드
그럼 1분마다 데이터를 가져오는 타이머도 만들고 윈도우틀도 없애서 위젯형태로 만들어버리고, 나머지 label에도 값에 맞게 바인딩 시키면 완성이 됩니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:weatherservice="services.weatherservice.*"
width="150" height="150"
applicationComplete="windowedapplication_applicationCompleteHandler(event)"
showStatusBar="false"
backgroundColor="#48FF00">
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.mediaClasses.VolumeBar;
private var timer:Timer;
protected function windowedapplication_applicationCompleteHandler(event:FlexEvent):void
{
timer = new Timer(1000, 0);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();
}
protected function btnClose_clickHandler(event:MouseEvent):void
{
nativeWindow.close();
}
protected function labelCondition_creationCompleteHandler(event:FlexEvent):void
{
requestData();
}
protected function labelTitle_mouseDownHandler(event:MouseEvent):void
{
nativeWindow.startMove();
}
protected function timerHandler(event:TimerEvent):void
{
requestData();
}
private function requestData():void
{
getWeatherResult.token = weatherService.getWeather("seoul", Math.random());
}
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="getWeatherResult"/>
<weatherservice:WeatherService id="weatherService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="labelTitle" text="서울날씨" x="0" y="0" height="22" width="121" verticalAlign="middle" mouseDown="labelTitle_mouseDownHandler(event)"/>
<s:Button id="btnClose" label="X" width="30" x="120" y="1" click="btnClose_clickHandler(event)"/>
<mx:Image x="25" y="47" width="40" height="40" id="imgIcon" source="http://www.google.co.kr{getWeatherResult.lastResult.icon.data}"/>
<s:Label x="2" y="114" width="148" textAlign="center" id="labelCondition" creationComplete="labelCondition_creationCompleteHandler(event)" text="{getWeatherResult.lastResult.condition.data}"/>
<s:Label x="92" y="58" fontSize="20" id="labelTemp" text="{getWeatherResult.lastResult.temp_c.data}ºC"/>
</s:WindowedApplication>
[/code]
7. Network Monitor로 데이터 확인
HTTPService 요청이 제대로 갔는지 확인할 수 있는 Network Monitor 기능이 추가되었습니다. 기존에는 확인하려면 직접 그냥 노가다로 해보거나 와이어샤크나 firebug 등의 http watcher를 이용해서 했었죠. 근데 이제 Flash Builder에 포함되어져있네요. 그냥 모니터링 하는거라 조금만 만져보면 알 수 있네요. row데이터로 볼 수도 있고, hex데이터로도 볼 수 있고 그러네요. 근데 한글이 깨지네-_-
