[FLEX] FlexComponent 플렉스2차과정 2일차 후기 및 내용정리2

전 Array가 좀 헷깔리더군요-_-;
Array랑 ArrayCollection이 차이가 없는건지-_-; 뭐가 다른건지-_-;

ActionScript에는 배열이라는 게 없다더군요.
어떤 타입이든 다 넣을 수 있는 Collection이라고 하네요.
즉, 자바에서 벡터, 리스트 뭐 이런건가요? ^^

ArrayCollection은 데이터가 바뀌는 것을 모니터링이 가능하답니다.
바인딩해주면 값 바뀌면 자동으로 바뀐다 이런 얘기를 했는데 뭔가 테스트가 필요하겠군요.

DataGrid
요거이도 빠지면 Flex가 아닌 것입니다 ^^ 마스터 하도록 해야합니다!^^
dataProvider라는 것에 값을 넣으면 DataGrid에 값이 표현됩니다.
또한 DataGrid는 자유로워서 콤보박스, 체크박스 등도 넣을 수 있더군요(첨 알았음 ^^)
DataGrid를 이용해서 구구단을 출력해봅시다!

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 applicationComplete="setGuGuDan()"
 backgroundColor="0xffffff" backgroundImage="">
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.controls.Alert;
   
   [Bindable]
   public var dp:ArrayCollection = new ArrayCollection();
   
   public function setGuGuDan():void {
    for (var i:int=1; i<=9; i++) {
     var obj:Object = {};
     for (var j:int=2; j<=9; j++){
      obj["dan"+j] = j + " X " + i + " = " + (j*i);
     }
     dp.addItem(obj);
    }
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{dp}">
  <mx:columns>
   <mx:DataGridColumn headerText="2단" dataField="dan2"/>
   <mx:DataGridColumn headerText="3단" dataField="dan3"/>
   <mx:DataGridColumn headerText="4단" dataField="dan4"/>
   <mx:DataGridColumn headerText="5단" dataField="dan5"/>
   <mx:DataGridColumn headerText="6단" dataField="dan6"/>
   <mx:DataGridColumn headerText="7단" dataField="dan7"/>
   <mx:DataGridColumn headerText="8단" dataField="dan8"/>
   <mx:DataGridColumn headerText="9단" dataField="dan9"/>
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>
[/code]
DataGrid를 하나 선언해서 dg라는 id를 줬네요. dataProvider는 dp(ArrayCollection)입니다.
바인딩할 때에는 {}를 붙여주는 거라고 하네요.
DataGrid안에 columns태그를 넣어주고 이 태그안에는 DataGridColumn해서 2단부터 9단까지 넣어줬습니다.
headerText는 실제 출력되는 이름을 말하는 것이구요. dataField는 해당 필드의 이름을 말하는 겁니다.

위에 as를 보도록 합시다.
만약 정적으로 넣게 된다면 이렇게 되겠죠.
{dan2: "2 x 1 = 2", dan3: "3 x 1 = 3", dan4: "4 x 1 = 4"},
{dan2: "2 x 2 = 4", dan3: "3 x 2 = 6", dan4: "4 x 2 = 8"},
{dan2: "2 x 3 = 6", dan3: "3 x 3 = 9", dan4: "4 x 3 = 12"},
          쭈우우욱~

동적으로 넣게 되면 저 {} 이게 하나의 object가 됩니다.
그래서 object를 하나 선언해서 obj["dan2"] = 2 x 1 = 2; 해버리면 dan2: 2 x 1 = 2가 생기고,
obj["dan3"] = 3 x 1 = 3; 하면 dan3: 3 x 1 = 3이 생기고 그럽니다 ^^
이렇게 9단까지 만든 한줄의 object를 ArrayCollection에 addItem해버리면 됩니다.

ActionScript는 배열의 개념이 아니기때문에 가능한 것이라고 하더군요 ^^
어쨌든 굉장히 유연해요-_-;

차트를 보도록합시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 width="100%" height="100%">
 
 <mx:XML id="results" xmlns="">
  <gen>
   <result month="Jan-03">
    <apple>200781</apple>
    <orange>225971</orange>
    <banana>161280</banana>
   </result>
   
   <result month="Feb-03">
    <apple>188249</apple>
    <orange>179611</orange>
    <banana>150795</banana>
   </result>
   
   <result month="Mar-03">
    <apple>229774</apple>
    <orange>214767</orange>
    <banana>189889</banana>
   </result>
  </gen>
 </mx:XML>
 
 <mx:ColumnChart id="chart" dataProvider="{results.result}"
  showDataTips="true" width="100%" height="100%">
  <mx:horizontalAxis>
   <mx:CategoryAxis dataProvider="{results.result}"
    categoryField="@month" />  
  </mx:horizontalAxis>
 
  <mx:series>
   <mx:Array>
    <mx:ColumnSeries
     yField="apple" displayName="Apple" />
    <mx:ColumnSeries
     yField="banana" displayName="Banana" />
    <mx:ColumnSeries
     yField="orange" displayName="Orange" />
   </mx:Array>
  </mx:series>
 </mx:ColumnChart>
</mx:Application>
[/code]
가장 일반적인 컬럼차트인데요. dataProvider는 results의 result로 지정했네요.
horizontalAxis는 가로값은 month로  "Jan-03", "Feb-03", "Mar-03" 으로 나오구요.
series안에 ColumnSeries가 있는데 3가지가 있네요.
apple, banana, orange 값을 보여주는데 displayName은 앞글자는 대문자로 표기를 합니다 ^^

다른 차트도 해보시면 알겠지만 사용법은 비슷합니다.
여러개의 차트를 섞어서도 사용할 수 있습니다.
LineChart와 PlotChart를 동시에 사용할 수 있습니다. 라인차트는 줄만 나와서 그 해당 값이 어딘지 정확하게 집어줄 수 없는데 PlotChart는 가능하기 때문에 섞을 수 있습니다 ^^

마지막에 sprite했는데 졸려서 소스를 못 담아왔군요-_-;

여기까지-_-;