Dev Story..

속도차이는 3배정도 난다고 한다.

localX와 localY를 사용하도록 하자.

맨날 쓰면서도 자주 실수하는 부분이 바로 아이템 렌더러 재사용 문제를 간과하는 것이다.

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          focusEnabled="true"
          >
 <fx:Script>
  <![CDATA[
   
   import com.utils.ColorUtil;
   
   override public function set data(value:Object):void
   {
    // not sure of the details on when or why, but sometimes this method is passed a null value
    if(value != null)
    {
     super.data = value;
     
     // set itemRenderer's state based on data value
     var strAlmLvlCri :String = "1";
     var strAlmLvlMaj :String = "2";
     var strAlmLvlMin :String = "3";
     var strAlmLvlWarn:String = "4";
     
     if(listData.label == strAlmLvlCri) { // Critical
      fillColor.alpha = 1;
      fillColor.color = ColorUtil.getArmLvlInfo(strAlmLvlCri).NUM_COLOR;
      lblData.text = ColorUtil.getArmLvlInfo(strAlmLvlCri).NAME;
     } else if(listData.label == strAlmLvlMaj) { // Major
      fillColor.alpha = 1;
      fillColor.color = ColorUtil.getArmLvlInfo(strAlmLvlMaj).NUM_COLOR;
      lblData.text = ColorUtil.getArmLvlInfo(strAlmLvlMaj).NAME;
     } else if(listData.label == strAlmLvlMin) { // Minor
      fillColor.alpha = 1;
      fillColor.color = ColorUtil.getArmLvlInfo(strAlmLvlMin).NUM_COLOR;
      lblData.text = ColorUtil.getArmLvlInfo(strAlmLvlMin).NAME;
     } else if(listData.label == strAlmLvlWarn) { // Warning
      fillColor.alpha = 1;
      fillColor.color = ColorUtil.getArmLvlInfo(strAlmLvlWarn).NUM_COLOR;
      lblData.text = ColorUtil.getArmLvlInfo(strAlmLvlWarn).NAME;
     } else { // etc
      fillColor.alpha = 0;
      lblData.text    = "";
     }
    }
   }
  ]]>
 </fx:Script>
 <s:Rect left="0" right="0" top="0" bottom="0">
  <s:fill>
   <s:SolidColor id="fillColor" alpha="1" />
  </s:fill>
 </s:Rect> 
 <s:Label id="lblData" horizontalCenter="0" verticalCenter="0"/>
</s:MXAdvancedDataGridItemRenderer>

자주 쓰는 아이템 렌더러 형태이다. 빨간색 부분을 FLEX에서는 메모리 효율성을 위해 재사용을 한다.

그런데 문제가 되는 부분은  파란색 부분이다. if, else if, else 이런 식으로 예외처리까지 되어있을 경우에는 상관이 없다.

하지만 if, else if까지만 되어있다면 이에 해당되지 않는 내용이 들어왔을 때는 기존에 상태를 그대로 기억하고 있다.

이 문제를 해결하기 위해서는 초기화를 해주거나 위 예제와 같이 else처리를 해서 예외가 없도록 처리 해줘야한다.

<mx:List dataProvider="{['Foo', 'Bar']}" itemRenderer="{createRendererWithProperties(Label, {toolTip: 'Hello'})}"/>

var dgCol:DataGridColumn = new DataGridColumn();
var factory:ClassFactory = new ClassFactory(ReportHTMLRenderer)
//here's where you can set a property in the itemrenderer...
factory.properties = {field:"some value"};
dgCol.itemRenderer = factory;


Here's the ItemRenderer class (ReportHTMLRenderer)...

package myComponents
{
import flash.errors.*;
import mx.controls.*;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.IFactory;

public class ReportHTMLRenderer extends Text implements IFactory, IListItemRenderer
{
private var _data:Object;
private var _field:String = new String();

public function ReportHTMLRenderer(){
super();
this.percentHeight = 100;
this.percentWidth = 100;
}

public function newInstance():*{
return new ReportHTMLRenderer();
}

override public function set data(value:Object):void{
this._data = value;
this.htmlText = parseData(_data);
}

public function set field(str:String):void{
this._field = str;
}

private function parseData(item:Object):String{
try{
var xml:XML = XML(item);
var nodeName:String = _field;
return decodeURI(xml.child(nodeName).text());
}catch(e:Error){
return e.message;
}
}

}

출처: http://www.remwebdevelopment.com/dev/a11/Passing-Values-to-a-Custom-ItemRenderer.html

  public static const SEC_PER_MINUTE:int = 60;
  public static const SEC_PER_HOUR:int = 3600;
  public static const MINUTE_PER_HOUR:int = 60;
  public static const SEC_PER_DAY:int = 86400;

  var input:Number = item.sysUptime;

     var day:int;
     var hour:int;
     var min:int;
     var temp:int;
     
     day = input / Constants.SEC_PER_DAY;
     hour = input % Constants.SEC_PER_DAY / Constants.SEC_PER_HOUR;
     min = input % Constants.SEC_PER_HOUR / Constants.SEC_PER_MINUTE; //시간단위로 나눌 수 없는 나머지 초는 분 단위로 표시 가능
     if(day > 0) {
      sysUptime =day + "일 " + hour + "시 " + min + "분";
     } else if(hour > 0) {
      sysUptime = hour + "시 " + min + "분";
     } else {
      sysUptime = min + "분";
     }

최근 버젼(7.0.32)에서 streaming-amf채널을 사용하려고 했으나 제대로 데이터를 받지 못해서 관련 정보를 좀 찾아봤다.

http://forums.adobe.com/thread/777748

위 질답에서 보면 알 수 있듯이..

어도비에서 BlazeDS와 FlexSDK 등을 오픈소스로 아파치에 기증하면서 공식적인 지원과 업데이트가 끊긴 듯하다..

보안문제때문에 tomcat을 하위버젼(7.0.22까지는 지원)으로 유지할 수도 없는 노릇이고..

그냥 socket으로 직접 연결해서 실시간 데이터를 주고 받아야 할 듯 싶다..

Flex에 넘겨주려는 java class엔 setter메소드가 필수로

존재해야 Flex에서 제대로 값을 받아볼 수 있다.

<mx:ColumnSeries id="secondSeries" xField="date" yField="name" interactive="false">
   </mx:ColumnSeries>

Main.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” >

<mx:Script>

import mx.collections.ArrayCollection;

[Bindable]

public var dataCollection:ArrayCollection = new ArrayCollection([

{Month: "Jan", planned: 2000, actual:1856, average:1790 },

{Month: "Feb", planned: 1590, actual:1624, average:1790},

{Month: "Mar", planned: 1820, actual:1832,average:1790},

{Month: "Apr", planned: 1450, actual:1524, average:1790},

{Month: "May", planned: 1775, actual:1695, average:1790}]);

</mx:Script>

<mx:Panel>

<mx:ColumnChart id=”myChart” dataProvider=”{dataCollection}”

showDataTips=”true”>

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider=”{dataCollection}”

categoryField=”Month”/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries xField=”Month” yField=”planned” displayName=”Planned”/>

<mx:ColumnSeries xField=”Month” yField=”actual” displayName=”Actual”/>

<mx:ColumnSeries xField=”Month” yField=”average” displayName=”Average”

itemRenderer=”AverageLineRenderer”/>

</mx:series>

</mx:ColumnChart>

</mx:Panel>

</mx:Application>

AverageLineRenderer.as

package

{

import flash.display.Graphics;

import mx.charts.ChartItem;

import mx.charts.series.items.ColumnSeriesItem;

import mx.charts.series.items.LineSeriesItem;

import mx.controls.Label;

import mx.core.IDataRenderer;

import mx.core.UIComponent;

public class AverageLineRenderer extends UIComponent implements IDataRenderer

{

private var _chartItem:ChartItem;

private var _label:Label; // A label to place on the top of the column.

public function AverageLineRenderer():void

{

super();

// Add the label

_label = new Label();

addChild(_label);

_label.setStyle(“color”,0×000000);

}

public function get data():Object

{

return _chartItem;

}

public function set data(value:Object):void

{

if(value is ColumnSeriesItem)

{

_chartItem = value as ColumnSeriesItem;

if(_chartItem != null)

{

// Assigns the yValue to the label

if (ColumnSeriesItem(_chartItem).yValue!=null)

_label.text = “Average: ” + ColumnSeriesItem(_chartItem).yValue.toString();

else

_label.text=”";

}

}

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

{

if ( _chartItem.index == 0) // Do it only for the first chartItem

{

super.updateDisplayList(unscaledWidth, unscaledHeight);

var g:Graphics = graphics;

g.clear();

g.beginFill(0xFF0000); // Red line, you can select your own color

// Draw the line across the chart. This is actually a rectangle with height 1.

g.drawRect(-20,0,this.parent.width+20, 1);

g.endFill();

//Place the label

_label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExplicitOrMeasuredHeight());

_label.move(unscaledWidth ,-15);

}

}

}

}

Capture Phase[EventPhase.CAPTURING_PHASE=1] : 이벤트가 발생하는 실제 오브젝트를 잡는 단계입니다.
Target Phase[EventPhase.AT_TARGET=2] : 실제 오브젝트를 잡은 단계입니다.
Bubbling Phase[EventPhase.BUBBLING_PHASE=3] : target부터 위로 이벤트가 발생합니다.

쉽게 생각하려면 마우스 포인터가 실제로는 스테이지 뒤에 있다고 생각하시면 됩니다.

옛날에 가운데에 유리를 놓고 양쪽에 자석 두개로 이리저리 움직이는 장난 많이 하셨죠? 나만 했었나 ㅋㅋ

그걸 상상해보시면 됩니다.

실제 마우스 포인터는 스테이지 뒤에 있고 화면에는 Child1 Node 앞에 마우스 포인터가 표시되는 것입니다. 이해가시나요?