Question

In short:

I need an event listener in a custom component so all its instances (without editing them) react at the same time, fired by a dispatched event in its parent container.

In detail:

• I have a custom component with Tab navigator. (The tabs are intended to show different preferences for different Languages.)

• I have a button bar with buttons for all the languages.

• There are a lot of instances of the custom component.

I want to click in a button of the languages bar and get ALL the instances switched to the same tab (the custom component contains the logic to change the tab).

I can do it by adding the event listener for EACH INSTANCE of the custom component, so it calls an internal function that changes the tab. But it seems to be very coupled, isn’t it?

I wonder if it can be done in the master CLASS of the component, so it listen for events in its parent container, whichever it is.

In my mind this code shoud work, but it doesn´t (obviously ill’use a custom event to pass the new language value):

this.parent.addEventListener("lang_change", this.change_tab);

This way I can just drop an instance of the component, and see it working for itself.

Thank you in advance

Answer 1

I need an event listener in a custom
component so all its instances
(without editing them) react at the
same time, fired by a dispatched event
in its parent container.

The very thing you want to do, by definition, breaks encapsulation. In an ideal world, a component should know nothing of it’s parent. If the component needs to communicate with it’s parent, it should dispatch an event. IF a parent needs to communicate to children it should call a public method on that child (or change a public property). From an encapsulation stand point, I cannot recommend that the child listen for events on the parent.

I want to click in a button of the
languages bar and get ALL the
instances switched to the same tab
(the custom component contains the
logic to change the tab).

So, then put a click handler for the button and do something like this:

public function onClick():void{
  myCustomTabNavigator1.selectedIndex = 1 
  myCustomTabNavigator2.selectedIndex = 1 
  myCustomTabNavigator2.selectedIndex = 1 
}

You can also set the selectedItem if you a reference to it. , If you have your custom TabNavigators in an Array, you can loop over them. IF the custom TabNavigators are child of your custom component you can create a method in that custom component to set the defaults and call that method on each component instead of setting selectedIndex directly.