<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
// 서버에 요청을 하는 핸들러
private function requestHandler():void
{
// api로 전송할 parameter를 정의한다.
var params:Object = new Object();
// seoul의 날씨를 얻기 위한 parameter 정의
params.weather = "seoul";
srv.send(params);
}
[Bindable] private var currentCondition:Object;
[Bindable] private var forecastCondition:ArrayCollection;
// 서버의 응답을 처리하는 핸들러
private function resultHandler(event:ResultEvent):void
{
// 현재 날씨 정
currentCondition = event.result.xml_api_reply.weather.current_conditions;
// 첫째날 날씨 정보
forecastCondition = event.result.xml_api_reply.weather.forecast_conditions;
// 바인딩을 했기 때문에 아래 정보는 주석 처리 한다.
// lb1stDayCondition.text = forecastCondition[0].day_of_week.data;
// lb1stDayCondition.text += forecastCondition[0].low.data;
// lb1stDayCondition.text += forecastCondition[0].high.data;
// lb1stDayCondition.text += forecastCondition[0].condition;
}
]]>
</mx:Script>
<mx:Button label="서버요청" click="requestHandler()" />
// google API 에 접속하기 위한 주소를 정의
// url 로의 요청을 HTTPService를 이용해 접근하고 그 결과를 받는 정보를 result에 받는다.
// 결과는 xml로 return 된다. 직접 브라우저에 주소를 입력해 보면 xml형태의 결과물을 확인할 수 있다.
// 마치 ajax의 callback 함수와 같은 역할을 한다고 생각된다.
<mx:HTTPService id="srv" url="http://www.google.co.kr/ig/api"
result="resultHandler(event)" />
<mx:Panel title="날씨 정보" fontSize="20" horizontalAlign="center" textAlign="center">
<mx:Label text="현재날씨 : {currentCondition.condition.data + '( ' +
currentCondition.temp_c.data+ ' ) '
}" />
<mx:HBox horizontalAlign="center" verticalAlign="middle">
<mx:VBox horizontalAlign="center">
<mx:Label id="lb1stDayCondition" text="{ '('+ forecastCondition[0].day_of_week.data +')'} "/>
// 아래와 같이 이미지의 경로를 배열로 접근하여 해당 날씨 정보의 이미지를 가져올 수도 있다.
<mx:Image source="http://www.google.co.kr{forecastCondition[0].icon.data}" />
<mx:Label text="{forecastCondition[0].low.data + '/' + forecastCondition[0].high.data}" />
</mx:VBox>
<mx:VBox horizontalAlign="center">
<mx:Label id="lb2ndDayCondition" text="{ '('+ forecastCondition[1].day_of_week.data +')'} "/>
<mx:Image source="http://www.google.co.kr{forecastCondition[1].icon.data}" />
<mx:Label text="{forecastCondition[1].low.data + '/' + forecastCondition[1].high.data}" />
</mx:VBox>
<mx:VBox horizontalAlign="center">
<mx:Label id="lb3rdDayCondition" text="{ '('+ forecastCondition[2].day_of_week.data +')'} "/>
<mx:Image source="http://www.google.co.kr{forecastCondition[2].icon.data}" />
<mx:Label text="{forecastCondition[2].low.data + '/' + forecastCondition[2].high.data}" />
</mx:VBox>
<mx:VBox horizontalAlign="center">
<mx:Label id="lb4thDayCondition" text="{ '('+ forecastCondition[3].day_of_week.data +')'} "/>
<mx:Image source="http://www.google.co.kr{forecastCondition[3].icon.data}" />
<mx:Label text="{forecastCondition[3].low.data + '/' + forecastCondition[3].high.data}" />
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:Application>
실행 화면
바인딩 : text={parent.childe.data} 같이 xml에 정의된 값을 바인딩을 통해 가져올 수 있다.
EL태그와 비슷한 양식을 보인다.
'Flex 3.0' 카테고리의 다른 글
Flex 브라우저의 네비게이션 기능 Toggle (0) | 2009.08.21 |
---|---|
이벤트 리스너를 ActionScript로 등록 / 삭제하는 법 (0) | 2009.08.21 |
ArrayCollection 타입 변수 선언시 데이터 정의 / Repeater를 이용한 출력 (0) | 2009.08.21 |
동적으로 버튼을 추가 / 삭제하는 방법 (0) | 2009.08.21 |
Component 만드는법 (0) | 2009.08.18 |