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

Tagged as: centerPopUp(), show()