LuNA`s Dev

우선 컴포넌트 mxml을 만든다.



컴포넌트를 만든 다음에.

<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>

위와 같이 각각의 날짜별로 만들었던 날씨 정보 출력을 반복을 피하기 위해 컴포넌트로 만들기로 한다.



위에서 만든 컴포넌트 mxml파일에
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
 <mx:Script>
  <![CDATA[
   [Bindable] public var item:Object;
   
  ]]>
 </mx:Script>
 <mx:Label text="{ '('+ item.day_of_week.data +')'} "/>
 <mx:Image source="http://www.google.co.kr{item.icon.data}" />
 <mx:Label text="{item.low.data + '/' + item.high.data}" />
</mx:VBox>

이런 코드를 작성하여 item이라는 변수로 접근이 가능하게 한다.

만들어진 컴포넌트를 아래와 같이 컴포넌트 사이에 추가한다.


그럼 기존 소스에
<ns1:WeatherInfo item="{forecastCondition[0]}" /> 요런 소스가 생긴다.
WeatherInfo는 파일명이고 item은 컴포넌트에 미리 작성했던 변수명이다.
거기에 google API 에서 return한 forecastCondition 배열에 접근하여 컴포넌트를 동적으로 생성할 수 있다.

같은 방법으로 4개의 배열을

<ns1:WeatherInfo item="{forecastCondition[1]}" />
  <ns1:WeatherInfo item="{forecastCondition[2]}" />
  <ns1:WeatherInfo item="{forecastCondition[3]}" />

요렇게 생성하면 총 4개의 컴포넌트가 동적으로 생성이 된다.

기존 클릭 이벤트 코드도 조금 변경하여

<mx:Button label="날씨보기" click="requestHandler()"   labelPlacement="bottom"/> 에서

<mx:Button label="서울" click="requestHandler('seoul')"   labelPlacement="bottom"/>
위와같이 변경하여 날씨를 지역별로 가져오게끔 button을 생성한다.



이와같이 누르면 지역명에 따라 해당 지역의 정보가 return 되는 것을 확인 할 수 있다.

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