Flex Examples

10 Responses to “Creating custom pop-up windows with the PopUpManager class”

1. 1 Nick Aug 9th, 2007 at 6:14 am

   Itried to use this code for displaying a popUp window after the user has selected a row on a dataGrid in flex2. I used binding to show the contacts details in the popUp inside a labels textField. it works the way you have done it perfectly off a button but why wont it work form a selected Item click off a dataGrid. Here is my long long code.

   Please type your name, location or number as you see it appear on the contacts list including all spaces as you see them. Do not use the ‘ ‘ or ‘(’ ‘)’ operators as this will result in a miss match.

   I know you wont get the data in the grid but that part works fine.

2. 2 Tariq Jamal Nov 5th, 2007 at 1:59 pm

   Is there anyway to have the variables they enter transfer to the main state? OR refer to the variables?

3. 3 seb Nov 6th, 2007 at 7:04 am

   Tariq Jamal > yes if you make that :

   ....
   private var panel:Panel;
   private var textInput:TextInput;
   ....
   

   And you replace on :

   private function init():void {
   ...
   var textInput:TextInput = new TextInput(); // before
   textInput = new TextInput(); // replace by
   ...
   }
   

   And after you can access to the text property of element textInput, for exemple

   private function closePopUp(evt:MouseEvent):void {
            Alert.show(textInput.text)
            PopUpManager.removePopUp(panel);
   }
   

   Regards, Seb

4. 4 Jason Jan 4th, 2008 at 1:41 pm

   Is there anyway I can create the panel using the flex builder gui rather than actionscript code?

5. 5 Stranger Mar 13th, 2008 at 2:45 am

   Hi,

   How can i the background even when i open the popup window. The background gets disabled when i open a popup window. I want to enable the background also.

   Can you help me in this.

   Regards
   Stranger

6. 6 Nick Mar 20th, 2008 at 5:36 pm

   Hi Peter,

   I am looking for a script like this, where the user can say click on a text or button that says “Click here for more info” I do not want them to enter info on a text box, but I want to create a custom text popup in a box that explains info to them, not for them to enter info. Can you modify this script to do so, or what do you suggest?

   Thanks alot!

   Nick

7. 7 peterd Mar 20th, 2008 at 6:14 pm

   Nick,

   Instead of creating a TextInput control in the previous example, you could create a read-only TextArea (set the editable property to false).

   Or, if you want a longer answer, something like this should do the trick (and probably be a bit more reusable:

   <?xml version="1.0" encoding="utf-8"?>
   <!-- main.mxml -->
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="vertical"
           verticalAlign="middle"
           backgroundColor="white">
   
       <mx:Script>
           <![CDATA[
               import mx.managers.PopUpManager;
   
               private function launchMoreInfo():void {
                   var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                   PopUpManager.centerPopUp(win);
               }
           ]]>
       </mx:Script>
   
       <mx:ApplicationControlBar dock="true">
           <mx:Button id="button"
                   label="Click for more information"
                   click="launchMoreInfo();" />
       </mx:ApplicationControlBar>
   
   </mx:Application>
   

   <?xml version="1.0" encoding="utf-8"?>
   <!-- Dialog.mxml -->
   <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
           layout="vertical"
           title="More information"
           showCloseButton="true"
           width="400"
           height="300"
           close="titleWindow_close(event);">
   
       <mx:Script>
           <![CDATA[
               import mx.events.CloseEvent;
               import mx.managers.PopUpManager;
   
               private function titleWindow_close(evt:CloseEvent):void {
                   PopUpManager.removePopUp(this);
               }
           ]]>
       </mx:Script>
   
       <mx:String id="info" source="info.txt" />
   
       <mx:TextArea id="txt"
               htmlText="{info}"
               focusAlpha="0.0"
               width="100%"
               height="100%" /> 
   
   </mx:TitleWindow>
   

   Then create a text file named “info.txt” in the same directory as main.mxml and Dialog.mxml and enter whatever text you want to appear in the More Information dialog.

   Hope that helps,
   Peter

8. 8 peterd Mar 20th, 2008 at 6:37 pm

   Actually, I’ll just do a new post, it would be easier to read:
   “Creating custom pop-up windows with the PopUpManager class (redux)”

   Peter

9. 9 Arun May 27th, 2008 at 11:10 pm

   help me i want codes for setting one Application having controls in view folder as components.

10. 10 Prashanth Samanth Jun 2nd, 2008 at 5:35 am

    Hello Guys,

    Can I get a Simple AS or JS to open a Popup, so that I can reuse those AS or JS in various places just by calling the JS and the path of the file to open as Popup

    Thank a lot in Advance
    Prashanth Samanth

Leave a Reply