Flex4: Show the browser viewport as busy

If you had to place a busy message or icon to indicate a loading state in your flex application, where would you place it? Naturally, centering it along the application's height and width sounds like a good idea. But an application may easily overflow a browser's viewing area at any given time based on how the browser is re-sized ... then what?

A better approach would be to center the modal busy message/icon indicator according to the height and width of the viewing area provided by the browser at any given time.

Theory:
This may be possible in Flex4 if the application is provided a skin which has a s:Scroller defined. The s:Scroller can be pooled for its viewport's x & y coordinates and the busy message can be centered based on those coordinates. This way, even if the user scrolls or resizes the browser ... the busy icon would stay centered and visible to the user.

Solution:
The example given here with its downloadable sample source code ... will pretty much solve the entire problem for you by showing you how to access the viewport properties. After that just take use x="viewport.height/2 - verticalScrollPosition" and y="viewport.width/2 - horizontalScrollPosition" and the task is done.

Pitfalls:
If you try to refactor the scroller code into a skin for the application, the viewport is considered as un-bindable by the compiler and the solution won't work any more. So my original "theory" wasn't so accurate but oh well, lesson learned.

Key Takeaways:
1) The s:Group class hierarchy:
Group extends GroupBase -> GroupBase implements IViewport
shows that a group can directly be handled as a viewport. Therefore, the group immediately inside the s:Scroller for the s:Application is the viewport that you want to deal with. Its easy to reference directly via its id as shown by the example code in the link above.
2) If you have to factor out the s:Scroller into a skin for the application then the group must be named with an id="contentGroup" or nothing will show up when you launch your application. Whereas within the application's main mxml file, you can name the group anything you like.