<?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태그와 비슷한 양식을 보인다.





 

Posted by NemoLuNa
l