Event-Driven Programming with ExtendScript

Several years of using Adobe Flex and ActionScript have used us to Event-driven programming. In other words, get separate pieces of code to communicate without direct linking to each other. Events can mean UI events (buttons clicks…) or even application related events (menu calls, documents openings). But we want to talk about something else here. We would like to introduce our own event class in ExtendScript. Our goal : script “à la Flex”.

Once you get large scripts, it’s better to split your code into separate pieces. Once that done you can easily gather them with the “#include” statement. Then you need to maintain communication between those dependancies. For example, you may need to call a function located in dependancy B from inclusion A. Of course you can explicitly call some dependancy. Problem is it can be confusing at some point and will prevent your code from being easily reusable.

As an answer, we propose a custom class that will allow our dependancies to communicate with a maximum of abstraction. We got inspired by EventBroker, a work done by developmentarc-core. It intends to decouple event communication between multiple classes in an AS3 project. We don’t actually port it in ExtendScript. We designed our own class thus sharing the same intention.

A) Include “EventManager”

Prior to use it, just include EventManager with the following syntax :

#include 'EventManager.jsinc'

Then it’s fully usable. You can now make interact your dependancies with a well known syntax.

B) Use EventManager

Of course, before you can react to some events, you need to listen for it. We are about to add a listener for our generic event :

var eventHandler = function(){alert("Event was triggered")};
EventManager.addEventListener ( "EVENT_FIRED", eventHandler );

To fire an event, we will write:

EventManager.dispatchEvent ("EVENT_FIRED");

In order to carry some data, we just need to use this :

var eventHandler = function(data){alert(data)};
EventManager.addEventListener ( "EVENT_FIRED", eventHandler );
EventManager.dispatchEvent ("EVENT_FIRED", "Hello there !");

To remove a listener,  il suffit d’écrire :

EventManager.removeEventListener ( "EVENT_FIRED", eventHandler );

C) EventManager & ScriptUI

Some possible use is within a ScriptUI project. There are internal mechanisms for events handling but we found it useful to add EventManager in the loop. For one project, we needed very complex UI and nothing good could be got from the LayoutManager, a native process to organize the window. Items weren’t correctly sized or located…A total mess. We came to the conclusion that we should take care of it by our own. So basically, it was to capture the moment where the window would be drawn and ready for edition. As we used separate UI components, all of them would have to listen for the window completion event using the native event method onShow.

var w = new Window('dialog');
w.onShow = function() {
//dialog is now open. Do something then.
}

Problem : How to reach “w” within all dependancies ? Global variable?…No way. A function argument?…Maybe. Isn’t that more painful than it need to be ? What if we listen for this event once and for all in the script file contaning the window object (w) and then use EventManager to propagate the event through all dependancies ?

//MAIN WINDOW => window.jsx
var w = new Window('dialog');
w.onShow = function() {
EventManager.dispatchEvent ( "WINDOW_SHOWN", w);
}

//UI COMPONENT => uiComponent.jsinc
var p = parentUI.add('panel');
var resizeFunction = function(w) {
p.size.width = w.size.width/2;
}
EventManager.addEventLister ( "WINDOW_SHOWN", resizeFunction );

That way, we don’t have to worry about the chain of events propagation and items initialization. Who will be drawn first ? Will my item be accessible at that time ? Etc.

D) Conclusion

We do no longer script without EventManager. We are not claiming any superiority. We just wanted to share a method of ours with its intrinsic qualities. EventManager has brought us all the smoothness and reactivity we need. We hope you will find it handy. If so, feel free to comment about it below.

See you soon,

Download EventManager