• Tutorials
  • Blog
  • About
  • Contact
  • Center A Popup in Flex Mobile after Orientation change

    2011 - 12.19

    How do you center or re-center a popup in Flex when a user is changing the orientation of the device?

    Maybe a user rotates the device and the view changes from landscape to portrait view and you have a popup that needs to be re-centered. So what to do . . .

    Well, I’m glad you asked. Basically, you need to listen for the Stage to dispatch a StageOrientationEvent.ORIENTATION_CHANGE event. When the orientation does change, you’ll need to wait for the view to update (or whatever magic you’re doing), give Flex a second to redraw the view by waiting a frame then center the popup. (PopUpManager.centerPopUp)

    Additionally you could set a flag and wait for the updateDisplaylist method to be called before centering your popup.

    Ok if that wasn’t clear, maybe a little code would help:

    protected function addedToStageHandler(event:Event):void

    this.stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, stageOrientation_eventHandler);


    protected function showSettingsPopup():void

    PopUpManager.addPopUp(settingsPopup, this, true);


    protected function stageOrientation_eventHandler(event:StageOrientationEvent):void

    //we call it later so that Flex can layout the app before we center everything.
    // we could also set a flag and override the update display method.


    protected function centerPopup():void



    So in this code we’re using a popup called ‘settingsPopup’. You’ll need to make your own popup and have a reference to it in order to center it.

    Best of luck,

    Your Reply