06
Apr
08

Centering a pop up window when a Flex application is resized

The following example shows how you can center a pop up window (in this case an Alert control) when the Flex application is resized by using the resize event on the <mx:Application /> tag and using the static PopUpManager.centerPopUp() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/06/centering-a-pop-up-window-when-a-flex-application-is-resized/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        resize="application_resize(event);">

    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var alert:Alert;

            private function init():void {
                alert = Alert.show("The quick brown fox jumped over the lazy dog.", "title");
            }

            private function application_resize(evt:ResizeEvent):void {
                if (alert) {
                    PopUpManager.centerPopUp(alert);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Launch!" click="init();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example. | Click here to open example in a new window


8 Responses to “Centering a pop up window when a Flex application is resized”


  1. 1 eternalko Apr 7th, 2008 at 12:12 pm

    Nice

  2. 2 Andres Apr 23rd, 2008 at 5:55 pm

    Hi,

    Good example, but is it possible to use this kind of popup to enter information, or is it just for messages? If not, what would you recommend for user input?

  3. 3 peterd Apr 23rd, 2008 at 6:09 pm

    Andres,

    I would probably use the TitleWindow container and PopUpManager class.

    Peter

  4. 4 Andres Apr 24th, 2008 at 7:32 pm

    Thanx! Those were exacly the classes I was looking for!

    Great Examples!!!

  5. 5 Shane Jul 16th, 2008 at 1:05 pm

    Nice solution. Worked well for me. Thanks!

  6. 6 Abhilash Nov 17th, 2008 at 9:56 pm

    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

  7. 7 David Jan 26th, 2009 at 6:59 am

    I have the same problem as Abhilash. Anyone have any answers?

  8. 8 Anonymous Jun 24th, 2009 at 12:06 am

    I too have the same problem. Is there any solution..?

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed