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

This entry was posted on Monday, December 19th, 2011 at 4:57 pm and is filed under Blog. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.