adobe脚本插件开发--界面处理--布局原理--对齐方式--动态创建内容(三)-CFANZ编程社区

此文接着上文翻译，如需了解的同学，请先阅读第一篇文章，第二篇文章

1.动态创建内容

许多对话框需要根据用户在对话框中选择的选项来显示不同的信息集。您可以使用堆栈方向来在对话框的同一区域中显示不同的视图。
容器的堆栈方向将子元素放置在一个空间的中心，这个空间足够宽来容纳最宽的子元素，也足够高来容纳最高的子元素。如果您在这样的堆栈中安排组或面板，您可以以不同的组合显示和隐藏它们，以在相同的空间中显示不同的控件集，这取决于对话框中的其他选择。
例如，这个对话框根据用户在下拉列表中的选择而动态变化。
在这里插入图片描述
下面的脚本创建这个对话框。它将前面示例中的“个人信息”和“工作信息”面板压缩为一个面板，其中有两个组排列在一个堆栈中。下拉列表允许用户选择要查看的信息集。当用户在列表中做出选择时，它的onChange函数显示一个组，并隐藏另一个组。

res =
    "dialog { \
    whichInfo: DropDownList { alignment:’left’ }, \
    allGroups: Panel { orientation:’stack’, \
    info: Group { orientation: ’column’, \
    name: Group { orientation: ’row’, \
    s: StaticText { text:’Name:’ }, \
    e: EditText { characters: 30 } \
    } \
    }, \
    workInfo: Group { orientation: ’column’, \
    name: Group { orientation: ’row’, \
    s: StaticText { text:’Company name:’ }, \
    e: EditText { characters: 30 } \
    } \
    }, \
    }, \
    buttons: Group { orientation: ’row’, alignment: ’right’, \
    okBtn: Button { text:’OK’, properties:{name:’ok’} }, \
    cancelBtn: Button { text:’Cancel’, properties:{name:’cancel’} } \
    } \
    }";
win = new Window(res);
win.whichInfo.onChange = function ()
{
    if (this.selection != null)
    {
        for (var g = 0; g < this.items.length; g++)
            this.items[g].group.visible = false; //hide all other groups
        this.selection.group.visible = true; //show this group
    }
}
var item = win.whichInfo.add(’item’, ’Personal Info’);
item.group = win.allGroups.info;
item = win.whichInfo.add(’item’, ’Work Info’);
item.group = win.allGroups.workInfo;
win.whichInfo.selection = win.whichInfo.items[0];
win.center();
win.show();

2.定义布局管理例子

该脚本创建的对话框几乎与前面示例中的对话框相同，只是它定义了一个layout-manager子类，并将这个类的一个实例赋值为对话框中最后一组的布局属性。(该示例还演示了在JavaScript中定义可重用类的技术。)
这个脚本定义的布局管理器在其容器中以一种阶梯式的方式定位元素，因此按钮是交错排列的，而不是直线排列的。
在这里插入图片描述

/* Define a custom layout manager that arranges the children
 ** of ’container’ in a stair-step fashion.*/
function StairStepButtonLayout(container)
{
    this.initSelf(container);
}
// Define its ’method’ functions
function SSBL_initSelf(container)
{
    this.container = container;
}
function SSBL_layout()
{
    var top = 0,
    left = 0;
    var width;
    var vspacing = 10,
    hspacing = 20;
    for (i = 0; i < this.container.children.length; i++)
    {
        var child = this.container.children[i];
        if (typeof child.layout != "undefined")
            // If child is a container, call its layout method
            child.layout.layout();
        child.size = child.preferredSize;
        child.location = [left, top];
        width = left + child.size.width;
        top += child.size.height + vspacing;
        left += hspacing;
    }
    this.container.preferredSize = [width, top - vspacing];
}
// Attach methods to Object’s prototype
StairStepButtonLayout.prototype.initSelf = SSBL_initSelf;
StairStepButtonLayout.prototype.layout = SSBL_layout;
// Define a string containing the resource specification for the controls
res = "dialog { \
    whichInfo: DropDownList { alignment:’left’ }, \
    allGroups: Panel { orientation:’stack’, \
    info: Group { orientation: ’column’, \
    name: Group { orientation: ’row’, \
    s: StaticText { text:’Name:’ }, \
    e: EditText { characters: 30 } \
    } \
    }, \
    workInfo: Group { orientation: ’column’, \
    name: Group { orientation: ’row’, \
    s: StaticText { text:’Company name:’ }, \
    e: EditText { characters: 30 } \
    } \
    }, \
    }, \
    buttons: Group { orientation: ’row’, alignment: ’right’, \
    okBtn: Button { text:’OK’, properties:{name:’ok’} }, \
    cancelBtn: Button { text:’Cancel’, properties:{name:’cancel’} } \
    } \
    }";

// Create window using resource spec
win = new Window(res);
// Create list items, select first one
win.whichInfo.onChange = function ()
{
    if (this.selection != null)
    {
        for (var g = 0; g < this.items.length; g++)
            this.items[g].group.visible = false;
        this.selection.group.visible = true;
    }
}
var item = win.whichInfo.add(’item’, ’Personal Info’);
item.group = win.allGroups.info;
item = win.whichInfo.add(’item’, ’Work Info’);
item.group = win.allGroups.workInfo;
win.whichInfo.selection = win.whichInfo.items[0];
// Override the default layout manager for the ’buttons’ group
// with custom layout manager
win.buttons.layout = new StairStepButtonLayout(win.buttons);
win.center();
win.show();

3.自动布局算法

当一个脚本创建一个窗口对象及其元素并第一次显示它时，可视的user-interface-platform窗口和控件就会被创建。此时，如果脚本没有指定控件的显式位置，那么所有控件都位于容器内的[0,0]位置，并具有默认尺寸。在窗口可见之前，布局管理器的布局方法被调用来分配所有元素及其容器的位置和大小。
默认的AutoLayoutManager的layout方法在初始调用窗口对象的show方法时执行以下步骤:

读取管理容器的bounds属性;如果未定义，继续自动布局。如果已定义，则假定脚本已显式地将元素放置在该容器中，并取消布局操作(如果location和size属性都已设置，则这等价于设置bounds属性，布局不会继续进行)。
从容器的边距和间距属性确定容器的边距和元素间间距，从容器的orientation和alignChildren属性确定其子元素的方向和对齐方式。如果这些属性中有未定义的，使用从平台和特定于用户界面框架的默认值获得的默认设置。
枚举子元素，并为每个子元素:
如果子对象是容器，调用它的布局管理器(也就是说，为容器再次执行整个算法)。读取其对齐属性;如果已定义，则使用其父容器alignChildren属性覆盖其父容器建立的默认对齐方式。读取它的size属性:如果定义了，则使用它来确定子节点的维度。如果未定义，则读取其preferredSize属性以获取子节点的维度。忽略子进程的location属性。所有每个孩子的信息都将收集起来供以后使用。
4.根据方向，使用元素间间距和容器的边距计算行或列中每个子元素的实际位置。
根据子维度确定列、行或堆栈维度。
对每个子元素使用所需的对齐方式，相对于其容器的边缘调整其实际位置。
为每个子元素设置bounds属性。
根据子元素的行或列的边距和维数设置容器的preferredSize属性。

4.自动布局的限制

以下限制适用于自动布局机制:
默认的布局管理器不会尝试布局一个具有已定义边界属性的容器。脚本程序员可以通过为容器定义一个定制的布局管理器来覆盖这个行为。在初始布局发生后，布局机制不会跟踪对元素大小的更改。该脚本可以通过调用布局管理器的布局方法来初始化另一个布局，并可以通过将可选参数传递为true来强制管理器重新计算所有子容器的大小。
合理的脚本代码可以有效的提高工作效率，减少重复劳动。

欢迎光临知了软件开发网络平台，本公司定制开发各类软件，主要方向为桌面专业软件开发和插件定制开发，桌面软件主要包括文字图形识别类软件，信息管理类软件，3D打印类软件，视频类软件以及其它涉及专业的各类图形图像处理软件。插件包含AE插件，AI插件，PS插件，PDF插件，3DMAX插件以及Word，Excel等Office插件开发。详情请咨询，微信QQ:312117271，手机:18928899728。公司网址:http://www.zhiliaos.com