HTML, CSS, JavaScript and Metro App Building on Windows 8 Part 1

I’m a fan of JavaScript and I’m warming to some of the Metro interfaces on Windows 8. I’ve always found the Windows 7 Phone UI, which is the first iteration of the Metro UI, to be a very slick phone interface. So with this blog entry I’m going to lay out setting up a default Windows 8 Metro application using JavaScript as the language of choice.

Prerequisites:

  • Windows 8
  • Visual Studio 2012

Open Visual Studio 2012 and click on file -> new project -> and then find the JavaScript section and pick the blank metro app.

New Windows 8 Metro Project
New Windows 8 Metro Project

Once you have the application created, I’d suggest following good practice and adding QUnit-Metro to your project with Nuget(or get the actual files if you don’t want to use Nuget).

Getting QUnit-Metro via Nuget
Getting QUnit-Metro via Nuget

Once you’ve added the QUnit-Metro interface you’re ready to get started writing tests. But before writing a test take a look at the additional files that the QUnit-Metro Nuget Package adds to the project.

Things Added With QUnit-Metro
Things Added With QUnit-Metro

In the screenshot (click for a full size image), I’ve pointed in a clockwise order:

  • The package is added and listed in the packages file now for Nuget.
  • There are now three CSS files added for QUnit. Two are Metro specific, which gives a more Metro look to the results of the tests.
  • The qunitmetro.js file is the testing framework.

With this collateral added we can setup a test within the default.html page of the project. First add the following code so that your default.html file looks like this:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Readingz</title>
<!– These files are included when the project is generated, I don’t really know where they are… –>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!– These are the CSS and JavaScript files that I’ve edited for testing. –>
<script src="/js/qunitmetro.js"></script>
<script src="/js/default.js"></script>
<script src="/js/default_tests.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/css/qunitmetro-light.css" rel="stylesheet" />
</head>
<body>
<p>Content goes here</p>
<button>Press This!</button>
<!– This is for testing only. It goes away when application is ready to ship. –>
<div id="qunit"></div>
</body>
</html>
[/sourcecode]

The Microsoft.WinJS.1.0.RC libraries are included by default, which I’m assuming when I get fully upgraded to the released version of Windows 8 and Visual Studio 2012 that this might just read Microsoft.WinJS.1.0. The section of scripts and links below that are the added QUnit-Metro files. I included the qunitmetro-light.css file for metro style test results.

In the body of the page the div with the id of qunit…

[sourcecode language=”html”]
<div id="qunit"></div>
[/sourcecode]

is added where the test results will display. That’s how simple it actually is. To add actual tests, I’ve added a default_tests.js file to the js directory. I then added a simple test to the file that I’ve shown below.

[sourcecode language=”javascript”]
test("hello windows world of javascript tests!", function () {
ok(1 == "1", "Passed!");
});
[/sourcecode]

Run the application and you’ll find the following result displayed in your application.

The Running Application
The Running Application

This is one place where an odd thing seems to be occurring (if you have any idea what the problem is, leave a comment, and I’ll do the same when I get the issues resolved). The test just keeps reporting “Running…” until you click on Readingz, noglobals, or somewhere else on the screen in that area to make an action occur. When I click on Readingz the test runs successfully like it should.

Test Ran
Test Ran

What’s up with that? It’s a pretty odd action.

Another issue that I ran into, which was a user error issue on my behalf, was I swapped around the three script files so the qunit-metro file loaded last. I actually stumbled and posted the issue on Stackoverflow here.

Shout it

A TimePiece of C# and JavaScript

I put together a little project on Github, partially because I’ve been making headway learning the intricacies of JavaScript, and partly because I wanted something that would parse a string that represents a time value. So here’s the TDD I went through. In the process I pulled in QUnit and used that as my testing framework for the JavaScript example. I’d love input on either of these, so feel free to gimme some heat, tell me what I’ve done wrong, and especially how I ought to be doing this.  🙂

The first thing I did was put together the C# Library. I started two projects, one for the tests and one for the actual library.  In the tests project I added a class file and removed the default using statements and replaced them with the following by way of Nuget:

[sourcecode language=”csharp”]
using NUnit.Framework;
using Shouldly;
[/sourcecode]

After adding these references I jumped right into setting up the test fixture. Since I know I want to have something to parse the hour for military time also I’ve setup two test variables.

[sourcecode language=”csharp”]
[TestFixture]
public class with_static_parsing_of_time
{
protected string sampleTimeOne = "10:12am";
protected string sampleTimeTwo = "2:30pm";
[/sourcecode]

The first test I then dived into was to test the hour.

[sourcecode language=”csharp”]
[Test]
public void should_return_a_time_piece_with_correct_hour()
{
var timePiece = TimePiece.Parse(sampleTimeOne);
timePiece.Hour.ShouldBe(10);
}
[/sourcecode]

I then fleshed out the object and implemented enough to get this test to pass.

[sourcecode language=”csharp”]
namespace TimeSlicer
{
public class TimePiece
{
public TimePiece(string time)
{
ParseTime(time);
}

private void ParseTime(string time)
{
SetHour(time);
}

private void SetHour(string time)
{
Hour = Convert.ToInt32(time.Split(Convert.ToChar(":"))[0]);
}

public int Hour { get; set; }
[/sourcecode]

I then continued back and forth writing tests and implemented each. For the complete code check out the Github Repository. This example is really simple. I’d love any thoughts on adding to it or what you might think is a better way to test the object.

For the JavaScript I downloaded QUnit. Again I stepped into the testing, which is a whole different ballgame than in C#.

[sourcecode language=”javascript”]
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="TimeSlicer/TimePiece.js"></script>
<script type="text/javascript">

var timeValueOne = "1:30am";
var timeValueTwo = "8:15pm";

$(document).ready(function() {

module("Parse hour from value.");

test("Should parse hour from value.", function() {
TimePiece(timeValueOne);
equal(TimePiece.Hour(), 1, "The appropriate hour value is returned for AM meridian value.");
});
[/sourcecode]

For the full test file with other JavaScript libraries and CSS check out the code file on github.

…and directly into implementation. With the caveat that I’m extremely unfamiliar with actual psuedo/pretend/faux object creation in JavaScript. In this realm I’m still reading up on best ways to do this.

[sourcecode language=”javascript”]
TimePiece = function(time) {
TimePiece.Hour = function () {
return time.toString().split(":")[0];
}
return time;
};
[/sourcecode]

I went on from here writing tests and implementing as I did with the C#. The JavaScript was interesting. I’ve also noticed that I get a lot of strings back versus the number values that I’d actually want, thus the addition of the “parseInt” in the final version.

Check out the overall project on Github at: https://github.com/Adron/Time-Slice