Kinds

在Enyo中，幾乎所有的代碼都放在叫做kind的對象prototype中。 kind是用enyo.kind工廠方法創建的constructor。

Enyo中的kind與Java或C++中的class類似。例如，kinds通過子kinds繼承superkinds的屬性和方法的方式，提供了一種標準的實現繼承的機制。

這里是一個kinds的例子，它在二維和三維空間中表示一個點. 注意第二個kind (Point3D)繼承自***個kind(Point)：

enyo.kind({ 
 
name: "Point", 
 
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 + ", " + this.y; 
 
} 
 
}); 
 
  

enyo.kind({ 
 
name: "Point3D", 
 
kind: "Point", 
 
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) + ", " + 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: "RandomizedTimer", 
 
kind: enyo.Component, 
 
baseInterval: 100, 
 
percentTrigger: 50, 
 
events: { 
 
onTriggered: "" 
 
}, 
 
create: function() { 
 
this.inherited(arguments); 
 
this.job = window.setInterval(enyo.hitch(this, "timer"), this.baseInterval); 
 
}, 
 
destroy: function() { 
 
window.clearInterval(this.job); 
 
}, 
 
timer: function() { 
 
if (Math.random() < this.percentTrigger * 0.01) { 
 
this.doTriggered(); 
 
} 
 
} 
 
}); 
 
  

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

Controls

Control對象是一個控制DOM節點的component(i.e., 一個界面中的元素)。Controls通常是可見的，用戶直接與它們交互。例如按鈕或者輸入框都是controls，但在Enyo中，一個control可能會變得和整個程序一樣復雜。

在下面的例子中我們定義了一個Circle control并把它放在TrafficLight control中：

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

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