随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的釋出， 大家對Metro-style的關注也逐漸升溫。最大的改變就是我們可以用HTML、JavaScript以及CSS進行Windows 應用程式的開發了。這應該是所有的Web Developer的福利了。
衆所周知，Wijmo 是一套JavaScript UI 類庫。我打算試着把它放到Windows 8裡，準确的說，我嘗試利用Wijmo的Charts實作一個Windows 8下的Metro UI 應用程式。于是，我是就按照下面的步驟開始了：
File –> New Project
圖1：JavaScript Project Templates in Visual Studio
當我看到Visual Studio Project Template中出現了JavaScript分類時非常興奮。我使用了Navigation Application。
Default Project Template
圖2：Default Project Template for Win8 App
當我打開project，這些都是VS自動加載的。如果你跟我一樣是個Web Developer，那麼這些東西肯定在熟悉不過了，HTML，CSS還有JavaScript檔案。
添加 Wijmo Charts
我需要使用Wijmo Charts圖表控件，是以我需要添加必要的引用。主要是jQuery，jQuery UI, Raphael 和 Wijmo。 這樣一來，有很多不需要的代碼也會加進來，我們會在後面将他們剔除出去。現在我們隻考慮如何使用的問題以及它是否穩定。
圖3：添加Wijmo和jQuery檔案到工程
需要注意的是，這些檔案都必須打包到應用程式中，是以CDN不可用。
添加Script引用
打開項目中的default.html，你會發現VS已經從Metro UI Framework中添加了一些scripts檔案。花了點時間，檢查了一下這些檔案，都已經半酣在framework中了。如果有興趣，可以仔細看看，都是标準的JavaScript檔案。
default.html中的引用檔案如下：
開始實作
現在開始寫代碼。由于這是一個Navigation Application，他會将各個獨立的檔案load到default.html中。項目中已經包含了一個頁面，在初始化是會被調用。他在“html”檔案夾中，叫homePage.html。我們隻需要在這個頁面中價格div用于render Wijmo Charts圖表控件。這将會被作為一個widget在初始化時加載。
js檔案夾中有個homePage.js檔案用于我們正在工作的homePage.html檔案。實際上這相當于HTML頁面的“code behind”。js檔案中包含一些初始化代碼。我們要将我們的代碼添加到 .when() 中，這樣就可以在homePage.html檔案被load的時候調用。下面是整個function的代碼。
function fragmentLoad(elements, options) {
WinJS.UI.processAll(elements)
.then(function () {
// TODO: Initialize the fragment here.
$("#wijpiechart").wijpiechart({
height: 600,
width: 1024,
seriesList: [{
label: "c#",
data: 215517
},
{
label: "java",
data: 157301
label: "php",
data: 145929
}],
textStyle: { fill: "#ffffff", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
chartLabelStyle: { fill: "#242122", "font-family": "Segoe UI Semilight", "font-size": "20pt", stroke: "none" },
hint: {
contentStyle: { "font-family": "Segoe UI Semilight", "font-size": "24pt", stroke: "none" },
content: function () {
return this.data.label + " : " + $.format(this.value / this.total, "p2");
}
header: {
visible: false
legend: {visible:false},
seriesStyles: [{
fill: "180-rgb(255,15,3)-rgb(212,10,0)", stroke: "#FFFFFF", "stroke-width": "2"
}, {
fill: "90-rgb(255,102,0)-rgb(255,117,25)", stroke: "#FFFFFF", "stroke-width": "2"
fill: "90-rgb(255,158,1)-rgb(255,177,53)", stroke: "#FFFFFF", "stroke-width": "2"
}]
});
});
}
我隻在seriesList中加入了3條資料，資料也是hard code的，并沒有綁定資料源，這隻是為了能夠更便捷的看到效果。
按下F5，你懂得！一個Metro app就立刻呈現眼前（Hold住！）一個漂亮的SVG Chart（矢量圖表）就出現了。如果你跟我一樣，也是個Web程式員，那麼現在，你已經會建立Windows 8 app了。
參考資源
<a href="http://gcdn.grapecity.com/attachment.aspx?attachmentid=1638">源碼下載下傳</a>
<a href="http://wijmo.com/wijmo-charts-in-windows-8/">英文連結</a>
<a href="http://wijmo.com/">ComponentOne Wijmo官網</a>
<a href="http://gcdn.grapecity.com/showtopic-659.aspx?from=Blog1124">ComponentOne Studio for ASP.NET Wijmo控件包下載下傳</a>