如你所知的Windows8允許你通過以下幾種方式創建Metro應用程序：
- C++
- C#
- JavaScript
第一部分將側重於主體結構和JavaScript Grid 應用程序的基礎，在隨后的文章中我將深度探究在Windows8中更多的功能。
第一步：基礎知識
當你寫Windows8 JavaScript風格的應用時，你可能需要學習一點WinJS和在Windows 8 JavaScript應用中可用的基本動作。我看到了關於Windows 8 Javascript應用程序集成JQuery的文章，其實這是沒有必要的，WinJS已經提供了許多這些：
- 選擇器:
- document.querySelector(".headerTemplate")
- document.querySelectorAll("div")
- 文本 ：
- document.querySelector(“#Title”).textContent;
- 動畫：
- WinJS.UI.Animation.fadeIn(document.querySelector(“div”));
更多…
第二步：Application Styles
當你在Visual Studio 11中打開一個新的JavaScript Metro應用，你可以從以下選擇：
- Blank Application –空白Windows Metro應用的項目，沒有預定義的控件或布局。
- Split Application – 一個兩個頁面Windows metro風格應用的項目，在分組項目導航。第一頁允許組的選擇，而旁邊的第二台顯示器所選的項目的詳細項目清單。
- Fixed Layout Application – 一個可擴展固定寬高比布局的Windows metro風格應用的項目
- Navigation Application – 一個有預定義導航控件的Windows metro風格應用項目
- Grid Application – 一個多頁的、項目組之間導航的Windows Metro風格的應用程序。專用頁面顯示組合項目的詳細信息。
這個Demo中我創建了一個新的 Grid Application:
第三步: 項目結構
在以前Visual Studio 11和Windows8的版本是JS文件夾里面有所有的WinJS文件，在最新的版本種所有的必要文件在兩個主要文件中，參考下：
- base.js
- ui.js
在上面創建的 Grid Application 你將有三個頁面:
- groupDetailsPage
- groupedItemsPage
- itemDetailsPage
請注意，每個HTML頁都有自己的CSS和JavaScript文件，它們沒有命名約定自動接受這些並結合，但關於如何創建Windows 8 JavaScript應用程序、規范或應用程序，這是最好的做法。
第四步：應用程序流程
一切從default.html開始，這個頁面加載所有必需的js文件、css文件和使用PageControlNavigator 導航應用程序到groupedItemsPage
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >Application1 </ title >
6
7 <!-- WinJS references -->
8 < link href ="//Microsoft.WinJS.0.6/css/ui-dark.css" rel ="stylesheet" >
9 < script src ="//Microsoft.WinJS.0.6/js/base.js" ></ script >
10 < script src ="//Microsoft.WinJS.0.6/js/ui.js" ></ script >
11
12 <!-- Application1 references -->
13 < link href ="/css/default.css" rel ="stylesheet" >
14 < script src ="/js/data.js" ></ script >
15 < script src ="/js/navigator.js" ></ script >
16 < script src ="/js/default.js" ></ script >
17 </ head >
18 < body >
19 < div id ="contenthost"
20 data-win-control ="Application1.PageControlNavigator"
21 data-win-options ="{home: '/html/groupedItemsPage.html'}" ></ div >
22 </ body >
23 </ html >
The groupedItemsPage 加載相關的JS/CSS文件
2
3 <!-- WinJS references -->
4 < link href ="//Microsoft.WinJS.0.6/css/ui-dark.css" rel ="stylesheet" >
5 < script src ="//Microsoft.WinJS.0.6/js/base.js" ></ script >
6 < script src ="//Microsoft.WinJS.0.6/js/ui.js" ></ script >
7
8 < link href ="/css/default.css" rel ="stylesheet" >
9 < link href ="/css/groupedItemsPage.css" rel ="stylesheet" >
10 < script src ="/js/data.js" ></ script >
11 < script src ="/js/groupedItemsPage.js" ></ script >
這個流程適用於你加載每個頁面。