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;
- }
- });
