脚本分析07：对齐子元素

这个脚本很简单，所以学习价值不是很大，尤其是使用两个参数定位子元素，可是实际上其中一个参数都是相同的，比如第一个窗口的子元素第一个参数都是fill，第二个窗口第二个参数都是center。

拿第二个窗口举例，更改center为top或buttom其实并没有什么变化，可能是因为窗口没有固定大小，随着子元素实际大小而变化吧。

同样的推荐先看一下http://worldcter.com/1012.html中的内容，在对齐元素那一章节。

这里先贴出相应部分。

行中的元素可以使用以下方法沿着垂直对齐：

top：元素的上边缘位于容器的顶部边缘。
bottom：元素的下边缘位于容器的底部边缘。
center：元素在容器的顶部和底部边缘之间居中。
fill：调整元素的高以填充容器上下边缘的高。

列中的元素可以使用以下方法沿着水平对齐：

left：元素的左边缘位于容器的左边缘。
right：元素的右边缘位于容器的右边缘。
center：元素位于容器左右边缘的中心。
fill：调整元素的宽度以填充容器左右边缘的宽度。

块中的元素可以使用以下方式沿着横轴或纵轴对齐：

top：元素的上边缘位于容器的顶部边缘，并在容器左右边缘居中。
bottom：元素的下边缘位于容器的底部边缘，并在容器的左右边缘居中。
left：元素的左边缘位于容器的左边缘，并居中在容器的上下边缘之间。
right：元素的右边缘位于容器的右边缘，并居中在容器的上下边缘之间。
center：元素居中在容器的上下左右边缘之间。
fill：使用元素的高填充容器上下边缘之间的高，使用元素的宽填充容器左右边缘的宽。

/**
 * @fileoverview 演示 ScriptUI 组件的双向对齐
 * @class 演示 ScriptUI 组件的双向对齐
 * 使用方式
 * 在 ESTK 中运行这个片段，你可以选择任意应用作为演示目标
 * 你可以看到两个非模态对话框，它们展示了 ScriptUI 组件在横向或纵向面向的容器中的放置方式
 * 描述
 * 创建两个两个窗口演示对齐属性的双向形式。使用这种形式可以在在横向容器中纵向放置元素，反之同理
 * @constructor Constructor
 * 因为原脚本显示的是第二个窗口，所以分析也从第二个窗口开始了
 */

function SnpAlignElements() {
  /**
   * 保持对我们创建的窗口的引用(reference)
   * @type Widnow对象
   */
  this.windowRef = null;
}

/**
 * 代码片段的函数部分，创建两个不同对齐设定的窗口
 * @return 如果脚本如期运行则返回 True，否则返回 flase
 * 对于这个脚本，当前没有可以返回 false 的代码路径
 * 作为一个代码片段，可以运行在任何支持 ScriptUI 的应用中
 * @type 布尔
 */
SnpAlignElements.prototype.run = function() {
  // 这个函数是向 ESTK 的 JavaScript Console 窗口输出文字的
  // 如果在ae脚本中使用这个函数，在运行脚本时会自动打开 ESTK
  // $.writeln("关于运行 SnpAlignElements");
  var retval = true;
  var desc1 = "演示在纵向面向的组中垂直放置元素";
  // 垂直对齐窗口的资源标识符
  var res1 =
    "palette {\
      properties:{ closeButton:true, maximizeButton:false,\
        minimizeButton:false, resizeable:false },\
      orientation:'row', spacing:2, margins:5,\
      alignChildren:['left','fill'],\
      description: StaticText { properties:{ multiline:true },\
      characters:15 },\
      separator: Panel { preferredSize:[0,120] },\
      g1: Group {\
        orientation:'column', spacing:2,\
        x1: EditText { text:'top', alignment:['fill','top'] },\
        x2: EditText { text:'center', alignment:['fill','center'] },\
        x3: EditText { text:'bottom', alignment:['fill','bottom'] }\
      },\
      g2: Group {\
        orientation:'column', spacing:2,\
        x1: EditText { text:'top', alignment:['fill','top'] },\
        x2: EditText { text:'top', alignment:['fill','top'] },\
        x3: EditText { text:'bottom', alignment:['fill','bottom'] }\
      },\
      g3: Group {\
        orientation:'column', spacing:2,\
        x1: EditText { text:'top', alignment:['fill','top'] },\
        x2: EditText { text:'bottom', alignment:['fill','bottom'] },\
        x3: EditText { text:'bottom', alignment:['fill','bottom'] }\
      },\
      g4: Group {\
        orientation:'column', spacing:2,\
        x1: EditText { text:'top', alignment:['fill','top'] },\
        x2: EditText { text:'fill', alignment:['fill','fill'] },\
        x3: EditText { text:'bottom', alignment:['fill','bottom'] }\
      },\
    }";
  var dw = demo("在纵向中垂直定位", desc1, res1, [300,50]);

  var desc2 = "演示在横向面向的组中水平放置元素";
  // 水平对齐窗口的资源标识符
  // 注意那个 separator 面板，有个初始大小，300px宽，0px高
  // 正如它的名字一样，起到一个分隔符的作用，将窗口撑到300px宽，同时又不显示在UI中
  var res2 =
    "window {\
      properties:{ closeButton:true, maximizeButton:false,\
        minimizeButton:false, resizeable:ture },\
      orientation:'column', spacing:5, margins:10,\
      alignChildren:['fill','top'],\
      description: StaticText { properties:{ multiline:true },\
      characters:30 },\
      separator: Panel { preferredSize:[300,0] },\
      g1: Group {\
        orientation:'row', spacing:2,\
        x1: EditText { text:'left', alignment:['left','center'] },\
        x2: EditText { text:'center', alignment:['center','center'] },\
        x3: EditText { text:'right', alignment:['right','center'] }\
      },\
      g2: Group {\
        orientation:'row', spacing:2,\
        x1: EditText { text:'left', alignment:['left','center'] },\
        x2: EditText { text:'left', alignment:['left','center'] },\
        x3: EditText { text:'right', alignment:['right','center'] }\
      },\
      g3: Group {\
        orientation:'row', spacing:2,\
        x1: EditText { text:'left', alignment:['left','center'] },\
        x2: EditText { text:'right', alignment:['right','center'] },\
        x3: EditText { text:'right', alignment:['right','center'] }\
      },\
      g4: Group {\
        orientation:'row', spacing:2,\
        x1: EditText { text:'left', alignment:['left','center'] },\
        x2: EditText { text:'fill', alignment:['fill','center'] },\
        x3: EditText { text:'right', alignment:['right','center'] }\
      },\
    }";
  // 可通过注释掉下面的代码来显示第一个窗口，否则直接显示第二个窗口
  dw = demo("在横向中水平定位", desc2, res2, dw);

  function demo(title, description, resource, ref) {
    var w = new Window(resource);
    w.text = title;
    // description 是资源字符串中一个控件的名称
    w.description.text = description;
    // frameBounds 是窗口的属性，表示窗口的框架在屏幕坐标系上的边界
    if (typeof ref.frameBounds != "undefined") {
      // 窗口的左上角位置，等同于[frameBounds.x,frameBounds.y]
      // 设置这个值来移动窗口框架到屏幕的指定位置，frameBounds值也会响应改变。
      w.frameLocation = [ref.frameBounds.left, ref.frameBounds.bottom + 5];
    } else {
      // 这里的 ref 实际上是一个窗口对象，因为下面返回的 w，即函数内创建的窗口
      w.frameLocation = ref;
    }
    // 这里想测试下窗口的 oapctity 属性，但是不管是在创造属性中声明还是像下面那样单独声明都不起作用
    // 但是运行不会报错，所以应该是Ae不支持这个属性吧
    //w.opactity = 0.9;
    w.show();
    return w;
  }
  // $.writeln("运行 SnpAlignElements");
  // 说实在的，这个 retval 参数逼用没有
  return retval;
}

new SnpAlignElements().run();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

/**

* @fileoverview 演示 ScriptUI 组件的双向对齐

* @class 演示 ScriptUI 组件的双向对齐

* 使用方式

* 在 ESTK 中运行这个片段，你可以选择任意应用作为演示目标

* 你可以看到两个非模态对话框，它们展示了 ScriptUI 组件在横向或纵向面向的容器中的放置方式

* 描述

* 创建两个两个窗口演示对齐属性的双向形式。使用这种形式可以在在横向容器中纵向放置元素，反之同理

* @constructor Constructor

* 因为原脚本显示的是第二个窗口，所以分析也从第二个窗口开始了

function SnpAlignElements() {

/**

* 保持对我们创建的窗口的引用(reference)

* @type Widnow对象

this.windowRef = null;

}

/**

* 代码片段的函数部分，创建两个不同对齐设定的窗口

* @return 如果脚本如期运行则返回 True，否则返回 flase

* 对于这个脚本，当前没有可以返回 false 的代码路径

* 作为一个代码片段，可以运行在任何支持 ScriptUI 的应用中

* @type 布尔

SnpAlignElements.prototype.run = function() {

// 这个函数是向 ESTK 的 JavaScript Console 窗口输出文字的

// 如果在ae脚本中使用这个函数，在运行脚本时会自动打开 ESTK

// $.writeln("关于运行 SnpAlignElements");

var retval = true;

var desc1 = "演示在纵向面向的组中垂直放置元素";

// 垂直对齐窗口的资源标识符

var res1 =

"palette {\

properties:{ closeButton:true, maximizeButton:false,\

minimizeButton:false, resizeable:false },\

orientation:'row', spacing:2, margins:5,\

alignChildren:['left','fill'],\

description: StaticText { properties:{ multiline:true },\

characters:15 },\

separator: Panel { preferredSize:[0,120] },\

g1: Group {\

orientation:'column', spacing:2,\

x1: EditText { text:'top', alignment:['fill','top'] },\

x2: EditText { text:'center', alignment:['fill','center'] },\

x3: EditText { text:'bottom', alignment:['fill','bottom'] }\

},\

g2: Group {\

orientation:'column', spacing:2,\

x1: EditText { text:'top', alignment:['fill','top'] },\

x2: EditText { text:'top', alignment:['fill','top'] },\

x3: EditText { text:'bottom', alignment:['fill','bottom'] }\

},\

g3: Group {\

orientation:'column', spacing:2,\

x1: EditText { text:'top', alignment:['fill','top'] },\

x2: EditText { text:'bottom', alignment:['fill','bottom'] },\

x3: EditText { text:'bottom', alignment:['fill','bottom'] }\

},\

g4: Group {\

orientation:'column', spacing:2,\

x1: EditText { text:'top', alignment:['fill','top'] },\

x2: EditText { text:'fill', alignment:['fill','fill'] },\

x3: EditText { text:'bottom', alignment:['fill','bottom'] }\

},\

}";

var dw = demo("在纵向中垂直定位", desc1, res1, [300,50]);

var desc2 = "演示在横向面向的组中水平放置元素";

// 水平对齐窗口的资源标识符

// 注意那个 separator 面板，有个初始大小，300px宽，0px高

// 正如它的名字一样，起到一个分隔符的作用，将窗口撑到300px宽，同时又不显示在UI中

var res2 =

"window {\

properties:{ closeButton:true, maximizeButton:false,\

minimizeButton:false, resizeable:ture },\

orientation:'column', spacing:5, margins:10,\

alignChildren:['fill','top'],\

description: StaticText { properties:{ multiline:true },\

characters:30 },\

separator: Panel { preferredSize:[300,0] },\

g1: Group {\

orientation:'row', spacing:2,\

x1: EditText { text:'left', alignment:['left','center'] },\

x2: EditText { text:'center', alignment:['center','center'] },\

x3: EditText { text:'right', alignment:['right','center'] }\

},\

g2: Group {\

orientation:'row', spacing:2,\

x1: EditText { text:'left', alignment:['left','center'] },\

x2: EditText { text:'left', alignment:['left','center'] },\

x3: EditText { text:'right', alignment:['right','center'] }\

},\

g3: Group {\

orientation:'row', spacing:2,\

x1: EditText { text:'left', alignment:['left','center'] },\

x2: EditText { text:'right', alignment:['right','center'] },\

x3: EditText { text:'right', alignment:['right','center'] }\

},\

g4: Group {\

orientation:'row', spacing:2,\

x1: EditText { text:'left', alignment:['left','center'] },\

x2: EditText { text:'fill', alignment:['fill','center'] },\

x3: EditText { text:'right', alignment:['right','center'] }\

},\

}";

// 可通过注释掉下面的代码来显示第一个窗口，否则直接显示第二个窗口

dw = demo("在横向中水平定位", desc2, res2, dw);

function demo(title, description, resource, ref) {

var w = new Window(resource);

w.text = title;

// description 是资源字符串中一个控件的名称

w.description.text = description;

// frameBounds 是窗口的属性，表示窗口的框架在屏幕坐标系上的边界

if (typeof ref.frameBounds != "undefined") {

// 窗口的左上角位置，等同于[frameBounds.x,frameBounds.y]

// 设置这个值来移动窗口框架到屏幕的指定位置，frameBounds值也会响应改变。

w.frameLocation = [ref.frameBounds.left, ref.frameBounds.bottom + 5];

} else {

// 这里的 ref 实际上是一个窗口对象，因为下面返回的 w，即函数内创建的窗口

w.frameLocation = ref;

}

// 这里想测试下窗口的 oapctity 属性，但是不管是在创造属性中声明还是像下面那样单独声明都不起作用

// 但是运行不会报错，所以应该是Ae不支持这个属性吧

//w.opactity = 0.9;

w.show();

return w;

}

// $.writeln("运行 SnpAlignElements");

// 说实在的，这个 retval 参数逼用没有

return retval;

}

new SnpAlignElements().run();

打赏

更多笔记：

Leave a Reply Cancel reply