在Enyo框架下編寫webOS的“hello world！”
繼上篇講解了webOS SDK的安裝及取得Enyo 1.0的代碼后，這節(jié)講如何寫一個Enyo的hello wrold。
上一節(jié)我們把Enyo的框架代碼放在了H:\enyo目錄下，目錄結(jié)構(gòu)如下圖：
目錄1.0必須有，且不能改名，否則會引起框架中自帶的示例因為路徑錯誤，找不到框架源碼而無法運(yùn)行。目錄下的framework是框架的源碼。support提供一些開發(fā)方面的支持，包括文檔，示例等。
所有示例的運(yùn)行，不需要webOS SDK的支持，直接用webkit內(nèi)核的瀏覽器在PC上就能看到效果，所以請先準(zhǔn)備好chrome瀏覽器。SDK 3.0目前也不支持Enyo程序，即使把程序打包安裝到模擬器中，也沒辦法正常運(yùn)行。以后教程中的示例效果除特別說明，都是PC上在chrome瀏覽器中看到的效果。
下面講解Enyo的hello world
Enyo框架帶的示例中就有hello world中的樣例代碼，地址為support目錄下的examples\HelloWorld，目錄結(jié)構(gòu)如下：
用chrome打開index.html可以看到瀏覽器中打出Hello World!，如下圖：
下面進(jìn)入代碼講解。
打開index.html
- <html>
- <head>
- <title>enyo HelloWorld</title>
- //這里引入框架的JS，可以看到路徑里有1.0，所以前面提到復(fù)制的時候不能少了1.0
- <script src="../../../../1.0/framework/enyo.js" type="text/javascript"></script>
- </head>
- <body>
- <script type="text/javascript">
- new enyo.Canon.HelloWorld().renderInto(document.body);
- </script>
- </body>
- </html>
body中的代碼是程序啟動時執(zhí)行的代碼。new enyo.Canon.HelloWorld()，創(chuàng)建了一個enyo.Canon.HelloWorld的對象。renderInto(document.body)則是指把前面創(chuàng)建的對象渲染到body中。那enyo.Canon.HelloWorld對象是哪里定義的呢?在HelloWorld.js中。如下：
- enyo.kind({
- name: "enyo.Canon.HelloWorld",
- kind: enyo.Control,
- content: "Hello World!"
- });
這些代碼的意思是指，創(chuàng)建一個繼承自enyo.Control的類enyo.Canon.HelloWorld，并且這個類的一個屬性content是Hello World!。
渲染的時候控件的content就會寫入html的body標(biāo)簽中。
HelloWorld項目下的其它幾個文件作用如下：
HelloWorld.css：定義樣式，為空的話，所有的樣式都是使用webos內(nèi)置的樣式。
appinfo.json：包含裝載和啟動程序所必需的一些信息。最主要的屬性是ID,webos內(nèi)所有的程序的ID都是***的，不能重復(fù)。
經(jīng)過這個教程，大家應(yīng)該對webos的開發(fā)有個感性認(rèn)識，接下來的文章，會介紹enyo開發(fā)的基礎(chǔ)。
