Skip to main content
H
Heimdaal
Inspiring
September 19, 2016
Answered

Including multiple JSX-files in panel

  • September 19, 2016
  • 5 replies
  • 2989 views

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");
}
This topic has been closed for replies.
Correct answer DBarranca

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

5 replies

T
trieutruong
Participant
August 29, 2017

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
Community Expert
Ten ACommunity Expert
Community Expert
August 29, 2017

AFAIK, ExtendScript not support Animate CC.

H
HeimdaalAuthor
Inspiring
September 21, 2016

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.

C
CodeARoni
Participant
September 20, 2016

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 () { }..... )

DBarranca
DBarrancaCorrect answer
Legend
September 19, 2016

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

    H
    HeimdaalAuthor
    Inspiring
    September 20, 2016

    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!

    JJMack
    Community Expert
    JJMackCommunity Expert
    Community Expert
    September 19, 2016

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

    JJMack
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices