Include .jsx local libraries in main.jsx

Report · Aug 01, 2019

Hi,

I am trying to include the file myFunc.jsx which has local functions I created.

It contains e.g:

function getDocName() {
    return app.documents.length ? app.activeDocument.name : "No docs open!";
}

getDocName is used in my main.js file:

function f_DocName() {
var csInterface = new CSInterface();
$("#btnDocName").click(function () {
csInterface.evalScript('getDocName()', function (result) {
$("#folderName").val(result);
});
});
}

I tried to load the jsx in my main.js file like this:

function loadJSX() {
var csInterface = new CSInterface();
var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/include/";
csInterface.evalScript('$._ext.evalFiles("' + extensionRoot + '")');
  }

And of course I call loadJSX() in my init function.

But getDocName() was not recognized, not unless i defined it in my main.jsx file

What is the right way to include jsx files with local function to be accessed from within main.js ?

Thank you

Report · Aug 01, 2019

Using JSX.js A Game Changer in Adobe HTML Extensions Development? – Creative-Scripts.com is really simple.

See the examples there and also Shawn posted a sample github repo on the forum here about a week ago.

If you need help with it after reading the link leave a post here.

Report · Aug 01, 2019

Sounds like your main.jsx isn't evaluating your myFunc.jsx correctly. Can you post the source code to main.jsx, and do some debugging to make sure that file is actually getting evaluated.

Report · Aug 01, 2019

i guess it is not being evaluated but i can't find the reason for it.

this is a summery of my main.jsx:

function Initialize() {
document.body.style.backgroundColor = "#" + UIColorToHexString(csInterface.hostEnvironment.appSkinInfo.panelBackgroundColor);
Persistent(true);
Register(true, gRegisteredEvents.toString());
}
(function () {
'use strict';
var csInterface = new CSInterface();
function init() {
loadJSX();
// f_DocName();
f_Browse();
f_create();
setFilePrefix();
getSessionCookies();
toggleText("cbAddWhiteEdge", "etWhiteEdgeSize");
toggleText("cbAddWrap", "etwrapWidth");
toggleText("cbAddWrap", "etwrapOpacity");
$("#mySlider").prop("value", $("#jpegQuality").val());
themeManager.init();
showSliderVal();
}
init();
}());
.......
function loadJSX() {
var csInterface = new CSInterface();
var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/include/";
alert(extensionRoot );
csInterface.evalScript('$._ext.evalFiles("' + extensionRoot + '")');
  }

The above alert(extensionRoot) is showing the correct path and i was able to follow it in the debugger as far as i could:

it found my function:

part of myFunc.jsx is this file:

function getFolder() {
    try {
        var defaultFolder = File(app.activeDocument.path);
        alert(defaultFolder);
    } catch (someError) {
        var defaultFolder = File("~");
    }
    mf = function (f) { return /\.ai$/i.test(f.name) },
        f = Folder.selectDialog("Import Folder", defaultFolder)
    if (f != null) {
        return f.fsName;
    } else {
        // if (f) return f.fullName;
        return "";
    }
}
function getDocName() {
    return app.documents.length ? app.activeDocument.name : "No docs open!";
}

but as i said, only when i define getFolder() in my main.jsx will it be evalutaed

Report · Aug 01, 2019

Your main.jsx is not written in ExtendScript, it's written in JavaScript. Just to clarify, in Adobe development .js = JavaScript/CEP and .jsx = ExtendScript. You need a main.js file to run your CEP/JavaScript side of things, then call your main.jsx (ExtendScript) with a function like loadJSX(), which will then evaluate your myFunct.jsx file which you can modify and refresh as you work.

Refer to the samples to see how this should be set up, specifically how the PPRO example handles this.

Report · Aug 01, 2019

Sorry,

That was a typo... it is main.js.

to clarify:

in my main.js I call loadJSX(), which reads the correct apth the my function file

and in the same main.js file i use, or at least am trying to use getFolder() like this:

function f_Browse() {
var csInterface = new CSInterface();
$("#btnBrowse").click(function () {
csInterface.evalScript('getFolder()', function (result) {
$("#folderName").val(result);
});
});
}

My panel is working for some time, I ma trying to move some functions, to a single file to prevent duplication.

As i mentioned, only if i define these function within main.jsx will they be evaluated and main.jsx is the one which is stated in my manifest as <ScriptPath>

Report · Aug 01, 2019

loadJSX() is a custom function in the example, not an API function, all it does is run $._ext.evalFiles(), which if you haven't defined it in your panel won't do anything. Make sure you have a function to evaluate files in your main JSX, and post if you can. Also, change the namespaces from _ext and ext to your own custom so there aren't any namespace clashes with the sample panels.

Report · Aug 01, 2019

Of course,

i did not attache it but $.ext is this:

$.ext = {
    //Evaluate a file and catch the exception.
    evalFile : function(path) {
        try {
            $.evalFile(path);
        } catch (e) {alert("Exception:" + e);}
    },
    // Evaluate all the files in the given folder
    evalFiles: function(jsxFolderPath) {
        var folder = new Folder(jsxFolderPath);
        if (folder.exists) {
            var jsxFiles = folder.getFiles("*.jsx");
            for (var i = 0; i < jsxFiles.length; i++) {
                var jsxFile = jsxFiles;
                $.ext.evalFile(jsxFile);
            }
        }
    }
}

can you attach a single example of how to call a jsx file with functions which are called to in the .js file?

In the js file i call them, in this case getFolder()

function f_Browse() {
var csInterface = new CSInterface();
$("#btnBrowse").click(function () {
csInterface.evalScript('getFolder()', function (result) {
$("#folderName").val(result);
});
});
}

Report · Aug 01, 2019

Spend some times looking over the examples to see how JS to JSX interaction works.

Very simply, declare you main.jsx and index.html in your manifest.xml. Load your main.js in your index.html. Run loadJSX() in your main.js to then run your main.jsx evalFIles to evaluate your myScript.jsx. Now your mySuperCoolFunction() is available to be used from your button click.

// manifest.xml
[...]
   <MainPath>./ui/index.html</MainPath>
   <ScriptPath>./main.jsx</ScriptPath>
[...]
// main.js
var csInterface = new CSInterface();
function loadJSX() {
    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + '/jsx/';
    evalES('$.myNamespace.evalFiles("' + extensionRoot + '")');
}
function myButtonClick(){
   csInterface.evalScript('mySuperCoolFunction()');
}
loadJSX();
// main.jsx
$.myNamespace = {
    //Evaluate a file and catch the exception.
    evalFile : function(path) {
        try {
            $.evalFile(path);
        } catch (e) {alert('Exception:' + e);}
    },
    // Evaluate all the files in the given folder
    evalFiles: function(jsxFolderPath) {
        var folder = new Folder(jsxFolderPath);
        if (folder.exists) {
            var jsxFiles = folder.getFiles('*.jsx');
            for (var i = 0; i < jsxFiles.length; i++) {
                var jsxFile = jsxFiles;
                $.myNamespace.evalFile(jsxFile);
            }
        }
    }
};
// myScript.jsx
function mySuperCoolFunction(){
   // do stuff
}

Report · Aug 02, 2019

Did you mean this: (your code caused some errors)

function loadJSX() {
var csInterface = new CSInterface(); 
    var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + '/jsx/'; 
    csInterface.evalScript('$.myNamespace.evalFiles("' + extensionRoot + '")'); 
}

And in any case, what you explained is exactly (with the above change i made) what i had when i created this question thread.

I guess it is something trivial, a silly mistake since I am doing it exactly as you suggested but i just can't get it...

Report · Aug 02, 2019

////main.js:

////////////////////////////////////////////

function Initialize() {
 document.body.style.backgroundColor = "#" + UIColorToHexString(csInterface.hostEnvironment.appSkinInfo.panelBackgroundColor);
 Persistent(true);
 Register(true, gRegisteredEvents.toString());
}
(function () {
 'use strict';
 var csInterface = new CSInterface();
 function init() {
 loadJSX();
 // f_DocName();
 f_Browse();
 f_create();
 f_btnMakeRefShape();
 f_btnCreateComps();
 getSessionCookies();
 toggleText("cbAddStyle", "etAddStyle");//toogle gap text field disable/enable
 themeManager.init();
 }
 init();
}());
function f_Browse() {
 var csInterface = new CSInterface();
 $("#btnBrowse").click(function () {
 csInterface.evalScript('getFolder()', function (result) {
 $("#folderName").val(result);
 });
 });
}
* Load JSX file into the scripting context of the product. All the jsx files in
* folder [ExtensionRoot]/host/include/ will be loaded.
*/
function loadJSX() {
 var csInterface = new CSInterface();
 var extensionRoot  = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/include/";
 csInterface.evalScript('$.myNamespace.evalFiles("' + extensionRoot + '")');
 // var extensionRoot = csInterface.getSystemPath(SystemPath.EXTENSION) + "/host/include/";
 // csInterface.evalScript('$.ext.evalFiles("' + extensionRoot + '")');
 // csInterface.evalScript(extensionFile);
  }
function toggleScale(thsiId) {
 toggle = $("#" + thsiId).is(":checked");
 $("#etMockupScale").prop("disabled", toggle);
 //Set the css opacity.
 if (toggle) {
 $("#scale_lbl").css('opacity', '0.3');
 } else {
 $("#scale_lbl").css('opacity', '1.0');
 }
}
});

//main.jsx

//////////////////////////////

I renamed getFolder to getFolder to test anbd define iy in myFunc.jsx

var home = true;
if ($.getenv("USERNAME") == "danl") {
    home = false;
}
var scriptDir = "f:/Google Drive/Adobe/Scripts/";
if (!home) {
    scriptDir = "c:/My Doc/Google Drive/Adobe/Scripts/";
}
if (typeof ($) == 'undefined')
    $ = {};
function getFolder1() {
    try {
        var defaultFolder = File(app.activeDocument.path);
    } catch (someError) {
        var defaultFolder = File("~");
    }
    mf = function (f) { return /\.ai$/i.test(f.name) },
        f = Folder.selectDialog("Import Folder", defaultFolder)
    if (f != null) {
        return f.fsName;
    } else {
        // if (f) return f.fullName;
        return "";
    }
}
function getDocName() {
    return app.documents.length ? app.activeDocument.name : "No docs open!";
}
function runMockupFunc(whichFunc) {
    var scriptFile = "runFunc.jsx";
    var runScript = File(scriptDir + scriptFile);
    // alert("scriptDir:\n" + runScript);
    $.evalFile(runScript);
}
$.myNamespace = { 
    //Evaluate a file and catch the exception. 
    evalFile : function(path) { 
        try { 
            $.evalFile(path); 
        } catch (e) {alert('Exception:' + e);} 
    }, 
    // Evaluate all the files in the given folder 
    evalFiles: function(jsxFolderPath) { 
        var folder = new Folder(jsxFolderPath); 
        if (folder.exists) { 
            var jsxFiles = folder.getFiles('*.jsx'); 
            for (var i = 0; i < jsxFiles.length; i++) { 
                var jsxFile = jsxFiles; 
                $.myNamespace.evalFile(jsxFile); 
            } 
        } 
    } 
};

/////////////////////

////myFunc.jsx under /host/include/

function getFolder() {
    try {
        var defaultFolder = File(app.activeDocument.path);
        alert(defaultFolder);
    } catch (someError) {
        var defaultFolder = File("~");
    }
    mf = function (f) { return /\.ai$/i.test(f.name) },
        f = Folder.selectDialog("Import Folder", defaultFolder)
    if (f != null) {
        return f.fsName;
    } else {
        // if (f) return f.fullName;
        return "";
    }
}
function getDocName() {
    return app.documents.length ? app.activeDocument.name : "No docs open!";
}

Report · Aug 03, 2019

Yea, evalES is my shortcut for csInterface.evalScript().

Try throwing an alert in myFunc.jsx to see if it's even getting evaluated. If not, then you may be providing the path incorrectly.

If it's not reaching that, then setting some alerts (or breakpoints if you have the VS Code debugger extension set up)

    evalFiles: function(jsxFolderPath) { 
        var folder = new Folder(jsxFolderPath); 
          alert(folder);
        if (folder.exists) { 
            var jsxFiles = folder.getFiles('*.jsx'); 
              alert(jsxFiles);
            for (var i = 0; i < jsxFiles.length; i++) { 
                var jsxFile = jsxFiles; 
                $.myNamespace.evalFile(jsxFile); 
            } 
        } 
    }

Basically, you need to either work backward or forward until you find the issue this way.

Report · Aug 03, 2019

thank,

Yes, this is exactly what i was doing, placing alerts in the middle of the code.

The thing is that i can get as "far" as the jsx code since jsx cannot be debugged in chrome and i can't get it to stop on VS code BPs.

I do have BPs in VS code but it only stops on these when i run it from withing VS code, not from PS.

Report · Aug 06, 2019

So is your JSX function getting called at all? (you can throw an alert in there) If not, then something is going wrong with evaluating your myfunc.jsx file. You can throw an alert in your main.jsx file before the eval to make sure the path is correct and getFiles() is returning your jsx file. Also, make sure your spelling and filenames are all correct.

Report · Aug 07, 2019

Hi

Thank for your reply,

what you suggested in your last reply are things I already did before i started this thread.

I wanted to know if what i was doing was the correct way.

I understand that it was and i am trying to figure our where the bug is.

It must be something i am missing and i will keep looking

thanks

Report · Aug 07, 2019

Since there are so many moving parts, if you want you can post your panel or a simplified version of your panel online for us to try out, we can better help you identify the issue in context.

Report · Aug 07, 2019

thanks,

i'll give it another go since it's not a critical issue yet.

if that does not work i'll upload it.

Dan