简介

TreeUI （简称 Tree）是一款支持 Ae Ps Ai Id 的 ScriptUI 解析库。它基于 Extend Script 语言（ECMAScript 3标准的一个实现）构建。它提供了一种介于 ScriptUI 自身实现的 add 方法和 Resource specifications 构建形式之间的脚本 UI 构建方式，即使用多级树结构对象去描述并构建UI。可以帮助脚本开发者高效的开发脚本 UI。

下面是一个运行在 Ae 中的基本示例：

//@include "tree.min.js"

Tree.parse({ button: [] });

结果展示

导入

根据你的使用场景和个人偏好，在使用 TreeUI 时，可以选择不同的导入方式

通过在脚本头部粘贴源码进行导入（推荐）

脚本通常具有绿色、轻量的优点，如果通过多文件管理代码，将失去脚本的这些优点，这是推荐该导入方式的原因。

var Tree=function(){/*....*/}.call(this)

✏️ 推荐在生产环境中使用 tree.min.js ，即经过压缩的版本，这样可以有效减少脚本文件的体积。

通过 Extend Script 预处理指令导入

//@include "tree.min.js"

上下文配置

如果你将 TreeUI 源码放置于全局环境下（即脚本的顶部，通常为第一行），或者不为 Ae 开发脚本，则可以跳过此环节，直接进入后面的章节：

var Tree = function () {/*....*/}.call(this);

Tree.parse({ button: [] });

TreeUI 特别针对 Ae 封装了可停靠面板的逻辑代码，即运行在 ScriptUI Panels 目录下的脚本 UI 可以在 Ae 中进行停靠的特性。受限于可停靠的底层检测逻辑，必须向解析器传递全局环境作为判断依据，否则解析后的 UI 将无法正常在 Ae 中停靠。

下面为配置方法：

(function (global) {
    var Tree = function () {/*....*/}.call(this);

    Tree.context = global;

    Tree.parse({ button: [] });
})(this);

全局变量

TreeUI 默认使用标识符 Tree 作为全局变量，TreeUI 的所有属性和方法都添加到这个变量。

如果你需要将 Tree 改为其他变量名，可以通过以下方式实现：

var Foo = function () {/*....*/}.call(this);
Foo.parse({ button: [] });

兼容性

TreeUI 对 ScriptUI 有着完全的兼容性，并在此基础之上简化 UI 构建流程。兼容性主要体现在以下方面：

元素兼容：TreeUI 支持解析 ScriptUI 中的所有元素。
参数兼容：TreeUI 支持解析 ScriptUI 中所有元素的创建参数，且未对原有传参顺序进行调整。
样式兼容：TreeUI 支持解析 ScriptUI 中所有元素的样式属性。
组合兼容：TreeUI 完全同步 ScriptUI 中所有可能的元素组合方式。

当你已经熟悉 ScriptUI 传统的构建方式时，完全不需要花费更多额外的时间去学习一套新的理论，一切都是平滑过渡的。

ScriptUI 基础

如果你从来没有了解过 ScriptUI，或知之甚少，那么阅读本章将会帮你快速建立 ScriptUI 知识框架，以便之后快速上手 TreeUI。

因为这不是一份描述 ScriptUI 的文档，所以本章不会过多描述 ScriptUI 的各种细节，如需获取完整信息，请阅读官方文档。

✏️ 为了保证示例阅读的简洁性，本章及之后的示例代码中，将不会出现导入及配置 TreeUI 部分的代码。

ScriptUI

ScriptUI 是 Adobe 提供的内置组件，它与 ExtendScript JavaScript 解释器一起工作，为 JavaScript 脚本提供创建用户界面元素并与之交互的能力。

ESTK

全称 Adobe ExtendScript Toolkit CC，是 Adobe 专门为脚本编写设计的集成开发环境（IDE），包含 ScriptUI 的完整实现。它可以非常方便的让脚本在指定 Adobe 应用程序中运行，同时具备一些基本的调试功能。虽然官方早已停止维护该软件，但相对所有 Adobe 应用来说，它依然是目前最便捷的脚本调试工具。TreeUI 中的所有特性可以完整的在 ESTK 中展现，如果你当前处于学习阶段，那么推荐你直接在 ESTK 中运行下文中的案例。

宿主

宿主又称宿主应用，我们可以通俗的将宿主理解为 Adobe 公司开发的软件，一款软件就是一个宿主，比如 Ae 就是一个宿主。脚本依赖于宿主运行。不同的宿主在渲染 ScriptUI 元素外观时会有不同的策略，所以你会发现在 Ae 中运行良好的 UI，放到 Ps 中就会出现错误，甚至外观完全不同，这是正常的，如果你同时为多款 Adobe 应用程序开发脚本，处理这种差异，也是编写脚本的工作之一。在后面的章节中，将使用“宿主应用”指代“Adobe 应用程序”。

元素

元素是 ScriptUI 中对于容器与控件的统称，它们通常被“装”在操作系统的窗口中，属于窗口的 UI 元素可以是容器或控件。

<span id="Container-Control">容器与控件</span>

ScriptUI 中的元素分为两大类，即容器与控件。

区分容器与控件是一件很基础却又很重要的事情。容器通常可以包含其它容器或控件，所谓包含，即我们可以向容器中添加容器和控件，但通常无法向控件中添加容器和控件。容器是我们组织 UI 布局的的基本框架和单元，我们可以把容器和控件分别比作计算机中的文件夹和文件，而主容器，即下文中将提到的 Window 就相当于计算机中的 C 盘、D盘。有些控件同时具有容器和控件的特征，继续阅读下面的内容，你将了解这些特征。

父子级

从容器度的角度说，装在容器中的容器或控件通常称作它的子级（child element），反之则为父级（parent element）。

元素名称与元素类型名称

元素名称是描述一个元素叫什么的书面用语，而元素类型名称则是在编程过程中作为方法参数传递的字符串，它是区分大小写的，所以之后涉及元素详情的表格中会相应的列出元素类型名称，以供参照。我们以元素类型名称 button 为例，以下示例展示了它被使用时的样子：

var button = container.add('button');

容器

容器是组织 UI 中其它元素和布局的基本工具，它具有给元素“打组”并进行统一控制的能力。容器可以包含其它容器，也就是说容器可以进行多级嵌套。

容器有以下三种：

| 容器名称 | 类型名称 | 简述 | | -------- | -------- | ------------------------------------------------------------ | | Window | window | 窗口容器，可以添加不包括自身在内的所有容器和控件，它是所有元素的主容器，所以任何容器都不能“装”它。 | | Group | group | 组容器，可以添加包括自身在内的所有子容器和子控件。 | | Panel | panel | 面板容器，可以添加包括自身在内的所有子容器和子控件。 |

一般最常使用的容器只有 Group 和 Panel 。

Window 容器有三种类型，且具有特定于操作系统的不同窗口外观：

| Window 类型 | 类型名称 | 简述 | | ----------- | -------- | ------------------------------------------------------------ | | Dialog | dialog | 会生成一个学名叫“模态窗口”的窗口，这个窗口弹出时，你不能与窗口外的其它元素进行交互。 | | Palette | palette | 俗称调色板，这个窗口弹出时，你可以与窗口外的其它元素进行交互，所以它是目前最受欢迎的窗口类型。 | | Window | window | 与 dialog 无本质区别，在形式上（仅仅是形式上）可以用作应用程序的主窗口。事实上它很少在脚本开发中被使用。 |

✏️ TreeUI 会在内部生成一个默认的 Window 容器，所以你很少有机会和它打交道。但了解它的存在是必要的。

不同宿主应用对于 Window 类型的支持是存在差异的，下表展示了这些差异：

| Window 类型 | 类型名称 | Ae | Ps | Ai | Id | ESTK | | ----------- | -------- | :--: | :--: | :--: | :--: | :--: | | Dialog | dialog | √ | √ | √ | √ | √ | | Palette | palette | √ | × | √ | × | √ | | Window | window | √ | × | √ | × | √ |

√ 代表支持，× 代表不支持。

⚠️ 在没有显式定义主容器类型的情况下，TreeUI 会针对不同宿主提供相应的默认主容器类型，并以 palette 类型优先，其次是 dialog 。

⚠️ 如果向宿主应用提供了不支持的 Window 类型参数，TreeUI 会自动将类型转换为默认类型。

控件

控件一般是 UI 中直接可见与可交互的元素，同时也是实现 UI 功能的主要载体。

下表简述了不同控件的功能：

| 控件名称 | 类型名称 | 简述 | | ------------- | ------------ | ---------------------------------------------- | | Button | button | 按钮 | | Checkbox | checkbox | 复选框 | | Dropdown List | dropdownlist | 下拉列表 | | Edit Text | edittext | 输入框 | | Flash Player | flashplayer | Flash 播放器。已被官方弃用，仅在 estk 中可用。 | | Icon Button | iconbutton | 图标按钮 | | Image | image | 图像 | | Listbox | listbox | 列表 | | Progress Bar | progressbar | 进度条 | | Radio Button | radiobutton | 单选按钮 | | Scrollbar | scrollbar | 滚动条 | | Slider | slider | 滑杆 | | Static Text | statictext | 静态文本 | | Tabbed Panel | tabbedpanel | 选项卡 | | Treeview | treeview | 树视图 |

特殊的控件

有些控件对父级存在特定的类型要求，所以它们不算常规意义上的控件，下表描述了这些特殊控件的特征：

| 控件名称 | 类型名称 | 特征 | | -------- | -------- | ---------------------------------------------------- | | Item | item | 父级只能是 Dropdown List、Listbox、Tree View 或 node | | Node | node | 父级只能是 Node （Node可以装Node）或 Tree View 控件 | | Tab | tab | 父级只能是 Tabbed Panel |

特殊的容器

有些控件表现出容器的特征，即可以添加其它控件或容器，但可添加的子级类型通常是单一的，下表描述了这些特殊容器的特征：

| 控件名称 | 类型名称 | 特征 | | ------------- | ------------ | -------------------------------------------- | | Dropdown List | dropdownlist | 子级只能是 Item | | Listbox | listbox | 子级只能是 Item | | Tabbed Panel | tabbedpanel | 子级只能是 Tab | | Tab | tab | 子级可以是不包括它自身在内的所有容器或控件。 | | Treeview | treeview | 子级只能是 Node 或 Item |

<span id="Element-combination">元素组合</span>

下表完整展示了 ScriptUI 中可能的父子元素组合方式，分隔线上方为父级，下方为子级，所有元素皆以类型名称表示：

TreeUI 快速入门

构建逻辑

TreeUI 使用多级树结构对象去描述并构建 UI。ScriptUI 的 Resource specifications ，即资源字符串构建就是该方式的一种实现，但由于它完全是字符串形态，所以非常难以调试，相应的，使用 ScriptUI 容器的 add 方法是典型的过程式开发，需要借助大量的中间变量，同时 UI 元素之间的层级关系非常模糊，这同样让调试变得困难。而 TreeUI 在这两种方法之间寻求平衡，它直接使用对象字面量表示方式描述 UI，你将同时拥有当前主流编辑器（如 VsCode）的语法高亮、代码提示和符合直觉的 UI 构建方式，元素之间的层级关系将变得一目了然，且非常易于调试，这些也正是 TreeUI 被开发的原因和价值所在。

如果现在有这样一个需求：构建一个 UI，UI中有一个面板，面板中有一个输入框和按钮，不考虑元素样式。下面的示例就分别展示了使用不同方式实现该需求的方法：

使用 add 方法

var window = new Wind

Tree

Install / Use

README

简介

导入