Developing a Metro Style App with HTML and JavaScript
Microsoft unveiled the Windows Developer Preview, a pre-beta version of Windows 8 for developers, at the Microsoft BUILD conference in September 2011. The most compelling new feature for developers and users alike is the new Metro style user interface. In this article I will introduce you to Metro apps. Hopefully I can clear up some misconceptions about Metro apps and explain how this new UI paradigm relates to you and your existing skillset as a .NET developer. Lastly, I will demonstrate building a Metro app using HTML and JavaScript to jumpstart your journey into building Metro apps. What Is Metro? Metro is Microsoft’s newest client-side user interface paradigm targeting touch-enabled devices. You are already familiar with the UI style if you have seen or used a Windows Phone 7. While Microsoft claims the Metro style UI is equally at home with a mouse and keyboard, clearly you achieve the optimal user experience using touch-enabled devices. Figure 1 provides you with the opening start screen for the Windows Developer Preview. 
Figure 1: The new Metro user interface is touch friendly and easy to navigate.Developers View from 30,000 Feet During the opening keynote at the Microsoft BUILD conference, Steven Sinofsky, President of the Microsoft Windows and Windows Live Divisions, introduced the world to the new paradigm for Windows 8 applications (Figure 2). 
Figure 2: The Windows 8 platform and tools relationships.Windows 8 applications are either Metro style Apps (referenced in the green area of Figure 2) or they are Desktop Apps (referenced in the light blue area of Figure 2). Metro Style Apps Unlike other competitor platforms that dictate that you build apps with a specific language, Microsoft provides two distinct tracks for building Metro applications. If you have experience creating WPF and/or Silverlight applications than you can leverage those skills by building new, or converting existing applications to, Metro apps with XAML and your choice of language (C#, VB, C or C++). If you have experience creating traditional standards-based web applications than you can leverage those skills by building Metro applications with HTML/CSS3 and JavaScript. The UI technology you select will dictate which language you’ll use and vice-versa. Existing investments in either XAML-based or HTML/CSS-based design assets will not be lost since you can leverage either based on which option you choose. In the end, WPF and/or Silverlight developers, as well as HTML and JavaScript developers, will all find themselves right at home building Windows 8 Metro applications. Initially I wondered if there is a tool provided that will convert HTML/CSS into XAML or XAML into HTML/CSS. There is not. I also wondered if I can mix and match UI design assets and languages, for example using HTML/CSS and C#. The answer is no. XAML works with the traditional .NET languages and HTML/CSS works with JavaScript. Both XAML-based and HTML/CSS-based apps take advantage of a new unmanaged runtime engine called the Windows Runtime library or WinRT.
WinRT WinRT provides system services for Windows 8 Metro applications. WinRT has over 1,800 different objects providing services for you to use. These services include file system access, communications and networking access, device and printing access and so on. WinRT is not a layer on top of Windows; it is Windows (Figure 3). If you think this sounds like the .NET Framework you are right but WinRT does not replace .NET, it coexists with it much like the Win32 API coexists with the .NET Framework in Desktop Apps mode (more about Desktop Apps below). WinRT contains many of the same types of categories you have grown accustomed to in .NET but with a different API. I think you will find that working with WinRT feels very natural and intuitive. 
Figure 3: The relationship between .NET and WinRT.| " |
I think you will find that working with WinRT feels very natural and intuitive.
| " |
Metro style Apps and Desktop Apps both use the new .NET Framework 4.5 though each uses it a little differently. Metro apps use the .NET for Metro Style profile and Desktop Apps use the .NET Client profile. Each are simply profiles within the .NET Framework and not separate versions. The Metro Style profile is a subset of the Desktop Client profile because Metro style Apps run within an app container that restricts what an application can do in order to protect the user’s machine from malicious apps. Regardless of whether the app is a Metro App or a Desktop App, if it’s a C# or Visual Basic app it compiles to the same MSIL. Both C# and Visual Basic can call directly into WinRT for system resources not available in .NET, accessing the sensor inputs for example. C, C++ and JavaScript Metro style Apps only access WinRT. Think of using WinRT like you used to call the Win32 API to access the operating system services, but instead of having to use something difficult like P/Invoke() or COM, you’re doing it in a much more familiar way. The functionality of the following code isn’t important for the moment, but notice the using statements and the reference to FileOpenPicker. Windows.Storage and Windows.Storage.Pickers are WinRT references and FileOpenPicker is a new WinRT class for selecting files. using Windows.Storage;
using Windows.Storage.Pickers;
var picker = new FileOpenPicker();
picker.FileTypeFilter.Add("*");
var files = await picker.PickMultipleFilesAsync();
foreach (StorageFile file in files)
{
listBoxFiles.Items.Add(file.FileName);
}
I think you will find working with WinRT is much more natural than the WIN32 API but the objective is the same: accessing system services. Some functionality has been moved from .NET directly into WinRT. This means that your code referencing those migrated .NET features will not compile and will require minor modifications to reference the correct WinRT objects. The classes available to your Metro app via the .NET for Metro Style profile are restricted based on what is considered safe for a Metro app to use within the app container. This is exactly how things work with Silverlight and Windows Phone 7 apps. Silverlight features that aren’t safe or don’t make sense for the phone environment are restricted. Using HTML and JavaScript Metro apps are not cross-platform. They are native applications designed to run on Windows 8 exclusively. This is an important distinction that developers who are using HTML/CSS/JavaScript need to keep in mind. Just because you are developing with HTML, CSS and JavaScript that does not mean you are creating a cross-platform web application. | " |
Metro apps are not cross-platform. They are native applications designed to run on Windows 8 exclusively. Developing with HTML, CSS and JavaScript does not mean you are creating cross-platform web applications.
| " |
Desktop Apps All this Metro talk means that .NET and its related technologies like WPF, Silverlight, and WinForms are all dead technologies, right? Wrong. Referring to the light blue blocks on Figure 2, all your existing .NET and Win32 applications will continue to run just fine in Windows 8 as Desktop Apps. Microsoft understands that not all applications are suited to be Metro apps. Take Visual Studio for example. It is firmly entrenched in the Desktop Apps world and it isn’t going anywhere soon. Does this mean that you can continue to build new applications and maintain existing applications with WPF, Silverlight and WinForms? Yes. The good news is that your .NET skills and design assets are protected in the new world of Metro apps and that should you or your organization not make the move to Metro application development right away, you will be just fine in the Desktop Apps environment. | " |
All this Metro talk means that .NET and its related technologies like WPF, Silverlight, WinForms are all dead technologies, right? Wrong.
| " |
| & | | 
By: Jim Duffy
jduffy@takenote.com
Jim Duffy is founder and president of TakeNote Technologies, an award-winning training, consulting, and software development company specializing in .NET software developer training and helping clients create business solutions with Microsoft enterprise technologies. Jim’s expertise is with .NET technologies, ASP.NET, SQL Server and Visual FoxPro-to-.NET conversions. He has a BS degree in Computer and Information Systems and over 25 years of programming and training experience. He is an energetic trainer, skilled developer, and has been published in leading developer-oriented publications.
Jim is a Microsoft Regional Director, a Microsoft MVP, an ASPInsider, and is an entertaining and popular speaker at regional user groups and international developer conferences.
You can find additional information about Jim, TakeNote Technologies, links to his blog, as well as a public training class schedule, on-site training information, consulting information, and software development services at www.takenote.com.
jduffy@takenote.com |