Introduction to Windows 8 Development: Working with Controls

by Dmitry Kirsanov 14. January 2013 00:00

Windows 8 everyday controls

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.

Touch First

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.

HTML5 Controls

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.

JQuery

One of the beauties of programming applications using HTML5 is that you can use well known libraries, such as JQuery. It’s worth to note, that in Windows 8 Store Apps, your JavaScript is running with additional security-related restrictions, so chances are – you would have to tinker your library or avoid using functions that violate Windows security restrictions.

So, while technically you can use libraries, test thoroughly. To use the external JavaScript library, all you need to do is to reference it by specifying it’s .js file as the source:

<script type="text/javascript" src="/js/jquery-1.8.3.min.js" />

This also means, that if you have some favorite design elements that depend from JQuery or other JavaScript library, you may try to use them in your Windows 8 application.

WinJS Controls

These are the ones you are going to use most. They look and feel exactly like controls that are available for your XAML Windows 8 apps, except that there are more controls for HTML / JavaScript apps, and they are different inside. In other words, the only thing that HTML controls share with XAML controls is the look.

Toggle Switch example

WinJS is the JavaScript library that provides (among other things) the connection between the user interface of your controls and the code behind them. You can only use it in Windows 8 apps, as it is part of WinRT, and that, of course, decreases the degree of compatibility of your HTML5 / JavaScript code with other platforms.

You declare your WinJS controls as the div tag, with control definition set in div tag attributes. During rendering of your html page, the control definitions will be transformed into control’s HTML and JavaScript code.

The controls in HTML5 applications work very similar to controls in ASP.NET – they are rendered as HTML and JavaScript to the end user, even though their backend logic may be written in C#, VB.NET or C++. However, you don’t have to think about it, unless you are authoring your own control. And if you are thinking about creating the control by yourself, your HTML and JavaScript doesn’t have to be compatible with anything but MSIE 10, so in that sense developing controls for Windows 8 is somewhat easier than for ASP.NET.

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:

Date Picker

Date Picker WinJS

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. Telerik Date PickerHowever, this component is not available for XAML, so you will have to resort to 3rd party control.

<div data-win-control="WinJS.UI.DatePicker"></div>

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.

Time Picker

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).

Time Picker WinJS

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" />

Rating

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.

Rating WinJS

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" />

Semantic Zoom

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:

<div data-win-control="WinJS.UI.SemanticZoom">

  <!-- 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>

</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 example

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.

Progress Bar

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.

<progress />

And it looks like that:

Progress Bar HTML5The 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:

<label class="progressRingText">
    <progress class="win-ring withText" />
    Processing
</label>

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:

Telerik Chart Control

or their Gauge control:

Telerik Gauge

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.

blog comments powered by Disqus