Making a Windows 8 Store App with HTML, CSS and Javascript

With Windows 8 Microsoft added the ability for developers to create Windows 8 store apps using HTML, CSS and Javascript.  Here is a tour walking through creating a simple Windows 8 app using HTML, CSS and Javascript.  There are many resources and tutorials doing the same thing but I’m hoping this post will be helpful for people who might not otherwise seek out that information and just want a general overview of what it’s like to use these technologies in a Windows 8 app.

Prerequisites:

1. Windows 8: To create a Windows 8 store app you’ll need to be running Windows 8.

2. Microsoft Visual Studio Express 2012 for Windows 8: A free IDE, though registration is required to get a license for use longer than 30 days.

As of this writing there is a Visual Studio 2013 preview.  I’ll be using Visual Studio 2012 Ultimate for this post, but the overall steps should be similar for the Express versions.

Part 1: Create a new project

1. Open Visual Studio and select “New Project...”

2. Under “Templates” > “JavaScript” choose “Blank App”
   If your app is going to have many pages/screens choose “Navigation App” instead.

3. VS.net may prompt you to create a Developer License.  This requires logging in using a Microsoft Account (i.e. a hotmail.com, live.com, outlook.com or msdn account)

4. Once the Developer License process completes click on “OK” to create the new project.

5. You should now see the files that make up a Windows 8 HTML/CSS/Javascript app.  It looks very similar to a basic web site file structure.

Part 2: Do something

At this point the app should compile and run, but all you’ll see is a message saying “Content goes here”

Look at the default.html page:

   

   

   

   

   

   

   

   

   

   

Content goes here

For anyone familiar with web development this should look familiar. All those WinJS references reference Javascript files specific to Windows 8. The default.css and default.js files are files we can edit for use in our default.html page.

Let’s have the app do something.  Replace the markup in the tag with this:

   

Do Something

   

Enter something:

   

   Do Something

   

Open js/default.js.  You’ll see Javascript code.  It should be familiar to someone who has used Javascript before.  

(function () {

   "use strict";

… some code omitted ...

   app.start();

})();

Now we need to know where to put things.

Near the end of the file, before the “app.start();” enter the following code:

   function buttonClickHandler(eventInfo) {

       var someInput = document.getElementById("InputSomething").value;

       var someOutput = "You entered: " + someInput;

       document.getElementById("OutputSomething").innerText = someOutput;

   }

That gives us a function to handle the button click event, but we still need to register this new event handler.

Towards the top of the default.js file you’ll find this code:

   app.onactivated = function (args) {

       if (args.detail.kind === activation.ActivationKind.launch) {

           if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

               // TODO: This application has been newly launched. Initialize

               // your application here.

           } else {

               // TODO: This application has been reactivated from suspension.

               // Restore application state here.

           }

           args.setPromise(WinJS.UI.processAll());

       }

   };

That code allows you to insert logic into your application lifecycle.  Below the line that says args.setPromise(WinJS.UI.processAll()); add these lines of code:

           var doSomethingButton = document.getElementById("ButtonDoSomething");

           doSomethingButton.addEventListener("click", buttonClickHandler, false);

This hooks up your button in the HTML file to the event handler in the Javascript file.

Run your application, enter some text, click the button and you should see a screen like this:

Part 3: Styles

Open up the css/default.css file and enter some CSS:

.header {

   font-size: 2em;

   color: red;

   font-weight:bold;

}

In your default.html file add the class to your title:

   

Do Something

Run your app and you should see your style applied:

Part 4: Other things to try and notice

1. It should be possible to use jQuery and some other javascript libraries, but you’ll run into varying degrees of issues.  The Windows 8 app will behave most like IE10.  Javascript that targets features of other types of browsers that IE10 doesn’t support may not work.

2. Notice that your HTML, CSS and Javascript in Visual Studio are all supported by Intellisense (code completion)

3. Add a breakpoint in your javascript file. Debugging, stepping through code and viewing variables are supported.

4. When you run the app take a look at your Visual Studio window.  It should show a new tab called “DOM Explorer” that shows the DOM of your app while you run it.

5. Microsoft also created a Windows Library for JavaScript (WinJS) that contains controls to handle many Windows 8 specific UI and interactions.

Part 5: Conclusion

The HTML/CSS/Javascript method of creating Windows 8 apps was obviously targeted towards web developers.  Instead of having to learn XAML/C# to create a Windows 8 app developers can leverage what they know to create apps.  It is interesting to see how similar the basic structure and coding is between an HTML Windows 8 app and a basic web page.  While the basics may be the same as you delve deeper you’ll find that you can’t simply copy over your HTML/CSS/Javascript and have it work.  Windows 8 diverges from web development since it specifically targets the Windows 8 environment where apps can access things a browser may not be able to through Windows libraries and must adhere to how Windows 8 handle various lifecycles, app suspend, termination and resume.  Like any new platform there is a significant learning curve if you plan to build a non trivial app.