[JS CS4/CS5] ScriptUI Click Event Issue in JSXBIN

Question

Still working on a huge ScriptUI project, I discovered a weird issue which appears to *only* affect 'binary compiled' scripts (JSXBIN export), not the original script!
When you repeatedly use addEventListener() with the same event type, you theorically have the possibility to attach several handlers to the same component and event, which can be really useful in a complex framework:
// Declare a 'click' manager on myWidget (at this point of the code)
myWidget.addEventListener('click', eventHandler1);
// Add another 'click' manager (for the same widget)
myWidget.addEventListener('click', eventHandler2);
When you do this, both eventHandler1 and eventHandler2 are registered, and when the user clicks on myWidget, each handler is called back.
The following script shows that this perfectly works in ID CS4 and CS5:
// Create a dialog UI
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
// Set some widget properties
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
// g->click Listener #1
g.addEventListener('click', function(ev)
     e1.text = 'click handler 1';
// g->click Listener #2
g.addEventListener('click', function(ev)
     e2.text = 'click handler 2';
w.show();
The result is that when you click on the group box, e1.text AND e2.text are updated.
But now, if I export the above code as a JSXBIN from the ESTK, the 2nd event handler sounds to be ignored! When I test the 'compiled' script and click on the group box, only e1.text is updated. (Tested in ID CS4 and CS5, Win32.)
By studying the JSXBIN code as precisely as possible, I didn't find anything wrong in the encryption. Each addEventListener() statement is properly encoded, with its own function handler, nothing is ignored. Hence I don't believe that the JSXBIN code is defective by itself, so I suppose that the ExtendScript/ScriptUI engine behaves differently when interpreting a JSXBIN... Does anyone have an explanation?
@+
Marc

Answer 1

John Hawkinson wrote:
Not an explanation, but of course we know that in JSXBIN you can't use the .toSource() method on functions.
So the implication here is that perhaps the .toSource() is somehow implicated in event handlers and there's some kind of static workaround for it?
Perhaps you can get around this by eval() or doScript()-ing strings?
Thanks a lot, John, I'm convinced you're on the good track. Dirk Becker suggested me that this is an "engine scope" issue and Martinho da Gloria emailed me another solution —which also works— and joins Dirk's assumption.
Following is the result of the various tests I did from your various suggestions:
// #1 - THE INITIAL PROBLEM// =====================================
// EVALUATED BINARY CODE
var handler1 = function(ev)
     ev.target.parent.children[1].text = 'handler 1';
var handler2 = function(ev)
     ev.target.parent.children[2].text = 'handler 2';
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBn0AKJAnASzIjIjBjOjEjMjFjShRByBNyBnA . . . . .");
// RESULT
// handler 1 only, that's the issue!
Now to John's approach:
// #2 - JOHN'S TRICK
// =====================================
var handler1 = function(ev)
     ev.target.parent.children[1].text = 'handler 1';
var handler2 = function(ev)
     ev.target.parent.children[2].text = 'handler 2';
// EVALUATED BINARY CODE
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBn0AIbCn0AFJDnA . . . . .");
// RESULT
// handler1 + handler2 OK!
This test shows that if handler1 and handler2's bodies are removed from the binary, the script works. Note that the handlers are declared vars that refer to (anonymous) function expressions. (BTW, no need to use a non-main #targetengine.) This is not a definitive workaround, of course, because I also want to hide handlers code...
Meanwhile, Martinho suggested me an interesting approach in using 'regular' function declarations:
// #3 - MARTINHO'S TRICK
// =====================================
// EVALUATED BINARY CODE
function handler1(ev)
     ev.target.parent.children[1].text = 'handler 1';
function handler2(ev)
     ev.target.parent.children[2].text = 'handler 2';
var     u,
     w = new Window('dialog'),
     p = w.add('panel'),
     g = p.add('group'),
     e1 = p.add('statictext'),
     e2 = p.add('statictext');
e1.characters = e2.characters = 30;
g.minimumSize = [50,50];
var gx = g.graphics;
gx.backgroundColor = gx.newBrush(gx.BrushType.SOLID_COLOR, [.3, .6, .9, 1]);
g.addEventListener('click', handler1);
g.addEventListener('click', handler2);
w.show();
eval("@JSXBIN@[email protected]@MyBbyBnACMAbyBn0ABJCnA . . . . .");
// RESULT
// handler1 + handler2 OK!
In the above test the entire code is binary-encoded, and the script works. What's the difference? It relies on function declarations rather than function expressions. As we know, function declarations and function expressions are not treated the same way by the interpreter. I suppose that function declarations are stored at a very persistent level... But I don't really understand what happens under the hood.
(Note that I also tried to use function expressions in global variables, but this gave the original result...)
Thanks to John, Dirk, and Martinho for the tracks you've cleared. As my library components cannot use neither the global scope nor direct function declarations my problem is not solved, but you have revealed the root of my troubles.
@+
Marc