Home > Adobe Flex > Flex: Manually centering a popup based on browser width & height

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. ;)

Categories: Adobe Flex Tags:
  1. May 31st, 2014 at 22:57 | #1

    What’s up, I read your blog like every week.

    Your story-telling style is witty, keep up
    the good work!

  2. December 15th, 2014 at 21:12 | #2

    Most major phone system manufacturers, attempt to sell theirr
    version of IP Tell hence the business will probably be
    looking at IP Tel irrespective of what. So one example is, should your business has 20 extensions,
    however, you only expect 6 simultaneous calls
    any time, you wiull only need 6 trunks. Though it can be expensive it
    adeded value on the money I have spent because of
    thgis excited device.

  3. December 23rd, 2014 at 23:05 | #3

    Whether movie industrial, chemical, food industry, water treatment or pharmaaceutical industry it is
    possible to count on their good quality products and services.
    At fg inox, you’re going to gett exclusive array of stainless steel pipe accessories especially suitable for you in reasonable prices.
    2 kg, allowing it to be compact and easy too use in various environments.

  4. December 26th, 2014 at 10:07 | #4

    Scent life (does it last four hours, or stay fresh all-around eight hours);.
    The nails, your hair, the footwear,she’s developed with these things
    and has now beewn paying focus on them since she was young.
    But aside froom these names, and many otfher recognizable brands, guys were stuck in no-man’s land concerning cologne.

  5. December 27th, 2014 at 08:35 | #5

    In 1984, following wave on the first production with the Air
    Maxx Tailwind 4 regarding Nike customers suddenly modified ther perception. The nails, your hair, these
    comfortable shoes, she’s matured with these things and it has ben paying awarreness of them
    since she was young. It has developed into huge
    success in the wintertime boots industgry as it is often launched.

  6. December 27th, 2014 at 09:35 | #6

    You will reall feel accustomed to the finest services in addition to
    their top class chef. Explore your neighborhood village with ‘Little Made,’
    as thhe host and guide. Manyy peoplle may even see journeys
    much like the one taken by Elizabeth Gilbert in Eat, Pray, Love as impossible of their lives.

  7. January 3rd, 2015 at 10:41 | #7

    First, the arrangement could be the order where the sections of
    music are positioned, for instance, intro-verse-chorus-verse-chorus so on. With
    genres between rock, pop, alternate, punk, electronica, hip-hop, place, folk,and blues, start searching for your
    favourite for no extra charge MP3 song by typing inside the name frrom the artist or band, song title,
    or perhaps the name with the album. As you receve the real dwelling on the Holy Spirit, you’ll realise until this
    is your fountain of perpetual life.

  8. January 7th, 2015 at 10:24 | #8

    Well here’s ann instant ist of a number of the things you receive with
    your nightly rate whenever you book this kind of accommodation:.
    The rooms are modern and comfy, with private bathrooms,
    24-hour domestic hot water, and electgricity plus accommodations are attractively
    appointed. An individual without knowledge or farming knowledge may not be expecting to obtain a farm and remain an immediate success.

  9. January 7th, 2015 at 10:59 | #9

    Pan-frying can also be considered a variety
    of dry heat approach tto cooking our meat. Master recipes to unlock culinary delights from through the globe.

    For pan-broiling, begin with placing the lamb in a heavy skillet.

  10. January 9th, 2015 at 11:10 | #10

    An easy way to tell whicdh side may be the front would
    be too look with the artist’s signature. As the king Of Yogyakarta, Java, Indonesia, batik iis becoming their daily outfits.

    Paired which has a T-shirt along with a denim jacket thdse skirts look great.

  11. February 2nd, 2015 at 02:08 | #11

    This may be called “The Feeder”mainly because itt feeds off everything
    around it, adapting in reply to its environment.
    It takes few hours so as to print the t-shirts so it
    might be quite tiring. Such that after servicemen returned following your war they brought with him or herr the concept, as well as the desire to put on them in civilian life.

  12. February 8th, 2015 at 20:47 | #12

    If that you are asking these questions, you might find this infrmation useful.
    Moreover, inside very first week only you will notice that
    that you arre having strong erections which enable it to stay in erected stage for a
    longer time time period. One major reason will be the natural formulation of ingredients which made with this product.

  13. February 8th, 2015 at 21:41 | #13

    Think of Hollywood’s ‘ice queen’ leading ladies to do this ‘look’.
    But virtually all sites let your childrten to learn online, with thanks to the flash technology.
    Even if you think youu are not considering
    fashion, you arre going to soon realize that
    you will discovver at least quite a ffew which you cannot
    but have preferences whenever it comes to dressing.

  14. February 8th, 2015 at 23:30 | #14

    Another benefit is the fact wooden clothes pegs are very cheap,using a
    packet of 36 pegs clsting around fifty pence.
    Following is really a list of Liberty Local Vendors for 2011
    with links with their websites (if available)
    to acquure more information about the artist and
    craft. These places provides you with an insight in to the local life and history
    on the island.

  15. February 11th, 2015 at 10:47 | #15

    Coloradoans have begun to recceive their blue book viter guides recently, using a large portion of the population getting
    theirs today. Selecting an online site that you will patronize is critical for you will be spendinhg a number of your money and period in it.

    Acquire the proper online sportsbook – A sportsbook caan be a sports gambling platform that allows punters
    to gamble.

  1. No trackbacks yet.