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


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

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;".