|
Flex Pop-ups, and disabling/enabling the parent application |
I recently needed to create a pop up window in flex, and knew that I wanted to replicate much of the functionality of the 'Alert' method, IE graying out the background.
View the full application and source here
To start with we import the 'IFlexDisplayObject', and 'PopUpManager' packages. The we build a function that creates a pop up, using the pop up manager (PopUpManager.createPopUp). The we use "Application.application.enabled = false;" to disable the canvas.
2 <![CDATA[
3 import mx.core.IFlexDisplayObject;
4 import mx.managers.PopUpManager;
5
6 [Bindable]
7 public var _myPopup:Pwindow;
8
9 private function showPopUp():void
10 {
11 var p:IFlexDisplayObject = PopUpManager.createPopUp(this, Pwindow);
12 _myPopup = Pwindow(p);
13
14 PopUpManager.centerPopUp(p);
15 Application.application.enabled = false;
16 }
17
18 ]]>
19 </mx:Script>
Next we have a canvas, with a button. The button has a click event, that calls the function above.
2 <mx:Label x="10" y="10" text="Parent window" id="lab"/>
3 <mx:Button x="10" y="36" label="Pop Up" click="showPopUp()"/>
4 <mx:Text x="10" y="66" text="Pop up opens, and parent canvas is disabled." height="124" width="180"/>
5 </mx:Canvas>
Lastly we create a new component, and place a button, and a method to close the pop up (PopUpManager.removePopUp).
The declare the 'core.Application', which allows us to call "Application.application.enabled = true;", this lets us reference the calling application instance, and re-enable the application display.
2<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="212" height="202" backgroundColor="#FEACAC">
3
4 <mx:Script>
5 <![CDATA[
6 import mx.managers.PopUpManager;
7 import mx.core.Application;
8
9 // Cancel button click event
10 private function closeWin():void {
11 PopUpManager.removePopUp(this);
12 Application.application.enabled = true;
13 }
14
15 ]]>
16 </mx:Script>
17
18 <mx:Label x="10" y="10" text="Pop Up Window"/>
19 <mx:Button x="10" y="36" label="Close pop up" click="closeWin()" />
20 <mx:Text x="10" y="66" text="Pop up window is in focus, 
button closes window,
and re-activates the 
parent canvas." width="192" height="126"/>
21
22</mx:Canvas>