Question

编辑控件通常需要直接访问控件对象。然而，把所有可变对象分配给变量会将UI代码弄得一团乱。因此，Tabris.js API 提供了通过某些属性查找控件的方法，甚至一次操作多个控件。可以通过类型、ID、class 属性或基于CSS的格式来选择控件。

通过类型选择控件

根据控件类型选择控件是最简单的方法。例如，下面的代码会取消页面中所有选择框的选中状态：

page.find('CheckBox').set('selection', false);

通过ID选择控件

控件的id属性和其他属性一样。它的初始值是undefined，因此你需要自己为控件指定ID。通常在创建控件时需要这样做：

new Button({id: 'submit'});

为了使用ID选择控件，可以使用选择器表达式'#id'，其中 id 是控件的ID：

page.find('#submit').set('enabled', false);

ID应该是唯一的。尽管这不是框架强制要求的，但在组件中不使用相同的ID是比较好的实践，以避免混淆。

通过class属性选择控件

class是用空格分割“class”列表的一个字符串。class是一个状态或类别的名字，从而使控件能够被辨识。它只能包含字母、数字、_ 和 -。

new TextView({class: 'label important'});

Class可以混用、复用，并且可以在任何控件上、在任何时间改变。使用classList属性是比较方便的方式：

textView.classList.push('important');

为了使用class选择控件，使用选择器表达式'.class'，其中 class 是class名：

page.find('.important').set('textColor', 'red');

选择器表达式

支持下面的选择器表达式：

• '*' 匹配全部控件。
• 'Type' 匹配类型是所提供类型的控件，比如'Button' 匹配全部Button控件。
• '.class' 匹配class列表中具有所提供class的控件，比如'.foo' 匹配class被设置为'foo'的控件，但也匹配'foo bar。
• '#id' 匹配具有所提供ID的控件，例如'#foo' 匹配所有ID是'foo'的控件。

选择器函数

所有接受选择器表达式的方法也可以以一个函数作为参数来调用，从而检测集合中的每一个控件。为每个控件调用该函数，如果函数返回true就包含控件，返回false则跳过。比如，下面的代码片段会选择页面中所有可见的控件：

let visibleChildren = page.children(widget => widget.visible);

使用选择器

下面的控件方法接收选择器表达式作为参数：

• widget.find(selector) 选择匹配选择器的所有后代。
• widget.children(selector) 选择匹配选择器的所有直接子控件，但不包括更深层次的控件。
• widget.siblings(selector) 选择匹配选择器的所有兄弟控件。

这些方法返回一个WidgetCollection。你可以使用first() 和 last()，或者使用数组索引获取集合中的控件：

let submitButton = page.find('#submit').first(); // or
let submitButton = page.find('#submit')[0];

你也可以为选择的控件设置属性，而不用获取它们：

page.find('.input').set('enabled', false);

apply方法

配置组件中的多个控件的高效方式是，在父控件中使用 apply() 方法。

apply方法的原理

• apply({<selector: properties>*})

apply方法只需调用一次，就可以用选择器将不同的属性集合应用到不同的控件上。比如，将背景颜色应用到页面中的所有控件，可以这样调用：

page.apply({'*': {background: 'green'}});

你可以将不同的属性设置到不同的控件上：

page.apply({
  '#okbutton': {text: 'OK!', background: 'yellow'},
  '#cancelbutton': {text: 'Cancel!', textColor: 'red'}
});

这些属性被应用的顺序，取决于选择器的类型。顺序是：

• '*' > 'Type' > '.class' > '#id'

例如，下面的调用会把所有的控件设置为蓝色，但Button是绿色、'#mybutton'是红色。

page.apply({
  '#mybutton': {background: 'red'},
  'Button': {background: 'green'},
  '*': {background: 'blue'}
});

在对象字面量中看到的属性顺序是没有意义的。因为在EcmaScript标准中，JavaScript对象成员没有明确的顺序。

如何使用

虽然我们在上面的示例中使用的是对象字面量，但是apply方法可以非常高效地与模块一起使用，从而可以从代码中获取大多数或所有属性值（除了ID）。

试想一下，比如，你想根据地区为控件设置不同的文字。你可以这样做：

let lang = device.language;
try {
  page.apply(module.require('./texts-' + lang));
} catch() {
  // fallback if the desired language file does not exist:
  page.apply(module.require('./texts-en'));
}

由于JSON文件可以作为模块，语言文件可以（例如texts-en.json）像下面这样：

{
  '#okbutton': {'text': 'OK'},
  '#cancelbutton': {'text': 'Cancel'}
}

另一种模式是始终使用相同的模块…

page.apply(module.require('./texts'));

然后使用模块中的脚本计算实际值：

let texts = {
  en: {
    '#okbutton': {text: 'OK!'}
    '#cancelbutton': {text: 'Cancel!'}
  },
  //...
};
module.exports = texts[device.language] || texts.en;

同样的模式也可以用来设置针对不同平台的颜色、基于屏幕宽度的字体大小、或取决于设备方向的布局数据：

page.on('resize', ({width, height}) => {
  page.apply(require('./layout-' + (width > height) ? 'landscape' : 'portrait'));
});

最好是以页面的长宽比为基础来布局，而不是依据设备的方向。这是因为当设备旋转方向时，页面会先重新计算，然后再用动画旋转。而且，在未来的tabris.js版本中，页面可能并不总是和屏幕保持相同的长宽比。