再談webOS開發Enyo基礎控件
作者：大熊
這篇文檔中，我們再詳細的研究一下kinds, components和controls–這是我們在講解webOS開發的Enyo基礎中涉及到的三個基本的概念。
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;
- }
- });
責任編輯：佚名
來源：
baiyuxiong
