Gaurav Mantri's Personal Blog.

Building First Windows 8 Metro Application

Of late I have been playing a lot with Windows 8 and wanted to learn about Metro applications. For me the best way to learn a new technology is by building an application using that technology. I have been working a lot with WPF for the products we’re building at Cerebrata, I thought it would be interesting to build a Metro application using HTML 5/JavaScript/CSS.

About the application

When it came to decide what to build, initially I thought I would build a Windows Explorer kind of Metro application. However because of Metro applications security model where you don’t have complete access to end user’s desktop, I had to drop the idea. I have this really old iPhone with me and one of the applications installed there (which I really like) is World Clock. So I thought I would build that application to learn some of the concepts.

This is what the application looks like:

Currently this application allows you to:

  • Search for capital cities and add clocks based on their time zones.
  • Remove previously saved clocks.
  • Preserve clock settings when the application is suspended.

What this application does not currently do:

  • Handle daylight savings time.

My experience developing this application

During my last trip to US, I purchased Samsung Series 7 tablet (similar to what was given out at BUILD). I installed Windows 8 Developer Preview on that tablet and bought some accessories (like Bluetooth keyboard and mouse) thinking I will do the development on that tablet itself. As it turned out, it was rather difficult (on a personal level) to use such a small screen device for programming. I ended up installing Windows 8 on my primary laptop (along with Windows 7 in dual boot mode) and did most of the development on that laptop only. Windows 8 comes with Visual Studio 11 Express and Microsoft Expression Blend 5 Developer Preview. Being a developer, I did not use Expression Blend and did all my coding in Visual Studio.

The Good!

Developing projects is quite easy in Visual Studio. Microsoft has done an excellent job of creating different project templates for both HTML5/JS and XAML/C# stack and depending on the template you choose, you get lots of stuff like JavaScript, CSS and HTML files into your project already which makes it easier for you to start coding. Furthermore when you add new items, relevant files get added automatically for you by Visual Studio (e.g. when you add an HTML file, Visual Studio automatically adds a JavaScript and CSS file for that HTML file easily). In-built debugger was also of great help as I was building the application. One of the neat feature available in Visual Studio is the ability to trigger application suspend and resume.

Not So Good!

Currently Windows 8 is in developer preview mode (pre-beta) and it comes with its own set of challenges. If you have already built an application on Windows 8, then you must be aware of these challenges but if you’re starting fresh you can expect the following (which is what I faced):

  • Lack of detailed documentation on MSDN site: Though I must say for a pre-beta version the documentation is good enough if you want to grasp some of the basic concepts however personally I felt the documentation is not detailed enough. I’m pretty sure that when Windows 8 goes into beta (it is rumored that it will go into beta sometime Feb/March 2012), the documentation will dramatically improve.
  • “Developer Preview” label: This is pre-beta software and from what folks (who have seen the beta) are saying that beta is going to be significantly different than this version. We don’t know what’s going to be there in beta version and how it will be different that this version.
  • Lack of support on MSDN forums: I was expecting much better support on MSDN forums especially from Windows 8 product team. Support from Microsoft is there but it can be much better. As more folks from the community start building applications, I believe the level of support would go up.

Helpful Resources

Apart from documentation on MSDN site, I found following resources extremely helpful when I was building this application:

  • Videos on Windows 8 from BUILD conference: Microsoft unveiled Windows 8 during BUILD conference and there were a number of sessions covering Windows 8. I would strongly recommend watching these videos. You can find videos for the session here: http://channel9.msdn.com/events/BUILD/BUILD2011
  • Windows 8 Developer Preview Metro style app samples: There are close to 200 projects (XAML/C# and HTML/JS) which will get you up and running pretty fast. My only wish with these samples was that they should have been in the form of Platform Training Kit (I’ve seen that in Windows Azure) or Hands on Labs where developers get to build these applications in small steps rather than looking at the code for the complete application. Let’s hope that when Windows 8 comes into beta, we get these. You can download/view these samples here: http://code.msdn.microsoft.com/windowsapps/.
  • Pluralsight introductory course on Windows 8: If you’re a Pluralsight customer, I think it’s worth checking out their Windows 8 course. Dan Wahlin, Ian Griffiths and John Papa have done an excellent job explaining the core concepts of Metro applications. You can find more information about this course here: http://www.pluralsight-training.net/microsoft/Courses#windows-8

More about the application

Now coming back to the application, the concepts I have tried to utilize building this application are:

  • Data binding
  • Navigation
  • AppBar
  • Binding converters
  • Application states (full screen/snapped etc.)
  • State preservation (suspend/resume)

In the subsequent blog posts, I will try and explain how I applied each one of the above concepts to build this application. But for now, you can download the sample using the link below and give it a spin. This application is not complete by any means and is missing some of the obvious things like adjusting for Daylight Savings Time etc. If there is any feedback on the code, please feel to share.

Source Code

Summary

It’s been just a few days that I have been using Windows 8 and I must say I am quite impressed with what Windows 8 has to offer so far. From what I have heard so far from the folks who have seen the beta, it is going to be even more amazing. From developers perspective, like every developer developing on Microsoft stack should make an effort to learn Windows Azure similarly they should make an (extra) effort to learn Windows 8.


[This is the latest product I'm working on]