This is the beginning of a multi-part series that will explore building a Metro-style HTML/JavaScript app on Windows 8. I’ll try and keep the videos short, usually around five minutes, though some may go up to around ten. I will also have a blog post that accompanies each video that will essentially cover the same concepts. The videos may show some extra tips or tricks, but the basics will be covered here. Make sure you go to http://aka.ms/30Days to get all the info and resources you need to start building your Windows 8 apps. Register now and follow my series to hit the ground running on getting your application done and into the Windows Store.
Watch Part 1 Video
Getting Started
I’m assuming you have already installed Windows 8 RP and Visual Studio Express 2012 for Windows 8. If not, I will wait here for you to get those installed… <insert elevator music here>
Ok, let’s get started. First, start Visual Studio and select File->New Project. Make sure you select a JavaScript from the Templates pane on the left side of the New Project window. The templates for the different languages look a lot alike.
We will be working with the Navigation App Template. The Navigation App Template creates a “single page style” HTML app – all content is displayed inside a single HTML page. The other template (except the Blank App) implement standard navigation hierarchies and provide a sample approach for working with different data.
Select that and set the name of the application to TweetScan.
Getting Back to First Principles
By default, the project we are working with creates a default.html page that uses WinJS. We will come back and visit WinJS and how it is used in later installments. For now, let’s look at how Metro-style apps using HTML and JavaScript are fundamentally HTML and JavaScript, not some “special sauce” implementation of these technologies.
Right-click on the project in the Solution Explorer and select Add->New Item. Select HTML Page from the Add New Item dialog. You can leave the name as page.html.
Take a look at page.html. It is nothing but simple HTML, and right now, it has no content. Let’s add some simple content to the page that will set things up for further exploration. Add to the <body> of page.html the following markup:
<h1 class="page-title">Demo Page</h1>
<button id="demoButton">Click Me</button>
<div id="target"></div>
The next step is to configure the application to use our new page instead of loading default.html. Double-click on the package.appxmanifest file in the Solution Explorer. Using the Start Page dropdown, change the start page to page.html. The important thing to realize here is that we are configuring our Metro app to load page.html and that is all since our HTML page does not load any JavaScript, style sheets, etc. There is no “magic sauce” being loaded – it is for all intents and purposes, just a web page.
Press F5 to run the application. The easiest way to get back to Visual Studio, IMHO, is to hit Windows Key-D. This will take you back to the desktop and you can end the debugging session.
Adding Script
Let’s add some functionality to our page. Right-click on the project in Solution Explorer and select Add->New Item. Select JavaScript file from the Add New Item dialog. You can leave the name as script.js. Add the following Javascipt to the new script file
(function () {
window.onload = function () {
var button = document.getElementById('demoButton');
button.addEventListener('click', doSomething);
};
function doSomething()
{
target.textContent = "Bang!";
}
})();
Switch back to page.html and drag the script.js file from the Solution Explorer to inside the <head> tag of page.html. This will add a reference to script.js so it is loaded when page.html is loaded. Press F5 to run the application and click the button. “Bang!” should appear in our target <div>. Go back to Visual Studio and stop debugging.
Add Style
So far, everything is working just like it would work in a web page inside a browser. The same holds true for styling with CSS. Add a new style sheet to your project in the same manner you added files earlier. Add the following CSS to the new file
body {
font-family: 'Segoe UI';
}
.page-title {
font-size: 48px;
}
#target {
font-size: 36px;
font-style: italic;
}
Add a reference in page.html to the new style sheet just like you did for the JavaScript file (drag and drop to the <head> element). You can now press F5 and see how the styled page looks.
Bonus Step
If you want to get a glimpse at some of the things that are built in to Metro style apps, you can navigate to the following in Solution Explorer: References->Windows Library for JavaScript 1.0.RC->css. You can drag one of the two css files to page.html and run the application again. You will see the default Metro style applied to your application.
Subscribe