フレックス4.5：カスタムItemRenderesを使用したSpark DataGrid

Question

まず、本当に長い質問には申し訳ありません。私は、DataGridを使用してOrg.Chartを実装しようとしています。 Org.Chartのデータは変更されないため、値をハードコーディングしています。浮動小数点を使用する必要があるので、Org.Chartを実装しなければなりませんでした。また、外部コンポーネントを使用する場合と比べて、接続線を少し異なるように描画する必要があります。イムが達成しようとしている次の画像を見つけてください：ここでは

はアイデアです：

DataGridの各セルはconnecting linesまたはactorのいずれかになります。私はchartLinesStateとchartActorStateの2つの状態を持つカスタムコンポーネントMyOrgChartNodeを持っています。このコンポーネントは、DataGridにItemRendererとして使用されます。ここでMyOrgChartNodeのコードである：上記のコードで

<fx:Script> 
    <![CDATA[ 
     import mx.controls.Alert; 

     import scripts.valueObjects.ActorVO; 
     import scripts.valueObjects.CellRendererVO; 

     [Bindable] 
     private var _cellRenderer:CellRendererVO; 
     [Bindable] 
     private var _lineColor:uint = 0xFF0000; 
     [Bindable] 
     private var _lineWidth:int = 1; 

     override public function prepare(hasBeenRecycled:Boolean):void 
     { 
      if (data != null) 
      { 
       this.height = parseInt(data['cellHeight']); 

       if (columnIndex == 1 || columnIndex == 3) 
       { 
        this.width = 50; 
       } 

       currentState = (data[column.dataField] as CellRendererVO).stateName;  
      } 
     } 

     protected function orgChartNode_clickHandler(event:MouseEvent):void 
     { 
      // TODO Auto-generated method stub 

     } 

    ]]> 
</fx:Script> 

<s:states> 

    <s:State name="chartLinesState" /> 

    <s:State name="chartActorState" /> 

</s:states> 

<s:VGroup width="100%" height="100%" includeIn="chartActorState"> 

    <myOrgChart:OrgChartNode id="orgChartNode" width="100%" height="100%" click="orgChartNode_clickHandler(event)" 
          nodeActor="{(data[column.dataField] as CellRendererVO).nodeActor}" /> 

</s:VGroup> 

<s:VGroup width="100%" height="100%" includeIn="chartLinesState"> 

    <s:HGroup width="100%" height="100%" 
       gap="0" horizontalAlign="center" verticalAlign="middle"> 

     <s:VGroup id="horizontalLeftLine" height="100%" width="100%" 
        horizontalAlign="center" verticalAlign="middle" 
        visible="{(data[column.dataField] as CellRendererVO).hasHorizontalLeftLine}"> 

      <mx:HRule width="100%" strokeWidth="{_lineWidth}" strokeColor="{_lineColor}" 
         opaqueBackground="{_lineColor}"/> 

     </s:VGroup> 

     <s:VGroup height="100%" gap="0" horizontalAlign="center" 
        verticalAlign="middle" 
        includeInLayout="{(data[column.dataField] as CellRendererVO).hasVerticalTopLine || (data[column.dataField] as CellRendererVO).hasVerticalBottomLine}"> 

      <s:VGroup id="verticalTopLine" height="50%" verticalAlign="middle" 
         visible="{(data[column.dataField] as CellRendererVO).hasVerticalTopLine}"> 

       <mx:VRule height="100%" strokeWidth="{_lineWidth}" strokeColor="{_lineColor}" 
          opaqueBackground="{_lineColor}"/> 

      </s:VGroup> 

      <s:VGroup id="verticalBottomLine" height="50%" verticalAlign="middle" 
         visible="{(data[column.dataField] as CellRendererVO).hasVerticalBottomLine}"> 

       <mx:VRule height="100%" strokeWidth="{_lineWidth}" strokeColor="{_lineColor}" 
          opaqueBackground="{_lineColor}"/> 

      </s:VGroup> 

     </s:VGroup> 

     <s:VGroup id="horizontalRightLine" height="100%" width="100%" 
        horizontalAlign="center" verticalAlign="middle" 
        visible="{(data[column.dataField] as CellRendererVO).hasHorizontalRightLine}"> 

      <mx:HRule width="100%" strokeWidth="{_lineWidth}" strokeColor="{_lineColor}" 
         opaqueBackground="{_lineColor}"/> 

     </s:VGroup> 

    </s:HGroup> 

</s:VGroup> 

私が使用していますが、そのような異なるvalueObjectの視認性としてセルの表示に必要な情報が含まれていCellRendererVOHRulesおよびVRuleが存在する。 CellRendererVOのコードはここにある：あなたが見ることができるように

package scripts.valueObjects 
{ 
    public class CellRendererVO extends Object 
    { 
     private var _hasVerticalTopLine:Boolean; 
     private var _hasVerticalBottomLine:Boolean; 
     private var _hasHorizontalLeftLine:Boolean; 
     private var _hasHorizontalRightLine:Boolean; 
     private var _nodeActor:ActorVO; 
     private var _stateName:String; 

     public function CellRendererVO(hasVerticalTopLine:Boolean = false, hasVerticalBottomLine:Boolean = false, 
      hasHorizontalLeftLine:Boolean = false, hasHorizontalRightLine:Boolean = false, 
      nodeActor:ActorVO = null, stateName:String = "chartLinesState" 
      ) 
     { 
      this.hasVerticalTopLine = hasVerticalTopLine; 
      this.hasVerticalBottomLine = hasVerticalBottomLine; 
      this.hasHorizontalLeftLine = hasHorizontalLeftLine; 
      this.hasHorizontalRightLine = hasHorizontalRightLine; 
      this.nodeActor = nodeActor; 
      this.stateName = stateName; 
     } 

     public function get hasVerticalTopLine():Boolean 
     { 
      return _hasVerticalTopLine; 
     } 

     public function set hasVerticalTopLine(value:Boolean):void 
     { 
      _hasVerticalTopLine = value; 
     } 

     public function get hasVerticalBottomLine():Boolean 
     { 
      return _hasVerticalBottomLine; 
     } 

     public function set hasVerticalBottomLine(value:Boolean):void 
     { 
      _hasVerticalBottomLine = value; 
     } 

     public function get hasHorizontalLeftLine():Boolean 
     { 
      return _hasHorizontalLeftLine; 
     } 

     public function set hasHorizontalLeftLine(value:Boolean):void 
     { 
      _hasHorizontalLeftLine = value; 
     } 

     public function get hasHorizontalRightLine():Boolean 
     { 
      return _hasHorizontalRightLine; 
     } 

     public function set hasHorizontalRightLine(value:Boolean):void 
     { 
      _hasHorizontalRightLine = value; 
     } 

     public function get nodeActor():ActorVO 
     { 
      return _nodeActor; 
     } 

     public function set nodeActor(value:ActorVO):void 
     { 
      _nodeActor = value; 
     } 

     public function get stateName():String 
     { 
      return _stateName; 
     } 

     public function set stateName(value:String):void 
     { 
      _stateName = value; 
     } 
    } 
} 

は、接続線を取得するために使用される様々なブール変数があるとactorデータを持っている別のvalueObjectActorVOあります。ここでは、コードは次のようになります。

package scripts.valueObjects 
{ 
    public class ActorVO extends Object 
    { 
     private var _id:int; 
     private var _fullName:String; 
     private var _imageSource:String; 
     private var _beta1:Number; 
     private var _beta2:Number; 
     private var _beta3:Number; 
     private var _nationality:String; 
     private var _education:String; 
     private var _gender:String; 
     private var _displayName:String; 
     private var _progress:Number; 
     private var _showImage:Boolean; 

     public function ActorVO(id:int = -1, fullName:String = "Full Name", imageSource:String = "", 
      beta1:Number = -1, beta2:Number = -1, beta3:Number = -1, nationality:String = "India", 
      gender:String = "M", progress:Number = 10, education:String = "", showImage:Boolean = true) 
     { 
      this.id = id; 
      this.fullName = fullName; 
      this.imageSource = imageSource; 
      this.beta1 = beta1; 
      this.beta2 = beta2; 
      this.beta3 = beta3; 
      this.nationality = nationality; 
      this.gender = gender; 
      this.progress = progress; 
      this.education = education; 
      this.showImage = showImage; 
     } 

     public function copyData(actor:ActorVO):void 
     { 
      this.id = actor.id; 
      this.fullName = actor.fullName; 
      this.imageSource = actor.imageSource; 
      this.beta1 = actor.beta1; 
      this.beta2 = actor.beta2; 
      this.beta3 = actor.beta3; 
      this.nationality = actor.nationality; 
      this.gender = actor.gender; 
      this.progress = actor.progress; 
      this.education = actor.education; 
      this.showImage = showImage 
     } 

     public function get id():int 
     { 
      return _id; 
     } 

     public function set id(value:int):void 
     { 
      _id = value; 
     } 

     public function get fullName():String 
     { 
      return _fullName; 
     } 

     public function set fullName(value:String):void 
     { 
      _fullName = value; 
      displayName = value.substring(value.lastIndexOf(" ") + 1); //return the last name in the string 
     } 

     public function get imageSource():String 
     { 
      return _imageSource; 
     } 

     public function set imageSource(value:String):void 
     { 
      /** 
      * When copyData function is used, value is ./assets/images/people/ 
      * and hence imageSouce will be prepended with ./assets/images/people 
      * hence first check if there exists path 
      * */ 

      _imageSource = "./assets/images/people/" + value; 

      if (value.indexOf("./") != -1) 
      { 
       _imageSource = value; 
      } 
     } 

     public function get beta1():Number 
     { 
      return _beta1; 
     } 

     public function set beta1(value:Number):void 
     { 
      _beta1 = value; 
     } 

     public function get beta2():Number 
     { 
      return _beta2; 
     } 

     public function set beta2(value:Number):void 
     { 
      _beta2 = value; 
     } 

     public function get beta3():Number 
     { 
      return _beta3; 
     } 

     public function set beta3(value:Number):void 
     { 
      _beta3 = value; 
     } 

     public function get nationality():String 
     { 
      return _nationality; 
     } 

     public function set nationality(value:String):void 
     { 
      _nationality = value; 
     } 

     public function get education():String 
     { 
      return _education; 
     } 

     public function set education(value:String):void 
     { 
      _education = value; 
     } 

     public function get gender():String 
     { 
      return _gender; 
     } 

     public function set gender(value:String):void 
     { 
      _gender = value; 
     } 

     public function get displayName():String 
     { 
      return _displayName; 
     } 

     public function set displayName(value:String):void 
     { 
      _displayName = value; 
     } 

     public function get progress():Number 
     { 
      return _progress; 
     } 

     public function set progress(value:Number):void 
     { 
      _progress = value; 
     } 

     public function get showImage():Boolean 
     { 
      return _showImage; 
     } 

     public function set showImage(value:Boolean):void 
     { 
      _showImage = value; 
     } 
    } 
} 

そして、ここではApplicationからDataGridコードは次のとおりです。

<s:DataGrid id="orgChartDG" borderVisible="false" skinClass="skins.OrgChartDataGridSkin" 
       dataProvider="{orgChartDP}" variableRowHeight="true"> 

     <s:columns> 

      <s:ArrayList> 

       <s:GridColumn dataField="col1" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col2" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col3" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col4" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col5" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col6" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col7" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col8" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col9" itemRenderer="customComponents.myOrgChart.TestIR" /> 

       <s:GridColumn dataField="col10" itemRenderer="customComponents.myOrgChart.TestIR" /> 

      </s:ArrayList> 

     </s:columns> 

    </s:DataGrid> 

このDataGridためDataProviderプロパティcol1と10 Objects含まArrayCollectionある - 各プロパティ、col10をタイプはCellRendererVOです。ここで

は、この実装の出力です：

今

、ここでは上記の画像に見られるように、私はボタンHide Imagesを持っている悩み

です。このボタンをクリックすると、Org.Chartに表示されているすべての画像を非表示にする必要があります。しかし、待って、私はちょうど他の何かにこだわって、今はこの実装について忘れてしまった。

次のようにこのボタンのクリックハンドラは次のとおりです。

private function hideImagesBtn_clickHandler(event:Event):void 
      { 

       orgChartDP.refresh(); 
      } 

しかし、このボタンをクリックしたとき、私は奇妙な行動を参照してください。 Orgの出力を参照してください。グラフをクリックしたときHide Images：

私はそれがなぜ変わっているのか理解できません。ご覧のとおり、ArrayCollectionのrefreshのみが実行されています。 Org.Chartの構造全体が変更されるのはなぜですか？

私はこれについていくつかの研究を行いましたが、私が考えることができる理由の1つはreusableの機能ですItemRendererです。しかし、この理由はまだOrg.Chartの変更には適用されません。

この問題を解決するためのあらゆる種類の支援は、こちらまでお寄せいただきありがとうございます。

おかげで、 安吉

Answer 1

申し訳ありませんが、私は完全に、おそらく完全なプロジェクトのソースは助けることができる、問題を理解し、何が起こっているかと起こったために、あなたが期待している何より良い、それを説明しませんでした。

あなたが投稿したソースコードに基づいて、私があなたに与えることができるヒントはほんの少しです。

州ではバグがたくさんありますし、子供の創造政策の魔女についても、間違いの原因となることもあります。

あなたが探しているものが見つかります。