• 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);
    centerPopup();

    }

    protected function stageOrientation_eventHandler(event:StageOrientationEvent):void
    {

    if(settingsPopup)
    {
    //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.
    callLater(centerPopup);
    }

    }

    protected function centerPopup():void
    {

    PopUpManager.centerPopUp(settingsPopup);

    }

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

    Your Reply