Search Flex Samples

Creating custom pop-up windows with the PopUpManager class (redux)

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.







<?xml version="1.0" encoding="utf-8"?>


<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>


/src/Dialog.mxml


<?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>

/src/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>



0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples