《零基礎的 PhotoShop CEP 6 開發(fā)教程》系列目錄

「 0 」目錄
「 1 」配置開發(fā)環(huán)境
「 2 」CEP 文件結構
「 3 」CEP 的運行機制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」調(diào)用 JSX 并傳遞信息
「 7 」UI - HTML 開發(fā)的一些細節(jié)
「 8 」API - 文件讀寫與二進制數(shù)據(jù)
「 9 」簽名打包與 ZXPSignCmd
「 X 」CEP 更新到 6.1版了

前面在 「 3 」CEP 的運行機制 那一篇中說過了 CEP 擴展運行的 JavaScript 與宿主的 JSX （ExtendScript ）并不在一個虛擬機中，而對宿主應用（Photoshop）進行操作和獲得信息大都需要使用 JSX （ExtendScript ），所以這里介紹的是如何在 CEP 的 JavaScript 中調(diào)用 JSX 并傳遞信息 。

執(zhí)行 JSX （ExtendScript ）代碼

在 CEP 的 JavaScript 中用 CSInterface 的 evalScript()方法就可以執(zhí)行 JSX 代碼：

var cs = new CSInterface();
cs.evalScript("app.documents.add();")

evalScript(script, callback)方法接受 2 個參數(shù)，第一個是要執(zhí)行的 JSX 代碼，第二個是接受執(zhí)行返回值的回調(diào)函數(shù)。

值得注意的是執(zhí)行 JSX 后的返回值只能通過回調(diào)函數(shù)獲取，而這是一個異步過程，所以像下面這樣的代碼得到的結果可能和你想象的不同：

var cs = new CSInterface();
var layerName = "還不知道"
cs.evalScript("app.documents[0].layers[0].name;", function(result)
{
  layerName = result; // 設置 layerName 為第一個圖層的圖層名；
})
alert(layerName ); // 返回： "還不知道"

由于回調(diào)函數(shù)是異步的，運行到 cs.evalScript()這行時并不會等待執(zhí)行完 JSX 代碼，而是繼續(xù)運行下面的代碼（也就是 alert(layerName );），所以這時 layerName依舊是 "還不知道"而不是一般預想的執(zhí)行 JSX 得到的圖層名。真正執(zhí)行回調(diào)函數(shù)得等到所有代碼運行完畢之后了。不清楚 JavaScript 的異步機制的可以搜索相關內(nèi)容，以后也會有專門的篇目說明異步函數(shù)。

執(zhí)行 JSX 文件中的代碼并傳遞信息

前面說過在 manifest.xml 文件中的 <ScriptPath>中定義了一個 JSX 文件：

<ScriptPath>./jsx/Source1.jsx</ScriptPath>

我們通常把 JSX 代碼都寫到這個文件中，再在 CEP JavaScript 中調(diào)用：

Source1.jsx

var dodo = function (info)
{
    alert("dodo:" + info);
}

test.js

    var cs = new CSInterface();
    var message= "來自 CEP 插件 ：" + cs.getExtensionID();
    cs.evalScript("dodo('"+message +"');")// 調(diào)用 Source1.jsx  中的 dodo() 函數(shù)

結果

這樣我們就能從 CEP JavaScript 向 JSX 中傳遞信息了。

動態(tài)載入 JSX 文件

除了在 manifest.xml 指定的 JSX 文件，我們還可以動態(tài)的載入 JSX 文件：
**注意這是在 CEP JavaScript 中而非 JSX 中 **

    function loadJSX(fileName)
    {
        var extensionRoot = cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";// 這里是指插件目錄下的 jsx 文件夾，可自行設為任意目錄
        cs.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
    }

    loadJSX("oo.jsx");// 載入插件目錄下 jsx\oo.jsx 文件

通過 JSON 傳遞對象

從 JSX 向 CEP JavaScript 傳遞對象除了使用上一篇說的事件，也可以使用 evalScript() 的回調(diào)還實現(xiàn)，同樣也是先在 JSX 中把對象轉(zhuǎn)換成 JSON 字符串，在返回字符串，最后在 CEP JavaScript 中把字符串還原成對象。
不過要注意的是 JSX 并不預置 JSON 對象，需要手動加載，你需要下載 json2.js 并放在你的你的插件目錄中，并用上面動態(tài)載入 JSX 文件的方法載入它。

Source1.jsx

function getFontsJson()
{
    var fontlist = new Object(); // 創(chuàng)建一個要傳遞的對象

    //----這個例子是獲得 PhotoShop 的可用字體列表
    fontlist.length = app.fonts.length; 
    fontlist.list = [{}];
    for (var i=0; i < app.fonts.length; i++)
    {
        fontlist.list[fontlist.list.length]=
        {
            name:app.fonts[i].name,
            style:app.fonts[i].style,
            typename:fonts[i].typename,
            postScriptName:fonts[i].postScriptName,
            family:fonts[i].family
        }
    }
   //---------
    return JSON.stringify(fontlist); // 把對象轉(zhuǎn)化成 JSON 字符串并返回
}

test.js

 var cs = new CSInterface();

    function loadJSX(fileName)
    {
        var extensionRoot = cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";
        cs.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
    }

    loadJSX("json2.js"); //為 JAX 載入 JSON 庫

    cs.evalScript('getFontsJson()',
        function (result)
        {
            var o = JSON.parse(result); //把 JSON 字符串轉(zhuǎn)換為對象
            alert(o.list[0].name);  // 可以操作得到的對象了
        })