零基础的 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
「 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.xmlmanifest.xml 记录了插件的定义和相关配置,可以说只有 CSXS\manifest.xml 是一个 CEP 插件必须的文件。

index.html 是插件的入口和界面 (Main),在 PhotoShop 中一个插件面板的内容就是载入的它。实际上它的位置和名称都是 manifest.xml<MainPath>定义的,所以一个插件的 Main 可能不叫 index.html

cssjsjsx 文件夹分别是存放样式表和 Javascript 、jsx文件的文件夹,当然也可以不叫这个名字,这是由 index.html (Main) 和 manifest.xml 决定的,不过通常插件使用这样的目录名称。

jsjsx 都是存放 Javascript 文件但是宿主是不同的,他们之间的区别以后会详解。

manifest.xml 详解

可以看到,插件中最重要的的文件是 manifest.xmlindex.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.xxxxcom.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 属性是支持的宿主程序名, PHSPPHXS 表示的是 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 种类型 NormalDarkNormal,分别在 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 开发的查考资料实在少)。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容