[問八系列] Windows 8 開發 (2) - Hello Windows 8

Hello~ Windows 8 與訊息盒的實作...

win8-hello-windows8

 

完成了前面準備環境與 Developer License 的準備工作後,我們就可以開發 Windows 8-style Application 了,我們在前一步新增的是 JavaScript 版本的 Windows 8-Style UI,在新增完成後會直接顯示在 Visual Studio 的 Solution Explorer 內,雖然名為 Blank Application,但它裡面的東西還真不少:

win8-hello-windows8-project-view

 

我們先打開 default.html,它本身就只是很單純的 HTML5 頁面,只是有先引入一些必要的函式庫,像是 WinRT (ui.js/base.js) 以及設定與控制應用程式載入資訊的 /js/default.js 等,本文 (body) 則是由我們自己處理,而在本例中,我們只需要把內文改成 Hello Windows 8 就可以了,所以我們修改 <body> 內的資訊,加入:

<h1>Hello Windows 8 ~</h1>

win8-hello-windows8-update-html

 

然後按 F5 啟動,就可以看到全螢幕的 Hello Windows 8~ 出現在畫面上了。

win8-hello-windows8

 

不過如果只有 Hello Windows 8,我可能會被扁吧 … 所以我們再加一個功能,就是使用 Windows 8 新增的 Message Dialog 功能來顯示資訊,這時我們就需要 jQuery 啦,實在是因為它太方便了,只不過以往在網頁上用 CDN 方式存取 jQuery 指令的方式,在 Windows 8-style Application 不行,所以只能把它先下載下來再加到專案內,並加入下圖紅圈範圍內的指令:

win8-hello-windows8-add-message-dialog

 

然後按 F5 啟動它,你會看到多一個 Click Me 的按鈕,按下去會出現 Hello Windows 8 的訊息盒:

win8-hello-windows8-with-message-dialog

 

透過 WinRT 所提供的開放函式庫,我們一樣可以享有 C#/VB  擁有的系統服務功能,再加上 jQuery 和 HTML5,網頁開發人員可以以最少的時間將原有的 Web Development 技能移轉到 Windows 8 App 開發上。

 

Reference:

http://msdn.microsoft.com/zh-tw/library/windows/apps/hh465037

http://blogs.microsoft.co.il/blogs/shair/archive/2012/03/02/windows-8-javascript-message-dialog.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/br211377.aspx