"From windows to tiles..." Series
For today's Modern UI Monday post it just felt right to highlight this series from Philip Schäfer, where he's helping us move from windows to tiles (I know, imagine that given the title of this post and series...)
Sensors are one of the most defining features that distinguish mobile devices such as tablets or smartphones from common PCs. This being the case, we have been enormously enthusiastic to play around with these components when our brand-new Surface RT tablet arrived recently. And by the way, this device feels like a charm.
Eventually, we decided to share our experiences in this regard in terms of a blog post giving an overview on the entire sensor landscape being available on the current Surface RT tablet running WinRT – the ARM chips targeting brother of Windows 8 – as an operating system.
Basically, the currently available version of Microsoft´s Surface tablet ships with four sensor devices:
- An ambient light sensor
- An accelerometer
- A gyroscope
- A magnetometer
Given the existence of these four sensors on a hardware layer, we may exploit them in various ways on an application layer; therefore, WinRT abstracts 7 sensor interfaces in its respective API:
- An accelerometer
- A gyroscope
- A compass
- A light sensor
- An orientation sensor
- A simplified orientation sensor
- An inclinometer
For detailed information regarding the interplay of hardware-level sensor devices and application-layered sensor interfaces, please see here.
This blog post seeks to demonstrate the capabilities of Windows 8 “live tiles” and “badges” as initially introduced in Microsoft´s design language Modern UI (also referred to as Metro UI). Being one of the most defining UI elements in Modern UI style, the concept of (live) tiles should be worth looking at a bit closer.
Already introduced in Windows Phone 7, the concept of “(live) tiles” has also been adopted in Windows 8 and thus applies regardless of whether our target platform is a mobile device (such as a Windows 8 phone or a corresponding tablet like the Microsoft Surface) or a Personal Computer. The term “tile” defines a rectangular button capable of displaying images, textual content and so-called “badges”. In this context, a badge may be either a small icon or a numeric value that is displayed in the bottom-right corner of a tile. The term “live” tile implies that the contents displayed by a tile may be updated dynamically during runtime. Taking into account both badges and a tile´s capability to change its appearance dynamically, Microsoft provides a mighty new feature enabling developers to keep the user updated about an application’s status even if the application itself is terminated or suspended.
A tile displaying its application´s name (bottom-left corner), two dynamically set strings (lines at the top) and a badge notification (bottom-right corner)
Microsoft allows us to provide tile images for three purposes:
To begin with, the application we intended to port as a first get-in-touch with Windows RT (also referred to as Windows Runtime, WinRT) is a small, Windows Phone 7 based soccer game leveraging the mightiness of Silverlight as a subset of the Windows Presentation Foundation (WPF). Therefore, the game´s entire frontend had been designed exclusively using Silverlight XAML and related concepts. Furthermore, the applied architecture strongly follows MVVM (Model-View-ViewModel) principles targeting a strict separation of user interface and application logic. The reason for this is, that the game itself has not been created with the intention of selling it but with the intention of evaluating MVVM in the context of rich graphics and highly dynamic UI states.
Typically, computer games tend to contain various animations ranging from trivial styling of UI elements to complex transitions. Therefore, it would make sense to thoroughly stick to the MVVM pattern to enable designers to do their creative stuff without having to care about any C# code . Usually, the design guys don´t even need to launch a Visual Studio instance, they exclusively need the more design-oriented tool Expression Blend where they can exploit the code provided by their coding colleagues without having to care about the respective implementation details at all (and vice versa).
To carry this clear separation and smooth collaboration to extremes, we intensely utilized Triggers, Actions (of all kinds) and Behaviors.
Being guided by the General Porting Process as specified by Microsoft, we started creating a new, so-called “Windows Store” Project and copied our folders containing code and assets. Please note, that the aforementioned project type specifies a Windows RT (or Modern UI style) application.
Apart from that, please take into account that this article takes the (Developer) Preview as a basis and might apply only partially in future versions of the Windows RT API.
II. Model and View Model Code
Launching their new operating system Windows 8, Microsoft establishes an entire set of novel technologies and concepts. The familiar desktop will be supplemented with an additional Start screen in “Modern UI” style (formerly known as “Metro UI” style); in addition to that, Microsoft introduces a new application type called “Windows Store App” (also referred to as Windows RT application or Modern UI application). Especially this new application type is the subject of controversial discussions in the community and thus requires to be focused on in particular.
On the one hand, there had been a certain enthusiasm concerning new controls, on the other hand there had also been a number of reports about shortcomings in comparison to Windows 7 WPF (Windows Presentation Foundation). Undoubtedly, however, the variety of applicable target platforms ranging from PCs to mobile devices such as tablets (i.e. Microsoft Surface which has been released just recently) and phones (at least to a certain extent) strongly contributes to the new operating system´s attractiveness.
From a developer´s point of view, Windows RT raises a number of questions:
- Which new features will be offered and how do they work?
- How does Windows RT differ from Silverlight or WPF?
- Which concepts and technologies will still be supported?
- How smooth can one port existing WPF-/ Silverlight-based applications to Windows RT?
Obviously, there are numerous exciting questions that require appropriate answers. Being a UI-focused company with strong expertise in the area of WPF and Silverlight, Centigrade GmbH is currently thoroughly concerned with the development of Windows Store applications. In fact, Centigrade is an official vendor of Microsoft Germany, supporting companies new to Windows RT with respective consulting services.
For this reason, we are intensely investigating the domain of Windows RT and hence want to share our knowledge and experiences with the community. Thus, we are going to publish several blog posts in the upcoming weeks both discussing Windows 8/ Windows RT related issues and providing hands-on tutorials.
New posts in this series are still coming, so subscribe to the feed and follow along on his journey...