• Article

April 2014

Volume 29 Number 4

Modern Apps : What’s New in Windows 8.1 for Windows Store Developers

Rachel Appel | April 2014

Rachel AppelWindows 8.1 is a substantial update to the Windows OS, with many new enhancements and features to help you innovate and build the best creations possible. In this article, I’ll look at the new enhancements in Windows 8.1 for developers who build Windows Store apps.

More Ways to Do Windows and Tiles

Before Windows 8.1, your app could display in one of three modes: full view (landscape or portrait), filled view or snapped view. Users of Surfaces and other devices requested more control over window management such as, for example, being able to view more than two apps concurrently. Therefore, to reflect the varied uses of the customer base, the Windows team responded by adding more ways to manage and organize windows and screen real estate. This means users can position windows side by side equally or in any proportions they want, and an app can also create multiple views that users can size and position independently.

Previously, in Windows 8 apps built with JavaScript, you’d use CSS media queries to control how the page lays itself out depending on its view state (full, filled or snapped). In Windows 8.1, this has changed so you only need CSS media queries that target the dimensions and orientations of the screen, as shown here:

@media screen and (min-width: 500px) and (max-width: 1023px) {
  /* CSS styles to change layout based on window width */
}
@media (min-width: 1024px) {
  /* CSS styles to change layout based on window width */
}
@media screen and (orientation: portrait) {
  /* CSS styles to change layout based on orientation */
}

This means you don’t need to adjust or query for specific app view states, as you did before. You only need to use media queries and set a minimum width and orientation, which you can do in the media query itself. The mandatory minimum height of any Windows app is 768 pixels.

Tiles usually bring the user to the app in the first place. Located in the Start menu, live tiles are an excellent modern feature of Windows and Windows Phone. No other platform has quite the same capability to show all your data in a real-time dashboard the way Windows does. That said, as a developer, you can extend your apps to use four different tile sizes: small, medium, wide and large, as shown in Figure 1.

New Live Tiles in Windows
Figure 1 New Live Tiles in Windows (Not to Scale)

The package manifest in Visual Studio contains a Visual Assets tab where you can configure the tile sizes, along with other visual assets such as the splash screen.

New Visual Studio 2013 Project Templates Help You Build Modern Apps

As you might expect, with each Visual Studio release come new project templates. New Windows Store apps built with JavaScript (using the Windows Library for JavaScript, or WinJS) project templates include a Hub template, while the new XAML project templates include Hub, Portable Class Library and Coded UI Test.

The new Hub project template in both WinJS and XAML encapsulates a popular design approach I refer to as “modern.” Its default layout contains five different sections carefully crafted so you can offer varied visual arrangements of data to your users. The Hub layout makes it easier for users to scan and pinpoint what’s important to them. Designing a modern UI means you present data in ways different from previous non-modern, traditional techniques, with a focus on the user and usability. The Hub project does just that.

Inside the Hub project’s pages folder live three folders named hub, item and section. Each of these comes with its own corresponding .html, .js and .css files. In the XAML projects, there are equivalent pages named HubPage.xaml, SectionPage.xaml and ItemPage.xaml in the root folder. Figure 2 shows what the Hub project, featuring the Hub control, looks like at run time.

The Hub Project at Run Time


Figure 2 The Hub Project at Run Time

As you can see, the Hub project and control show a panorama view of nicely arranged content. It’s a sleek and modern design.

Updated and New HTML and XAML Controls for a Modern UI

New controls and control improvements in all project types make them simpler to use. These new and updated controls make it easier than ever to create and publish a modern app. In both HTML and XAML, there are performance and data-binding control enhancements. For a primer on Windows Store controls, see my MSDN Magazine article, “Mastering Controls and Settings in Windows Store Apps Built with JavaScript,” at msdn.microsoft.com/magazine/dn296546.

In the Hub project template comes the Hub control, new for both WinJS and XAML. The default template’s Hub control structures the UI layout with five sections to scroll through horizontally, all in the app’s starting page. The hero section is the crown jewel of the app, often used for presenting the featured news story, recipe, sports score, weather data or whatever it may be. It’s also the first thing a user will see after the splash screen. Provided as a starting point for the developer, the next four sections simply contain data items of varied sizes. Users can navigate to the listing of section 3’s group membership or to individual items in section 3. Of course, the Hub control is flexible and can accommodate any number of sections with any content. It’s designed to easily handle heterogeneous content of different kinds and from different sources, as opposed to strictly homogeneous content of similar data from the same source.

The Grid template relies only on the ListView control. Now the new Hub control contains an embedded ListView control so navigation works as you’d expect, to either the group listing or an individual item, depending on which item the user taps or clicks.

This ListView has many modern enhancements, including support for drag-and-drop operations. Alongside drag and drop is a ListView enhancement for reordering items. Simply set the itemsReorderable property of the ListView to true and no other code is required. The ListView includes several other enhancements, including improved cell spanning, better accessibility and better memory management.

While the ListView control has many new and shiny features, there’s another control worth mentioning: the Repeater. Several UI controls across the Microsoft .NET Framework use repeating controls. For example, there’s an ASP.NET Repeater control. Grid controls and the like exist throughout the .NET platform, customized to the varied ways you can build a UI with the .NET Framework. As you probably suspect, you can use the Repeater control to generate a list of items with styling from a data set. In WinJS, this means the Repeater will properly render just about any embedded HTML or WinJS controls. Figure 3 shows an example of the Repeater control. Note how it works much like a ListView, except that groups are no longer required. As you can see in the sample data in Figure 3, the JavaScript creates a simple array.

Figure 3 HTML and JavaScrip That Builds a Simple Repeater Control

<!—HTML -- >
<div id="listTemplate" data-win-control="WinJS.Binding.Template">
  <li data-win-bind="textContent: title"></li>
</div>
<ul data-win-control="WinJS.UI.Repeater"
  data-win-options="{data: RepeaterExample.basicList,
  template: select('#listTemplate')}">
</ul>
// JavaScript
(function () {
  "use strict";
  var basicList2 = new WinJS.Binding.List(
    [
      { title: "Item 1" },
      { title: "Item 2" },
      { title: "Item 3" },
      { title: "Item 4" }
    ]);
  WinJS.Namespace.define("RepeaterExample",
    {
      basicList: basicList2
    });
})();

The NavBar is another control that improves the UX by providing menu options in a way that’s conducive to user interaction. Unlike the JavaScript menus on popular Web sites from days of yore, modern menu items are large and optimized for a variety of input devices. We’ve all seen someone not so skilled with a mouse struggle with those tiny, cascading Web site menus of the past. This means, as part of modern app UI design principles, the NavBar works well with touch input, a must-have feature for tablets. The user invokes the navigation toolbar by swiping from the top or bottom edges, using the Windows key+Z shortcut or by a right-click. If you’ve used the AppBar control, the NavBar control works almost identically.

Those who want to integrate a modern Web site with client apps can use the new WebView control. It can present data from the Internet much easier than in previous WinJS versions that used an iframe. The WebView control is an HTML element that looks like this:

<x-ms-webview id="webview" src="https://rachelappel.com"
  style="width: 400px; height: 400px;"></x-ms-webview>

This is different from the standard way to create WinJS controls by using a <div> element and setting the data-win-options attribute. The WebView control serves as a container that’s hosting the external content. Along with that are security and sandboxing implications, so using an HTML element works better than a typical control in this case. WebView isn’t a control that you can just implement with other HTML elements, and it must be supported directly in the app host. Note that work is being done to propose a <webview> element as a standard for consideration by the World Wide Web Consortium (W3C).

Until this Windows release, XAML hasn’t had parity with HTML as far as controls were concerned. Now, though, XAML has caught up by adding the following new controls:

  • AppBar:  The menu bar across the bottom of the screen.
  • CommandBar:  An individual menu bar item.
  • DatePicker:  A set of three dropdowns that capture the date from the user.
  • Flyout: A modeless, light-dismiss dialog box or a settings control.
  • Hub: This lets you display a panorama of various-sized items in groups.
  • Hyperlink: A hyperlink that navigates to a URI.
  • MenuFlyout: A predefined Flyout specifically styled so it displays a list of menu items.
  • SettingsFlyout: A Flyout that appears from the right side of the screen upon the user’s swipe or interaction. It’s used for managing app settings.
  • TimePicker: A control that lets the user select hours, minutes, seconds and other segments of time. It often complements the DatePicker.

Now there’s less need for XAML developers to create their own visual elements, as many are now part of the UI framework.

Windows 8 introduced the concept of a charm—a shortcut to a common task. Users have their habits, and search as a way to launch apps or find information is a common one. Users frequently search for information, as search engine results will attest. Search is such an important part of computing that it’s part of the Windows OS and now there’s a search control to complement the charms. When you have data local to your app that users should be able to search, use the SearchBox control, and when they need to do a wider-scoped or Internet search, go with the SearchPane (the Search Windows charm introduced in Windows 8). After you configure the search contract in package.appmanifest in the declarations tab, you can provide search services to your users. You may have either the SearchBox or the SearchPane in your app, but not both.

Adding a SearchBox control is as easy as applying the data-­win-control attribute to WinJS.UI.SearchBox, as you might expect:

<div id="searchBoxId"
  data-win-control="WinJS.UI.SearchBox"
  data-win-options="{focusOnKeyboardInput: true}">
</div>

XAML keeps the SearchBox class definition in the Windows.UI.Xaml.Controls namespace, and the declarative syntax looks like this:

<SearchBox x:Name="SearchBox"
  FocusOnKeyboardInput="True"
  QuerySubmitted="SearchBox_QuerySubmitted"
  Height="35" />

Microsoft recommends adding instant search to your apps. Instant search is when users simply type to activate and start a search query. Go to the Windows 8 Start screen and just start typing. You’ll notice the SearchPane immediately initiates a search query across the device as well as on the Internet. You can, of course, emulate this behavior in your apps like the preceding code samples do by setting the HTML data-win-option attribute to focusOnKeyboardInput or the XAML FocusOnKeyboardInput value to True.

Use Contact and Calendar APIs to Stay Connected and Up-to-Date

With Windows 8.1, you get convenient APIs to interact with a user’s contacts and calendar if the user allows. The Contacts API enables a source app to query the data store by e-mail address or phone number and provide relevant information to the user. The Calendar API allows you to add, replace, remove, or otherwise work with appointments and show the user’s default appointment provider app (for example, the built-in calendar app or Outlook) on screen next to your app at run time. This means your app can seamlessly integrate with the built-in apps.

In the Contact API, Windows 8.1 uses the Windows.ApplicationModel.Contacts.Contact class to represent a contact, and the older ContactInformation class used in Windows 8 has been deprecated. Luckily, the API documentation clearly labels each member of deprecated namespaces with the following message: “<member name> may be altered or unavailable for releases after Windows 8.1,” so it’s easy to avoid using these. Figure 4 shows just how easy it is to capture an e-mail address and phone number and shows a user’s contact card from that data. With a bit more code, you could save or show the contact in another part of the app.

Figure 4 Showing a Contact Card

<label for="emailAddressInput">Email Address</label>
<input id="emailAddressInput" type="text"/>
<label for="phoneNumberInput">Phone Number</label>
<input id="phoneNumberInput" type="text" />
<button id="addToContactsButton" onclick=
  "addContactWithDetails()">Add to Contacts</button>
function showContactWithDetails() {
  var ContactsAPI = Windows.ApplicationModel.Contacts;
  var contact = new ContactsAPI.Contact();
  var email = new ContactsAPI.ContactEmail();
  email.address = document.querySelector("#emailAddressInput");
  contact.emails.append(email);
  var phone = new ContactsAPI.ContactPhone();
  phone.number = document.querySelector("#phoneNumberInput");
  contact.phones.append(phone);
  ContactsAPI.ContactManager.showContactCard(
    contact, {x:120, y:120, width:250, height:250},
    Windows.UI.Popups.Placement.default);
}

As you can see, the Contacts API is simple to use, yet allows a deep level of integration with Windows. The Calendar API is quite similar. In code, you make instances of appointment objects and assign values to properties that represent meeting details—such as the date and time of the meeting—and then save them. Then you have contacts and calendaring capabilities in your app.

New Networking and Security APIs

No system update would be complete without networking and security improvements. These networking enhancements will let you do more via code than ever before, yet remain secure. New in the Windows Runtime (WinRT) in the Windows.Web.Http namespace are objects and methods that connect to HTTP and REST services with more power and flexibility than is available with previous APIs such as WinJS.xhr and System.Net.HttpClient. The following code shows how to connect to a RESTful service:

var uri = new Uri("https://example.com/data.svc");
var httpClient = new HttpClient();
httpClient.GetStringAsync(uri).done(function () {
  // Process JSON
}, error);
function error(reason) {
  WinJS.log && WinJS.log("Oops!");
}

Just as with any other library, the Windows.Web.Http namespace has members that perform their duties asynchronously, and with JavaScript, that means using the “done” function that runs upon return of a promise. However, if you want up-to-date, real-time apps, you can use Windows.Web.Http for standby apps that run in the background. Also note that you have all kinds of other capabilities with Windows.Web.Http, such as the ability to control the cache, control cookies, make other kinds of requests and insert filters in the pipeline to do all kinds of interesting things that I don’t have room to explore here. 

The good news is if you access REST services that require user credentials, you (as a user) can now manage them as multiple accounts in the Settings charm. Along with these security and account management features comes the option to use fingerprint authentication in your modern apps using the Windows Fingerprint (biometric) authentication APIs.

Modern Apps Are All About Diverse Devices

You don’t get more modern than 3D printing. Windows 8.1 has it, and you can develop with it! That’s not to mention the catalog of hardware- and sensor-capable APIs that are now available, including the following:

  • Human Interface Devices (HID): A protocol that fosters communication and programmability between hardware and software.
  • Point of Service (PoS): A vendor-neutral API for Windows Store apps that can access devices such as barcode scanners or magnetic-stripe readers.
  • USB: Enables communication with standard USB devices.
  • Bluetooth: Enables communication with standard Bluetooth devices.
  • 3D printing: These are C++ extensions of the 2D printing support that serve as the basis for 3D printer support. You can access Windows printing to send formatted-for-3D content to the printer through an app.
  • Scanning: Enables support for scanners.

The preceding APIs all enable hardware peripheral integration. Since Windows 8, though, apps in both HTML and XAML have been able to take advantage of hardware integration for working with the webcam, accelerometer, pen, touch and other peripherals.

Windows 8.1 includes a set of Speech Synthesis, or text-to-speech, APIs. Using these APIs, you can transform textual data into a vocal stream—and this entails less code than you might expect. For example, the following code sample shows that once a new instance of the SpeechSynthesizer exists, you can call its synthesizeTextToStreamAsync method. The synthesizeTextToStreamAsync method accepts textual data that it then transforms into a voice stream, and then it sends that stream to a player:

var audio = new Audio();
var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
var input = document.querySelector("#input");
synth.synthesizeTextToStreamAsync(input).then(function (markersStream) {
  var blob = MSApp.createBlobFromRandomAccessStream(
    markersStream.ContentType, markersStream);
  audio.src = URL.createObjectURL(blob, { oneTimeOnly: true });
  audio.play();
});

In addition to working with simple textual data, you can use the W3C standard Speech Synthesis Markup Language (SSML) for sentence construction and lexical clarification. Using this XML-based language lets you perform input and output synthesis in a more clearly defined manner, which makes a difference to the user.

Wrapping Up with New App Store Packaging Features

You can configure resources such as tile images and localized strings in the package manifest, which has changed slightly to reflect new image sizes and other configuration options. One such option is to create bundles. Bundles primarily let you add and manage locale-specific information so you can deploy your app to various geographic areas.

When you deploy your app to the store, notice there are a few changes, including an enhanced UI at the developer portal. Users can find your app easier than ever before now that Bing integrates neatly into the OS. With Bing integration, users can discover your app (or any file) via the Windows Store or via a Web site or search. In addition, apps that users install now will automatically update unless users turn the automatic update feature off. You don’t need to worry about frequent app updates on the user’s behalf.

I don’t have enough room to list all the new and enhanced features in the Windows Runtime and Visual Studio here. I do highly suggest you review other new features such as DirectX, which sports several updates that you can read about at bit.ly/1nOp0Ds. In addition, Charles Petzold authors an MSDN Magazine column focused on DirectX, so you can expect to see more details about the new features there (bit.ly/1c37bLI). Finally, all the information you need about what to expect in Windows 8.1 is in the Windows 8.1 Feature Guide at bit.ly/1cBHgxu.

Rachel Appel is a consultant, author, mentor and former Microsoft employee with more than 20 years of experience in the IT industry. She speaks at top industry conferences such as Visual Studio Live!, DevConnections, MIX and more. Her expertise lies within developing solutions that align business and technology focusing on the Microsoft dev stack and open Web. For more about Appel, visit her Web site at rachelappel.com.

Thanks to the following technical expert for reviewing this article: Kraig Brockschmidt (Microsoft)