[win 8] Hello Windows Store App! :) Using HTML5 and JavaScript

  • 2614
  • 0

[win 8] Hello Windows Store App! :) Using HTML5 and JavaScript

windows store app 的開發除了可以使用C#、VB、C++等以往在Desktop app常見的開發語言之外

最令人驚奇的莫過於還可以使用HTML5 & JavaScript語言來開發,這也使得以往專精於Web

介面開發的設計師,有機會可以用其熟悉的HTML5 & JavaScript語言來開發windows store app 。

 

image

(http://channel9.msdn.com/Events/BUILD/BUILD2011/TOOL-533T)

 

  • Windows Runtime Library (Windows RT, WinRT)

從架構圖可以看到Microsoft 提供了Windows Runtime Library (Windows RT, WinRT),其專門是給

windows store app 所使用的Windows API,在WinRT 內封裝了 Windows API,提供了相關的類

別及物件給開發 windows store app 的程式語言使用。

 

  • Windows Library for JavaScript(WinJS)

此外Microsoft也提供了Windows Library for JavaScript(WinJS),為 JavaScript 打造的一個專屬API,

適用於 JavaScript 的 Windows Library 。(http://msdn.microsoft.com/zh-TW/library/windows/apps/br211377)

 

 

不過使用HTML5 & JavaScript語言所開發的windows store app 並非實際運作於Browser上面,而是透過

HTML & JavaScript Engines來呈現的。

 

image

(Microsoft_Press_eBook_Programming_Windows_8_Apps_with_HTML_CSS_and_JavaScript_First_Preview_PDF.pdf)

 

  • 開發工具VS2010

VS2012裡基本已內建相關類型的專案,一供有5個專案樣版,差別在於版面上的設計,除了空白

應用程式類型之外,其餘4個分別已規劃好不同的UI版面,這些版面分別是windows store app

所建議的操作UI,因此很方便設計人員可以直接套用。此外在開發windows store app 時,必須要

先取得開發人員授權檔,取得的方式相當簡單,在建立windows store app 時會自動開啟註冊取得

windows store app 的訊息操作,只要註冊有Live帳號就可以直接取得了。

image

 

在專案架構上可以看到以下幾個資料夾,以及起始頁面default.html檔案

css:放置css檔案

images:放置圖檔

js:放置java script檔案

 

image

 

而其它有套樣版的專案類型,則會多出一個資料夾pages,裡面所放置的是子頁面檔案及其相關的css & js檔案

image

 

default.html檔案我們可以看到預設也會引入WinJS

image

 

  • Hello Windows Store App! :)

這裡測試性的直接建立了三種不同樣版的專案,分別是空白應用程式、格線應用程式、分割應用程式

,在空白應用程式default.html直接像編輯網頁一樣,於body區域中簡單輸入Hello Windows Store App! :)

並按下F5直接看成果

image

image

 

可以看到基本上沒什麼可操作的UI,接著再測試另二個專案類型,不做任何修改按下F5直接看成果

image

image

image

image

 

可以看到另二個專案由於已由VS2012預先提供了相關UI的設計,基本已經是一個可以

操作的成品app,對於開發人員來說只要遵循其設計就可以專注於Content的開發,當然對於細

部的操作部份仍然可以做調整的,但整體來說VS2012提供這樣的樣版對開發人員來是一個相當大的福音。

 

 

Ref:

http://msdn.microsoft.com/zh-TW/library/windows/apps/br211377

http://msdn.microsoft.com/library/windows/apps/br211386

 

若本文對您有所幫助,歡迎轉貼,但請在加註【轉貼】及來源出處,並在附上本篇的超連結,感恩您的配合囉。

By No.18