LuNA`s Dev

 <mx:Script>
  <![CDATA[
   
   private function onClick(event:MouseEvent):void{
    trace("hello");
   }

   // Add event 를 클릭하면 btn 에 마우스 이벤트를 등록하여
   // 앞으로 btn을 클릭하였을때 oncClick 함수를 실행하도록 한다.
   private function addEvent():void{
    btn.addEventListener(MouseEvent.CLICK, onClick);
   }  
   
   
   // Remove event 를 클릭하면 btn 에 마우스 이벤트를 삭제하여
   // 앞으로 btn을 클릭해도 아무 반응이 없게 한다.
    private function removeEvent():void{
    btn.removeEventListener(MouseEvent.CLICK, onClick);
   }
  ]]>
 </mx:Script>
 
 <mx:Button id="btn" label="hi" />
 <mx:Button label="add event" click="addEvent()"/>
 <mx:Button label="remove event" click="removeEvent()" />

private var dataAC:ArrayCollection = new ArrayCollection([
   // 생성자에 parameter를 줄 경우에는 {} 로 감싸 표현해 준다. JSON과 비슷..
    {label:"월요일", day:17},
    {label:"화요일", day:18},
    {label:"수요일", day:19},
    {label:"목요일", day:20},
    {label:"금요일", day:21}    
   ]);


JSON 과 비슷한 경향을 보인다.

저런식으로 해 놓으면 아래와 같이
Repeater를 이용하여 반복 출력 할 수 있다.

<mx:Repeater id="rp" dataProvider="{dataAC}">
 <!--
  id의 currentItem으로 접근하면 현재 돌아가고 Collection index의 데이터가 온다.
  Repeater는 타 반복문과 비슷하지만 반복의 시작과 종료를 정할 수 있는 for문과 달리
  dataProvider에 Binding되어 있는 데이터, 즉 ArrayCollection의 길이만큼 돌아간다.
 -->
 
  <mx:Button label="{rp.currentItem.label}"  />
 </mx:Repeater>

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