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
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.
I think you should to use some MVC model like:
Cairngorm
http://code.google.com/p/swizframework/
http://www.robotlegs.org/
http://puremvc.org/
Related
I need fire event from parent component to childs components like broadcast method in AngularJS. How it possible in RactiveJS?
P.S: For example i have a tabs with different content includes components, when tabs renders only one tab active(visible) other tabs are hidden. When i select other tab it become active and show content. At this moment tab should send event refresh down to the childs component to let they know that they must initialize or refresh (because while it was hidden it couldn't initialized right).
Within the tab component, observe that the tab has become "active" and call refresh:
this.observe('active', function(active){
if(active){ control.refresh() }
})
Events don't fire down the hierarchy.
One option would be to put the template in a section watching a visible or rendered flag. Then set the flag to true when the tab becomes active. If there is something outside of the template that needs to be handled, you can observe it from your script.
Out of curiosity, what can't initialize correctly while it's hidden? Or do you mean not rendered, as there is no DOM to access? In that case, you may want to look into decorators.
I need to completely initialize a custom component in my Flex app (i.e. I should be able to access it from action script and get its properties and its children etc), But I do not want to add it to the display or make it visible.
I have tried to add it to my visible component, but keep it visible, but often many of its properties are set only when it is drawn, so i don't get what i need.
Is there a way to add a custom component to some sort of 'Virtual' display, that is not visible to the user?
You could add the component to an invisible Sprite - that way the component itself could both be on the stage and have its own visible property set to true.
Did you try using initialize()? After a view is added to the display list, the initialization stage begins. Calling initialize() before addChild() should let you initialize the view without needing to first add it to the stage.
For more info visit:
http://flexscript.wordpress.com/2008/10/24/flex-component-lifecycle-and-flex-component-framework/
http://blog.deadinkvinyl.com/2008/10/05/flex-3-addchild-and-initialize/
Not sure if possible without adding it to the display list, although I'd wish it were to some extent.
I once had to make custom drag proxy, which didn't work with the real component, because of some weird skinning issues. So instead I had PopupMananger add a box as a popup, added my component to the box, called validateNow on the component, drew it in a bitmap data, removed the popup, and used the bitmap data as the proxy.
So what you were trying was missing a call to validateNow most likely.
I have an Flex 4 application (not AIR) which has some floating windows that act essentially as modeless dialogs.
Right now, if two of these 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!
I have a spark list control whose data is rendered using an itemrenderer. Basically the Item renderer lays out the data within a Panel.
The Panel has a LinkButton, which when clicked needs to pass an Id to the parent application. In the parent application I have a function that dispatches a custom event to its parent. I want to know how to call this function from the ItemRenderer.
I tried using parentDocument.outerfunction etc but it throws an error..
Any clues ?
I would have your item renderer dispatch a custom event that contains your Id, making sure that your event bubbles. Then in the parent application listen for that event and call the appropriate function. Hope that helps.
If I understand well you can try to call from the item renderer this.parentApplication or this.parent.parent.
The best way is to create a custom event and bubble .. and add an event listener for that event in parent document..
this is working I have test parentcomponent(this.owner.parent).function...owner is list and parent is the component in which list is placed e-g InvitationList(this.owner.parent).invitationAccepted(persist);
type cast the this.owner.parent to your parentclass
If you were using PureMVC, you could send a notification that the receiver would handle and perform the needed work. This is similar to firing a custom event and receiving it in the parent.
I have two mxml files. one is main that is application tag mxml file and another is my mxml component file.
I have a viewstack in my main mxml whose id is, say, "mainViewStack".
Now I want to set selectedChild property of "mainViewStack" from my mxml component file.
But I m getting error:
Error #1009: Cannot access a property or method of a null object reference.
on accessing mainObj.mainViewStack.selectedChild.id where mainObj is the object of main mxml file.
Please help me out.
Thank u.
My guess is that you're trying to access the child before it's created. But that's hard to tell without the code.
Try waiting until the FlexEvent.CREATION_COMPLETE event on the application to access the selected child.
This issue is referred to as "deferred instantiation" and is a product of the Flex Component Lifecycle. If you want an extremely thorough explanation of this concept, this white paper is probably the best I have read.
Essentially Flex creates components as they are needed. Each component has a lifecycle that takes it through stages:
Construction
Addition
Initialization
Invalidation
Validation
Update
Removal
A sub-component isn't going to be accessible until it has passed through the initialization phase. This is the point at which a Flex component will dispatch its CREATION_COMPLETE event, letting you (and the framework) know that it is ready for interaction. Prior to this event, you are going to receive null reference errors when attempting to access the component or its children.
ViewStacks compound this by default by not initializing sub-components until they are called for display. The creationPolicy property of a ViewStack, by default, is set to auto. There are several options for this property, including all. Be aware, however, that this can potentially present severe performance issues, as all of the components inside the stack are going to be initialized immediately regardless of whether or not the user actually even looks at the component.
In your specific case this isn't the problem. The component that contains the view stack hasn't been completely initialized. You need to set the child of the ViewStack in a CREATION_COMPLETE event handler.
or you can give "creationPolicy=all" because Flex only creates the first visible child from the viewstack
You can use this code in your MXML component to change application's ViewStack selected child from other MXML component. However it is not a good practice.
FlexGlobals.topLevelApplication.mainViewStack.selectedChild = FlexGlobals.topLevelApplication.childId
You can use static event dispatcher to dispatch an event from one view and listen that event in an other view.