One essential part of Windows 8 software development is developing the user interface. Which means – placing right controls in right place, and make them an organic part of overall user experience. And what an exciting topic is that!
In Windows 8, there are only few new controls, but the ones you knew were changed drastically. You can choose either XAML or HTML5 for your application, and among other things, the set of available controls will change, so now you’ll have to master your skills of using more controls than before.
The “same” controls may look the same at the screen, but they are different inside. HTML5 provides you with additional controls specified in HTML5 standard, and you don’t have to worry about multi-browser support (unless you want to keep the certain degree of compatibility, anyway), but the problem is – HTML5 is not covered fully by MSIE 10, which provides you it’s HTML5 engine – the Trident.
We’ll cover both native and 3rd party controls available to you for both XAML and HTML5 applications. For the sake of simplicity, this article will be more about HTML5, while the next one – about XAML controls, and the third part – about general rules and principles of user interface design in Windows 8. Then we’ll cover Windows Phone 8 controls as well.
The switch of the UX paradigm to “touch first” affected the shape of existing controls, making them more tap-friendly, suitable for fingers. We’ve got an alternate checkbox control, called Toggle Switch, and ability to apply different styles to others. But these changes are rather cosmetic, while changes in some controls were more drastic, as you’ll see further.
For example, you can see that although the familiar Combo Box looks just like before, when you click on it – the space in between the items is wider, making it much easier to tap. It is also recommended to increase the margin between the components in your page, comparing to what you did before Windows 8. Always keep in mind the diameter of a typical fingertip and how it may affect the usability.
When building HTML5 applications, obviously you can use the typical HTML5 elements, such as video player, date and time pickers and others. The only problem is – some of these components are not yet implemented in MSIE10. The last time I checked for browser compatibility, the only browser that displayed date picker was Opera. The MSIE, Firefox, Chrome and Safari displayed something else – be it text box or masked edit control.
When building applications for Windows 8 using HTML5, we don’t really care how (and whether) our HTML code would be rendered by other browser. And of course HTML 5.0 will be completely supported by MSIE till the end of 2014 (and 5.1 by 2016), but currently you would have to resort to 3rd party controls to ensure best user experience and functionality.
HTML5 controls which normally do not depend from WinJS include Audio, File Upload, Email input box, Canvas, Video and many more. Anyway, always test before assuming you can use them in your application.
Although HTML5 controls are defined by independent standard, they are extended with additional properties and events, specifically for use in Windows 8 applications. Make sure you check with MSDN before implementing them.
Some controls you’ll see in the toolbox, you may know from other frameworks, such as .NET, but here are some of the other, new controls, available to us at the moment:
As I said before, no modern browsers support the HTML5 date picker tag at this time, excerpt for Opera, and so there was a need to create such control for Windows 8 HTML applications. However, this component is not available for XAML, so you will have to resort to 3rd party control.
That’s how you declare the date picker control in HTML code of your application page. Personally, I am using Telerik date picker control, as it increases the degree of compatibility between my XAML and HTML5 code, as well as to have the same look.
As you can see, it looks a bit different (even though they both may look different using the CSS styling) and more touch-friendly out of the box, but that’s the matter of style. We’ll cover 3rd party controls a bit later here.
The same as date picker, but for time. The difference with 3rd party controls is the same – not decisive, but helps to maintain the style if you’re using something else (from the same package of controls).
Here’s the original WinJS time picker control as it would look out of the box using the declaration below:
<div data-win-control="WinJS.UI.TimePicker" />
It’s too important to miss, ratings are everywhere now. It is so common now, it’s treated as the violation of your base human rights when you can’t leave rating on whatever content you have access to.
And that’s how it looks. If you were developing ASP.NET controls, then you have a solution to place a rating on your website already, but if not – there are few of them at CodeProject available for free, as well as the one in mentioned Telerik controls for ASP.NET.
Anyway, for Windows 8 apps you don’t have to look for 3rd party solutions, as here it is, available for HTML5 apps:
<div data-win-control="WinJS.UI.Rating" />
One of the great features of Windows 8 is called “Semantic Zoom” – when you pinch and stretch your fingers to “open” an object on your screen, or using Ctrl + mouse wheel or Ctrl + Shift + (plus) or (minus) key. In HTML apps, that’s yet another HTML control which looks like that:
<!-- Control that provides the zoomed-in view. -->
<div id="zoomedInView" data-win-control="WinJS.UI.ListView"></div>
<!-- Control that provides the zoomed-out view. -->
<div id="zoomedOutView" data-win-control="WinJS.UI.ListView"></div>
Speaking about Semantic Zoom, think of it as about the microscope – when you are looking at some object and “magnifying your lenses”, you start to see the the contents of the object.
Semantic Zoom uses two distinct modes of classification (or zoom levels) for organizing and presenting the content: one low-level (or zoomed-in) mode that is typically used to display items in a flat, all-up structure; and another, high-level (or zoomed out) mode that displays items in Groups and enables a user to quickly navigate and browse through the content.
You could use it, among other things, to display a product catalog, a photo album or an address book.
One of the most difficult to master, Progress Bar control indicates the work in progress. It’s actually the HTML5 control, not WinJS, but worth mentioning nevertheless, since it was extended by WinJS.
And it looks like that:
The progress bar could show either the precise progress of the ongoing work, or the fact of such work.
When you don’t specify the Value argument, it won’t show the progress.
You can change the appearance of Progress Bar by simply changing the class attribute of the tag.
<progress class="win-ring" />
Obviously, the “win-ring” thing is not the part of the HTML5 standard, but extension provided by WinJS. And it’s not the only extension for this tag.
The code in the example above would render the simple ring without any text. However, if you’d like to add some text, you would have to add additional element:
<progress class="win-ring withText" />
I was just kidding about the difficulty here.
Third Party Controls
HTML app developers have a way better toolbox than XAML. However, some essential controls are not available in either of tool boxes. Charts, gauges, sliders – these controls are not members of the HTML5 family of controls provided by WinJS. Yet, they are paramount in many scenarios, especially the line-of-business applications.
Let’s confess, we don’t like using 3rd party controls. Who likes to voluntarily add dependency from someone else’s code and hope that author did test his stuff at least as good as you do test yours?
Well, sometimes 3rd party control means meeting the deadline and not having to reinvent the quite expensive wheel. More often than not, we have no free developers, who could develop awesome component. So we have to rely on others and in that case we’d better rely on the best.
Personally, I always try to minimize the use of 3rd party components, but there is no way I would invest my time in developing something like Telerik Chart control:
or their Gauge control:
The benefits of using 3rd party controls, when they are necessary, include having the same styles across diverse platforms – when one company has similar solutions for different platforms (like Windows 8 HTML, Windows 8 XAML, Windows Phone 8 and finally – ASP.NET and maybe even Silverlight), it could ensure that they all look and feel the same, even if my own code behind the user interface would have to be different.
If you never had to use 3rd party controls in your applications, here are few questions you should ask yourself before making such decision:
1. How much do you need exactly this functionality, or this part of user interface to look exactly this way. Remember the Agile principle – YAGNI – You Ain’t Gonna Need It.
2. How much would it cost for you to develop this feature yourself. How experienced you are with this technology? Wouldn’t it be cheaper to buy the existing component? Make sure you understand the pricing of both the component and of your own time.
3. If the component is free, are you sure you can use it in your project / environment? Read the license!
4. Does the company provide the technical support? Do they have community of users, which could support you in the absence of technical support?
5. Is the source code provided? That means – if you will need to make changes necessary to fix the bug or add the feature to the control, would you be able to do that?
I reviewed some controls available for Windows 8 at the market – ComponentOne, DevExpress, Telerik and a few others, and I advise you to do the same, but for me at this moment the favorite is Telerik Windows 8 controls, both objectively (price-quality-compliance to 5 values above) and subjectively (a few years experience with their ASP.NET controls), so I suggest you to go to Windows Store and search for Telerik Examples app (just search for “Telerik”) – there are two example apps showing the controls for both HTML5 and XAML apps. We’ll cover a few of their XAML controls next time.
That’s all for the part one, next time we’ll talk about XAML and will cover some common controls and UI development principles in part 3.