Yesterday was the big Windows 8 announcement we have all been waiting for. The team and I are here at the Build conference to see it first hand. Last night they gave us tablets pre-loaded with Windows 8 Developer Preview and Visual Studio 11 Preview. The biggest announcement to me was that we can now use HTML, JavaScript and CSS to build Windows applications. The new Metro-style or "immersive" apps are built using these technologies. As a Web Developer, I couldn't be happier to hear that news. So of course instead of going out drinking with my fellow GitHubbers last night, I went to the hotel room with John Ayers and started developing. As you know, we have a JavaScript UI library called Wijmo. I wanted to get our Wijmo Charts rendering in a Metro UI application on Windows 8. So last night, I did. Here is how...
File -> New Project
Yesterday, when I saw a JavaScript category in the Visual Studio Project Templates I thought I was dreaming! We will be using the Navigation Application template.
Default Project Template
And here is the awesomeness that loads into VS when the project opens. If you are a Web Developer this stuff could not be more familiar. So freaking simple: couple HTML, CSS and JavaScript files. That is it! No magic unicorns behind a curtain.
Adding Some Hot Sauce
I want to utilize our Wijmo Charts in a Windows 8 app so I need to bring in the scripts for it and it's dependencies. Mainly we need jQuery, jQuery UI, Raphael and Wijmo. Now there is a lot of unnecessary code in these libraries that could be ripped out later. Lets just use these libraries as is since we know how to use them and know they are stable. 
The files have to be packaged with the application so CDN is not usable in this scenario. Makes sense.
Adding Script References
In the project, open up default.html. It already has other scripts referenced for the Metro UI framework. Take a minute to check those out. It is really cool that the source files are included for the framework too. If you're interested you can take a quick look under the hood. Just your standard JavaScript files so don't be scared. In default.html I add the following references:
<script src="/js/wijmo/external/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="/js/wijmo/external/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="/js/wijmo/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
<script src="/js/wijmo/external/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/js/wijmo/external/jquery.glob.min.js" type="text/javascript"></script>
<script src="/js/wijmo/external/raphael.js" type="text/javascript"></script>
<script src="/js/wijmo/jquery.wijmo-open.1.4.1.min.js" type="text/javascript"></script>
<script src="/js/wijmo/jquery.wijmo-complete.1.4.1.min.js" type="text/javascript"></script>
Start Programming
Now that we have the resources included in our app we can start programming the interface. Since this is a Navigation Application it loads separate files in as fragments into default.html. There is already a page in the project and wired up to load initially called homePage.html located in the html folder. We just need to add a div tag to use as our charting canvas. This will be initialized as a widget at runtime using JavaScript.
<div id="wijpiechart" class="">
</div>
There is a JavaScript file that compliments the HTML file we are working on called homePage.js located in the js folder. It is essentially the "code behind" for the HTML page. Inside you will see that it has some initialization code. We will add ours to the .when() promise that is fired when the homePage.html is loaded. Here is what that code looks like. I will include the entire function to be more clear.
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"
}]
});
});
}
I only put 3 slices in the seriesList to make this more concise. The data is also hard coded and not data bound. I will save that for a later post.
Fast & Fluid
That's it. Hit F5 and you have an immersive Metro application that is fast and responsive and alive with activity (sorry, I couldn't resist). Our interactive SVG chart render beautifully in the Metro app and it could not be easier to implement them. If you are a Web Developer like myself you can make a Windows 8 app. 
Fork It
I just pushed this source code to GitHub. Feel free to download it, fork it and have some fun! https://github.com/banzor/Wijmo-in-Windows-8
