在Enyo框架下編寫webOS的“hello world!”
繼上篇講解了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="../../../../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中的代碼是程序啟動時執行的代碼。new enyo.Canon.HelloWorld(),創建了一個enyo.Canon.HelloWorld的對象。renderInto(document.body)則是指把前面創建的對象渲染到body中。那enyo.Canon.HelloWorld對象是哪里定義的呢?在HelloWorld.js中。如下:
- enyo.kind({
- name: "enyo.Canon.HelloWorld",
- kind: enyo.Control,
- content: "Hello World!"
- });
這些代碼的意思是指,創建一個繼承自enyo.Control的類enyo.Canon.HelloWorld,并且這個類的一個屬性content是Hello World!。
渲染的時候控件的content就會寫入html的body標簽中。
HelloWorld項目下的其它幾個文件作用如下:
HelloWorld.css:定義樣式,為空的話,所有的樣式都是使用webos內置的樣式。
appinfo.json:包含裝載和啟動程序所必需的一些信息。最主要的屬性是ID,webos內所有的程序的ID都是***的,不能重復。
經過這個教程,大家應該對webos的開發有個感性認識,接下來的文章,會介紹enyo開發的基礎。