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

再谈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);
[*]
[*]this.lastCircle = inSender;
[*]
[*]}
[*]
[*]});
【编辑推荐】

[*]webOS发布新的应用程序开发框架Enyo
[*]在Enyo框架下安装webOS 3.0 SDK教程
[*]在Enyo框架下编写webOS的“hello world！”
[*]讲解webOS开发的Enyo基础
页: [1]
查看完整版本: 再谈webOS开发Enyo基础控件