Indicating that a window is "active" inside a regular Flex (not AIR) application

I have an Flex 4 application (not AIR) which has some floating windows that act essentially as modeless dialogs.

Right now, if two of th开发者_StackOverflow社区ese are open at once they function as siblings which are both active and whose controls are enabled for user interaction.

I now need to maintain some notion of which one is "active" in the application. I don't want to /disable/ the non-active ones so as to blur them or prevent input on their controls.

I basically want to replicate basic OS window management: when you click or type into a control in one window it comes to the front and its title bar looks "active" and the others then look "inactive". Just like with a bunch of explorers in Windows.

Can anyone clue me in on an approach?

Assuming that your pop up windows extend UIComponent, you should be able to listen to the FocusIn event to make your window active and the focusOut to make your window inactive.

Now containers do not usually dispatch the focus events; however children of the containers will. And since the focus event bubble, you can listen for them as part of your popup.

Personally I would handle this with what we call a Mediator... essentially a singleton UI controller, along with a slightly custom component and custom skin. On Popup, each window registers itself with the Mediator, so the mediator knows all the windows that are open, on close each de-registers itself, OnFocusIn on each component it notifies the mediator of this event, the mediator calls a method on every other panel to does the blurring or whatever.

The custom component can extend TitleWindow and add a property IsActiveWindow, then the custom skin can change it's appearance based on this property.

For pro points use RobotLegs to to inject the reference to the mediator into the components.

Good luck!