Flex: Manually centering a popup based on browser width & height
Most Flex developers know that the default PopUpManager in Flex has a centerPopUp method that allows you to center the popup over the display object passed in through the method signature:
1 2 3 | var _popup:MyPopup = new Popup(); PopUpManager.addPopUp( _popup, this ); PopUpManager.centerPopUp( this ); |
You may even switch out the “this” reference and replace with “parent” or “parent.parentApplication” to center the popup on the entire application.
This can be especially true if you’re opening a popup from a small component in your application and don’t necessary want the popup to get centered on that one single component.
Unfortunately, if the dimensions of your parent Application are larger than the dimensions of the viewable browser window, you will have to center the popup manually rather than use the built-in centerPopUp() function.
Here’s how I center popups manually in Flex:
First, in your HTML template, I create a JavaScript function to return the browser width and height. I found this handy function on the web somewhere and it seems to do the trick:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | function getBrowserHeight() { var winW = 630, winH = 460; if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { winW = window.innerWidth; winH = window.innerHeight; } if (navigator.appName.indexOf("Microsoft")!=-1) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } } return winH; } |
In this case, it’s only returning height (which I’m mostly interested in), however you can modify it to return both attributes if you’d like.
In Flex, I make a call to JavaScript using ExternalInterface during application startup and store that value somewhere (say on the Model) where I can access it later:
1 | model.browserHeight = ExternalInterface.call( "getBrowserHeight" ); |
Now, whenever I open a popup, I use the browserHeight I’ve stored on the Model and manually compute a centered position on the screen:
1 2 3 4 5 6 7 8 9 10 | /** * Opens this popup */ public static function open( parent:UIComponent, model:MyModel) : void { var _popup:MyPopup= new MyPopup(); PopUpManager.addPopUp( _popup, parent.parentApplication as DisplayObject, true ); _popup.y = ( model.browserHeight / 2 ) - ( _popup.height / 2 ); _popup.x = ( ((parent.parentApplication.width) / 2) - (_popup.width / 2) ); } |
In this example, I place a static function within the popup class itself, which nicely encapsulates that logic. I also pass in some UIComponent. This is used mostly to get access to the parentApplication object, which I can use to figure out the application’s total width.
As you can see, by dividing the application width and height, then subtracting the popup’s width and height, you can manually center the popup in the visible area of the browser regardless of the application’s full height (which could be thousands of pixels high in some scrollable instances).
Opening the popup from a view is as simple as calling the static function:
1 | SubmitAdPopup.open( this, model ); |
I’ve run into this situation quite often in various Flex applications so I hope this may help others who finds themselves in the same boat.
Opinions? I’m curious in seeing how others solved this riddle. 
Recent Comments