零基础的 PhotoShop CEP 6 开发教程　「 2 」C

2015-11-03 本文已影响2448人不知语冰

《零基础的 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>

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 的列表：

扩展定义

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

零基础的 PhotoShop CEP 6 开发教程　「 2 」C

CEP 的目录结构

manifest.xml 详解

扩展 ID

支持宿主版本

扩展定义

界面

CEP JavaScript 库

示例

猜你喜欢

热点阅读

零基础的 PhotoShop CEP 6 开发教程 「 2 」C

CEP 的目录结构

manifest.xml 详解

扩展 ID

支持宿主版本

扩展定义

界面

CEP JavaScript 库

示例

猜你喜欢

热点阅读

零基础的 PhotoShop CEP 6 开发教程　「 2 」C