I've doubt when we create custom event in flex.
Why do we use 'type:String, bubbles:Boolean=false, cancelable:Boolean=false' these parameter in flex events.
Bubbling causes a dispatched event to continue to be dispatched up the display tree until it reaches the stage. This is useful in various scenarios.
For example: Imagine you have several buttons inside a parent DisplayObject. You could add listeners to each button, and remember to remove them afterwards, or you could just add one listener to the parent. This works because MouseEvents have bubbling enabled.
buttonParent.addEventListener(MouseEvent.CLICK,handleButtonClick);
function handleButtonClick(event:MouseEvent):void
{
trace("The button clicked was " + event.target.name);
}
The benefit of this is that you can now add and remove buttons freely, without having to worry about attaching listeners to them. The target property of the event object will be a reference to the button that was clicked, and currentTarget will be a reference to the parent.
Cancelable is a flag that sets whether or not you are permitted to stop the default action of an event by calling the preventDefault() method.
Related
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/
I have a VBox, I assigned a handler to click, and inside the VBox I have components such as images and texts with no handler assigned for click. Would the click function be called when I click on the text and image? If not how can I make it so without assigning handlers individually, but on the container level?
Thanks
Click events "bubble" in Flex. When you click on an images, it bubbles up to its parent, then that parent's parent and so on until there are no more parents left.
If any of these have click listeners they will trigger when they are reached in the bubbling process.
Also in the event the currentTarget will refer to the object that has the listener, and the target will be what was actually clicked.
So in your case if they click the image, the event will bubble up to the container triggering the event, in your listener function the clicked image will be the event.target and the container will be the event.currentTarget.
Also in the bubbling process, it actually starts from the root parent down, this is called the capture phase, then bubbles back up. Your event will trigger when it bubbles back up unless you specify useCapturePhase = true in the event listener. This is how you can stop an event from going to its children. If you use the capture phase then call event.stopPropagation() inside the event listener then the container will receive the event but the child image will not.
It's taken an hour for an answer to this question... it probably would have been faster to just try it. :)
But yes, click events bubble up to parent containers. Adding the handler to the VBox should be fine.
I was pretty sure that containers, such as VBox do not dispatch click events; unless they are bubbled up from the children.
However, clicking on items in your container should trigger the listener on your container, as the Click event bubbles.
I have a Canvas (lets call it the Drop Box) which users can drag and drop external files onto. Next to this I have a ViewStack, of which one of the layers is a Canvas with a TileList. I have successfully managed to code it so that the items dropped onto the Drop Box appear in the TileList. I simply capture the darg drop event (lets call this event A) and dispatch a new one that the TileList is listening for (lets call this event B).
However, this only works if the ViewStack selectedIndex is set to that of the Canvas with the TileList. If the Canvas with the TileList isn't selected then the event listener which is added to the TileList at CreationComplete level (event B), won't be called until after the drag drop event has dispatched (event B). This means that something is firing before something even has a chance to listen for it!
I've tried looping until the Canvas with the TileList is completely drawn, but this causes the app to hang.
I've also tried passing the event to the Canvas and storing it locally, but when I attempt to access the clipboad of the event I get an error (dead clipboard).
Effectively I want to only dispatch the event to the Canvas after it's had a chance to load, and add the event listener to the TileList.
Any ideas? :)
Maybe setting creationPolicy="all" for View Stack will help? All it's children will be created at startup.
I am having an issue with an actionscript event that I am firing every time a flex component resizes. In the event, I am altering the height of the flash object within its html wrapper via an external javascript function. This in turn causes the component to resize and the event to loop in upon itself and continually add height to the component.
Here is an example of the code causing the issue:
private function onCreationComplete(event:Event):void
{
this.mainInnerShell.addEventListener(Event.RESIZE,handleResize);
}
private function handleResize(event:Event):void {
this.mainInnerShell.removeEventListener(Event.RESIZE,handleResize);
ExternalInterface.call("changePageHeight",this.mainInnerShell.height + resizeBuffer);
this.mainInnerShell.addEventListener(Event.RESIZE,handleResize);
}
However, the event fires more than once despite my removal of the event listener. Any suggestions?
Inside the resize event handler you can use removeEventListener to stop listening to that event, make you height changes and then use addEventListener to start listening for resizes again.
I want to be notified when a FLex Panel gets or loses focus. I've overridden the focusInHandler() and the focusOutHandler(), but they don't get called when I click on the panel.
The panels style changes indicating that it has the focus, but the handler doesn't get called.
What am I missing?
Containers (and implicitly panels) aren't really focusable. Meaning that simply clicking on an empty container won't give it focus, and in consequence, won't trigger the event handler for "focusIn". In order for a container to "gain" focus, a child of that container, that implements IFocusManagerComponent interface, has to gain focus.
So if you want your panel to trigger the "focusIn" event when clicking on it, you should focus a focusable child of that panel on mouse click.
Have you tried to explicitly listen for that event:
myPanel.addEventListener(FocusEvent.FOCUS_IN, myEventHandler);
and made sure that it was getting called?