在Enyo框架下编写webOS的“hello world!”
创始人
2024-08-02 07:20:28
0

继上篇讲解了webOS SDK的安装及取得Enyo 1.0的代码后,这节讲如何写一个Enyo的hello wrold。

上一节我们把Enyo的框架代码放在了H:\enyo目录下,目录结构如下图:

 

目录1.0必须有,且不能改名,否则会引起框架中自带的示例因为路径错误,找不到框架源码而无法运行。目录下的framework是框架的源码。support提供一些开发方面的支持,包括文档,示例等。

所有示例的运行,不需要webOS SDK的支持,直接用webkit内核的浏览器在PC上就能看到效果,所以请先准备好chrome浏览器。SDK 3.0目前也不支持Enyo程序,即使把程序打包安装到模拟器中,也没办法正常运行。以后教程中的示例效果除特别说明,都是PC上在chrome浏览器中看到的效果。

下面讲解Enyo的hello world

Enyo框架带的示例中就有hello world中的样例代码,地址为support目录下的examples\HelloWorld,目录结构如下:

 

用chrome打开index.html可以看到浏览器中打出Hello World!,如下图:

 

下面进入代码讲解。

打开index.html

  1.  
  2.  
  3. enyo HelloWorld 
  4. //这里引入框架的JS,可以看到路径里有1.0,所以前面提到复制的时候不能少了1.0 
  5.  
  6.  
  7.  
  8.  
  9. new enyo.Canon.HelloWorld().renderInto(document.body); 
  10.  
  11.  
  12.  

body中的代码是程序启动时执行的代码。new enyo.Canon.HelloWorld(),创建了一个enyo.Canon.HelloWorld的对象。renderInto(document.body)则是指把前面创建的对象渲染到body中。那enyo.Canon.HelloWorld对象是哪里定义的呢?在HelloWorld.js中。如下:

  1. enyo.kind({ 
  2.  
  3. name: "enyo.Canon.HelloWorld", 
  4.  
  5. kind: enyo.Control, 
  6.  
  7. content: "Hello World!" 
  8.  
  9. }); 

这些代码的意思是指,创建一个继承自enyo.Control的类enyo.Canon.HelloWorld,并且这个类的一个属性content是Hello World!。

渲染的时候控件的content就会写入html的body标签中。

HelloWorld项目下的其它几个文件作用如下:

HelloWorld.css:定义样式,为空的话,所有的样式都是使用webos内置的样式。

appinfo.json:包含装载和启动程序所必需的一些信息。最主要的属性是ID,webos内所有的程序的ID都是***的,不能重复。

经过这个教程,大家应该对webos的开发有个感性认识,接下来的文章,会介绍enyo开发的基础。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...