用户 UI

在线构建：[https://scriptui.joonas.me](https://scriptui.joonas.me/)

(一般都是在线构建，然后查对应控件的用法)

UI 构建原型：UI Events（深入学习构建控件来源，可以看看）

本站只提供说明，以及属性、函数参考，也就是快速入门使用。

窗体

new Window

new Window (type [, title, bounds, {creation_properties}]);

参数

type：窗口类型
- dialog - 对话框，不关闭无法进行其他操作。
- palette - 浮动对话框，可以贴到其他面板里. （Photoshop CC 不支持。）
- window- 简单窗口，可用作应用程序的主窗口。（Photoshop CC 不支持。）
title：窗口标题。
bounds：窗口的位置和大小。

示例：创建窗体

用户UI - 图1

示例 1：直接创建

// 创建一个dialog类型窗口，左上角名称为：用户提示
var dlg = new Window("dialog", "用户提示");
// 给窗口添加一个静态文字
var myMessage = dlg.add("statictext");
// 给静态文字添加内容
myMessage.text = "Hello, world!";
// 显示窗体
dlg.show();

示例 2：函数包裹

// 创建UI 函数 function
var win = createWindow();
win.show();
createWindow() {
  var w = new Window('palette',"用户窗口"); // ← ← ← 创建一个palette类型窗口，左上角名称为：用户提示
  var m = w.add('statictext');
  m.text = 'Hello,world!';
  return w;
  }

窗体与控件类型

窗口类型介绍（英文版）：窗口对象

控件类型介绍（英文版）：控件对象

用户UI - 图2

窗口名称	类型	说明
dialog	对话框	在关闭之前，没法干其他操作
palette	面板	可以与其他面板合并（需要放在 UI Panel 里）
window	软件面板	不太常用

控件名称	类型	说明
statictext	文字类控件	静态文字。说明信息，或者只展示内容
edittext	文字类控件	文本编辑框。可以输入文字
button	按钮类控件	按钮。用于执行某些工作，比如单击运行
iconbutton	按钮类控件	图片按钮。跟按钮一样，不过可以使用图片，并且多了些参数
radiobutton	按钮类控件	单选按钮。使用 group 包裹，则可以多选 1。
checkbox	按钮类控件	复选框。提供选择/未选择反馈
dropdownlist	多元素控件	下拉菜单。只显示一项，单击弹出其他选择项
listbox	多元素控件	列表框。直接以列表的形式显示多个项目
slider	个性化控件	滑块。跟 AE 滑块控件差不多
progressbar	个性化控件	进度条。
image	个性化控件	图片。可以显示图片
group	容器	分组。把其他控件放一起管理
panel	容器	分割面板区（一个小方框）。用于分割控件
tabbedpanel	容器	切换面板。可以把其他组件分类，放置于切换面板子项，单击切换。
tab	容器	切换面板的单面板
treeview	容器	树状视图。

窗体与控件属性

borderStyle

说明：边框样式

w = new Window("dialog");
w.grp1 = w.add("group");
w.grp1.add("panel", [0, 0, 100, 100], "None", { borderStyle: "none" });
w.grp1.add("panel", [0, 0, 100, 100], "Gray", { borderStyle: "gray" });
w.grp1.add("panel", [0, 0, 100, 100], "Black", { borderStyle: "black" });
w.grp1.add("panel", [0, 0, 100, 100], "White", { borderStyle: "white" });
w.grp2 = w.add("group");
w.grp2.add("panel", [0, 0, 100, 100], "Etched", {
  borderStyle: "etched",
});
w.grp2.add("panel", [0, 0, 100, 100], "Sunken", {
  borderStyle: "sunken",
});
w.grp2.add("panel", [0, 0, 100, 100], "Raised", {
  borderStyle: "raised",
});
w.show();

用户UI - 图24

add() 添加组件或子项

window.add(ui)

说明：向窗体添加 UI 组件，或者向组件添加子项

参数：ui： UI 组件信息

第一个参数：必填。一般为组件名称，比如 statictext：静态文字

第二个参数：选填。一般为组件尺寸，[top,left,width,hight]。不填则自适应，使用 undefined 占位即可。

第三个参数：选填。一般为组件的变量名，当然也可以直接 var xxx = 组件信息

示例：

var myWindow = new Window("dialog", "用户提示"); // 定义窗体
// 直接添加（参数单独分开）
var myText = myWindow.add("statictext", undefined, "Hello World"); // ← ← ← 添加组件方法1 // 直接添加（参数放在字典里）
var myText = myWindow.add("statictext {text: 'Hello, world!'}"); // ← ← ← 添加组件方法2 // 先添加 然后给参数赋值 var
myText = myWindow.add("statictext"); // ← ← ← 添加组件方法3
myText.text = "Hello World";

show() 显示窗体

window.show

说明：显示窗体

案例：显示窗体

var myWindow = new Window("dialog", "用户提示"); // 创建一个dialog类型窗口，左上角名称为：用户提示
var button1 = myWindow.add("button", undefined, undefined, { name: "button1" });
button1.text = "我是按钮" myWindow.show(); // ← ← ← 显示窗体。

onShow() 窗体显示时

window.onShow

说明：窗体显示时

案例：窗体显示时，弹窗

var myWindow = new Window("dialog", "窗体");
myWindow.onShow =function () {
  // ← ← ← 显示窗体时运行的函数。
  alert("窗体显示啦！")
  } myWindow.show();

layout.layout()

remove()

UI 组件

英文原版：https://extendscript.docsforadobe.dev/user-interface-tools/control-objects.html

Icon buttons 图片按钮

图片按钮

示例：按钮构建与切换状态

用户UI - 图25

var w = new Window("dialog");
var f = File("/d/test/icon.png");
//本地图标文件
w.add("iconbutton", undefined, f);
// a：按钮里嵌入一个图片
w.add("iconbutton", undefined, f, { style: "toolbutton" });
// b：只显示图片，不显示按钮
var t1 = w.add("iconbutton", undefined, f, { style: "toolbutton", toggle: true });
// c：只显示图片，未切换
var t2 = w.add("iconbutton", undefined, f, { style: "toolbutton", toggle: true });
// d：只显示图片，切换
t2.value = true; // ← ← ← 切换时 这里的value为true就行
w.show();

案例：不同状态显示不同图标

用户UI - 图26

var dir = "/d/scriptui/fig/";
var icons = {
  a: File(dir + "icon-a.png"),
  b: File(dir + "icon-b.png"),
  c: File(dir + "icon-c.png"),
  d: File(dir + "icon-d.png"),
};
var w = new Window("dialog");
b = w.add("iconbutton", undefined, ScriptUI.newImage(icons.a, icons.b, icons.c, icons.d));
w.show();

radiobutton 单选按钮

示例：单击 OK，提示你选择了哪一项

用户UI - 图27

var w = new Window("dialog");
var radio_group = w.add("panel");
radio_group.alignChildren = "left";
radio_group.add("radiobutton", undefined, "AE");
radio_group.add("radiobutton", undefined, "PR");
radio_group.add("radiobutton", undefined, "PS");
radio_group.add("radiobutton", undefined, "AME");
w.add("button", undefined, "OK");
radio_group.children[0].value = true; // 初始选择第1个按钮
function selected_rbutton(rbuttons) {
  for (var i = 0; i < rbuttons.children.length; i++) {
    if (rbuttons.children[i].value == true) {
      return rbuttons.children[i].text;
    }
  }
}
//
if (w.show() == 1) {
  alert("你选择了 " + selected_rbutton(radio_group));
}

listbox 列表框

英文文档

初始化

// 直接添加
var w = new Window("dialog");
var myList = w.add("listbox", undefined, ["one", "two", "three"]);
w.show();
// 用 add 添加子项
var w = new Window("dialog");
var myList = w.add("listbox");
myList.add("item", "one");
myList.add("item", "three");
myList.add("item", "two", 1); // 1代表插入到第2位
w.show();
// 添加参数（允许多选）
var w = new Window("dialog");
var myList = w.add("listbox", undefined, ["one", "owo", "three"], { multiselect: true });
w.show();

选择与查找

myList.selection = [0, 1]; // 列表当前选择项
myList.selection = myList.find("two"); // 查找一个子项，并选择（注意 find只能找一个）
myList.revealItem("two"); // 滚动到子项。项目太多的时候，方便查找。参数可以是字符串/index

个性化

用户UI - 图28 用户UI - 图29

myList.items[i].image = File(一个图片路径); // 项目前加图片
myList.items[1].checked = true; // 项目前加一个 √

多列列表

用户UI - 图30

var w = new Window("dialog");
var myList = w.add("listbox", undefined, " ", {
  numberOfColumns: 3,
  showHeaders: true, // 列数与标题化
  columnTitles: ["English", "French", "Dutch"], // 标题内容
  columnWidths: [30, 30, 80], // 每列宽度
});
with (myList.add("item", "One")) {
  subItems[0].text = "Un";
  subItems[1].text = "Een";
}
with (myList.add("item", "Two")) {
  subItems[0].text = "Deux";
  subItems[1].text = "Twee";
}
with (myList.add("item", "Three")) {
  subItems[0].text = "Trois";
  subItems[1].text = "Drie";
}
w.show();

dropdownlist

下拉列表跟列表框差不太多，增删改查看上面文档

分隔符

用户UI - 图31

可以直接[“one”, “two”, “-“,”three”] 在列表里加”-“ 插入，也可以后面自己加

var w = new Window("dialog");
var myDropdown = w.add("dropdownlist", undefined, ["one", "two", "three"]);
myDropdown.add("separator", undefined, 1); // ← ← ← 后面自己加分隔符
myDropdown.selection = 0;
w.show();

tabbedpanel 切换面板

示例

用户UI - 图32

创建 tab，tab 再添加子控件，所以 tabbedpanel 相当于一个壳，没啥好说的

var w = new Window("dialog", "tab 面板演示", undefined, { closeButton: false });
w.alignChildren = "right";
var tpanel = w.add("tabbedpanel");
tpanel.alignChildren = ["fill", "fill"];
tpanel.preferredSize = [350, 300];
// 创建第1个切换面板
var tab1 = tpanel.add("tab", undefined, "tab1");
tab1.alignChildren = "fill";
var group1 = tab1.add("panel", undefined, "组1");
group1.alignChildren = "left";
group1.dtd_decl = group1.add("checkbox", undefined, "选项1");
group1.view_XML = group1.add("checkbox", undefined, "选项2");
group1.export_sel = group1.add("checkbox", undefined, "选项3");
// 创建第2个切换面板
var tab2 = tpanel.add("tab", undefined, "tab2");
tab2.alignChildren = "left";
var group2 = tab2.add("panel", undefined, "组2");
group2.btn = group2.add("button", undefined, "选项1");
// 主面板按钮
var buttons = w.add("group");
buttons.add("button", undefined, "Export", { name: "ok" });
buttons.add("button", undefined, "Cancel");
w.show();

slider

用户UI - 图33

示例：拖动滑块数字改变，改变数字，滑块也会动

var w = new Window("dialog");
var myText = w.add('edittext {text: 50, characters: 3, justify: "center", active: true}');
var slider = w.add("slider { minvalue: 0, maxvalue: 100, value: 50 }");
slider.onChanging = function () {
  myText.text = slider.value;
};
myText.onChanging = function () {
  slider.value = Number(myText.text);
};
w.show();