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