다시 한번 시작해보자. 너무 오래 쉬었네..^^

요즘 주로 하고 있는 chart에 대해서...ㅋㅋ

flex 기본 chart도 깔끔한 형태에 모습이 나온다 그런데 만들다보던 전체적인 chart에 대한 변화가 필요하다.
그래서 기본 chart에다가 style을 적용하고 categoryAxis를 재 정의 해 보았다.

categoryAxis를 재정의하는 이유는 여러 가지가 있겠지만 그중에서도 아마 많은 양의 데이터로 챠트를 구하다 보면
x축이 너무 지저분하게 보이는데 그것을 깔끔하게 보이기 위해서..ㅎㅎ (나만의 생각인가)

예제를 만들다 보니 새로만든 ReCategoryAxis.as파일이 너무 무식하게 작성되었다..ㅎㅎ
이건 필요한사람이 알아서.. 여기서는 어떻게 사용하는지에 대해서만..ㅋㅋ

-----------------------------------------------------------------------
Main.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 backgroundColor="#FFFFFF" backgroundAlpha="0" xmlns:local="*" creationComplete="initApp();">
 
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   
   /// httpservice를 사용하여 리턴받은 데이터를 저장할곳....
   private var arcResult:ArrayCollection = new ArrayCollection();
   
   /// creationComplete에 직접 search.send()를 사용해도 되나 추후
   /// 추가 작업이나 데이터 초기화등 여러가지 호출될것이 있을수 있으므로 initApp()를 호출한다.
   private function initApp():void
   {
    search.send();
   }
   
   /// 정상적인 result event가 넘어 왔을때 처리하는 handler
   private function onResultHandler(event:ResultEvent):void
   {
    arcResult = new ArrayCollection();
    
    /// httpservice에서 리턴되는 데이터를 arcResult에 담는다. 구지 arrayCollection()으로 감쌓지 않아도 되나
    /// 보기 편하기 위해서...
    arcResult = ArrayCollection(event.result.data.value);
    
    /// 리턴되는 데이터가 있다면 실제 chart에 binding 시키자.
    if(arcResult && arcResult.length > 0)
    {
     chartBindData(); 
    }
   }
   
   /// httpservice가 fault event가 넘어올때 처리 handler
   private function onFaultHandler(event:FaultEvent):void
   {
    Alert.show("Fail Message=>" + event.fault.toString()); 
   }
   
   private function chartBindData():void
   {
    areaChtNew.dataProvider = arcResult;
    areaChtOrigin.dataProvider = arcResult;
    
    if(arcResult && arcResult.length)
     axisID.baseCount = Number(arcResult.length/10);
   }
   
  ]]>
 </mx:Script>
 
 <mx:Style>
  .areaChartStyle {
   horizontalAxisStyleName:chartStyle;
   verticalAxisStyleName:chartStyle;
  }
  
  .chartStyle {
   tickPlacement:outside;
   tickLength:4.0;
   fontFamily:Arial;
   fontSize:9;
   fontWeight:bold;
   color:#4e4e4e;
  }
  
  
 </mx:Style>

 <mx:HTTPService id="search" method="POST" url="http://www.riamx.com/blog/20090511/data.php"
  result="onResultHandler(event);" fault="onFaultHandler(event);" />
 
 <mx:VBox width="600" height="300" borderColor="#cbcbcb" borderStyle="solid" horizontalAlign="center">
  <mx:Label text="Style 적용 차트" fontSize="11" color="0xe20000"/>
  <mx:AreaChart id="areaChtNew" width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"
   styleName="areaChartStyle" showDataTips="true">

   <mx:horizontalAxis>
    <local:ReCategoryAxis id="axisID" categoryField="xValue"/>
   </mx:horizontalAxis>
   
   <mx:series>
    <mx:AreaSeries yField="yValue">
     <mx:areaFill>
      <mx:LinearGradient angle="90">
       <mx:entries>
        <mx:GradientEntry color="0x183771"/>
        <mx:GradientEntry color="0x8fabdf"/>
       </mx:entries>
      </mx:LinearGradient>
     </mx:areaFill>
    </mx:AreaSeries> 
   </mx:series>
   
   <mx:backgroundElements>
    <mx:HBox width="100%" height="100%"  borderStyle="solid" borderColor="#dedddd" backgroundColor="0xffffff" borderThickness="1"/> 
    
    <mx:GridLines direction="horizontal">
     <mx:horizontalStroke>
      <mx:Stroke color="#efefef"/>
     </mx:horizontalStroke>
    </mx:GridLines>
   </mx:backgroundElements>
      
  </mx:AreaChart>
 </mx:VBox>
 
 <mx:VBox width="600" height="300" borderColor="#cbcbcb" borderStyle="solid" horizontalAlign="center">
  <mx:Label text="Style 미적용 차트" fontSize="11" color="0xe20000" />
  <mx:AreaChart id="areaChtOrigin" width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
  
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="xValue"/>
   </mx:horizontalAxis>
   
   <mx:series>
    <mx:AreaSeries yField="yValue" />
   </mx:series>   
   
  </mx:AreaChart>
 </mx:VBox>

</mx:Application>

------------------------------
ReCategoryAxis.as

package
{
 import mx.charts.AxisLabel;
 import mx.charts.CategoryAxis;
 import mx.charts.chartClasses.AxisLabelSet;
 
 public class ReCategoryAxis extends CategoryAxis
 {
  [Bindable]
  public var baseCount:int;
  
  public override function getLabelEstimate():AxisLabelSet
  {
   var preResult:AxisLabelSet = super.getLabelEstimate();
   var labels:Array = [];
   var ticks:Array = [];
   var oldLabelIndex:int = 0;
   var newLabelIndex:int = 0;
   
   
   for(oldLabelIndex = 0; oldLabelIndex < preResult.labels.length; oldLabelIndex++)
   {
    var label:AxisLabel = preResult.labels[oldLabelIndex];
    var tempValue:int = new int(label.text);
    
    if(oldLabelIndex == 0 || (tempValue%baseCount) == 0)
    {
     labels[newLabelIndex] = label;
     ticks[newLabelIndex] = preResult.ticks[oldLabelIndex];
     newLabelIndex++;
    }
   }
   
   var result:AxisLabelSet = new AxisLabelSet();
   result.labels = labels;
   result.minorTicks = null;
   result.ticks = ticks;
   result.accurate = true;
   return result;
  }
 }
}

데이터 연동 과정에서 가장 많이 사용하는것이 httpservice와 ArrayCollection항목일것이다.

그런데 가끔 사용하다보면 데이터를 계층형 형태로 보내고 있는데 tree 메뉴 값 같이..

그때마나 xmllist형태로 바꾸는 귀찮은 과정을 거치게 된다. 구지 xmllist형태를 쓰지 않아도 되지만

그래서 httpservice를 그냥 xmllist형태로 받으면 되지 않을까 생각 했다.

작업은 간단하게 진행되었다. 이론에 충실하다면.. 나도 동영상 강의를 보다가 알았다..ㅎㅎ

기본적인 httpservice의 return 값 형태는 arrayCollection형태이다.

그런데 tree메뉴같은 메뉴를 구성할때 xmllist로 받아서 구성하면 편리하다. 그래서 어떻게 할까 고민하다가
함수를 만들어 사용해도 되지만 구지 그럴필요는 없을것 같다. 그냥 httpservice를 xmllist형태로 받으면 되
지 않을까..ㅎㅎㅎ 그럼 될거 같다..ㅋㅋ

--------------------------------------------------------------------------------------

기본적으로 httpservice를 사용할때 resultFormat="e4x"형태로 해준다.
그리고 e4x형태로 리턴 받을때 중요한것이 ResultEvent의 event depth가 될것이다.

<?xml version="1.0" encoding="utf-8" ?>
<data>
 <menu name="Menu1" menuID="1">
  <item name="Menu1 Sub1" menuID="1_1" />
  <item name="Menu1 Sub2" menuID="1_2" />
 </menu>
 <menu name="Menu2" menuID="2">
  <item name="Menu2 Sub1" menuID="2_1" />
  <item name="Menu2 Sub2" menuID="2_2" />
 </menu>
 <menu name="Menu3" menuID="3">
  <item name="Menu3 Sub1" menuID="3_1" />
  <item name="Menu3 Sub2" menuID="3_2" />
  <item name="Menu3 Sub3" menuID="3_3" />
 </menu>
</data>


위와 같이 데이터가 리턴될경우 return 받을때 arrayCollection으로 리턴을 받았다면 ResultEvent의 위치는
data = event.result.data.menu가 될것이다.

하지만 resultFormat을 e4x형태로 해주고 return 받을때는
data = event.result.menu로 변경해주어야 된다.

리턴되는 데이터의 root depth가 변경된다. 이걸 정확히 확인 할려면 아래와 같이 놓고 테스트를 해보면 쉽게 알수 있다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 backgroundColor="#FFFFFF" creationComplete="initApp();">
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var arrResult:XMLList;
   
   private function initApp():void
   {
    xmlData.send();
   }   
   
   public function xmlDataHandler(event:ResultEvent):void
   {
    arrResult = event.result.data.menu;
    
    menuTree.dataProvider = arrResult;
    
   }
   
  ]]>
 </mx:Script>
 
 <mx:HTTPService id="xmlData" url="http://pds13.egloos.com/pds/200904/24/99/BlogData1.xml" result="xmlDataHandler(event);" resultFormat="e4x" />

 <mx:Tree id="menuTree" width="300" height="100%" labelField="@name"/>

 
</mx:Application>

위와 같이 사용했다면 아무런 값도 tree에 바인딩 되지 않을것이 아마 하얀 화면만 나타날것이다.

위에 소스에서 arrResult = event.result.menu로 변경을 하고 실행해본다면 return 되는 데이터가 정확히 tree에 바인딩 되는것을 알수 있다.