Feb 12 2009

AS3 custom event litener final

Category: Classes — Hadi Tavakoli @ 2:12 am

This post is too old, read http://www.myflashlab.com/2010/02/21/custom-event-listener/ instead.

in my other post on http://www.emstris.com/2009/01/custom-event-listeners/ I talked about how you can create a custom event listener and I did mention how easy it was... but now that I have managed to learn a lot more about them, I can tell that creating these custom events are not only easy but also VERY easy and straight :)

This is what I was trying to do (I did this in my DropDownMenu class which will write about it in my next post).

I wanted my item list class to have some listeners so when ever a user selects an item from the drop down menu, it would understand that event and sets the data and closes the menu...

Thanks to ultrashock.com I found a very straight answer for this and here I try to briefly sumersize everything quickly.

Before anything, you must know that you can dispatch events using the dispatchEvent() method only if you are extending from EventDispatcher class. Don't be scared! if you're class is already extending Sprite or MovieClip then you are also good to go with the rest because Sprite and MovieClip also extend from EventDispatcher class and considering that, you will be able to use the dispatchEvent() method with no problem.

alright, now that you you know this, take a look at the below sample code and have a few seconds thinking about it:

and below will be how you may use it:

Note that you don't have to necessarily use the dispatchEvent() method in a setter function! common, be a little creative. in the above code, the main consentration is on changing the variable "name" so as soon as you change it, the listener will be notified... you can add the line

dispatchEvent( new Event( "nameChanged" ) );

to anywhere in your code that your target change is happening and that's it.

I think it would be worthy to have a look at how I have used the above code in my itemList class:

_selectedItem = {lable:e.currentTarget.lable, detail:e.currentTarget.detail, thumb:e.currentTarget.thumb, data:e.currentTarget.data, index:e.currentTarget.index};
dispatchEvent(new Event("itemChanged"));

You see, whenever a new box is selected in the item list, the object which holds the data will be called and the new data will be inserted into it and exactly the same place we have placed our dispatchEvent() method.

Now we can listen to this change! That easy. let me give you a sample... simply like this:

myList.addEventListener("itemChanged", onItemChanged);

and "onItemChanged" will be function which can do whatever you wish that event handler to do :)

Yeah, me too, me too. I couldn't beleive how easy it was to create my own listener!

The examples above will surely clear you about how you can create your own listeners but in my dropdown menu class you will see it more and we will actually do something useful with it.

It's really a shame that I spend a couple of good days searching for this! but that what makes coding beautiful, don't you think so?

Regards,
Hadi

Tags: , , ,

Feb 12 2009

AS3 itemList Class V 1.0

Category: itemList — Hadi Tavakoli @ 1:27 am

in my other post we created a Box class http://www.emstris.com/category/classes/box/ where we managed to set a box of information with actually three elements, a thumbnail, a title and some space for the details.

In that Box class you where able to create any size boxes and put anything in them but using that class alone will not be very helpful if you are trying to build a playlist or something! right?

So I thought of creating an itemList which can easilly add these boxes in a class which will extend MovieClip so it will be a lot easy to pile up the boxes and insert data into them.

let's take a look at our itemList now:

And with the help of below code we will create new instances of our item list:

This ItemList class is actually a MovieClip as we are extending MovieClip and it can be placed anywhere. As you see above we have first initialised the class and then have set diffrent properties to be used later in every instance of the Box class which we will later import through the ItemList class.

Take a look at the ItemClass itself and you will find a couple of interesting things around... hehehe, maybe you won't call creating of custom listener an interesting thing! but as this is actually the first time I am creating them, I am very excited that I am planing to post a complete new topic about them! Anyway, here is the item list class:

If you ask me to summarize the whole thing, I can say that all this item list class does, is to create new instances of the Box class and insert the data into them! But I also added a couple of useful features into it like how you click on an item and it gets highlighted, and how you can set one of the items as the default selected item, and also the most beautiful part from my eyes which is the "dispatchEvent(new Event("itemChanged"));" :) As promised, I will talk about how custom event listeners work later in my next post.

ok, You may download the complete item list class from here. (Saved in CS4)

After you play a bit with this item list I am sure you will quickly say that this item list will look better if we can put it under a scrollbar... yeah, of course you're right, and why don't you do that yourself?! :D

in my scrollbar class here I have made it in a way that enables you to drop any movieclip under the scrollbar so why don't you try and drop the item list under it? well, later when I post my dropdown menu class, you will see how we are managing to combine all of our different classes and put them all work together in a dropdown menu! keep checking back and you will see some more useful stuff around here... I guess we are really making a progress in AS3 ;)

Regards,
Hadi

Tags: , , , , , , , ,