再谈webOS开发Enyo基础控件

立方 · 发表于 2013-2-4 02:32:46

Kinds
在Enyo中，几乎所有的代码都放在叫做kind的对象prototype中。 kind是用enyo.kind工厂方法创建的constructor。
Enyo中的kind与Java或C++中的class类似。例如，kinds通过子kinds继承superkinds的属性和方法的方式，提供了一种标准的实现继承的机制。
这里是一个kinds的例子，它在二维和三维空间中表示一个点. 注意第二个kind (Point3D)继承自第一个kind(Point)：

enyo.kind({
name: &quot;Point&quot;,
x: 0,
y: 0,
constructor: function(x, y) {
this.x = x;
this.y = y;
},
translate: function(dx, dy) {
this.x += dx;
this.y += dy;
},
toString: function() {
return this.x + &quot;, &quot; + this.y;
}
});

enyo.kind({
name: &quot;Point3D&quot;,
kind: &quot;Point&quot;,
z: 0,
constructor: function(x, y, z) {
this.inherited(arguments);
this.z = z;
},
translate: function(dx, dy, dz) {
this.inherited(arguments);
this.z += dz;
},
toString: function() {
return this.inherited(arguments) + &quot;, &quot; + this.z;
}
});
p = new Point3D(1, 1, 1);

Components
Component对象是Enyo的基础构建块。所有的Components拥有同样的特性，不同的Components可以按一种标准的方式协同工作。例如，所有的components有一个name属性(字符串)。一个组件component可能会创建其它的components，这被称为拥有。每个component维护着一组它自己拥有的component，并负责这些component的生命周期。
下面是两个component的kind定义。运行时，一个SimulatedMessage对象创建(并拥有)一个RandomizedTimer对象，RandomizedTimer可以随机间隔的模拟发送服务消息：

enyo.kind({
name: &quot;RandomizedTimer&quot;,
kind: enyo.Component,
baseInterval: 100,
percentTrigger: 50,
events: {
onTriggered: &quot;&quot;
},
create: function() {
this.inherited(arguments);
this.job = window.setInterval(enyo.hitch(this, &quot;timer&quot;), this.baseInterval);
},
destroy: function() {
window.clearInterval(this.job);
},
timer: function() {
if (Math.random() < this.percentTrigger * 0.01) {
this.doTriggered();
}
}
});

enyo.kind({
name: &quot;SimulatedMessage&quot;,
kind: enyo.Component,
components: [
{name: &quot;timer&quot;, kind: RandomizedTimer, percentTrigger: 10,
onTriggered: &quot;timerTriggered&quot;}
],
timerTriggered: function() {
this.log(&quot;Simulated Service Message Occurred&quot;);
}
});

Controls
Control对象是一个控制DOM节点的component(i.e., 一个界面中的元素)。Controls通常是可见的，用户直接与它们交互。例如按钮或者输入框都是controls，但在Enyo中，一个control可能会变得和整个程序一样复杂。
在下面的例子中我们定义了一个Circle control并把它放在TrafficLight control中：

enyo.kind({
name: &quot;Circle&quot;,
kind: &quot;Control&quot;,
published: {
color: &quot;magenta&quot;,
bgColor: &quot;black&quot;
},
content: &quot;Hi&quot;,
style: &quot;padding: 2px 6px; border: 3px solid; border-radius: 20px;
cursor: pointer;&quot;,
create: function() {
this.inherited(arguments);
this.colorChanged();
},
colorChanged: function() {
this.applyStyle(&quot;border-color&quot;, this.color);
},
bgColorChanged: function() {
this.applyStyle(&quot;background-color&quot;, this.bgColor);
},
mousedown: function() {
this.applyStyle(&quot;background-color&quot;, &quot;white&quot;);
},
mouseup: function() {
this.applyStyle(&quot;background-color&quot;, &quot;black&quot;);
}
});

enyo.kind({
name: &quot;TrafficLight&quot;,
kind: &quot;Control&quot;,
style: &quot;position: absolute; padding: 4px; border: 1px solid black;
background-color: silver;&quot;},
components: [
{kind: &quot;Circle&quot;, color: &quot;red&quot;, onclick: &quot;circleClick&quot;},
{kind: &quot;Circle&quot;, color: &quot;yellow&quot;, onclick: &quot;circleClick&quot;},
{kind: &quot;Circle&quot;, color: &quot;green&quot;, onclick: &quot;circleClick&quot;}
],
circleClick: function(inSender) {
var lights = {red: &quot;tomato&quot;, yellow: &quot;#FFFF80&quot;, green: &quot;lightgreen&quot;};
if (this.lastCircle) {
this.lastCircle.setBgColor(&quot;black&quot;);
}
this.lastCircle.setBgColor(lights[inSender.color]);
this.lastCircle = inSender;
}
});

【编辑推荐】

		自动登录	找回密码
密码			立即注册

再谈webOS开发Enyo基础控件

浏览过的版块