Beginning Flex: TileList using the itemClick vs click events

Filed under: Flex

comments (7) Views: 7,182

Recently I was working on a new interface component to an app I was building at work. It was a series of thumbnails, each of which triggered a modal window containing a video. I decided that the TileList component made the most sense. So I coded it up and got it working in no time at all. The problem that I was having was that when I assigned the click event to the TileList, I could click anywhere in the control and it would fire the event, even on empty space. After trying to manage the click event in code, I asked on Twitter about it. Not too long after, T. Scot Clausing replied to let me know about itemClick. This blog post is a quick way to illustrate the difference between click and itemClick, and why you might use one over the other. Let's tale a look at the project first

You'll notice that for all intents and purposes the two TileList components are identical. However they are indeed different in one key area. The component on the left uses the click event, while the one on the right uses the itemClick event. Click anywhere in the white space to the right, or under, the albums of the component on the left side. You'll see it generates an error while the TileList on the right behaves just fine. This is because when using the click event on a TileList component, it assigns the click event to the entire component whereas the itemClick event is only assigned to each individual item. It's a subtle different to be sure, and in fact one that could be handled in code by inspecting the event. But why do that when Flex already has an event built in for that?

As always, right click on the project to view the entire source, or you can download the Flex Builder project.

Amazon logo

If this article was interesting, or helpful, or even wrong, please consider leaving a comment, or buying something from my wishlist. It's appreciated!

Excellent post on a great tip. I'm not getting the error message to come up in the click widow though. Mark

Mark Morrison - September 21, 2009 06:51 am

Mark...I was able to get the error message reliably when I clicked on the right. For some reason though if you've already clicked an album cover on the left once, the error message won't come up again.

andy matthews - September 21, 2009 07:50 am

I couldn't get the error triggered either. :)

Henry Ho - September 21, 2009 10:44 am

Andy, this is an interesting post I'd like to understand better. But, I'm not getting errors at all. I've tried clicking in the white space both below and to the right of the left component and the right component and get no errors. If it helps I'm running the latest and greatest Flash Player 10 Debug version (I updated yesterday).

Aaron West - September 21, 2009 12:58 pm

Here's a quick video demostrating the error I'm receiving when I click anywhere in the white area of the left hand TileList. You can see at the beginning of the video that I've performed a page refresh so that I'm dealing with a default state. After I've clicked any of the thumbnails, I can no longer generate the error either. I'm currently running Flash player WIN 10,0,32,18 in Chrome 3, Safari 4, and Firefox 3.5 on a PC. I've confirmed that I receive the same error with each browser and Flash player combination. You guys have any ideas why I'm getting the errors and you're not?

andy matthews - September 21, 2009 08:11 pm

I'm not getting any error.

jase21 - August 26, 2010 01:59 am

Jase...are you running the debug version of the Flash player?

andy matthews - August 26, 2010 07:40 am