Including multiple JSX-files in panel

[Heimdaal]

I'm trying to include multiple JSX-files with my panel and I followed this blog post by Davide Barranca:

http://www.davidebarranca.com/2014/01/html-panels-tips-2-including-multiple-jsx

The external scripts are all evaluated just fine, but when trying to call one of the functions in one of these scripts nothing happens:

main.js

csInterface.evalScript("externalFunc()");

external.jsx

/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
/*global $, Folder*/
function externalFunc(){
    alert("yay - loaded additional external JSX");
}

[JJMack]

There is a free add on extension JSX Launcher that does that perhaps you can install that an see how it works.

[DBarranca · Accepted solution]

It might depend on the way you write your functions in the secondary jsx.

var secondaryFun = function(param) { ... } // fails
function secondaryFun(param) { ... }  // fails
secondaryFun = function(param) { ... }  // works

Additionally, using the #include in the main .jsx of a panel causes a script error every time, but ou can have the #include in a secondary .jsx file called from the main via evalFile() and it will work.

More jsx inclusion madness here.

Davide Barranca

[Heimdaal]

Holy mother - that did the trick!
It's quite painful though especially if you have to load in a bunch of third-party scripts as you have to refactor said third-party scripts so that they follow the syntax in that third example of yours! -_-

Thanks a bunch!

[CodeARoni]

If I recall right, function declarations have trouble being called from the front-end of extensions in CEF land.

Try declaring exteneralFunc as a function expression, or attach it as a property of some global object (example: $.externalFunc = function () { }..... )

[Heimdaal]

Worth mentioning:

Once the extra JSX-files have been evaluated, you access them in JS via evalScript:

csInterface.evalScript('myFunc()');

Notice how myFunc is a function stored in a variable inside the extra JSX file, and when calling it out in JS we have to include the () or else it fails.

[trieutruong]

Hello,

I was trying to get my head around with multiple JSX files for a better structure in an Animate CC extension project. I followed the tutorial of Davide, and the instruction in the documentation on Github repo: GitHub - Adobe-CEP/CEP-Resources: Getting Started with Adobe CC 2014 Extension SDK but I got no luck to call the $ global variable in the hostscript.jsx for adding an additional .jsx file in manifest.xml. The worst case is that we might have to include all the code in a single file.

It does not appear that CEP's $ scope is working with Animate CC, is this true? Does anyone know that this issue has been reported to Adobe?

CEP 5.0, 6.1, 7.0. AnimateCC 16.1, 16.2

Thanks

[Ten A]

AFAIK, ExtendScript not support Animate CC.