Category Archives: Metro Applications

Metro Applications: Links, News And Resources (1)

These past weeks, I was programming Metro apps, using Javascript/HTML5. Some links I found useful:

Windows Library for JavaScript reference

Getting started with Windows Metro style app development

Building your first Windows Metro style app using JavaScript

Windows 8 Developer Preview Metro style app samples
Sample Pack with all the samples

Search app extension sample

Dynamic CSS Regions Sample

Navigation with Fragments sample

Dynamic CSS Region Templates sample


Navigation sample

ListView interaction model sample

Form Controls – Part 2

Adaptive layout with CSS sample

Custom data sources example

WinJS.UI.ListViewItems objec

Form controls part 2: validation

Getting started with the ListView sample

App Bar Sample

Groove Drum Sequencer – HTML/JS and WinRT C++

Demonstrates the use of the WinJS Promise object. Promises are a simple way to do asynchronous programming in JavaScript. They allow developers to perform operations on a value (or a set of values) that may only be available in the future, handle possible errors, and provide progress notification.

Developing basic Metro style apps (JavaScript)

Ten Tips When Writing a Hybrid Language Metro style Application

8 traits of great Metro style apps

Building your first Windows Metro style app using C#, C++, or Visual Basic

Tutorial: How to disable Metro UI on Windows 8

How to Pick Your Platform: Silverlight, Metro, or HTML5

A few facts about Microsoft’s new Windows Runtime

OK, so I think HTML/JS for Metro apps is a good idea

Microsoft to developers: Metro is your future

My Links

Check the latest links! I’m adding new ones everyday.

Angel “Java” Lopez

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:

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>
    <meta charset="utf-8" />
    <!-- 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>

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