在Enyo框架下编写webOS的“hello world！”

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

继上篇讲解了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

<html>
<head>
<title>enyo HelloWorld</title>
//这里引入框架的JS，可以看到路径里有1.0，所以前面提到复制的时候不能少了1.0
<script src=&quot;../../../../1.0/framework/enyo.js&quot; type=&quot;text/javascript&quot;></script>
</head>
<body>
<script type=&quot;text/javascript&quot;>
new enyo.Canon.HelloWorld().renderInto(document.body);
</script>
</body>
</html>

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

enyo.kind({
name: &quot;enyo.Canon.HelloWorld&quot;,
kind: enyo.Control,
content: &quot;Hello World!&quot;
});

这些代码的意思是指，创建一个继承自enyo.Control的类enyo.Canon.HelloWorld，并且这个类的一个属性content是Hello World!。
渲染的时候控件的content就会写入html的body标签中。
HelloWorld项目下的其它几个文件作用如下：
HelloWorld.css：定义样式，为空的话，所有的样式都是使用webos内置的样式。
appinfo.json：包含装载和启动程序所必需的一些信息。最主要的属性是ID,webos内所有的程序的ID都是独一无二的，不能重复。
经过这个教程，大家应该对webos的开发有个感性认识，接下来的文章，会介绍enyo开发的基础。
【编辑推荐】

		自动登录	找回密码
密码			立即注册

在Enyo框架下编写webOS的“hello world！”

浏览过的版块