再談webOS開(kāi)發(fā)Enyo基礎(chǔ)控件
Kinds
在Enyo中，幾乎所有的代碼都放在叫做kind的對(duì)象prototype中。 kind是用enyo.kind工廠方法創(chuàng)建的constructor。
Enyo中的kind與Java或C++中的class類(lèi)似。例如，kinds通過(guò)子kinds繼承superkinds的屬性和方法的方式，提供了一種標(biāo)準(zhǔn)的實(shí)現(xiàn)繼承的機(jī)制。
這里是一個(gè)kinds的例子，它在二維和三維空間中表示一個(gè)點(diǎn). 注意第二個(gè)kind (Point3D)繼承自***個(gè)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對(duì)象是Enyo的基礎(chǔ)構(gòu)建塊。所有的Components擁有同樣的特性，不同的Components可以按一種標(biāo)準(zhǔn)的方式協(xié)同工作。例如，所有的components有一個(gè)name屬性(字符串)。一個(gè)組件component可能會(huì)創(chuàng)建其它的components，這被稱(chēng)為擁有。每個(gè)component維護(hù)著一組它自己擁有的component，并負(fù)責(zé)這些component的生命周期。
下面是兩個(gè)component的kind定義。運(yùn)行時(shí)，一個(gè)SimulatedMessage對(duì)象創(chuàng)建(并擁有)一個(gè)RandomizedTimer對(duì)象，RandomizedTimer可以隨機(jī)間隔的模擬發(fā)送服務(wù)消息：
- 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對(duì)象是一個(gè)控制DOM節(jié)點(diǎn)的component(i.e., 一個(gè)界面中的元素)。Controls通常是可見(jiàn)的，用戶(hù)直接與它們交互。例如按鈕或者輸入框都是controls，但在Enyo中，一個(gè)control可能會(huì)變得和整個(gè)程序一樣復(fù)雜。
在下面的例子中我們定義了一個(gè)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;
- }
- });
