Developing Metro Style App using JavaScript and Visual Studio 2011

Posted by: Mahesh Sabnis , on 12/21/2011, in Category Visual Studio
Views: 101676
Abstract: In a previous article, we explored Windows Runtime (WinRT) and saw how to develop Metro Style Apps in C#. In this article, we will see how Metro Style Applications can be developed using JavaScript, Visual Studio 2011 Developer Preview and Windows 8 Developer Preview.

In a previous article, we explored Windows Runtime (WinRT) and saw how to develop Metro Style Apps in C#. In this article, we will see how Metro Style Applications can be developed using JavaScript, Visual Studio 2011 Developer Preview and Windows 8 Developer Preview.

 

Note: You have to install VS2011 developer preview on Windows 8 Developer Preview to get access to the template for Metro Style App.

 

What is a Metro Style App?

As Microsoft defines it “Metro style apps are full screen apps tailored to your users' needs, tailored to the device they run on, tailored for touch interaction, and tailored to the Windows user interface. Windows helps you interact with your users, and your users interact with your app

 

Step 1: Open VS 2011, expand the JavaScript template and create a new Metro Style Grid application project, as shown below:

 

Metro Style App

 

Step 2: The project structure will be as below:

 

Metro Style Project Explorer

 

In this structure, you will see CSS and JavaScript files in the  ‘CSS’ and ‘js’ folder. You can also add your designed Logo in the ‘images’ folder.

 

Step 3: Open default.html and add the following Html UI control as below. You can add any business logic, but I will keep things simple and display only a date.

 

Metrostyle JavaScript

 

Step 4: In the ‘package.appxmanifest’, I have set the AppLogo and some settings, as shown below:

 

image

 

Step 5: Run the application and the result will be shown in the Emulator as shown below:

 

image

 

Click on ‘Click Me’ and the result will be as shown below:

 

image

 

In the Windows 8 Developer Preview, the above Metro Style App will be deployed in tile form as shown below: (Red Marked)

 

image

 

Conclusion: Windows Runtime (WinRT), provides mechanism for developing Metro Style Apps for all types of developers with their C#, JavaScript and VC++ expertise.

 

 

The entire source code of this article can be downloaded over here

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on .NET Standard and the upcoming C# 8.0 too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Alex on Wednesday, December 28, 2011 5:10 AM
Mobile apps are hot today. But hiring a programmer is too expensive. I used snappii.com to make apps. It's really easy, the web service allows to make mobile apps in minutes, and without programming skills at all.

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook