I often have the requirement to dispatch a flash.events.Event with soem custom String text, like:
protected function mouseClicked(event:Event) {
//here I'd want to notify anyone interested in the button click,
//and also transfer the name of the button (or whatever) that was clicked - assume some dynamic value
dispatchEvent(new Event("myMouseEvent"), button.name));
}
Of course the above event is invalid. But is there any event that can be used for that type of events? Maybe the TextEvent, but I don't know if I'd be misusing it here.
To include additional data with your events, create a custom event class by extending Event (or any sub-class of Event) and adding your own properties. For example:
class NameEvent extends Event {
public static const NAME_CLICK:String = "nameClick";
public var name:String;
public function NameEvent(type:String, name:String) {
this.name = name;
super(type);
}
}
dispatchEvent(new NameEvent(NameEvent.NAME_CLICK, button.name));
Note that your event type strings ("nameClick" in this example) should be globally unique, otherwise listeners could get them confused with other event types. For example "click" is already expected to be a MouseEvent. I often add prefixes to my custom event types, for example "NameEvent::click".
Another option that does not require creating a custom event is to rely on the expected target to get additional data. For example:
// dispatch a custom event from a Button
dispatchEvent(new Event("myClick"));
// handler for "myClick" events on the button
function myClicked(e:Event):void {
var button:Button = e.target as Button;
trace(button.name);
}
This is not as flexible and also more fragile than using a custom event class, but sometimes a quick easy solution.
Related
I have been struggling with the following for a couple of hours now, how do you call a custom class from another class if you do not extend that class for example.
I have on my main Base class a timer event, Base.myTimer.addEventListener(TimerEvent.TIMER, processTime) - Base class
Then I remove the method later in the code Base.mytimer.removeEventListener(TimerEvent.TIMER, processTime. - Base class
I have a button (Btn class) that when its done processing I want to call that method again, but I can't get it to work because the method does not exist in the button class but on the Base class so flash obviously gives me the error processTime is not defined.
For example now I want to re-instantiate the event listener from within the button, so I have
Base.myTimer.addEventListener(TimerEvent.TIMER, processTime);
or this.parent.parent["myTimer"].addEventListener()
myTimer is a static Timer in Base class.
I can make a normal dispatchEvent if its not a custom method for example Base.myTimer.dispatchEvent(new TimerEvent(TimerEvent.TIMER)).
The examples I have seen so far have not resolved my issue. Any help would be appreciated.
Looks like the button class is part of the child tree of the Base class. In this case, you can just do a dispatchEvent from the button class when it is clicked
dispatchEvent(new Event("AddListenerAgain", true));
In the Base class, you must be having access to the button class already, hence you can say:
button.addEventListener("AddListenerAgain", addListener);
Then in the Base class
private function addListener(e:Event) : void {
myTimer.addEventListener(TimerEvent.TIMER, processTime);
}
In this example, I have dispatched and listened for raw strings. This is not a recommended practice. You must read on how to dispatch custom events to do it correctly.
You could pass a reference to an instance of Base class into your Button instance.
// Button class
package {
import Base;
// Other imports...
public class Button {
public function Button(base:Base):void {
// processTime and myTimer must be public.
// I put this line in the constructor for brevity, but if you stored base
// in an instance variable, you could put this anywhere in the button
// class.
Base.myTimer.addEventListener(TimerEvent.TIMER, base.processTime)
}
}
}
// Create button like this.
var button:Button = new Button(base);
// Or if button is created inside of Base
var button:Button = new Button(this);
Even better would be to create two methods in the Base class, for adding and removing the listeners, and make myTimer and processTime private:
public class Base {
public function addTimerListeners():void {
myTimer.addEventListener(TimerEvent.TIMER, processTime)
}
public function removeTimerListeners():void {
myTimer.removeEventListener(TimerEvent.TIMER, processTime)
}
}
Then you can call these two methods from outside of the class. This keeps the inner workings of your class more hidden. If you decided you wanted to change myTimer to a instance variable instead of static, you wouldn't have to make any changes to code outside of your Base class. This is called encapsulation and is a good practice.
Behold this example:
addEventListener("myEventType", myFunction("argument"));
function myFunction(args:String):Function {
return function(evt:Event):void {
trace(evt.currentTarget, "has", args);
};
}
dispatchEvent(new Event("myEventType", true));
It works.
Can I do something similar, but passing "argument" through dispatchEvent()?
It'd be very handy in a situation where dispatchEvent() is in a wholly separated class from addEventListener() and myFunction().
I'll be needing this a lot, so I want to do it without creating a custom event class for every situation.
You can use native flash.events.DataEvent for passing String parameter or create custom DataEvent with data:* property in all situations where you need to pass parameters to event handler.
If you want to customize the behavior of event listener in the place of adding event listener you can create "listener" object for holding this custom parameters (but I think this technique is more complicated than custom events):
addEventListener("myEventType", new EventListener("param1").onEvent);, whereEventListener is the class like this:
public class EventListener
{
private var params:*;
public function EventListener(params:*)
{
this.params = params;
}
public function onEvent(event:Event):void
{
trace("onEvent, params = ", params);
}
}
You could take a look at Signals (https://github.com/robertpenner/as3-signals). They are an alternative to Events and you can send whatever extra params you want with a Signal.
I have to work on a project someone else started, but can't contact him because he's out of the country at the moment. Anyway. There is a main mxml and a custom component called "admin".
In admin he declared an event like this:
<fx:Metadata>
[Event(name="sluitFrame")]
</fx:Metadata>
And in a certain function within the component, this event is called upon like this:
dispatchEvent(new Event("sluitFrame"));
This event sluitFrame closes a frame with some admin tools. I need to change the way this works so i'd like to find the corresponding code. On the main mxml there's this code:
<comp:Admin id="compAdmin" creationPolicy="none"
sluitFrame="verbergAdminComponent(event)"/>
So if i understand correctly sluitFrame calls to a custom even called "verbergAdminComponent(event)". So i guess i need this event to change the way the admin frame is closed etc. But this event is nowhere to be found. So I don't understand how "verbergAdminComponent(event)" works or where I can make changes to this event.
Any help is more than welcome and very much needed :)
The [Event... line simply lets the compiler and IDE know that the component/class (in this case, Admin) may dispatch an event by that name. This is important because when someone declares an instance of Admin in a MXML tag, the compiler knows that this event (in this case, sluitFrame) is a valid property. In other words, it lets the compiler know that you can set an event listener in the MXML tag. In your case, every time the Admin object dispatches a sluitFrame event, the function verbergAdminComponent is called and the sluitFrame Event is passed to it.
verbergAdminComponent would be the name of an event handler. It should be a method either in the mxml, in an included .as, or in a base class of that MXML.
Types in Events
If you use an Event in Flash, you could dispatch any named type, since it is a string. So it does not matter how you call it, as long as the listener listens to the exact same type. That's why it works. There is no magic evolved. However, I would choose to use an custom event in that case.
How custom events work
Take a look at custom events work, so you also understand where meta data comes in.
package com.website.events
{
import flash.events.Event;
/**
* #author ExampleUser
*/
public class MyCustomEvent extends Event
{
/**
*
*/
public static const CLOSE_WINDOW:String = "MyCustomEvent.closeWindow";
public function MyCustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false):void
{
super(type, bubbles, cancelable);
}
override public function clone():Event
{
return new MyCustomEvent(this.type, this.bubbles, this.cancelable);
}
override public function toString():String
{
return formatToString("MyCustomEvent", "type", "bubbles", "cancelable", "eventPhase");
}
}
}
I use a static constant instead of directly a string (like your example), so it is typed more strictly.
In actionscript, you'd dispatch the custom event like this. Let's say you create a class named Window.
package com.website.ui
{
/**
* #eventType com.website.events.MyCustomEvent.closeWindow
*/
[Event(name="MyCustomEvent.closeWindow", type="com.website.events.MyCustomEvent")]
import flash.display.Sprite;
import flash.events.MouseEvent;
import com.website.events.MyCustomEvent;
/**
* #author ExampleUser
*/
public class Window extends Sprite
{
public var mcCloseButton:Sprite;
public function Window():void
{
this.mcCloseButton.addEventListener(MouseEvent.CLICK, handleCloseButtonClick);
}
private function handleCloseButtonClick(event:MouseEvent):void
{
this.dispatchEvent(new MyCustomEvent(MyCustomEvent.CLOSE_WINDOW));
}
}
}
This is the class where the meta data should be located. This class is dispatching the event. Other classes that dispatches the same event, could have the meta-data too.
So, Window is dispatching an event with type CLOSE_WINDOW when user clicked on the close button. In another file you would listen to it and do something with it.
package com.website
{
import flash.display.Sprite;
import com.website.events.MyCustomEvent;
import com.website.ui.Window;
/**
* #author ExampleUser
*/
public class Main extends Sprite
{
private var _window:Window;
public function Main():void
{
this._window:Window = new Window();
// a smart code-editor would give you a hint about the possible events when you typed "addEventListener"
this._window.addEventListener(MyCustomEvent.CLOSE_WINDOW, handleWindowClosed);
this.addChild(this._window);
}
private function handleWindowClosed(event:MyCustomEvent):void
{
// do something
this._window.visible = false;
}
}
}
This should work.
Ofcourse in a real-world situation MyCustomEvent would be named WindowEvent.
Event Meta Data
The meta data could be used to give hints to the compiler and nowadays smart code editors (FDT, FlashDevelop, FlashBuilder, IntelliJ etc.) can give code completion. It's basically a description of what kind of events may be dispatched by a class, so you know what listeners could be used.
The code should work even when the meta data is deleted.
The Event meta has a name and a type. The name should be the exact value of the type. In the case of our example, it should be the value of CLOSE_WINDOW, so that's MyCustomEvent.closeWindow.
The type should be the classname with the full package, in the case of our example it would be 'com.website.events.MyCustomEvent'.
Finally, the meta data looks like this:
[Event(name="MyCustomEvent.closeWindow", type="com.website.events.MyCustomEvent")]
BTW I have some tips about your code:
I would suggest to use English function names and parameters, instead of Dutch.
verbergAdminComponent isn't a good name for a handler, it should be something like handleCloseWindow(event), which should call the verbergAdminComponent function.
I have created a custom event in flex 3.5. But the handler is not invoked. How to solve this or what is the way to debug this problem?
The Event class:
package com.saneef.worldlanguages.events
{
import flash.events.Event;
public class LanguageEvent extends Event
{
public static const LANGUAGE_SELECTED:String = "LanguageSelected";
public function LanguageEvent(type:String,languageid:String)
{
super(type);
this.langid = languageid;
trace("LanguageEvent: " + this.langid);
}
public var langid:String;
override public function clone():Event {
return new LanguageEvent(type, langid);
}
}
}
Dispatching:
private function functionOne():void
{
try{
dispatchEvent(new LanguageEvent(LanguageEvent.LANGUAGE_SELECTED,"STR"));
}
catch(e:Error)
{
trace(e.message);
}
}
In the Main application class, EventListener:
protected function application1_initializeHandler(event:FlexEvent):void
{
this.addEventListener(LanguageEvent.LANGUAGE_SELECTED,
application1_LanguageSelectionHandler);
}
The event handler function:
public function application1_LanguageSelectionHandler(event:LanguageEvent):void
{
trace("application1_LanguageSelectionHandler: " + event.langid);
populate_countrya3id_languages(event.langid);
}
Your code looks fine. Since I can't see the full source, here are my two thoughts on what may be going on:
Are you sure your addEventListener call is done before you dispatch the event? Add some trace to make sure the application1_initializeHandler prints before functionOne does.
Is your functionOne call in another different component than your main application? If so, you'll need to set your custom event's bubbles attribute to true in your event's super call.
public function LanguageEvent(type:String,languageid:String,bubbles:Boolean=True)
{
super(type, bubbles);
this.langid = languageid;
trace("LanguageEvent: " + this.langid);
}
See the flash.events.Event docs for the constructor call. Also, here's a quote about the bubbles argument explained here:
The bubbles property
An event is said to bubble if its
event object participates in the
bubbling phase of the event flow,
which means that the event object is
passed from the target node back
through its ancestors until it reaches
the Stage. The Event.bubbles property
stores a Boolean value that indicates
whether the event object participates
in the bubbling phase. Because all
events that bubble also participate in
the capture and target phases, any
event that bubbles participates in all
three of the event flow phases. If the
value is true, the event object
participates in all three phases. If
the value is false, the event object
does not participate in the bubbling
phase.
Based on your source code, it looks like you've seen the "Dispatching Custom Events" in the flex docs, but I'll link to it anyways for future/easy reference: http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html.
Also, check out http://www.adnandoric.com/2008/12/29/understanding-the-flex-event-propagation/ for a high-level overview of the event propagation system to try to get a better understanding of what's going on while developing.
Edit:
Based on your comments I'm guessing your functionOne call is in a separate class and your "main" application has an instance of this class. If that's so you'll want to attach your event listener on that instance and delegate it to your main's application1_LanguageSelectionHandler function... Like so:
protected function application1_initializeHandler(event:FlexEvent):void
{
this.theInstanceThatHoldsYourFunctionOne.addEventListener(LanguageEvent.LANGUAGE_SELECTED,
application1_LanguageSelectionHandler);
}
I've done a lot of reading through forum posts and tutorials, but I still can't wrap my brain round events and event listeners. I have a pretty simple example, but I can't get it to work.
I have an arrayCollection of custom objects in a repeater, when one of those objects is clicked, I want a different componenet to display data associated with that object.
Here's what I have, but the listener never responds (the dispatcher seems to be working though, because the new event is created and I can see the trace with the proper output.) I suspect it is because when I call addEvent Listener, I am doing so on the wrong object. My understanding is that the object that will display the object data is the object that should have the event listener, and listen for all events of this nature, but maybe I misunderstood.
My custom event:
public class SelectObjectEvent extends Event
{
public function SelectObjectEvent(customEventString:String, myObject:customObject)
{
super(customEventString, true, false);
trace(customEventString+" "+myObject);
}
}
}
My custom object has the following function which is called on click:
public function selectObject(myObject:customObject):void
{
dispatchEvent(new SelectObjectEvent("OBJECT_SELECTED", customObject));
}
And the component I want to display the selected object has the following constructor:
public function SelectedObjectDisplayClass()
{
addEventListener("OBJECT_SELECTED", this.showObject)
}
public function showObject(event:Event):void
{
trace("Show object: "+event);
}
It's not quite clear where your last two code chunks are, but it looks like you need to be calling addEventListener on the object that extends EventDispatcher.
That is, if your second chunk belongs to a custom object called Clickable, which extends EventDispatcher and calls dispatchEvent() when clicked, then your component should be calling myClickable.addEventListener(...) where myClickable is an instance of Clickable. Does that make sense?
But assuming your 3rd code chunk is not in the same class as the second, it doesn't look like you're doing that. You're adding a listener to the class that owns the third chunk of code, which I gather is not the one that extends EventDispatcher.
Just a quick glance at your code and notice that your dispatchEvent second parameter is the class not the instance of the object. Shouldn't this be myObject?
public function selectObject(myObject:customObject):void
{
dispatchEvent(new SelectObjectEvent("OBJECT_SELECTED", **customObject**));
}