《零基礎(chǔ)的 PhotoShop CEP 6 開(kāi)發(fā)教程》系列目錄
「 0 」目錄
「 1 」配置開(kāi)發(fā)環(huán)境
「 2 」CEP 文件結(jié)構(gòu)
「 3 」CEP 的運(yùn)行機(jī)制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」調(diào)用 JSX 并傳遞信息
「 7 」UI - HTML 開(kāi)發(fā)的一些細(xì)節(jié)
「 8 」API - 文件讀寫(xiě)與二進(jìn)制數(shù)據(jù)
「 9 」簽名打包與 ZXPSignCmd
「 X 」CEP 更新到 6.1版了
前面的預(yù)備知識(shí)已經(jīng)說(shuō)完了，可以先完成一個(gè)最簡(jiǎn)單的 Hello World 辫秧！擴(kuò)展了。
建立擴(kuò)展目錄
在擴(kuò)展存放路徑中新建一個(gè)文件夾存放我們要?jiǎng)?chuàng)建的擴(kuò)展被丧。
在擴(kuò)展存放路徑：
Win 32bit：C:\Program Files\Common Files\Adobe\CEP\extensions\
Win 64bit：C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
創(chuàng)建 manifest.xml
建立一個(gè) manifest.xml 盟戏，放在 擴(kuò)展目錄\CSXS\中
其內(nèi)容在 「 2 」CEP 文件結(jié)構(gòu)中有詳細(xì)說(shuō)明。
manifest.xml:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ExtensionBundleId="com.nullice.helloworld" ExtensionBundleVersion="1.0" Version="6.0"> <!-- MAJOR-VERSION-UPDATE-MARKER -->
<ExtensionList>
<Extension Id="com.nullice.helloworld" Version="1.0"/> <!-- 設(shè)置擴(kuò)展 ID-->
</ExtensionList>
<ExecutionEnvironment>
<HostList> <!-- 設(shè)置擴(kuò)展能在 11.0 版本之后 PhotoShop 中運(yùn)行-->
<Host Name="PHXS" Version="[11.0,99.9]"/>
<Host Name="PHSP" Version="[11.0,99.9]"/>
</HostList>
<LocaleList>
<Locale Code="All"/>
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name="CSXS" Version="6.0"/>
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="com.nullice.helloworld"> <!-- 為 com.nullice.helloworld 設(shè)置屬性-->
<DispatchInfo>
<Resources>
<MainPath>./index.html</MainPath> <!-- 指定起始載入的網(wǎng)頁(yè)-->
<ScriptPath>./jsx/main.jsx</ScriptPath> <!-- 指定用到的 JSX 文件-->
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible> <!-- 設(shè)置擴(kuò)展面板為可視-->
<StartOn>
</StartOn>
</Lifecycle>
<UI>
<Type>Panel</Type> <!-- 設(shè)置擴(kuò)展顯示為面板模式-->
<Menu>Hello world</Menu> <!-- 設(shè)置擴(kuò)展標(biāo)題-->
<Geometry>
<Size> <!-- 設(shè)置擴(kuò)展面板尺寸-->
<Height>300</Height>
<Width>300</Width>
</Size>
<MaxSize>
<Height>900</Height>
<Width>900</Width>
</MaxSize>
<MinSize>
<Height>300</Height>
<Width>300</Width>
</MinSize>
</Geometry>
<Icons> <!-- 設(shè)置擴(kuò)展面板尺寸-->
<Icon Type="Normal">./img/icon1.png</Icon>
<Icon Type="DarkNormal">./img/icon1.png</Icon>
</Icons>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
創(chuàng)建 HTML 頁(yè)面
由于我們已經(jīng)在 manifest.xml 中定義了初始頁(yè)面的位置： <MainPath>./index.html</MainPath>
所以我們會(huì)在擴(kuò)展目錄中創(chuàng)建一個(gè) HTML 頁(yè)面 index.html
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<link href="./css/styles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./js/test.js"></script>
<script type="text/javascript" src="./js/CSInterface.js"></script>
<script type="text/javascript" src="./js/Vulcan.js"></script>
<script type="text/javascript" src="./js/AgoraLib.js"></script>
</head>
<body style="background-color: #a2a1a3; text-align: center;" >
<span style="font-family: '微軟雅黑'; font-style: normal; font-weight: normal; font-size: 16pt; color: white"> CEP 6 開(kāi)發(fā)教程 </span>
<br>
<br>
<br>
<span >
<span style="font-family: 'Castellar'; font-style: normal; font-weight: normal; font-size: 34pt;"> Hello World ! </span>
</span>
<br>
<input type="button" value="新建文檔" onclick="pop()">
</body>
</html>
在 HTML 文件中我們引入了一個(gè) Javascript 文件 ：
test.js:
var pop = function ()
{
var cs = new CSInterface();
cs.evalScript("dodo()");
}
并給一個(gè)按鈕綁定了其中一個(gè)方法 "pop()" 這個(gè)方法會(huì)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的功能：在 PhotoShop 中新建一個(gè)文檔晚碾。
運(yùn)行在 CEP VM 中的 JavaScript 無(wú)法直接調(diào)用 PhotoShop 的功能抓半，所以我們會(huì)用 CSInterface.js 最為橋梁調(diào)用 JSX 。
我們?cè)?HTML 文件中已經(jīng)引用了 CSInterface.js 格嘁。 CSInterface.js需要放入你的擴(kuò)展文件夾中笛求，它可以從官方獲取。
可以看到我們?cè)?JavaScript 中調(diào)用了 dodo() 方法（cs.evalScript("dodo()")），這個(gè)方法的實(shí)現(xiàn)在 manifest.xml 中定義的 jsx/main.jsx 文件 探入。（實(shí)際上也可以直接在 JavaScript 中寫(xiě) cs.evalScript(" app.documents.add()"); 來(lái)實(shí)現(xiàn)）
main.jsx：
var dodo = function (info)
{
app.documents.add();// 新建一個(gè)文檔
}
到此我們的擴(kuò)展已經(jīng)完成了：
示例下載
這是一個(gè)最簡(jiǎn)單的擴(kuò)展示例了狡孔，它展示如何構(gòu)建 CEP 和運(yùn)行一個(gè) CEP 插件
后面會(huì)介紹一些進(jìn)階的內(nèi)容，包括如何從 CEP 的 JavaScript 傳遞數(shù)據(jù)到 JAX蜂嗽、使用 PhotoShop 的事件苗膝、通過(guò) ExtendScript 操作 PhotoShop 等等
