Flex 3の最近のブログ記事

イベントフェーズについて その1 では、3段階あるイベントフェーズの中で「ターゲット段階」・「バブリング段階」 をとりあげ、
イベントフェーズについて その2 では、残りのイベントフェーズ 「キャプチャ段階」をとりあげました。

今回は、イベントの伝播を止める方法について見ていきたいと思います。
早速 Adobe Flex3 API を調べてみると、イベントの伝播を停止する方法として次の2つのメソッドが用意されていることがわかります。
(今回のサンプルでは stopPropagation を使用しています)


----- APIに記載されている説明の引用 -----

stopImmediatePropagation()
イベントフローの現在のノードおよび後続するノードで、イベントリスナーが処理されないようにします。このメソッドはすぐに有効になり、現在のノードのイベントリスナーに影響します。これに対し、stopPropagation() メソッドは、現在のノードのイベントリスナーの処理がすべて終了するまで有効になりません。
stopPropagation()
イベントフローの現在のノードに後続するノードで、イベントリスナーが処理されないようにします。このメソッドは、現在のノード(currentTarget)のイベントリスナーには影響しません。 これに対し、stopImmediatePropagation() メソッドは、現在のノードとそれ以降のノードで、イベントリスナーが処理されないようにします。このメソッドを繰り返し呼び出しても影響はありません。このメソッドは、イベントフローの任意の段階で呼び出すことができます。

 

さっそくイベント伝播を停めるメソッドを使用したサンプルを見ていきましょう。

今回用意したサンプルは、予め用意されたBoxコンポーネント(生成時にマウスクリックのイベントリスナーをはっている)が8層の入れ子構造になっており、各Box上でマウスがクリックされるとイベントの伝播によってターゲットよりも外側のBoxのボーダライン色が青⇔赤に切り替わる様になっています。ただし、今回のポイントは一番外側のBoxに関してはイベント伝播の影響を受けず、自身のBoxがクリックされない限りボーダライン色は切り替わらない仕組みになっています。

実際に実行した際の初期画面はこんな感じです。

init.PNG

まずはBoxコンポーネント側のサンプルソースからみていきます。BoxコンポーネントのcreationCompleteイベントでマウスクリックイベントのリスナーを作成し、そのハンドラーでボーダーラインの色を切り替えています。

<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml"
     horizontalAlign="center" verticalAlign="middle"
     borderStyle="solid" borderColor="#0099FF" borderThickness="3"
     creationComplete="onCC()" >
<mx:Script>
    <![CDATA[
   
        private var _redBorder:Boolean = false;
       
        public function set redBorder(isRed:Boolean):void{
            _redBorder = isRed;
        }

        private function onCC():void{
            this.addEventListener(MouseEvent.CLICK, onClickHandler);
        }
       
        private function onClickHandler(e:MouseEvent):void{
           
            this._redBorder = !_redBorder;
           
            if(_redBorder){
                e.currentTarget.setStyle("borderColor", "#ff4400");
            }else{
                e.currentTarget.setStyle("borderColor", "#0099FF");
            }
        }
               
    ]]>
</mx:Script>
</mx:Box>

次に実行ファイル側のサンプルソースを見ていきます。

layerBox0 ~ layerBox7までのBoxコンポーネントが入れ子構造になっており、application のcreationCompleteイベントで layerBox2 に対してマウスクリックイベントのリスナーを作成し、そのハンドラーで stopPropagation を実行しています。こうすることで イベントの伝播を layerBox2 で停止し、これ以上外側(layerBox1, layerBox0 )へ伝播しない様に設定しています。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:Comp="Comp.*"
    layout="vertical" backgroundColor="#FFFFFF"
    backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
    horizontalAlign="center" verticalAlign="middle"
    creationComplete="onCC()">
<mx:Script>
    <![CDATA[
       
        private function onCC():void{
            layerBox2.addEventListener(MouseEvent.CLICK, onclickHandler);
        }
       
        private function onclickHandler(e:Event):void{
            e.stopPropagation();
        }
       
    ]]>
</mx:Script>
    <Comp:Square id="layerBox0" width="400" height="300" >
      <Comp:Square id="layerBox1" width="360" height="270">
       <Comp:Square id="layerBox2" width="320" height="240">
        <Comp:Square id="layerBox3" width="280" height="210">
        <Comp:Square id="layerBox4" width="240" height="180">
        <Comp:Square id="layerBox5" width="200" height="150">
         <Comp:Square id="layerBox6" width="160" height="120">
          <Comp:Square id="layerBox7" width="120" height="90" />
           </Comp:Square>
          </Comp:Square>
         </Comp:Square>       
        </Comp:Square>
       </Comp:Square>
      </Comp:Square>
     </Comp:Square>
    </Comp:Square>
</mx:Application>

例えば、一番内側のlayerBox7をクリックした際の結果は以下のようになります。

stopPropagation.PNG

一番外側のBox枠線だけ色が変わらず、残りの枠線は赤色に切り替わりました。
イベントフェーズの順番に処理を追っていくと・・・・

1.  「キャプチャ段階」 では イベントリスナーを設定していない為、何も処理は行われない
2.  「ターゲット段階」で クリックされた layerBox7 の枠線の色を赤色にセットします
3.  「バブリング段階」で layerBox6 から外側に向かって順に枠線の色を赤色にセットします
4.  layerBox2 までバブリングしてきた後、layerBox2 で stopPropagation() が実行されます
5.  stopPropagation() の実行により、伝播は中止されlayerBox1及びlayerBox0 では枠線の色が変わらない

という流れになります。

ちなみにですが、stopPropagation() はイベントの伝播を停めるメソッドですので、layerBox0 をクリックしたときには 「ターゲット段階」の処理として layerBox0 の枠線の色は赤色に切り替わります。この場合は、イベントフェーズ対象に layerBox2 が登場しないのであたりまえといえばあたりまえですね。 (私はサンプル作成中に少しだけ混乱しました。ほんの少しだけ)

 

全3回に渡ってイベントフェーズとイベント伝播の停止を見てきました。サンプルソースが単純なので、その便利さがいまいち伝わらなかったかもしれませんが、イベント送信 + イベント伝播 + イベント停止 の使い方を覚えると画面の作り込みが楽しくなってきます。 是非応用して楽しい画面をつくってみてください。

イベントフェーズについて その1では、3段階あるイベントフェーズの中で 「ターゲット段階」・「バブリング段階」 に着目し、その仕組みをサンプルアプリの結果を見ながら確認しました。

今回は、残りのイベントフェーズ 「キャプチャ段階」について、私が勘違いしてしまったポイントも交えながら確認していきたいと思います。

まずは、キャプチャ段階のイベントをリスナーでキャッチさせる為に addEventListener メソッドの3番目の引数である useCapture を true に設定します。
(useCapture はデフォルトでは false に設定されています。つまり、ここのスイッチを変えない限り通常のイベントリスナーではキャプチャ段階は無視されています)

Flex3 API はこんな感じに書かれています。

addEventListener.PNG

 

今回のサンプルアプリではキャプチャ段階もリスナー対象としたいので、前回サンプルコードのinnerBox・middleBox・outerBox に登録したイベントリスナーの useCapture を true にします。

            private function onCreationComplete():void{   
                innerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher, true);
                middleBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher, true);
                outerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher, true);
            }

これでキャプチャ段階の設定がわかったので、前回サンプリコードの上記部分だけを変更して 実行すると 「キャプチャ段階」・「ターゲット段階」・「バブリング段階」 のすべてでイベントをキャッチできる!  ・・・・・と思っていましたが、そうはいきませんでした。

実際の実行結果はこれです。

capturePhase_only.PNG

・・・いくらクリックしてもキャプチャ段階のイベントしかキャッチできていません。

 

Flex3 API の続きを読んでみるとちゃんと書いてありました。以下はAPI 説明からの引用です。

「useCapturetrue に設定すると、リスナーはキャプチャ段階のみでイベントを処理し、ターゲット段階またはバブリング段階では処理しません。 useCapturefalse に設定すると、リスナーはターゲット段階またはバブリング段階のみでイベントを処理します。 3 つの段階すべてでイベントを受け取るには、addEventListener() を 2 回呼び出します。useCapturetrue に設定して 1 回呼び出し、useCapturefalse に設定してもう 1 回呼び出します。」

ポイントとしては、イベントフェーズは3段階存在しているけれども、実際にはキャプチャー段階 と ターゲット段階+バブリング段階 の2種類でリスナー処理を登録してやらないといけないこと。 つまり3段階すべてでリスナー処理をさせるには、useCapture スイッチを切り替えた2つの addEventListener を発行してやらなければいけないみたいです。 なるほど。

 

以下が、私の勘違いを正した今回のサンプルアプリ用のコードです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" horizontalAlign="center" backgroundColor="#FFFFFF"
     creationComplete="onCreationComplete()" >
     
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
       
            private var counter:int = 1;
           
            private function onCreationComplete():void{   
                innerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
                innerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher,true);
                middleBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
                middleBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher, true);
                outerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
                outerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher, true);
            }
           
            private function onCatchDispatcher(e:MouseEvent):void{
                var lbl:Label = new Label();
                var phase:String = getPhase(e.eventPhase);
                lbl.text = counter + " : " + e.currentTarget.id + " [" + phase + "]";
                setLabelColor(lbl, e.currentTarget.id);
                eventList.addChild(lbl);
                counter++;
            }
           
            private function getPhase(eventPhase:int):String{   
                var phase:String;
                //EventPhase 1=キャプチャ段階, 2=ターゲット段階, 3=バブリング段階
                switch(eventPhase){
                    case 1:
                        phase = "キャプチャ段階";
                        break;
                    case 2:
                        phase = "ターゲット段階";
                        break;
                    case 3:
                        phase = "バブリング段階";
                        break;
                }
               
                return phase;
            }
           
            private function setLabelColor(lbl:Label, targetBox:String):void{       
                if(targetBox == "innerBox"){
                    lbl.setStyle("color", "#CC0000");
                }else if(targetBox == "middleBox"){
                    lbl.setStyle("color", "#00cc00");
                }else if(targetBox == "outerBox"){
                    lbl.setStyle("color", "#0000CC");
                }
            }

        ]]>
    </mx:Script>
    <mx:HBox>
        <mx:VBox id="outerBox" minHeight="150" minWidth="150" horizontalAlign="center" verticalAlign="middle" backgroundColor="#0000CC">
            <mx:VBox id="middleBox" minHeight="100" minWidth="100" horizontalAlign="center" verticalAlign="middle" backgroundColor="#00CC00">
                <mx:VBox id="innerBox" minHeight="50" minWidth="50" horizontalAlign="center" verticalAlign="middle" backgroundColor="#CC0000" />
            </mx:VBox>
        </mx:VBox>
        <mx:VBox id="eventList" fontWeight="bold" />
    </mx:HBox>

</mx:Application>

 

実際にサンプルアプリを動かしてみるとちゃんと3段階のイベントフェーズを確認することができました。

① 一番内側の innerBox をクリックした場合

innerBox.PNG

② 次に内側の middleBox をクリックした場合

middleBox.PNG

③ 一番外側の outerBox をクリックした場合

outerBox.PNG

 

イベント伝播の機能はとても便利ですが、ここには伝播して欲しくないないんだよなーという場合もあると思います。

次回は伝播の止め方について確認していきたいと思います。

イベントフェーズとは、イベントがトリガされた時にイベントリスナーが存在するかを確認する順番(段階)のことで、次の3段階構成になっています。

[ キャプチャ段階 ] → [ ターゲット段階 ] → [ バブリング段階 ]

 ●キャプチャ段階
  イベントが発行されたターゲットの祖先の表示リストを親側から順に検査し、リスナーが登録されているかを確認します。

 ●ターゲット段階
  イベントが発行されたターゲットのリスナーが呼び出されます。

 ●バブリング段階
  イベントが発行されたターゲットの祖先の表示リストをターゲット側から順に検査し、リスナーが登録されているかを確認します。

今回の その1 ではターゲット段階とバブリング段階に着目し、サンプルソースを通してイベントフェーズを確認していきます。

以下のサンプルソースは、入れ子構造の3つのVBox (外側から outerBox - middleBox - innerBox という id を付加) を用意し、ApplicationのcreationCompleteイベント処理で各々のVBoxにクリックイベントのリスナーを発行します。
サンプルソースを実行し何れかのVBoxをクリックすると、クリックイベントの処理として
 「 "リスナー処理対象VBoxのid":"処理連番"["イベントフェーズ段階"] 」
が右側にリスト表示されます。 わかりやすい様に文字色はVBoxの背景色と同色にセットしています。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" horizontalAlign="center" backgroundColor="#FFFFFF"
     creationComplete="onCreationComplete()" >
     
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
       
            private var counter:int = 1;
           
            private function onCreationComplete():void{   
                innerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
                middleBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
                outerBox.addEventListener(MouseEvent.CLICK, onCatchDispatcher);
            }
           
            private function onCatchDispatcher(e:MouseEvent):void{
                var lbl:Label = new Label();
                var phase:String = getPhase(e.eventPhase);
                lbl.text = counter + " : " + e.currentTarget.id + " [" + phase + "]";
                setLabelColor(lbl, e.currentTarget.id);
                eventList.addChild(lbl);
                counter++;
            }
           
            private function getPhase(eventPhase:int):String{   
                var phase:String;
                //EventPhase 1=キャプチャ段階, 2=ターゲット段階, 3=バブリング段階
                switch(eventPhase){
                    case 1:
                        phase = "キャプチャ段階";
                        break;
                    case 2:
                        phase = "ターゲット段階";
                        break;
                    case 3:
                        phase = "バブリング段階";
                        break;
                }
               
                return phase;
            }
           
            private function setLabelColor(lbl:Label, targetBox:String):void{       
                if(targetBox == "innerBox"){
                    lbl.setStyle("color", "#CC0000");
                }else if(targetBox == "middleBox"){
                    lbl.setStyle("color", "#00CC00");
                }else if(targetBox == "outerBox"){
                    lbl.setStyle("color", "#0000CC");
                }
            }

        ]]>
    </mx:Script>
    <mx:HBox>
        <mx:VBox id="outerBox" minHeight="150" minWidth="150" horizontalAlign="center" verticalAlign="middle" backgroundColor="#0000CC">
            <mx:VBox id="middleBox" minHeight="100" minWidth="100" horizontalAlign="center" verticalAlign="middle" backgroundColor="#00CC00">
                <mx:VBox id="innerBox" minHeight="50" minWidth="50" horizontalAlign="center" verticalAlign="middle" backgroundColor="#CC0000" />
            </mx:VBox>
        </mx:VBox>
        <mx:VBox id="eventList" fontWeight="bold" />
    </mx:HBox>

</mx:Application>

 

【サンプルソースの実行】

① 一番内側の innerBox (赤色) を1回クリック
② 次に内側の middleBox (緑色) を1回クリック
③ 一番外側の outerBox (青色) を1回クリック

上記①~③の手順で実行した際の結果はこうなりました。

click_result.PNG

手順①では一番内側のコンポーネントがクリックされたことにより、ターゲット段階として innerBox がリスナーが実行されます。その後、親コンポーネントへの伝播が働くことにより、バブリング段階として middleBox・outerBox の順にリスナーが実行されます。

手順②では middleBox がクリックされたので ターゲット段階として middleBoxのリスナーが実行され、バブリング段階として 親コンポーネントである outerBox のリスナーが実行されます。

手順③では、一番外側のコンポーネントのouterBox がクリックされたので、バブリング段階対象のコンポーネントは存在せず、ターゲット段階の outerBox のリスナーのみ実行されます。

つまり、イベント発行したコンポーネントはターゲット段階としてリスナーを実行し、イベント発行したコンポーネントよりも親のコンポーネントはバブリング段階としてリスナーを実行しています。
考え方はシンプルですが、1つのアクション(イベント)で複数個所のリスナーを動かせる非常に強力なしくみですよね。

次回は、キャプチャ段階についてサンプルソースを見ながら確認したいと思います。

前回の「itemRendererで編集したデータをdataProviderに反映させる」では、
itemRendererにtextInputを使用しました。

今回はcheckBoxを使用してみます。
前回同様、2つのデータグリッド間でうまく連携できるでしょうか?

サンプルコードは次の通りです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:true},
                {Album:true}
            ]);
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
		<mx:DataGrid id="dg2" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>



前回からの変更点は以下4点。
 ・itemRendererをテキストインプットからチェックボックスに変更
 ・DataGridColumnのプロパティに「rendererIsEditor=true」を追加
  ※アイテムレンダラーをアイテムエディタとして使用するため
 ・初期値(initDG)を文字列から「true」に変更
  ※チェックボックスに変更したため
 ・確認ボタンと、押下時の処理を削除

 

それでは起動してみます。

flex_itemrenderer2_01.jpg

 

1行目のチェックボックスの選択を解除してフォーカスアウトしてみます。

flex_itemrenderer2_02.jpg

 

そうすると次のエラーが発生しました。
ReferenceError: Error #1069: itemRendererSample_inlineComponent1 にプロパティ text が見つからず、デフォルト値もありません。

これは、DataGridColumnのeditorDataField プロパティのデフォルト値が 「text」なためです。
アイテムレンダラーで使用しているチェックボックスはtextプロパティを持っていません。

これを解消するにはDataGridColumnのediterDataFieldプロパティにcheckBoxのプロパティである「selected」を指定します。
実際のコードは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:true},
                {Album:true}
            ]);
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true" editorDataField="selected">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
		<mx:DataGrid id="dg2" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true" editorDataField="selected">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>


 

早速起動して、先程と同じように1行目のチェックボックスの選択を解除してフォーカスアウトします。

flex_itemrenderer2_03.jpg

 

すると、今度はエラーも発生せず、データグリッド間の連携もうまくいきました。

意外とはまりそうなので、覚え書きしておきました…

データグリッドなどのリストコントロールで、アイテムレンダラーに編集可能なコンポーネントを使用して
変更したデータ内容をデータプロバイダに戻す方法をご紹介します。

早速、検証用アプリで動作確認を行っていきましょう。
サンプルソースは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:'Slanted and Enchanted'},
                {Album:'Brighten the Corners'}
            ]);
            
            //inidDGの内容を表示します
            private function checkBtnHandler():void {
            	Alert.show(
            		"initDGの内容確認" + "\n\n" +
            		"(0)=" + Object(initDG.getItemAt(0))["Album"].toString() + "\n" +
            		"(1)=" + Object(initDG.getItemAt(1))["Album"].toString()
            	);
            }
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album">
					<mx:itemRenderer>
						<mx:Component>
							<mx:TextInput/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
				
		<mx:Button label="check!!" id="checkBtn" click="checkBtnHandler()"/>
	</mx:VBox>
</mx:Application>


 

起動直後の画面です。

flex_itemrenderer1_01.jpg

 

「check!!」ボタンを押下し、データプロバイダにバインディングしている変数(initDG)の内容を確認しておきます。

flex_itemrenderer1_02.jpg

 

次に1行目のデータを変更します。

flex_itemrenderer1_03.jpg

 

再度「check!!」ボタンで変数(initDG)の内容を確認してみます。

flex_itemrenderer1_04.jpg

 

結果は、先程と変わっていません。
つまり、データプロバイダに反映されていないことになります。

 

では、サンプルコードを修正してみましょう。
データグリッドのeditableプロパティに「true」を設定してみます。

		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album">
					<mx:itemRenderer>
						<mx:Component>
							<mx:TextInput/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>


起動後、先程と同様に1行目のデータを変更して「check!!」ボタンを押下します。

flex_itemrenderer1_05.jpg

 

データプロバイダに反映されていることが確認できました。
editableを「true」にすることで、データプロバイダ内のアイテムを編集することが可能となります。

これを拡張して、2つのデータグリッド間でデータの同期を取るように作り変えてみましょう。
サンプルソースは以下になります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:'Slanted and Enchanted'},
                {Album:'Brighten the Corners'}
            ]);
            
            //inidDGの内容を表示します
            private function checkBtnHandler():void {
            	Alert.show(
            		"initDGの内容確認" + "\n\n" +
            		"(0)=" + Object(initDG.getItemAt(0))["Album"].toString() + "\n" +
            		"(1)=" + Object(initDG.getItemAt(1))["Album"].toString()
            	);
            }
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album">
					<mx:itemRenderer>
						<mx:Component>
							<mx:TextInput/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
		<mx:DataGrid id="dg2" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album">
					<mx:itemRenderer>
						<mx:Component>
							<mx:TextInput/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
						
		<mx:Button label="check!!" id="checkBtn" click="checkBtnHandler()"/>
	</mx:VBox>
</mx:Application>


 

起動直後の画面です。

flex_itemrenderer1_06.jpg

 

1つ目のデータグリッドの1行目を変更します。

flex_itemrenderer1_07.jpg

 

2つ目のデータグリッドも変更されました。
データプロバイダの参照先を同じ変数(initDG)にしているため、このようなことが可能となります。

応用次第では、何か面白いことが出来そうです。

次回はアイテムレンダラーにチェックボックスを使ってみます。

1234

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント