ScriptUI Events

ScriptUI Events: call(), dispatchEvent(), notify()

Davide Barranca —  — 2 Comments

In your code you may need to run a ScriptUI component’s callback, or simulate a user interaction, maybe as a part of a subroutine. There are few ways to do this, with slight differences in the behavior: directly, using Javascript methods call(), notify() or dispatchEvent() – I’ve set up a commented demo Dialog that shows them all.

The Dialog

I’ve used a resource string to build the initial dialog (please scroll down to the post’s end to find the example completed with listeners, callbacks and button functions):

Regular Listeners and Callbacks

Let’s code for the CheckBoxes a response to the 'click' event in two different ways:

The first CheckBox registers an onClick event: mind you, there’s no Event actually passed to the callback. If you uncomment the second alert, you see that is undefined.

The second CheckBox uses addEventListener, listening for the 'click' event with an anonymous callback. Here, an actual Event is passed.

For the RadioButtons, I’ve set up a callback triggered by clicks on the container (i.e. the Panel) level:

The loop finds the selected RadioButton and alerts its name: mind you, this works differently on Photoshop and ESTK because of the way they deal with event propagation.

  • Photoshop gets the 'click' on the Panel, lets it go through it, down to the RadioButton, then fires the callback – which evaluates the RadioButtons status and returns the name of the selected one: that is, the one you’ve clicked.
  • ESTK gets the 'click' on the Panel and immediately fires the callback, before allowing the 'click' to reach the RadioButton: this way the alerted name isn’t the one of RadioButton you’ve clicked on, but the one that was selected before. When the callback is done, the 'click' is allowed to propagate to the RadioButton, that is finally selected.

Simulated events: CheckBox

This is the code for the four checkbox’s buttons, which duty is to trigger the callbacks and sometimes simulate user interaction:

The first button directly calls the CheckBox #1 callback via cb1.onClick(). Mind you, onClick() is a regular method of the cb1 component, so it can be called anytime like any other method of any other object. The callback is fired but the CheckBox is not toggled.

Conversely, the second button uses .notify() to simulate the user interaction, as if the CheckBox #1 was actually clicked. As a result, its value (checked/unchecked, i.e. true/false) is toggled and the callback is fired. Mind you, the notify() parameter in this case is optional – not in other cases when you might want to simulate, say, a Window.notify('onMove') event.

The third button acts on CheckBox #2, which registers the listener and the callback via .addEventListener(). To trigger its callback (since .onClick() doesn’t exist) you’ve to make the component dispatch a new Event via .dispatchEvent(): as a result the callback is fired but the CheckBox is not toggled. If you want to simulate user interaction, you can always rely on .notify().

The fourth button uses .call() to borrow from the CheckBox #1 the callback, and temporarily apply it to the CheckBox #3 (that hasn’t any .onClick() method). The .call() parameter cb3 is used as a “this” reference: so when the function needs to evaluate this.value, it doesn’t refer anymore to cb1 (the actual “owner” of the callback) but to cb3.
As a result the alert is fired but the CheckBox isn’t toggled.

Simulated events: RadioButton

Things are similar when it comes to the RadioButtons:

The first button uses .dispatchEvent() on the container level (i.e. it’s the Panel that fires the UIEvent), so that the callback is triggered and the alert shown.

The second button instead uses .notify() directly on the RadioButton simulating a user click. As a result, the RadioButton #2 is selected and the callback is fired (at least it is fired in Photoshop: ESTK ignores the callback for some reason).
Mind you, .addEventListener() and dispatchEvent() uses 'click' as the Event, while what you notify() is an 'onClick'.

Conclusion and full script

Hopefully this has shed some light on the different possibilities you’ve to run or trigger callbacks and simulate user interaction with ScriptUI components. This appears to be a field where the ExtendScript implementation differs a lot among the host apps (ESTK, Photoshop, InDesign, etc…). I’ve tried out the above on ESTK and PS only, so please test your portings!

ScriptUI Events


Print Friendly

2 responses to ScriptUI Events: call(), dispatchEvent(), notify()

  1. Hey,

    I tried the eventListener route for radio buttons, but it seems like I have to click the radio button twice to get it to trigger what I want, like it’s one step behind. Any ideas?

  2. hello,

    i’m trying to bypass the scanner twain GUI window in photoshop. basicly, photoshop actions themself can’t record steps (settings) for the scanner, so my idea is to use javascript somehow, to send keyboard shortcuts to the photoshop (twain gui). so is it possible to use dispachEvent maybe, to trigger keyboard letter “c” (for custom settings), and then “enter” for confirm? i’m bugging my head whit this for days, and i can’t get it work… 🙁

Leave a Reply

Text formatting is available via select .

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">