[...] Next Post: Turning Components From MXML To Actionscript – Part 2 [...]

I made a a custom component in MXML and I bring it into my application using Actionscript, how can I add my custom event to the main application so I can use a handler? I have the metadata tag in the component, but I can’t set the custom event on the main app? What am I missing?

I am suspecting from your question that your component is what actually fires your custom event. With that assumption you are wanting your main application to listen for this custom event. My question is: Is this component directly off of the main app? Or nested down in the view hierarchy?

I ask because if it is nested you will probably have to make sure the event bubbles if you are wanting to listen for it at the main app level. If it is not nested then the procedure is pretty simple. I am going to make many assumptions about your app right now, but let’s just say that your component is of type “MyComponent”, with a custom event typed “CustomEvent”, and the event type “MY_EVENT”. And let’s say on the creationComplete handler you want to add your “MyComponent” and set up your listener. In the script block, that would look like….

Obviously this is at it’s simplest, but hopefully you see what I am thinking. Is this where you were going with it or did I miss something?

Wow, thanks for the response, but I am thrown off track a bit. I will try to break it down and clarify. I really appreciate your input as I am on a deadline. You are awesome!

I made a component called CanvasServices.mxml. In this component I have this click handler that dispatches the event called “OtherContentClick”

public function LinkClicked(event:MouseEvent):void{

var linkinfo:String = event.target.id.toString();

switch (linkinfo)
{
case “maskedImage”:
LinkInformation = “Contact”;
break;

case “maskedImageLower”:
LinkInformation = “Form”;
break;

}

var eventObj:Event = new Event(“OtherContentClick”);
dispatchEvent(eventObj);

}

In the component I have this metadata tag

[Event(name="OtherContentClick", type="flash.events.Event")]

Now normally I would just call out the mxml component in tag form and if I typed in OtherCon- the event would show up in the code help and I would just handle as an attribute of the tag, but if I call it out and Addchild to another canvas in the script, I can’t get to the property of the event.

var ServicesContent:CanvasServices = new CanvasServices();
ServicesContent.y = 20;
ServicesContent.x = 10;
CanvasOtherContent.addChild(ServicesContent);
//I want to addeventlistener to the CanvasOtherContent, but can’t access the event

So, what does adding the mxml () do in the background that allows me to get to the event that I can’t do in the script?

Thanks again!
DK

Okay, I see what the real problem is. The thing to know is that the intellisense (the code completion helper) doesn’t “know all”. Some times there is a class it can’t find or an event it doesn’t know. Part of this problem is the intellisense, part of it is how you set up your component to work with the intellisense.

The short answer is: Add in your event listener with:

I bet you everything will work just as you expect and you won’t receive any errors.

That is the short answer, the long answer doesn’t take a ton of time, but it does take being very exact with your component setup.

1. Usually all variables are camel case. ServicesContent, should be servicesContent.
2. Event names are also camel case. OtherContentClick should be otherContentClick.
3. The intellisense is trying to find your event, but what it is doing is looking at the type and finding Event. Then it is trying to show the OTHER_CONTENT_CLICK constant from the event. It isn’t finding this information, so it just doesn’t show anything. What you would have to do to get everything to show the way you want is to create your own custom event (extended from the Event base class) and include a constant like so…

Don’t forget to update your metatag!

Then in your event you would dispatch.

and THEN (long way, I know) your intellisense will work in your actionscript for:

With the CustomEvent automatically in your drop down list.

Remember, short answer is: It’s there, the intellisense just doesn’t know it. And all that event listeners are really looking for in the event stream is a string, so just make sure the strings match. That is why people use constants, makes it easier to reduce string mistype.

Thank you so much for the clarification! A lot of those terms I knew and used once or twice, but it put some light on it. I still cannot get my function that just shows an alert that says “please work!” to fire. I did the

ServicesContent.addEventListener(“OtherContentClick”,ChangeStateServices);

and that didn’t work but the mxml version does work.:

”

The reason I don’t just do the example above is that I have about 5 of those components that I am going to addchild and remove child to all of them. Also, the htmlText doesn’t render the same in the mxml tag version, but renders correctly in the addChild version.
So, what could be the deal? I have tried the extended event and couldn’t quite get the syntax
here it is:
package events
{
import flash.events.Event;

public class OtherContentClicked extends Event
{
public var canServ:CanvasServices;

public function OtherContentClicked(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.canServ;
}

public override function clone():Event
{
retutn new OtherContentClicked();

}

}
}

Hello,

The above post removed my mxml tag that I had originally posted. That was the “example above” that never showed up in the comment. I apologize if that was confusing. So, I removed the start and end tags

local:CanvasServices x=”10″ y=”20″ OtherContentClick=”ChangeStateServices()”

The event shows up and I can use the event using this method, but like I said above the htmlText property shows up without line breaks and without the bulleted lists, but using the addChild method it renders perfectly. So, I would like to set the event listener in the code.

Thanks!

If you don’t mind, email your code directly and I will make my changes and test, I am sure we can get this working. jonbcampos at gmail

I am noticing that your implementation of the custom event is missing a constant and also missing variables passed in the clone function. You need to pass on the variables from the currently constructed event to the cloned event so those variables are available to the new event.

I got it! Your steps helped me to figure it out. I created the custom event, but I didn’t use the clone, but I did use the super. Thanks so much! I’ll send you the custom event code so you can see if I may need the clone! Thanks so much!

Here is your event code:

And here another version with just a few changes I would make that I think you would agree help things work a bit better. I included note through the code.

Hope that helps!