컴포넌트를 만든 다음에.
<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 되는 것을 확인 할 수 있다.
'Flex 3.0' 카테고리의 다른 글
Flex 브라우저의 네비게이션 기능 Toggle (0) | 2009.08.21 |
---|---|
이벤트 리스너를 ActionScript로 등록 / 삭제하는 법 (0) | 2009.08.21 |
ArrayCollection 타입 변수 선언시 데이터 정의 / Repeater를 이용한 출력 (0) | 2009.08.21 |
동적으로 버튼을 추가 / 삭제하는 방법 (0) | 2009.08.21 |
google 날씨 API Flex로 구현한 코드입니다. (0) | 2009.08.18 |