Ted On Flash: MX04 Component Direct/Indirect Events

MX04 Component Direct/Indirect Events

DIGG IT! 0 Comments Published Friday, September 12, 2003 at 9:54 AM .

Here is a fun test with the new component model. This shows how to handle direct events. I break events into 2 types, those that happen when something occurs directly (direct) and those that are received through an event broker(indirect). The two models are different yet both are handy in certain cases.

Here is a sample for Direct Events with the new Components

1. Add 2 button components to the stage named 'but1' and 'but2'
2. Add the following actionscript to the keyframe

but1.label = "Button 1"
but1.clickHandler = function(){trace('Click But1')}
but1.keyDownHandler = function(){trace('keydown But1')}

but2.label = "Button 2"
but2.clickHandler = function(){trace('Click But2')}
but2.keyDownHandler = function(){trace('keydown But2')}

3. Compile

You should receive traces from the 2 buttons. You should also note that keyboard events are active when a component has focus, otherwise you do not receive them. Unfortunately clicking on the stage doesn't clear focus, but that is easy to change via _level0's inheritance by making it a component too. ;)

You can use this syntax to get direct events from the components.

{event name}Handler = function(){}

unloadHandler = function(){}
moveHandler = function(){}
resizeHandler = function(){}

You can also add direct events directly to the component:

1. Click the component
2. Actions Panel

on(click){
trace('clicked')
}

These components sure look great! More options, cleaner programming syntax and better events.

Also watch out, there is a potential gotcha in subscribing to events. The events are fired as listed and need not have the 'on' prefix FUI events. When the docs say click, click is the event name. Here is a sample:

1. Add a button named 'but1'
2. Timeline Actions

ml = {}
ml.click = function(){trace('Listener Click')}
but1.addEventListener('click', ml)

or (new)

click = function(event){trace('Listener' + event)}
but1.addEventListener('click', click)

You no longer need to nest events is a fixed object structure. That has to be one of my favorites.

Fun, Fun...

Cheers,

ted ;)