Javascript Metro Style App (1) 建立 Javascript Metro Style Project

Windows 8 在底層加入了 WinRT API 讓 Javascript 可以透過這個介面去存取本機的資源。也就是說只要利用 Html + CSS + Javascript 就可以開發 Windows 8 App。有點類似於 PhoneGap 的作用,只是現在變成官方架構。不只如此,在 Visual Studio 11 Beta 也加入了專案範本,幫助開始建立 Javascript 的 Metro Style App
win8-new-platform

基本開發環境

  • Windows 8 Consumer Preview
  • Visual Studio 11 Beta

建立 Metro 專案

File > New > Project
Templates > Other Languages > Javascript > Windows Metro Style
必須是安裝在 Windows 8 Consumer Preview 上面的 Visual Studio 11 Beta 才能找到這個選項,安裝在 Windows 7 上面的是沒有的。
image

接下來先選擇 Grid Application 作為第一個專案

image

第一次執行 Javascript Metro App

先來看看執行畫面,直接啟動 Debugging(F5)
image
這個並不是瀏覽器的畫面,而是透過 WinRT 來顯示。也可以點擊進入 Detail 頁面
image
如果選擇的是 Group Title
image

專案架構

image

  • html
    • groupedItemsPage.html – 起始頁面
    • itemDetailPage.html – Item Detail 頁面
    • groupDetailPage.html – Group Detail 頁面
  • js
    • data.js – 裡面有一些簡單的資料用來產生範本
    • default.js – default.html 的 code-behind
    • groupDetailPage.js – groupDetailPage.html 的 code-behind
    • groupedItemsPage.js- groupedItemsPage.html 的 code-behind
    • itemDetailPage.js- itemDetailPage.html 的 code-behind
    • navigator.js – 控制頁面之間的行為

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *