从零开始的 PhotoShop CEP 6 开发教程 「 2 」CEP 文件结构

 《从零开始的 PhotoShop CEP 6 开发教程》系列目录

「 0 」目录
「 1 」配置开发环境
「 2 」CEP 文件结构
「 3 」CEP 的运行机制
「 4 」Hello World ！
「 5 」事件（EVENTS）
「 6 」调用 JSX 并传递信息
「 7 」UI - HTML 开发的一些细节
「 8 」API - 文件读写与二进制数据
「 9 」签名打包与 ZXPSignCmd

---

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>

manifest.xml 的详细定义( XSD )

扩展 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 开发的查考资料实在少）。