中国领先的IT技术网站
|
|

再谈webOS开发Enyo基础控件

这篇文档中,我们再详细的研究一下kinds, components和controls–这是我们在讲解webOS开发的Enyo基础中涉及到的三个基本的概念。

作者:大熊来源:baiyuxiong|2011-07-07 10:40

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


Kinds

在Enyo中,几乎所有的代码都放在叫做kind的对象prototype中。 kind是用enyo.kind工厂方法创建的constructor。

Enyo中的kind与Java或C++中的class类似。例如,kinds通过子kinds继承superkinds的属性和方法的方式,提供了一种标准的实现继承的机制。

这里是一个kinds的例子,它在二维和三维空间中表示一个点. 注意第二个kind (Point3D)继承自第一个kind(Point):

  1. enyo.kind({ 
  2.  
  3. name: "Point", 
  4.  
  5. x: 0, 
  6.  
  7. y: 0, 
  8.  
  9. constructor: function(x, y) { 
  10.  
  11. this.x = x; 
  12.  
  13. this.y = y; 
  14.  
  15. }, 
  16.  
  17. translate: function(dx, dy) { 
  18.  
  19. this.x += dx; 
  20.  
  21. this.y += dy; 
  22.  
  23. }, 
  24.  
  25. toString: function() { 
  26.  
  27. return this.x + ", " + this.y; 
  28.  
  29.  
  30. }); 
  31.  
  32.   
  1. enyo.kind({ 
  2.  
  3. name: "Point3D", 
  4.  
  5. kind: "Point", 
  6.  
  7. z: 0, 
  8.  
  9. constructor: function(x, y, z) { 
  10.  
  11. this.inherited(arguments); 
  12.  
  13. this.z = z; 
  14.  
  15. }, 
  16.  
  17. translate: function(dx, dy, dz) { 
  18.  
  19. this.inherited(arguments); 
  20.  
  21. this.z += dz; 
  22.  
  23. }, 
  24.  
  25. toString: function() { 
  26.  
  27. return this.inherited(arguments) + ", " + this.z; 
  28.  
  29.  
  30. }); 
  31.  
  32. p = new Point3D(1, 1, 1); 

Components

Component对象是Enyo的基础构建块。所有的Components拥有同样的特性,不同的Components可以按一种标准的方式协同工作。例如,所有的components有一个name属性(字符串)。一个组件component可能会创建其它的components,这被称为拥有。每个component维护着一组它自己拥有的component,并负责这些component的生命周期。

下面是两个component的kind定义。运行时,一个SimulatedMessage对象创建(并拥有)一个RandomizedTimer对象,RandomizedTimer可以随机间隔的模拟发送服务消息:

  1. enyo.kind({ 
  2.  
  3. name: "RandomizedTimer", 
  4.  
  5. kind: enyo.Component, 
  6.  
  7. baseInterval: 100, 
  8.  
  9. percentTrigger: 50, 
  10.  
  11. events: { 
  12.  
  13. onTriggered: "" 
  14.  
  15. }, 
  16.  
  17. create: function() { 
  18.  
  19. this.inherited(arguments); 
  20.  
  21. this.job = window.setInterval(enyo.hitch(this, "timer"), this.baseInterval); 
  22.  
  23. }, 
  24.  
  25. destroy: function() { 
  26.  
  27. window.clearInterval(this.job); 
  28.  
  29. }, 
  30.  
  31. timer: function() { 
  32.  
  33. if (Math.random() < this.percentTrigger * 0.01) { 
  34.  
  35. this.doTriggered(); 
  36.  
  37.  
  38.  
  39. }); 
  40.  
  41.   
  1. enyo.kind({ 
  2.  
  3. name: "SimulatedMessage", 
  4.  
  5. kind: enyo.Component, 
  6.  
  7. components: [ 
  8.  
  9. {name: "timer", kind: RandomizedTimer, percentTrigger: 10, 
  10.  
  11. onTriggered: "timerTriggered"} 
  12.  
  13. ], 
  14.  
  15. timerTriggered: function() { 
  16.  
  17. this.log("Simulated Service Message Occurred"); 
  18.  
  19.  
  20. }); 

Controls

Control对象是一个控制DOM节点的component(i.e., 一个界面中的元素)。Controls通常是可见的,用户直接与它们交互。例如按钮或者输入框都是controls,但在Enyo中,一个control可能会变得和整个程序一样复杂。

在下面的例子中我们定义了一个Circle control并把它放在TrafficLight control中:

  1. enyo.kind({ 
  2.  
  3. name: "Circle", 
  4.  
  5. kind: "Control", 
  6.  
  7. published: { 
  8.  
  9. color: "magenta", 
  10.  
  11. bgColor: "black" 
  12.  
  13. }, 
  14.  
  15. content: "Hi", 
  16.  
  17. style: "padding: 2px 6px; border: 3px solid; border-radius: 20px; 
  18.  
  19. cursor: pointer;", 
  20.  
  21. create: function() { 
  22.  
  23. this.inherited(arguments); 
  24.  
  25. this.colorChanged(); 
  26.  
  27. }, 
  28.  
  29. colorChanged: function() { 
  30.  
  31. this.applyStyle("border-color", this.color); 
  32.  
  33. }, 
  34.  
  35. bgColorChanged: function() { 
  36.  
  37. this.applyStyle("background-color", this.bgColor); 
  38.  
  39. }, 
  40.  
  41. mousedown: function() { 
  42.  
  43. this.applyStyle("background-color", "white"); 
  44.  
  45. }, 
  46.  
  47. mouseup: function() { 
  48.  
  49. this.applyStyle("background-color", "black"); 
  50.  
  51.  
  52. }); 
  1. enyo.kind({ 
  2.  
  3. name: "TrafficLight", 
  4.  
  5. kind: "Control", 
  6.  
  7. style: "position: absolute; padding: 4px; border: 1px solid black; 
  8.  
  9. background-color: silver;"}, 
  10.  
  11. components: [ 
  12.  
  13. {kind: "Circle", color: "red", onclick: "circleClick"}, 
  14.  
  15. {kind: "Circle", color: "yellow", onclick: "circleClick"}, 
  16.  
  17. {kind: "Circle", color: "green", onclick: "circleClick"} 
  18.  
  19. ], 
  20.  
  21. circleClick: function(inSender) { 
  22.  
  23. var lights = {red: "tomato", yellow: "#FFFF80", green: "lightgreen"}; 
  24.  
  25. if (this.lastCircle) { 
  26.  
  27. this.lastCircle.setBgColor("black"); 
  28.  
  29.  
  30. this.lastCircle.setBgColor(lights[inSender.color]); 
  31.  
  32. this.lastCircle = inSender
  33.  
  34.  
  35. }); 

【编辑推荐】

  1. webOS发布新的应用程序开发框架Enyo
  2. 在Enyo框架下安装webOS 3.0 SDK教程
  3. 在Enyo框架下编写webOS的“hello world!”
  4. 讲解webOS开发的Enyo基础
【责任编辑:立方 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络管理员考前辅导

本书按照国家人事部、信息产业部全国计算机技术与软件专业资格(水平)考试要求编写,内容紧扣《网络管理员考试大纲》。全书共分为11章,覆...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)