Question

Is there a way within Flex 4 to design a skin such that it can listen for events that are dispatched by my main application, which, in this case, is an instance of the <s:WindowedApplication> class?

I tried adding an event listener to the contentGroup in the skin, just for kicks. Not surprisingly, it didn’t work.

Any ideas?

Thank you for your time.

Answer 1

You want to design a skin for which component?

If you are designing a skin for WindowedApplication and want to listen for events fired from your WindowedApplication class; then yes. You can use the hostComponent variable in the skin to listen for said events on the instance of the WindowedApplication.

I believe the hostComponent property is created automatically based on the skin Metadata; unless you’re creating a Mobile Skin then the docs tell you to create it manually. Conceptually like this:

public var hostComponent : WindowedApplication;

At some future point in the code:

hostComponent.addEventListener('myCustomEvent',myEventListener);

I don’t know at what point in the Flex Component Lifecycle the hostComponent property is set. I’m sure you could add event listeners w/o issue during the creationComplete event; but probably much earlier in the lifecycle too.

If that is not what you’re trying to do you can listen for events on the main application anywhere in your code–including skin classes–by referencing the FlexGlobals.topLevelApplication variable:

var tla : WindowedApplication = FlexGlobals.topLevelApplication as WindowedApplication;
tla.addEventListener('myCustomEvent',myEventListener);

This is considered a break in encapsulation and I’m not sure I’d recommend it. Events should be used to communicate up; but executing methods and properties should be used to communicate down. In this case you’re using events to communicate down.

Having the skin class listen for events on the hostComponent is kind of like working sideways–not up or down. I have mixed feelings about that too.