For many different platforms, tools exist that allow you to create sudo native or native like apps using traditional web technologies. For the first time, Microsoft will provide support for Windows 8 Metro apps created using HTML5, CSS3 and JavaScript. While you may be thinking, ok yes they support it, but it’s not going to be easy to use. In fact, this couldn’t be farther from the truth. Out of the box, Visual Studio 11 Beta provides support for development and debugging Metro apps using HTML5 and JavaScript.
The next question you may have is, is it really JavaScript or some .Net like version of it. The answer is simple, yes it is the same JavaScript you are used too. And in fact you can use libraries you are used to such as JQuery. As such it is possible to essentially create a Metro version of an existing website using the tools. However, to really take advantage of the Metro platform you would need to make significant changes to your existing UI. In addition, to take advantage of the native Metro UI elements you’ll need to make use of the JavaScript Metro API.
To get started, you’ll need to have Windows 8 Consumer Preview as well as Visual Studio 11 Beta (or later). Next you’ll want to create a new project and under Templates you’ll see the option for JavaScript. There are several different options to choose from; however, for this article we will just create a Blank Application. The other JavaScript templates, Grid Application, Split Application, etc. provide a basic framework for different styles of Metro Apps.
If you go ahead and start the blank application you will see a dark grey Metro app display. As you would expect, the blank application is just that, just the minimum. If you switch back to Visual Studio you will be able to see the debug environment as well as the DOM (Document Object Model) Explorer. Just as you would with a normal app, you can use the normal debug tools you would expect from Visual Studio.
Before we start modifying the project itself we will take a look at the breakdown of the solution and the components included.
Solution Explorer
Starting from the top, You’ll see the normal Solution and Application items that you would expect to see in a Visual Studio project. However, the References folder may seem a little out of place for a JavaScript project, but in fact it includes references similar to those for a .Net app. Instead you should see a Microsoft Windows Library for JavaScript SDK, which if expanded shows JavaScript and CSS files. Next you’ll see a CSS folder, which includes basic styling information. There are a few Images included such as Logo, Splash Screen, etc. Next the JS folder includes a single default.js file, which is used by the default.html file to start up the application. The file ending in pfx is a temporary key file used for development.
The default.html is used at startup to define the markup for the main screen. Finally the package.appxmanifest is used to store basic information about the app such as name, icons, description, supported orientations, etc.
Let’s go ahead and jump in and start making changes to the main page, default.html. As you can see by looking at the HTML markup it looks as you would expect with the normal tags. Within the head tag there are a few WinJS references, which provide access to the base styling and JavaScript API scripts. And then we see references to the default.css stylesheet and the default.js script included with the project.
Next we can make a few simple changes to put some text on the screen and add a button. Within the body tag, insert the following markup:
<div style=”text-align:center;” padding-top: 50px”> Hello World!<br/> <input type=”button” value=”Submit” /> </div>
If you go ahead and run the app you will see a simple screen with the text Hello World and a single button as shown below.
Submit Button
If you click on the button you will notice that it does not do anything specific. To add the click event handler, you could either add the onclick attribute with the JavaScript method you want to run or add it using JQuery or another JavaScript Library such as $(“#name”).click(function() { Code Here });.
Conclusion
As you can see from this brief example above, it is entirely possible to make use of your existing HTML, CSS and JavaScript skills to create modern Metro Apps. Microsoft has made great strides to add support for web tools and make them part of everyday apps. Given the options available, there are going to be quite a few apps built that make use of this capability and run alongside apps build in C# or C++.
