In a previous example, “Creating custom pop-up windows with the PopUpManager class”, we saw how you could use ActionScript to create pop up windows using the PopUpManager class in Flex.
In the following example we see how you can create a custom MXML component and pass the class name to the static PopUpManager.createPopUp() method to display the pop up.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/ -->
<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>
info.txt
<font size="+2"><i>More Information...</i></font> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at arcu in lacus iaculis ultricies. Vivamus consectetuer. Donec vulputate aliquam leo. Nam metus. Aliquam nulla odio, ultrices vitae, nonummy eget, viverra accumsan, tellus. Curabitur neque ante, nonummy ut, fermentum eu, elementum a, ligula. Fusce hendrerit lectus ac velit. Suspendisse lorem pede, sagittis ac, fermentum non, auctor quis, nulla. Integer eu lacus sit amet justo vestibulum sodales. In euismod tellus eget magna. Vestibulum sed ante. Suspendisse eros libero, gravida ac, cursus et, porta vitae, lectus.</p>
View source is enabled in the following example.
Bah, I forgot to set the TextArea control’s
editableproperty tofalse, but you get the idea.Peter
Can you explain why spacing between paragraphs so big? (It is often the big problem)
s’ergo,
Try setting the
condenseWhiteproperty totrueon the TextArea control.Peter
Thank you!
All works fine.
You the great!
谢谢
…createPopUp(this, Dialog, true)…
how to make relation between dialog in .as and our dialog.mxml?
and thks ;)
yes u forgot to import it in as like :
import src.Dialog;northwebs.net,
You shouldnt need the import. the Dialog.mxml, info.txt, and main.mxml should all be in the same directory. Sorry, I think the filenames above the code are a bit confusing. You can check out the source code to see the exact folder structure.
Peter
u’re right Peter, thks a lot ;)
Hi,
If i want to put the Dialog.mxml file in an other folder (ie : src/myComponents/Dialog.mxml). How can I then reference it into the code “PopUpManager.createPopUp(this, Dialog, true) as Dialog”. I tried to put myComponents.Dialog but it doest’n work.
Any help please
Thanks
Gael,
How about this:
<mx:Script> <![CDATA[ import mx.managers.PopUpManager; import myComponents.Dialog; private function launchMoreInfo():void { var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog; PopUpManager.centerPopUp(win); } ]]> </mx:Script>Peter
Hi,
I’m trying to apply the style of the titleWindow you used in your “Creating a pop up TitleWindow using the PopUpButton control” example. However, when I use the PopUpManager class, the style isn’t applied, it uses the default one like the one in this example, is there anything I can do?
Thanx in advance
I want to do instead of info.txt in static I want dynamic that comes from database in text field.How????Anyone help me???
Could you make the popup re-sizable using the cursor?
Thanks
‘All works fine.’
Thats not true, the example didnt works.What about this?
var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
here is error: undefined property dialog
Excellent tutorial as usual!
Just one question. If I change the width/height of the popup to percentwidth/percentheight, it doesn’t work. How do I set the size of the popup to, say, 80% of the parent?
Thank you,
You are doing a great job!
Eric,
This is a little crude, and you probably want to ask this question on the FlexCoders list, but you may be able to do what you want if you create a custom TitleWindow component and calculate the width/height yourself based on the Application’s width/height multiplied by the desired percent width/height. Something like the following:
<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showCloseButton="true" width="80%" percentHeight="80" creationComplete="titleWin_creationComplete(event);" close="titleWin_close(event);"> <mx:Script> <![CDATA[ import mx.events.ResizeEvent; import mx.events.FlexEvent; import mx.core.IFlexDisplayObject; import mx.events.CloseEvent; import mx.managers.PopUpManager; import mx.core.Application; private function titleWin_creationComplete(evt:FlexEvent):void { var titleWin:TitleWindow = evt.target as TitleWindow; var widthPct:uint = Application.application.width * titleWin.percentWidth / 100; var heightPct:uint = Application.application.height * titleWin.percentWidth / 100; titleWin.width = widthPct; titleWin.height = heightPct; PopUpManager.centerPopUp(titleWin); } private function titleWin_close(evt:CloseEvent):void { PopUpManager.removePopUp(evt.target as IFlexDisplayObject); } ]]> </mx:Script> <mx:Label text="Lorem Ipsum" /> </mx:TitleWindow>Peter
I am sorry Peter, I didn’t mean to offend anyone. I am very new to flex and I am not familiar with flexcoder list. Thanks a lot for your help anyway. Great blog.
Eric,
No problem. Sorry, after re-reading my reply, I worded it very poorly. I meant my solution was a little crude and I’m sure somebody on the FlexCoders list would have a more elegant solution.
Peter
Peter,
Thanks for the solution, I have a question. New height and width is received on CreationComplete, now is it possible to set height and width of child components based on this new height and width. Could you please give an example for this.
Thank You
–
Chetan
I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.
Thanks
Abhilash
Hi Peter,
Ive been looking at your example and also the examples in the livedocs. Ive been doing flex for about 2 months now and previously i was developing in AS 2.0, C#, Java and VB. Im just trying to get my head around this class and it has been annoying. I have an application that uses a socket connection to raise events. When these events are raised, i am using a custom Alert component that is displayed using the PopUpManager class. Now it all works great, the problem is i am using the same PopUpManager class to display another custom Alert component. After adding one, it seems as though i cannot add the second one, even after removing it. Is there anything that i am missing to be getting the this error?? should i possible have 1 component with the two others nested within it? and the parent of these two be the panel that i use to display in PopupManager?
the error i am getting is as follows:
Hi Peter
Thank you for the good examples. I wonder if you have an answer for this. I want to popup a custom window like this example, and be able to dispatch an event back to the opener. Basically when the custom window closes I want run a function from the opener.
Are there any problems with this approach? Thanks!
Hi AC, this is the problem I also face just now. It can be easily solved with Cairgnorm framework but w/o it, you can do this way.
1. You create custom event in your custom popup window. Then dispatch event as usual.
2. In your opener, you have a reference to popup window, register it with custom event listener above. i.e.
(in your opener’s code)
var popup:CustomPopup = new CustomPopUP();
popup.addEventListener(yourEvent, functionHandler);
private var fucntion functionHandler(yourEvent):void{ }
Regards,
Anh
P.S. This is a great flex blog :D Thank you, Peter
Do you know how to make modal dialog only cover specific section of the swf application (say some panel) and not the full swf application ?
I’m also wondering the same as Shailendra (previous poster). Is there a way to make the modal window cover only a component, not the entire stage? I debugged and found where the modal window is created. I guess we could just inherit from the proper classes and resize/relocate the modal window.
Hello Sir
I am having a problem now !!I tried to use pop up window
private function launchMoreInfo():void { var win:Dialog = PopUpManager.createPopUp(this, ManageMedia, true) as ManageMedia; PopUpManager.centerPopUp(win); }I am not able to compile this code . Can any one Explain me the Exact Syntaz
Var win : XXXX –>should it be the name of the other class we are going to call or Dialog class ?
Can you please explain me the line
isaac,
Try this:
Peter