Component 만드는법

우선 컴포넌트 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 되는 것을 확인 할 수 있다.