Metro Applications (1) My First Blank Application

This week, I started to write a simple Metro Application for Windows 8, using HTML5/Javascript. It’s a customer project, and it’s a new world for me. I want to present in this post the minimal application.

Using a Windows 8 with Visual Studio 2011 Preview, you have these initial Javascript Metro application choices (you could write Metro applications with C++, C#, VB.NET, too):

If you don’t have VS 2011, you can download the generated solutions from my GitHub repo:

https://github.com/ajlopez/MetroApps

This is the solution of a Blank Application:

Notice the winjs folder, with js files. This is the new namespace we can use in Metro apps. Detailed info:

Windows Library for JavaScript reference

And there is a package manifest file: it’s describe the capabilities of the application (i.e: it can access Internet, it expose the search contract, etc…).

The default.html code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>BlankApp</title>
    <!-- WinJS references -->
    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
    <script src="/winjs/js/base.js"></script>
    <script src="/winjs/js/wwaapp.js"></script>
    <!-- BlankApp references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/default.js"></script>
</head>
<body>
</body>
</html>

The ui-dark.css is used. This is the “black style” you usually see at Metro apps.

The section “WinJS references” refers the javascript files that makes the WinJS namespace. According to the WinJS documentation:

When you reference these JavaScript files in your app, you must add the references in the following order:

  • base.js
  • wwaapp.js (after base.js)
  • ui.js (after base.js)
  • binding.js (after ui.js)
  • res.js (after ui.js)
  • animations.js (after ui.js)
  • controls.js (after animations.js)
  • uicollections.js (after animations.js)

The /js/default.js is for your application/page: you can adapt it to put your own code, new namespaces definitions. You can add other javascript files, too.

Next steps: explore these Javascript files, dissecting implementation; research and use concepts like navigation, declarative binding, and more.

Keep tuned!

Angel “Java” Lopez

http://www.ajlopez.com

http://twitter.com/ajlopez

One thought on “Metro Applications (1) My First Blank Application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s