主程序:TitleWindowDataTest.mxml
<?xml version="1.0" encoding="utf-8"?> <!-- TitleWindowDataTest.mxml An application that uses custom pop-up TitleWindowData--> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" layout="vertical" initialize="initApp()"> <mx:Script><![CDATA[ import mx.containers.TitleWindow; import mx.managers.PopUpManager; import mx.collections.ArrayCollection; [Bindable]public var gsBindMe:String = "Change me!" ; [Bindable]private var acDP2:ArrayCollection; [Bindable]public var acItemsSelected:ArrayCollection; //set by itemClick private function initApp():void { acDP2 = new ArrayCollection(); acDP2.addItem({artist:"Pink Floyd",price:29.99,album:"Meddle"}); acDP2.addItem({artist:"Pink Floyd",price:29.99,album:"More"}); acDP2.addItem({artist:"Genesis",price:22.99,album:"Trespass"}); acDP2.addItem({artist:"Yes",price:22.99,album:"Close to the Edge"}); acDP2.addItem({artist:"King Crimson",price:21.99,album:"Wake of Posiedon"}); }// private function showTitleWindow():void { var titleWindowInstance:TitleWindowData = TitleWindowData(PopUpManager.createPopUp(this, TitleWindowData, false)); //instantiate and show the title window PopUpManager.centerPopUp(titleWindowInstance); titleWindowInstance.title = "Non-Modal Title Window Data";//built-in property titleWindowInstance.width = 400; //built-in property titleWindowInstance.height = 450; //built-in property titleWindowInstance.mainApp = this; //Reference to the main app scope titleWindowInstance.gnMyNumber = parseFloat(tiMyNumber.text); //Pass a simple value to the popup } private function showSelectedItems(event:Event):void { acItemsSelected = new ArrayCollection(dg2.selectedItems) } ]]></mx:Script> <mx:Label text="Main App" fontSize="18" /> <mx:Text text="Selected Items will be passed into the pop-up. Select an item and click 'Show Title Window' button" width="300"/> <mx:DataGrid id="dg2" allowMultipleSelection="true" itemClick="showSelectedItems(event)" dataProvider="{acDP2}" > <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Artist" dataField="artist" /> <mx:DataGridColumn headerText="Price" dataField="price" editable="true"/> <mx:DataGridColumn headerText="Album" dataField="album" /> </mx:Array> </mx:columns> </mx:DataGrid> <mx:HBox > <mx:Label text="MyNumber:" width="100"/> <mx:TextInput id="tiMyNumber" text="99"/> </mx:HBox> <mx:HBox > <mx:Label text="Bind Me" width="100"/> <mx:TextInput id="tiBindMe" text="{gsBindMe}" change="gsBindMe = tiBindMe.text"/> </mx:HBox> <mx:Button label="Show Title Window (Non-Modal)" click="showTitleWindow()"/> <mx:HBox > <mx:Text text="Final Selection: From item selected in pop-up" width="100"/> <mx:TextInput id="tiFinalSelection"/> </mx:HBox> </mx:Application>
自定义组件:TitleWindowData.mxml
<?xml version="1.0" encoding="utf-8"?> <!-- TitleWindowData.mxml A sample custom pop-up that extends TitleWindow--> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initComponent()" showCloseButton="true" close="closeWindow()"> <mx:Script><![CDATA[ import mx.managers.PopUpManager; import mx.collections.ArrayCollection; [Bindable]public var mainApp:TitleWindowDataTest = null; [Bindable]public var gsMyString:String; [Bindable]public var gnMyNumber:Number; [Bindable]public var acItemsSelected:ArrayCollection; private function initComponent():void { } private function closeWindow():void { PopUpManager.removePopUp(this); }//closeWindow private function showFinalSelection(oEvent:Event):void { mainApp.tiFinalSelection.text = oEvent.target.selectedItem.album; }//showFinalSelection ]]></mx:Script> <mx:Text text="The data grid below shows the selectedItems in the data grid in the Main app. This dataProvider is bound to a local variable which is set by Main App datagrid itemClick. Select additional items(ctrl-click) in Main App, they will display here. Select an item here. It will display in Main App 'Final Selection' control." width="300" /> <mx:DataGrid id="dg2" rowCount="3" dataProvider="{mainApp.acItemsSelected}" change="showFinalSelection(event)" > <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Artist" dataField="artist" /> <mx:DataGridColumn headerText="Price" dataField="price" editable="true"/> <mx:DataGridColumn headerText="Album" dataField="album" /> </mx:Array> </mx:columns> </mx:DataGrid> <mx:HBox > <mx:Label id="lblMyNumber" text="{gnMyNumber}" width="100"/> <mx:Text text="Bound to local variable set at pop-up. Changes to Main App control do NOT change this" width="200" /> </mx:HBox> <mx:HBox > <mx:Label text="{mainApp.gsBindMe}" width="100"/> <mx:Text text="Bound to mainApp local variable via passed in reference. Changes in Main App DO change this." width="200" /> </mx:HBox> </mx:TitleWindow>
效果如下:
http://www.box.net/shared/cbb3pqbrmx
Original paper:http://benben.iteye.com/blog/278275