Flex Examples
The Alert control is great if you need to get a simple confirmation on an action which has a yes/no type answer, but what do you use when you need to prompt a user for their name or something else? JavaScript has a prompt(), and Flex has a very robust PopUpManager class.
This following example will demonstrate how to launch a custom Panel pop-up dialog which includes a Label control, TextInput control, and two Button controls. It also shows how to create a bunch of Flex components and containers using ActionScript instead of MXML.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.containers.ControlBar;
import mx.containers.Panel;
import mx.containers.VBox;
import mx.controls.Button;
import mx.controls.Label;
import mx.controls.Spacer;
import mx.controls.TextInput;
import mx.managers.PopUpManager;
private var panel:Panel;
private function init():void {
var vb:VBox = new VBox();
var label:Label = new Label();
var textInput:TextInput = new TextInput();
var cb:ControlBar = new ControlBar();
var s:Spacer = new Spacer();
var b1:Button = new Button();
var b2:Button = new Button();
s.percentWidth = 100;
b1.label = "OK";
b1.addEventListener(MouseEvent.CLICK, closePopUp);
b2.label = "Cancel";
b2.addEventListener(MouseEvent.CLICK, closePopUp);
cb.addChild(s);
cb.addChild(b1);
cb.addChild(b2);
label.text = "Please enter your name:";
vb.setStyle("paddingBottom", 5);
vb.setStyle("paddingLeft", 5);
vb.setStyle("paddingRight", 5);
vb.setStyle("paddingTop", 5);
vb.addChild(label);
vb.addChild(textInput);
panel = new Panel();
panel.title = "My Title";
panel.width = 240;
panel.height = 180;
panel.addChild(vb);
panel.addChild(cb);
}
private function closePopUp(evt:MouseEvent):void {
PopUpManager.removePopUp(panel);
}
private function createPopUp(evt:MouseEvent):void {
PopUpManager.addPopUp(panel, this, true);
PopUpManager.centerPopUp(panel);
}
]]>
</mx:Script>
<mx:Button label="Launch Pop-Up" click="createPopUp(event)" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
Is there anyway to have the variables they enter transfer to the main state? OR refer to the variables?
Tariq Jamal > yes if you make that :
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
Is there anyway I can create the panel using the flex builder gui rather than actionscript code?
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
If you change this line:
PopUpManager.addPopUp(panel, this, true);
to
PopUpManager.addPopUp(panel, this, false);
or
PopUpManager.addPopUp(panel, this);
you will get the desired behavior. The 3rd parameter in createPopUp or addPopUp is a boolean – by default it is false, which means the window will be non-modal, which allows you to interact with other windows besides the PopUp window. When it is set to true, the PopUp takes over – all other windows are disabled until the user has finished interacting with the PopUp and dismisses it.
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
Nick,
Instead of creating a TextInput control in the previous example, you could create a read-only TextArea (set the
editableproperty tofalse).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
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
help me i want codes for setting one Application having controls in view folder as components.
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
thanks it was very useful :)
instead of a button, can i use an image to link to the popup?
Hi Peter,
Been trying to develope a small app in flex for a couple of weeks and every time i refer to the web for help i always end up back here on ur blog, and every time u come up with the goods, see the website to see what ur blog has enable me to do!! Big thank you to u for sharing!!
Kind Regards Neil
Hi Peter,
is there a way to restrict the popup window moving inside a rectangle area onMouseMove? Similar to startDrag(x,y,width,height) properties?
thanks
Nik
winPopup.x = (mx.core.Application.application.width -winPopup.width) / 2;
winPopup.y = (mx.core.Application.application.height – winPopup.height) / 2;
I’m looking for a way to have a pop appear at the top of a screen but centered horizontally. Can anyone shed light on how to do this? Thanks.
winPopup.x = (mx.core.Application.application.width -winPopup.width) / 2;
winPopup.y = (mx.core.Application.application.height – winPopup.height) / 2;
I am new to Flex and I have modified the close function to this :
Can you please tell me where the above code would fail where the code listed on the website would succeed?
Hi all,
thanks for this blog, I just have a little problem, no matter which popup example I take from internet, every popup window content *looks* like disabled, it is like under other layer :( I can use the datagrid and the buttons, it just shows up like disabled…
Any idea what I am doing wrong?
Thanks for any suggestions.
Lulu
I found out that it was just the text color.
Mabye it will help someone new (like me ;o)
Lulu
hi friend,
Your example hit error if you:-
i) Click the button to open the popup
ii) While the popup is still open, press ‘space’ 2 times on your keyboard
To avoid that, you should add the setFocus() after PopupManager.centerPopup:-
PopUpManager.addPopUp(panel, this, true);
PopUpManager.centerPopUp(panel);
panel.setFocus();
Hello Peter,
I am a student at the University of Nevada Reno and I like this application. I am gonna try to manipulate it but I am very new to Flex. I want to be able to click on text and the pop up contain images and info. Any help would be greatly appreciated. For example, we are creating a web site about entertainment and when the user clicks on an event the pop up window will appear and the user will be able to see more detailed information about the specific event.
nice example. i wonder how can i create a sub modal. i mean. i need a modal who just covers a required container ( and its childs), not the whole application . thanks in advance.
thank it useful for me and it help me now good job
I have essentially the same thing implemented in my current application. I need to take it one step further. I have to set the focus to one of the buttons in my popup (my client wants CANCEL to be focused by default). Is this possible? I’m not able to make button.setFocus() work. Anything funky about PopUpManager that I’m missing?
@Ryan L,
I modified the example slightly (more MXML based and less ActionScripty) and I think this is closer to the behavior you want:
And the custom Panel component, MyPanel.mxml, is as follows:
Now, when the Panel is opened the “Cancel” button is focused, but as soon as the user puts the focus in the TextInput control to enter their name, the Panel container’s default button gets set to the “OK” button so that pressing the enter key while in the TextInput submits the form instead of cancelling.
Peter
i want to bring the popup title window at the centre of the screen, but it is not aligned at the centre only for the 1st time. the remaining times , im able to do bring it in the center. when the user clicks the tab for the 1st time, the titlewindow is not appearing in the center, for the second click onwards, it is positioned in the correct place, reply to bhama1000atgmail.com
Popup Flex 4 login with ColdFusion backend !?
Always wanted to have an application where by if someone wanted to view an admin page he/she has to login first.
Peter thnq, if u don’t mind…ur profile pic is not looking good…can u keep another pic