Intro

In this first tutorial in a series about building a Windows 8 application with JavaScript, HMTL and CSS using Expression Blend 5, we’re going to make a start on a very simple game. In this game the player has to guess a random number between 1 and 10. The player wins if the guess is correct, and looses if it’s wrong. In future parts of the series this game will be extended to include various features of WinJS and Windows 8.

File-New

I’ve started with a new “Blank App” from the HTML list. I added a few HTML elements to start from. You can add HTML elements by typing them in the source panel. Or you can drag’n’drop them from Assets pane to Live DOM pane or design area.

I’ve added the following to the body-tag. Don’t worry about the looks of it, we’ll fix that later.

<h1>Guess a number</h1>
<p>
    <span>Enter a number between 1 and 10:</span>
</p>
<p>
    <input />
    <button>Guess</button>
</p>
<p>
    <span>result:</span>
    <span></span>
</p>

 

The easiest way to access the HTML elements is by assigning IDs. I assigned the following IDs:

• input ==> numberInput
• button ==> numberGuess
• the empty span ==> numberResult

That’s it for the HTML for this moment. Let’s have a look at some code.

Code

Although Expression Blend is an awesome tool, I still prefer to edit my code in Visual Studio. Right click the default.js file and select Edit in Visual Studio to do just that.

For now we’re going to ignore most of the code that’s inside default.js. It’s almost all about state management. We’ll talk about that in a later tutorial. I’ve added the following code right below WinJS.strictProcessing(); :

var randomNubmer = Math.round(Math.random() * 10) + 1;

function buttonClickHandler() {
    var value = document.getElementById("numberInput").value;
    var numberResult = document.getElementById("numberResult");
    if(value == randomNumber) {
        numberResult.textContent = "Correct";
    }else {
        numberResult.textContent = "Incorrect";
    }
}

Line 1 of this piece of code generates a random number and makes sure it’s between 1 and 10.

From line 3 and further the click event handler is defined. The first thing this function does is reading the value from the input with the numberInput id. Than, the element for the result is stored. The last thing this function does is comparing the provided value with the random number. If they are equal the text on the result is set to Correct, otherwise it’s set to Incorrect.

The event handler has to be attached to the button. This can be done in the following way:

var numberGuess = document.getElementById("numberGuess");
numberGuess.addEventListener("click", buttonClickHandler, false);

These lines need to be placed after the call to args.setPromise(WinJS.UI.processAll());.

It takes the element with the numberGuess id, and adds an event listener to that. The event handler is told that it should handle the click event and that it should handle the click event with the buttonClickHandler function. The last parameter tells the event listener that it should use bubbling. This means that the event will bubble up the hierarchy of DOM elements and is handled by each element before calling a possible event handler on its parent. Bubbling is what you would want most of the time. The other option, True, means the event listener needs to use capturing. This means the event is handled by the parent first and than the child.

With this piece of code in place it is time to run the application to see if it works. You can hit F5 in Visual Studio or Expression Blend to run the application. Or you can use the interactive mode in Expression Blend.

The great thing with this is that you can bring your application is a specific state and continue editing from there.

CSS

If everything’s right you should be able to play the little game now. Time to make it look a little better by adding some CSS styling.

There are a couple of ways to set the CSS properties for the application. You can set them directly on the objects. To give the elements we added in the beginning a bit more space around the border we’re going to change the padding on the body tag. First, select the body element in the Live DOM pane. Now, go to the CSS Properties pane and look in the Layout section.

To set the padding for all borders at once make sure the link option, right next to the inputs, is set. Enter 50px in the first input box and note that all boxes are filled with the same value. The CSS properties are stored in the HTML in the style attribute, in this case on the body tag.

To demonstrate a second way of setting styles we’re going to make the title look glowing, bold and blue. We’re going to add a CSS style rule to store the properties. To do that select the title in the designer, right click on it and select Add New Class…

The class has to have a name. Enter title in the input box. Because we want the properties to be stored in a CSS style rule make sure the Create style rule checkbox is checked. Hit OK.

The title style rule is automatically selected. Go to the CSS properties pane and look at the top section.

As you can see the .title rule is selected and that it is stored in the default.css file. The rules below the .title are default rules which are stored in the ui-dark.css file. Because there are different ways in which CSS properties can be set and because they can be overwritten by others all origins of properties are listed here. Each row is loaded on top of the one below. To two options above the line are special. If you select Winning Properties the CSS Properties pane shows a flattened view of all set properties. Very useful to see what values are set. You can even see where a value came from by clicking on the little advanced properties peg next to a set property. In the CSS Cascade section is shown what caused the value to be the way it is.

The computed values option shows a read-only view of all values. Even the ones that are not set.

Right. To make the title look blue select the .title element in the Applied Style Rules list. Go to the Text section. Set the color to light blue, the font-weight to 400 and enter 0 0 5px #4488FF in the text-shadow box. This gives the text a glow look by adding a shadow without X or Y offset.

A nice thing to notices is the way Expression Blend tells you were a specific style rule is used. Now that we have the .title rule set, go to the Style Rule pane and select it. At this point the Live DOM pane should have the H1 element highlighted with a dark green background. In the designer the title has a green border. If there would be multiple elements with the selected style rule, all of them would be highlighted in the same way.

For the last way of setting the styling I would like to show you we have the add a little code first. In the click event handler, in the check if the number is correct I’ve added two lines. These lines set the CSS class to correct or incorrect based on the result.

if(value == randomNumber) {
        numberResult.textContent = "Correct";
        numberResult.setAttribute("class", "correct");
}else {
    numberResult.textContent = "Incorrect";
    numberResult.setAttribute("class", "incorrect");
}

Switch back to Blend and enter interactive mode. Type a number in the textbox and hit Guess. You’ll probably hit an incorrect number, but for the tutorial it doesn’t matter very much. The .incorrect rule should make the text turn red and the .correct rule should make the text turn green. After having the result shown leave the interactive mode and select the numberResult element. Go to the HTML Attributes pane.

A couple of thing are happening here. The first thing to notice are the blue borders around the class box and the textContent property. This blue border means these values are set at runtime. The little lightning bolt next to the class name also indicates this class has been added at runtime.

To convert the dynamically added class to a normal style rule, click on the advanced properties peg, go to Create Style Rule from Element Class and select incorrect.

Go to the Style Rules pane, which should contain the .incorrect rule now. Select it and go to the CSS Properties pane. Set the color to red. You can repeat the process until you guess the number, or you can add the .correct rule by clicking the + on the Style Rules pane. Select the rule and set the text color to green.

Wrap-up

This first tutorial in the series turned out to be a little longer than I suspected, but I hope you get the basic idea of setting the styles of your apps. If you have any questions just let me know. You can download the code for this tutorial here.