Adobe Illustrator CEP插件开发系列（3）——插件文件结构说明

文章目录

前情提要
文件结构树
manifest.xml写法
*.jsx文件写法
参考资料

前情提要

本文主要涉及CEP扩展文件夹的结构，以及文件详细说明。

文件结构树

我在第一章就提过CEP扩展文件的结构，不是固定的，但是有必须的部分。在官网中提供的样例结构如下：
在这里插入图片描述
其实是一种不错的文件结构，很清晰。分为三部分，CSXS、client和host。

CSXS是核心部分，里面的manifest.xml是整个CEP扩展的配置文件⭐️。
client文件夹放的是扩展的界面处理部分，包括整个前端相关的文件：html、css、js。由CEP的js虚拟机解析。
host文件夹放置要引用的.jsx文件，可以有多个jsx文件。jsx文件是由ExtendScript引擎（另一个虚拟机）进行解析，涉及Adobe的操作。

本文提供另一种常用结构，也是Brackets默认创建的文件结构，如下：

|–/CSXS
   └manifest.xml
|–/js
   └index.js
   └…
|–/jsx
   └host.jsx
   └…
|–/css
   └style.css
   └…
|–index.html
|–.debug

具体文件夹的功能即作用前面已经讲过，就不赘述了。下面主要讲manifest.xml文件的写法。

manifest.xml写法

下面给一个manifest.xml的基本样例：

<?xml version="1.0" encoding="UTF-8"?>
<ExtensionManifest Version="7.0" ExtensionBundleId="com.acc.ext.liyucep" ExtensionBundleVersion="1.0.0" ExtensionBundleName="liyucep" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
	<ExtensionList>
		<Extension Id="com.acc.ext.liyucep.1" Version="1.0" />
	</ExtensionList>
	<ExecutionEnvironment>
		<HostList>
            <!-- Uncomment Host tags according to the apps you want your panel to support -->
            <!-- Photoshop -->
            <Host Name="PHXS" Version="[14.0,19.0]" />
            <Host Name="PHSP" Version="[14.0,19.0]" />
            <!-- Illustrator -->
            <Host Name="ILST" Version="[16.0,50.0]" /> 
		</HostList>
		<LocaleList>
			<Locale Code="All" />
		</LocaleList>
		<RequiredRuntimeList>
			<RequiredRuntime Name="CSXS" Version="7.0" />
		</RequiredRuntimeList>
	</ExecutionEnvironment>
	<DispatchInfoList>
		<Extension Id="com.acc.ext.liyucep.1">
			<DispatchInfo >
				<Resources>
				<MainPath>./index.html</MainPath>
                <CEFCommandLine>
                    <Parameter>--enable-nodejs</Parameter>
                </CEFCommandLine>
				<ScriptPath>./jsx/hostscript.jsx</ScriptPath>
				</Resources>
				<Lifecycle>
					<AutoVisible>true</AutoVisible>
				</Lifecycle>
				<UI>
					<Type>Panel</Type>
					<Menu>liyucep</Menu>
					<Geometry>
						<Size>
							<Height>300</Height>
							<Width>300</Width>
						</Size>
                        <MinSize>
                            <Height>200</Height>
                            <Width>200</Width>
                        </MinSize>
                        <MaxSize>
                            <Height>400</Height>
                            <Width>400</Width>
                        </MaxSize>           
					</Geometry>
					<Icons>
						<Icon Type="Normal">./icons/google-maps.png</Icon>
						<Icon Type="RollOver">./icons/google-maps.png</Icon>
						<Icon Type="Disabled">./icons/google-maps.png</Icon>
						<Icon Type="DarkNormal">./icons/google-maps.png</Icon>
						<Icon Type="DarkRollOver">./icons/google-maps.png</Icon>
					</Icons>					
				</UI>
			</DispatchInfo>
		</Extension>
	</DispatchInfoList>
</ExtensionManifest>

解释：

<ExtensionManifest>标签有几个属性比较关键，一是Version和<RequiredRuntime Name=“CSXS” Version=“7.0” />中的Version要保持一致，如果不一致，Illustrator是无法加载出该扩展的。这个Version指CSXS的版本。二是ExtensionBundleId指扩展的应用ID，即扩展的根文件夹名。其余几个属性应该好理解。
一个扩展应用可以同时具备几个扩展，在<ExtensionList>标签中列出。每个扩展写在一个<Extension>内，id属性是独立扩展的ID，与上面的应用ID有所差别，id和Version可以自定。
<ExecutionEnvironment>标签内包含适配的Adobe应用<HostList>，每个<Host>包含应用的缩写Name和Version（适配的版本），可以是一个版本，如15.0，也可以是一个范围如[15.0,19.0]，如果想适配最高版本的应用，可以直接把上限设置为99.9。允许的语言环境<LocaleList>，默认Code属性是"All"。<RequiredRuntimeList>需要的运行时环境，Name=“CSXS”，版本如1所述。
<DispatchInfoList>里的<Extension>要和上述的<ExtensionList>内的扩展要一一对应，主要是Id属性不能写错，不然无法匹配。
<Resources>内包括<MainPath>和<ScriptPath>两个关键标签，前者写扩展界面html的文件路径，后者写扩展引用的jsx路径，这里只能写一个。如果要写多个，需要在程序中引用多个。这里要注意CSXS6.1版本之后引用Node.js要在这里面加一个<CEFCommandLine>标签，然后带一行<Parameter>–enable-nodejs</Parameter>，6.1版本之前默认是自带的。
<Lifecycle>生命周期，这里有<AutoVisible>和<StartOn>两种模式，前者是打开Illustrator就自动可见，后者是需要手动打开才可见。
<UI>内部写界面的组分。<Type>有六种类型：Panel、ModalDialog、Modeless、Common、Embedded和Dashboard。不同类型在Illustrator中的形式会有差异，可以自己探索。<Menu>内的名称就是应用中看到的扩展名。<Icons>里放置要在Illustrator中侧边栏显示的图标的路径。<Geometry>包含<Size>、<MaxSize>和<MinSize>分别指尺寸、最大尺寸和最小尺寸。

*.jsx文件写法

jsx是支持ExtendScript语法的js版本，可以使用操作Illustrator的各种类。参考《ADOBE ILLUSTRATOR CC 2017 SCRIPTING REFERENCE:JAVASCRIPT》文献，里面有详细的关于Illustrator操作相关类和方法定义，如图。
在这里插入图片描述
另外，《JavaScript Tools Guide CC》中详细讲述了一些通用类和方法，如文件操作等。
下面展示在.jsx文件中书写基础的文件读写操作：

读文件

var file = new File ("/c/Users/Hougiser/Desktop/test/1.txt")//绝对路径，写法与一般的路径不同
//文件读
if(file.exists){
    if(file.open("r")){
        var a = file.read();
        alert(a);
        file.close();
    }
}

写文件

var file = new File ("/c/Users/Hougiser/Desktop/test/1.txt")//绝对路径，写法与一般的路径不同
//文件写
if(file.exists){
    if(file.open("a")){
        file.write("yutou","\n");
        file.close();
    }
}

第一章讲过jsx文件的调试工具，Adobe Extendscript Toolkit CC，我们可以把jsx文件放在该工具中进行调试，如图
在这里插入图片描述
该工具会自动检测系统中以安装的Adobe应用，选择一个应用，需要在打开应用的情况下进行调试。