《零基础的 PhotoShop CEP 6 开发教程》系列目录
「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd
「 X 」CEP 更新到 6.1版了
CEP 目录结构
CEP 的目录结构
CEP 插件存放的目录：
Win 32bit：C:\Program Files\Common Files\Adobe\CEP\extensions\
Win 64bit：C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\
每一个 CEP 都以一个单独的目录的形式存放在上面的目录中，
一个 CEP 插件目录结构的例子：
│ index.html
│
├─CSXS
│ manifest.xml
├─css
│ styles.css
│─jsx
│ func.jsx
└─js
AgoraLib.js
CSInterface.js
...
CSXS 是最重要的文件夹，因为它存储了 CEP 插件的说明文件manifest.xml 。manifest.xml 记录了插件的定义和相关配置，可以说只有 CSXS\manifest.xml 是一个 CEP 插件必须的文件。
index.html 是插件的入口和界面 (Main)，在 PhotoShop 中一个插件面板的内容就是载入的它。实际上它的位置和名称都是 manifest.xml 中<MainPath>定义的,所以一个插件的 Main 可能不叫 index.html。
css 和 js、jsx 文件夹分别是存放样式表和 Javascript 、jsx文件的文件夹，当然也可以不叫这个名字，这是由 index.html (Main) 和 manifest.xml 决定的，不过通常插件使用这样的目录名称。
js、jsx 都是存放 Javascript 文件但是宿主是不同的，他们之间的区别以后会详解。
manifest.xml 详解
可以看到，插件中最重要的的文件是 manifest.xml 和 index.html，先介绍插件定义和配置文件manifest.xml 。
manifest.xml 是一个 XML 文件，你可以用任何文本编辑器打开并编辑它，另外还可以使用 foxe 等 XML 编辑器更加直观的以树形列表查看和编辑
用 foxe 编辑 manifest.xml
下面是一个简单的 manifest.xml 的示例：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ExtensionBundleId="com.nullice.cep.devtest" ExtensionBundleVersion="1.0" Version="6.0"> <!-- MAJOR-VERSION-UPDATE-MARKER -->
<ExtensionList>
<Extension Id="com.nullice.cep.devtest" Version="1.0"/>
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<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"/> <!-- MAJOR-VERSION-UPDATE-MARKER -->
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id="com.nullice.cep.devtest">
<DispatchInfo>
<Resources>
<MainPath>./index.html</MainPath>
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>Exchange Extension 测试2</Menu>
<Geometry>
<Size>
<Height>300</Height>
<Width>300</Width>
</Size>
<MaxSize>
<Height>900</Height>
<Width>900</Width>
</MaxSize>
<MinSize>
<Height>300</Height>
<Width>300</Width>
</MinSize>
</Geometry>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
扩展 ID
<ExtensionManifest> 标签中的 ExtensionBundleId 属性定义的是这个扩展程序集的识别 ID ，之所以说是扩展程序集，因为一个 manifest.xml 可以定义多个子扩展，每个扩展集中的子扩展可以共用资源而在 PhotoShop 的插件列表中有自己的位置。
每个子扩展的信息写在 <ExtensionList> 的 <Extension >子标签中。每个扩展 ID 都需要是唯一的，所以常常使用前缀避免与其他开发者的扩展冲突如：com.nullice.xxxx、com.adobe.xxxx。
下面这个示例就定义了一个 ID 为 com.nullice.cep.devtest 的扩展集，并拥有 3 个子扩展
<ExtensionManifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" ExtensionBundleId="com.nullice.cep.devtest" ExtensionBundleVersion="1.0" Version="6.0"> <!-- MAJOR-VERSION-UPDATE-MARKER -->
<ExtensionList>
<Extension Id="com.nullice.cep.devtest.c_1" Version="1.0"/>
<Extension Id="com.nullice.cep.devtest.c_2" Version="1.0"/>
<Extension Id="com.nullice.cep.devtest.c_3" Version="1.0"/>
</ExtensionList>
支持宿主版本
<ExecutionEnvironment> 标签的子标签 <HostList> 中的<Host>定义了这个扩展集的所有程序可以在那些宿主和那些版本中运行，比如：
<Host Name="PHSP" Version="14.0"/>
<Host Name="PHXS" Version="14.0"/>
Name 属性是支持的宿主程序名， PHSP、PHXS 表示的是 PhotoShop ，Version 属性是限定宿主程序的版本，比如 PhotoShop CC2015 的版本是 16.0，除了限定在某个版本，还可以限定在一个区间，比如：
<Host Name="PHXS" Version="[11.0,99.9]"/>
是限定运行在 11.0 到 99.9 之间的版本。
下面是各个 Adobe 程序与对应 Host Name 的列表：
|软件 | Host Name | CC2015 版本号 |
|-|-|
| Photoshop | PHXS/PHSP | 16 |
|InDesign |IDSN |11|
|InCopy| AICY| 11|
|Illustrator| ILST |19|
|Premiere Pro| PPRO |9|
|After Effects| AEFT |14|
|Prelude |PRLD |4|
|Flash Pro| FLPR| 15|
|Dreamweaver| DRWV| 15|
扩展定义
<DispatchInfoList> 的子标签 <Extension> 中的<DispatchInfo>标签定义了扩展具体的各种属性。对应不同的子扩展，<DispatchInfoList>可以有多个<Extension>标签。
- 指定资源文件
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/Source1.jsx</ScriptPath>
</Resources>
<MainPath> 指定的是主页面的 HTML 文化的位置， 这个文件就是 CEP 面板中的内容，在面板打开时第一个就会载入它。
<ScriptPath> 是指定扩展中会使用到的 JSX 文件的内容。（除了在这里指定还可以动态加载 JSX 文件，以后会详细说明）
- 生命周期
<Lifecycle>标签下的设置关于插件启动和可视的设定。 - 扩展可视
<AutoVisible>true</AutoVisible>
设定扩展是否可视，值为false的话, 扩展就是没有界面的不可视扩展。（要让插件完全隐形的话，可以不要设置下面会说的<Menu>标签，这样扩展就不会出现在 PhotoShop 的扩展功能菜单中） - 自动运行
<StartOn>标签下可以添加多个<Event>标签，每个<Event>标签值为一个事件，当事件发生时，扩展就会被自动打开。
下面这个例子中扩展会在 PhotoShop 启动时自动打开：
<Lifecycle>
<StartOn>
<Event>applicationActivate</Event>
</StartOn>
</Lifecycle>
关于扩展中的事件（Event）后面会详细说。
界面
<UI> 标签下的各种子标签指定关于扩展界面的各种属性
- 界面类型
<Type>标签指定扩展界面的显示类型，有 3 中类型：
| 123 | 2 | 3 |
|---|---|---|
<Type>Panel</Type> |
面板型（Panel） | 即普通的工具面板，最为常用 |
<Type>ModalDialog</Type> |
模态对话框（ModalDialog） | 把扩展作为一个单独窗口显示，而且在操作扩展的窗口时，是不能操作 PhotoShop 的，必须等扩展窗口关闭后才能继续 PhotoShop。 |
<Type>Modeless</Type> |
非模态对话框（Modeless） | 把扩展作为一个单独窗口显示，与模态对话框不同，操作扩展窗口的同时可以随时切换到 PhotoShop 窗口中去。 |
- 扩展面板标题
<Menu>Exchange Extension 测试2</Menu>
设置扩展面板的标题，同时也是 PhotoShop 扩展功能菜单列表中的名称。
扩展面板标题
- 插件尺寸
通过<Geometry>标签可以指定扩展面板的大小
分为<Size>、<MaxSize>和<MinSize>，分别是面板默认的初始尺寸、用户能把面板拉伸到的最大和最小尺寸。
<Geometry>
<Size>
<Height>580</Height>
<Width>1000</Width>
</Size>
<MaxSize>
<Height>800</Height>
<Width>1200</Width>
</MaxSize>
<MinSize>
<Height>400</Height>
<Width>600</Width>
</MinSize>
</Geometry>
- 扩展图标
<Icons>标签的子标签<Icon>可以设置扩展的图标，图标有 2 种类型Normal和DarkNormal，分别在 PhotoShop 的界面主题颜色为亮色和暗色时显示。
另外你可以在xxx.png图标文件所在目录放入xxx@2X.png文件，在高清屏下 PhotoShop 会调用xxx@2X.png文件。一般普通图标的尺寸为 23 x 23 而xxx@2X.png为它的 2 倍 46 x 46。
<Icons>
<Icon Type="Normal">./img/icon1.png</Icon>
<Icon Type="DarkNormal">./img/icon1.png</Icon>
</Icons>
CEP JavaScript 库
CEP 有 3 个官方的 JavaScript 库（下载），通过他们调用 CEP 功能。
-
CSInterface.js
提供接口让 HTML 面板的 JavaScript 引擎运行的 JavaScript 代码能与 PhotoShop 的内部的 ExtendScript 引擎运行的 JavaScript（JAX）交互。和调用 PhotoShop 的一系列 API。 -
Vulcan.js
操作其他的程序比如在 PhotoShop 中与 Illustrator 交互。 -
AgoraLib.js
操作 Adobe Exchange 的在线服务。
示例
GitHub 上有一个 Adobe 官方发布的示例集，Adobe-CEP/Samples，很有参考价值（应该说 CEP 开发的查考资料实在少）。
网友评论