Why I wrote this book
Take 2: ExtendScript
An important and still missing piece of the puzzle is the interaction with the Host App - Hello
World must somehow get in touch with Photoshop. As you remember from themanifest.xml, the
⁵³https://github.com/Adobe-CEP/CEP-Resources/blob/master/CEP_7.x/ExtensionManifest_v_7_0.xsd ⁵⁴Or the version of the CEP you’re targeting: there are.xsdfiles for CEP7, CEP6 and CEP5.
4. Building up “Hello World!” 21 JSX entry point (referred to the extension root) is set there as shown in this excerpt:
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/photoshop.jsx</ScriptPath>
<CEFCommandLine/> </Resources>
The above means: as soon as the Panel needs it⁵⁶, the content of the./jsx/main.jsxfile is going to
be read and evaluated in the JSX engine. If it contains statements, they’re going to be executed; if it contains function declarations, they will stick into the JSX Virtual Machine, ready to be called later if/when needed, you’ll see in a minute how.
Let’s group files more systematically - adding to the panel ajs,jsxandcssfolder, the tree becomes: . ├── CSXS │ └── manifest.xml ├── css │ └── styles.css ├── index.html ├── js │ ├── libs │ │ └── CSInterface.js │ └── main.js └── jsx └── photoshop.jsx
The improvedindex.htmlnow contains a button (small steps I know):
index.html
1 <!doctype html>
2 <html> 3 <head>
4 <meta charset="utf-8">
5 <link rel="stylesheet" href="css/styles.css"/> 6 <title>Hello World!</title>
7 </head> 8 <body>
9 <div id="content">
4. Building up “Hello World!” 22
10 <button id="btn_test">Say Hello</button> 11 </div>
12 <script src="js/libs/CSInterface.js"></script> 13 <script src="js/main.js"></script>
14 </body> 15 </html>
and the JSX has code for popping up an alert:
photoshop.jsx
1 function sayHello(){
2 alert("Hello from ExtendScript");
3 }
Hello World take 2
As you might foresee, a button click will trigger the Photoshop alert - that is: we will bridge the gap from the panel to the host app.
Please notice that there’s a./js/libsfolder containing theCSIn- terface.js file, that in the previous chapter I’ve recommended
you to download from the CEP GitHub page. For the time being, think about CSInterface as the JS bridge between you and CEP features implemented in Photoshop; the next Chapter is going to give you an extensive coverage of what is CSInterface all about. Ourmain.jsfile contains:
main.js
1 (function () { 2 'use strict'; 3
4 var csInterface = new CSInterface(); 5
6 document.getElementById('btn_test').addEventListener('click', function () { 7 csInterface.evalScript('sayHello()');
8 });
9
10 }());
4. Building up “Hello World!” 23 1. Everything is wrapped with an Immediately-Invoked Function Expression (aka IIFE): it
creates a block scope and avoids polluting the global environment.⁵⁷
2. The CSInterface class is instantiated and stored in a variable.
3. A listener for theclickevent is attached to the button withid="btn_test"(the only button
our poor html has).
4. In the callback, the csInterface.evalScript method is used to send to the Photoshop JSX
engine the'sayHello()'string for evaluation.
Hello World take 2 in action
As a result, when you press the Panel’s Say Hello button, itsclickevent listener fires the callback,
which in turn says: “Hey Photoshop, does 'sayHello()' mean something for you?”. Photoshop
in turn looks whether the manifest.xml knows about any JSX file to parse (“here it is Sir, it’s photoshop.jsx”) and hands it to its JSX engine. FinallysayHello()is run, and the alert pops up.
JSX silent failures
An annoying trait of the ExtendScript implementation in HTML Panels is that if your JSX code contains errors such as typos, it will fail silently: that is, you have no clue about the reason why it doesn’t behave as you think it should.
As an example, sabotage thesayHellofunction mistypingalerrinstead of alert. If you run this in ESTK⁵⁸you will get ReferenceError: alerr is not a function as soon as you try callingsayHello. This is not the case when the above happens in the context of an HTML Panel, so be aware. Mind you, wrapping the whole JSX content with a try/catch block won’t work.
Also, if the photoshop.jsx file is totally empty (that is, no chars), any evalScript() call that you might do not referencing existing functions (e.g. csInterface.evalScript("alert('Hello!')") will fail. Put at least some chars in there, a comment, whatever.
⁵⁷Does that sound like Sanskrit to you? Readthis clear articleto understand more about it.
4. Building up “Hello World!” 24 We’ll make extensive use of bothCSInterfacemethods and ExtendScript code in the next chapters,
so if this Hello World take 2 exercise has left you with unanswered questions (is there a way to transfer a payload between JS and JSX? Is the other way around possible?), be aware that we’ll touch those topics again and again, and you won’t miss code examples.