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

讲解webOS开发的Enyo基础

本文我们将讲解webOS开发的Enyo一些框架的基础概念. 包括:Kinds(种类), Components(组件), and Controls(控件)等内容。

作者:大熊来源:baiyuxiong.com|2011-07-04 10:55

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


这个文章和下一篇文章Enyo基础 – Kinds(种类), Components(组件), and Controls(控件)介绍了一些框架的基础概念. 我们假设作为一个Enyo开发者的你, 至少了解一些web开发的基础, 所以我们从与Enyo开发相关的HTML和JavaScript说起.

Enyo和HTML (Controls)

Control是一个基本的Enyo对象. Control工作原理各DOM节点有些类似; 事实上, 每个Control通常会转换成一个DOM的节点.

这里我们创建一个Control并把它渲染到body中:

  1. enyo.create({ 
  2. content: "Hello World" 
  3. }).renderInto(document.body); 

这小段代码会产生下面的HTML:

  1. <div>Hello World</div>

Control对象类似于一个DOM节点,你可能给它指定CSS名称和样式, 你也可以选择生成哪种类型的节点. (注意:在HTML中使用”class”来指定CSS名称, 不过class是JavaScript中的关键词, 所以Enyo规定使用”className”.)

  1. enyo.create({ 
  2.  
  3. nodeTag: "span", 
  4.  
  5. className: "a-css-class", 
  6.  
  7. style: "color: purple;", 
  8.  
  9. content: "Hello World" 
  10.  
  11. }).renderInto(document.body); 

这会产生下面的HTML:

  1. <span class="a-css-class" style="color: purple;">Hello World</span>

我们可以像使用DOM节点一样嵌套使用control.

  1. enyo.create({ 
  2.  
  3. components: [ 
  4.  
  5. {content: "I'm in a container"}, 
  6.  
  7. components: [ 
  8.  
  9. {content: "I'm in a container that's in the container."} 
  10.  
  11. ]}, 
  12.  
  13. {content: "I'm in the first container."} 
  14.  
  15.  
  16. }).renderInto(document.body); 

(注意我们在”components”块中定义control. Control kind派生自Component kind, 所以component是一个比control更基础的对象. 因而components块可以既包含Control对象,又包含非control对象.更多关于components 和control的信息请参考 “Enyo Basics基础kind, Components和Control”.)

为什么要为JavaScript生成HTML困惑呢? 我们的目标是去掉大家对Enyo的神秘色彩; 一旦我们开始创建程序, 我们将会发现使用control而不是HTML会减少很多问题.

例如, 一个明显的好处是control中可以装入很多复杂的渲染和行为:

  1. enyo.create({ 
  2.  
  3. components: [ 
  4.  
  5. // button with custom graphics 
  6.  
  7. {kind: "Button"}, 
  8.  
  9. // input box with special features like hinting and graphic fx 
  10.  
  11. {kind: "FancyInput"}, 
  12.  
  13. // one-of-many selector with custom graphics 
  14.  
  15. {kind: "RadioGroup", components: [ 
  16.  
  17. {label: "Alpha"}, 
  18.  
  19. {label: "Beta"}, 
  20.  
  21. {label: "Gamma"} 
  22.  
  23. ]} 
  24.  
  25.  
  26. }).renderInto(document.body); 

上面的代码会渲染出下面的效果:

Enyo和JavaScript (Kinds)

使用函数和prototype,JavaScript原生的支持对象模板和继承. 这里是一个标准的JavaScript用法:

  1. // 一个对象构造函数 
  2.  
  3. MyObject = function() { 
  4.  
  5. this.data = []; 
  6.  
  7. }; 
  8.  
  9. MyObject.prototype.toString = function() { 
  10.  
  11. return this.data.join(", "); 
  12.  
  13. }; 
  14.  
  15. //另外一个对象构造函数, 在第一个基础上建立 
  16.  
  17. MySpecialObject = function() { 
  18.  
  19. MyObject.apply(this, arguments); 
  20.  
  21. }; 
  22.  
  23. MySpecialObject.prototype = new MyObject(); 
  24.  
  25. MySpecialObject.prototype.toNumber = function() { 
  26.  
  27. return this.data.length; 
  28.  
  29. }; 
  30.  
  31. //创建实例 
  32.  
  33. mso = new MySpecialObject(); 

在保持JavaScript面向对象特性的同时, Enyo用紧凑的语法提供了一个产生构造函数(对象模板)的方法. 这种方法构建的Constructor有一些特性,我们叫它 kinds. 这种用来创建kind的方法叫做enyo.kind. 这里是一个enyo.kind的例子:

  1. // 一个kind 
  2.  
  3. enyo.kind({ 
  4.  
  5. name: "MyKind", 
  6.  
  7. constructor: function() { 
  8.  
  9. this.data = []; 
  10.  
  11. }, 
  12.  
  13. toString: function() { 
  14.  
  15. return this.data.join(", "); 
  16.  
  17.  
  18. }); 
  19.  
  20. // 在第一个kind的基础上建立的又一个kind 
  21.  
  22. enyo.kind({ 
  23.  
  24. name: "MySpecialKind", 
  25.  
  26. kind: "MyKind", 
  27.  
  28. toNumber: function() { 
  29.  
  30. return this.data.length; 
  31.  
  32.  
  33. }); 
  34.  
  35. // 创建一个实例 
  36.  
  37. msk = new MySpecialKind(); 

(注意: 我们为什么使用”kind”? 这些constructor不算是types或者classes, 而是一种特别的Object. 在db8中也有相似的概念, db8的record schema也叫做kind. 而且JavaScript使用原型继承基于类的继承, 所以在Enyo中使用”class” 会使用产生困惑.)

有一点很重要:enyo.kind并不神奇–它执行普通的步骤来产生一个constructor,只是隐藏了样板文件.

这个例子中有几点需要注意:

kind的名称是在属性块中指定的. 这个名称将会变成一个全局的变量用来引用kind. 把名称放在块中,可以很容易的使用namespace(命名空间). 例如:

  1. enyo.kind({name: "Super.Special.Kind"}); 

Enyo会自动创建namespaces Super和Super.Special, 且 Super.Special.Kind将引用到新创建的constructor.

初始化代码放在constructor方法中. 这和第一个例子中的MyObject方法体非常类似. 主要的区别是当继承自kind时, constructor 方法并不被调用 (如果你仔细看第一个例子, 你可以发现调用MyObject来为MySpecialObject创建prototype, MySpecialObject最终在自己的prototype中创建了一个外部的data数组.)

为了创建一个继承自旧的kind的新kind, 需要在新kind的kind属性中指定旧kind的名称. 上面的例子中, MySpecialKind继承自MyKind.

刚开始,可能这些kind看起来很困惑, 但归根到底: 不管什么时候,我们创建一个东西, constructor或者实例, 我们需要说明是以哪个kind为基础. 创建一个实例时我们可以这么做:

  1. enyo.create({kind: "aKind"}); 

(注意: enyo.create的输入是一个JavaScript对象,描述了要创建了对象. 这种输入的kind叫做”property block” 或”property bag”.)

同样的,在已存在的kind上创建一个新的kind, 这么做:

  1. enyo.kind({kind: "aKind"}); 

这种代码的一致性使我们很容易记住语法.

【编辑推荐】

  1. webOS发布新的应用程序开发框架Enyo
  2. 惠普正式向开发者提供beta版webOS 3.0 SDK
  3. 在Enyo框架下安装webOS 3.0 SDK教程
  4. 在Enyo框架下编写webOS的“hello world!”
【责任编辑:立方 TEL:(010)68476606】

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

读 书 +更多

Java编程思想 第4版

本书共22章,包括操作符、控制执行流程、访问权限控制、复用类、多态、接口、通过异常处理错误、字符串、泛型、数组、容器深入研究、Java I...

订阅51CTO邮刊

点击这里查看样刊

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