サイテック株式会社 > 【連載】新人女子プログラマーの技術修行日記 - 第8回 Flex編③　PopUpのデータ受け渡し

久しぶりの修行日記書きます。

今回はFlexでのPopup画面を作成したときのデータの受け渡しについて。


単純に考えるとApplication.applicationとかparentで親にアクセスできそうな気もするのですが、Popupウィンドウに関してはこれで取得できません。


これはSystemManager がすべてのポップアップの親となるためです。
http://livedocs.adobe.com/flex/3_jp/langref/mx/managers/SystemManager.html


SystemManager は、アプリケーション内で最初に作成される表示クラスで、Application (AIRではWindowedApplication)も、SystemManager によってインスタンス化されます。
SystemManager を親とするオブジェクトは、ツールヒントやカーソルなどもありますが、それらは最上位ウィンドウと見なされるということなので、Application.applicationではアクセスできないというわけです。

では、どのようにしてデータを受け渡せば良いのか。

IDataRendererでデータセット

• PopupText.mxml

<mx:Script>
private function clickHandler():void {
　　　　　　　var pop:IFlexDisplayObject = PopUpManager.createPopUp(DisplayObject(this), PopupWindow, true);
            IDataRenderer(pop).data = test_label.text;
            PopUpManager.centerPopUp(pop);

            pop.addEventListener(CloseEvent.CLOSE,onClosePopup);
}
</mx:Script>
    <mx:Button x="54" y="194" label="popUpを開く" click="clickHandler()"/>
    <mx:Canvas width="178" height="63" x="10" y="31" borderStyle="solid">
    <mx:Label text="ポップアップへ渡すデータ" fontWeight="bold" x="25" y="10"/>
    <mx:Label y="33" text="ウィンドウ→ポップアップ" id="test_label" x="34.5"/>
    </mx:Canvas>
    <mx:Canvas x="10" y="113" height="61" width="178" borderStyle="solid">
    <mx:Label text="ポップアップからのデータ" fontWeight="bold" x="27" y="10"/>
    <mx:Label y="33" id="test_label2" color="#FF0000" fontWeight="bold" textAlign="center" horizontalCenter="2"/>
    </mx:Canvas>

createPopUpの引数は、

第一引数がwindow:IFlexDisplayObject

ポップアップさせるインスタンス。

第二引数がclassName:Class

ポップアップ用に作成されるオブジェクトのクラス。

第三引数がmodal:Boolean = false

trueだと、ポップアップ表示中は、ポップアップ以外が操作不能になります。

第四引数はchildList:String = null

与えられる引数は以下の三種。

・PopUpManagerChildList.APPLICATION
・PopUpManagerChildList.PARENT
・PopUpManagerChildList.POPUP
APPLICATIONはSTAGE以下に、PARENTは第二引数のparent以下に、POPUPはSystemManager以下にDisplayObjectを追加します。

参考：http://www.jinten.net/blog/archives/24

とのことですが、
第4引数はちょっと理解しきれませんでした。
Applicationから別のウィンドウを開いてそこからポップアップさせたときとかのことかと思ってやってみましたが、特に引数によって動きは変わらず。。

使いどころはどこなのだろう？

http://www.nankaifactory.com/blog/2008/06/-stage-s.html

↑↑

まぁ、通常はnullで問題ないようですが、この辺の違いをしっかり理解してないとなのかなと思ったり。

まだまだです。

で、渡すクラスPopupWindowを作成。

• PopupWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow
    xmlns:mx="http://www.adobe.com/2006/mxml"
    showCloseButton="true"
    close="closePopup()"
    width="200"
    height="178"
    >
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
backgroundColor="#FFFFFF"
creationComplete="initAs()">
<mx:Script>
    <![CDATA[
        import mx.utils.ObjectProxy;
        import mx.utils.ObjectUtil;
        import mx.managers.PopUpManager;
        private function initAs():void {

            render_data.text = String(this.data);
        }

        private function closePopup():void{
            PopUpManager.removePopUp(this);
        }

    ]]>
</mx:Script>
    <mx:Canvas width="157" height="55" x="7.5" y="9" borderStyle="solid">
    <mx:Label text="ウィンドウからのデータ" fontWeight="bold" x="24.5"/>
    <mx:Text y="26" id="render_data" horizontalCenter="0" height="19"/>
    </mx:Canvas>
    <mx:Canvas x="7.5" y="72" width="157" height="55" borderStyle="solid">
    <mx:Label text="ウィンドウへ渡すデータ" fontWeight="bold" x="18.5"/>
    <mx:TextInput y="21" width="135" id="popup_text_input"  x="10"/>
    </mx:Canvas>

</mx:Canvas>
</mx:TitleWindow>

this.dataでセットしたデータが取得できますが、中に何がセットされているか直感的にはわからないのが、微妙ですね。

特に配列なんかをセットした場合はコメントをつけないとわかりずらいです。

あと今までポップアップしたウィンドウ上のデータは、データベースとのやりとりしかさせたことがなかったのですが、親ウィンドウへデータを渡すやり方も少し独特のようです。

親ウィンドウに次のようなコードを書くと、ポップアップウィンドウのデータにアクセスすることができます。

private function onClosePopup(e:CloseEvent):void{
      var pop:PopupWindow = e.currentTarget as PopupWindow;
      //popup.id にてポップアップのコンポーネントにアクセス可能
      test_label2.text = pop.popup_text_input.text;
}

「OK」ボタンを付けてOKしたときのみ変更したい場合はCloseEventのdetailプロパティで判断すれば実装できます。

とりあえず、データの受け渡しはこんな感じでできます。

関係ないですが、今まで開発でオブジェクト内のデータを確認するときはDumperというクラスをインポートしてtraceしてましたが、
（http://www.libspark.org/wiki/dealforest/Dumper）
trace(ObjectUtil.toString(****);
で同じことができました。
参考：http://d.hatena.ne.jp/sugarbabe335/20080601/1212294245

今回は以上です。