Top 10 Changes for Building Windows Store Apps with Windows 8.1
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Recently, I finished updating my Windows 8 Apps with HTML5 and JavaScript Unleashed book for Windows 8.1, and I was surprised about the number of changes that Microsoft introduced with Windows 8.1 that affect Windows Store app development. I ended up updating almost every chapter in the book.
If you are about to build a new Windows Store app, or you need to migrate an existing Windows 8 app to Windows 8.1, you need to be aware of these changes. This is the motivation for this article. Here’s a top 10 list of the biggest changes in Windows 8.1 for HTML5 and JavaScript developers.
#1: No More Snapped State
In Windows 8, a Windows Store app could be in only one of three discrete states: full-screen, snapped, or filled. If an app were in snapped state, it was exactly 320-pixels wide (no more and no less). Furthermore, Windows 8 supported running only a maximum of two apps side by side.
When building Windows 8 apps, you had to design your app so that it would continue to function when snapped. In other words, every Windows 8 app was required to work when only 320 pixels wide. Designing every app so that it would continue to work after being made exceedingly skinny was challenging.
Windows 8.1 is much more flexible. You are no longer required to support a snapped state. By default, the minimum horizontal resolution of a Windows 8.1 app is 500 pixels. (Although, you can specify in your app manifest that the app works with a 320-pixel resolution.)
Unlike Windows 8, Windows 8.1 supports multiple side-by-side apps. If you have a super high-resolution monitor, then you can run up to four apps side by side on the same screen. If you have multiple monitors, then you can run four side-by-side apps on each monitor.
)
Windows 8.1 apps, unlike Windows 8 apps, can be continuously resized. Users can stretch and shrink the horizontal width of a Windows 8.1 app whenever they feel like it to fit more or less apps on the screen at a time.
To handle these new app states, you need to detect screen changes using new methods. For example, you can use the JavaScript windows resize event or Cascading Style Sheet Media Queries to detect app width changes.
#2: Repeater Control
The workhorse control in Windows 8 was the ListView control. You used the ListView control whenever you wanted to display a list of data such as a list of products or a list of game scores.
The ListView control has a particular look. When you display items with a ListView, the items appear like the tiles on the Windows Start screen. If you want to customize the appearance of your list items, then you are required to work within the constraints of the ListView.
Windows 8.1 introduces a new Repeater control. The Repeater control is less feature rich, but much more flexible than the ListView. A Repeater simply loops through a collection of items and displays each item in a customizable template.
Here's some sample code that demonstrates how you can use the new Repeater control to display an HTML table (something you could not do with the ListView control):
<table>
<thead>
<tr><th>Product Id</th> <th>Product Name</th> <th>Product Price</th></tr>
</thead>
<tbody id="repeater1" data-win-control="WinJS.UI.Repeater">
<tr>
<td data-win-bind="textContent:name"></td>
<td data-win-bind="textContent:price"></td>
</tr>
</tbody>
</table>
Notice that the Repeater control is applied to the <tbody> element in the preceding code.
#3: New ListView Cell-Spanning Layout
The ListView control has become more flexible in Windows 8.1. The ListView control now supports a new layout named Cell-Spanning Layout. As the name suggests, this new layout enables you to display tiles that span more than one cell, like this.
)
Notice that a tile can span either horizontal or vertical cells.
#4: Drag-and-Drop
Want to build a more interactive Windows Store app? The ListView control now supports drag-and-drop. You can drag items from the ListView onto other elements on the screen. You also can drag items from one ListView control to another ListView control.
Imagine, for example, that you want to display a product catalog and a shopping cart. In that case, you can display the list of products with the ListView and drag individual items into the shopping cart.
)
#5: WebView Control
The WebView control, which is new to JavaScript developers in Windows 8.1, enables you to display a web page in your Windows Store app. For example, here is how you would use a WebView control to display a web page located at SuperexpertTraining.com:
<x-ms-webview src="https://superexpertTraining.com" width="800" height="500"></x-ms-webview>
Why not just use an iframe? Two reasons. First, there are a lot of websites that use scripts (or the X-Frame-Options header) to bust out of iframes. For example, you can’t display Google.com in an iframe.
The second reason to use a WebView instead of an iframe is to take advantage of the WebView’s API. For example, you can capture screen shots of web pages by using a WebView control. There are some interesting Windows Store apps that you could build by taking advantage of this functionality.
#6: SearchBox Control
One feature of Windows 8 that everyone found confusing was search. Windows 8 hid search in the Charms bar. On the one hand, the Charms bar provided a standard location for search. On the other hand, no one could find search because no one knew about this standard location.
When building Windows 8.1 apps, you are no longer encouraged to hide your app’s search in the Charms bar. Instead, you can take advantage of the new SearchBox control to display search right in the app.
)
#7: NavBar Control
The standard location for navigation elements in a Windows Store app is in a panel that slides down from the top of the screen. The panel is called the nav bar.
For example, the standard Windows News app displays links to different news sources in its nav bar.
)
In Windows 8, there was no dedicated control for creating a nav bar. If you wanted to create a nav bar, you used the AppBar control. Windows 8.1 introduces a new NavBar control designed specifically for displaying a nav bar.
#8: Hub Control
The Hub control is another new control introduced in Windows 8.1. This control enables you to organize content into different sections where each section can have a custom layout. For example, the Windows 8.1 Store uses the Hub control to display the different categories of Windows Store apps.
)
The first section displayed by the Hub contains a big advertisement for a game named Frozen Free Fall. The Hub contains other sections that display lists of different types of apps. Each section in the Hub can have an entirely different layout.
Corresponding to the new Hub control, there is a new Visual Studio Hub App project template. The Hub App project template contains a Hub control.
)
#9: WinJS Scheduler
The new WinJS Scheduler enables you to execute JavaScript functions with different priorities. Having this ability to control priorities enables you to dramatically improve the performance of your Windows Store apps.
For example, you can give tasks that are critical to building your user interface a high priority and give background tasks (such as fetching the records that a user cannot yet see) a lower priority. The WinJS Scheduler enables you to do the most important things first.
Using the WinJS Scheduler is easy:
// Alias the Scheduler
var Scheduler = WinJS.Utilities.Scheduler;
// Create the jobs
var job1 = Scheduler.schedule( function () {
console.log("Hello from job1");
},
Scheduler.Priority.normal
);
var job2 = Scheduler.schedule( function () {
console.log("Hello from job2");
},
Scheduler.Priority.high
);
In this code, because job2 has a higher priority than job1, job2 will run before job1.
There is a great talk on how Microsoft took advantage of the WinJS Scheduler to improve the performance of the standard Windows 8.1 Mail app on Channel9.
#10: Text-to-Speech
Text-to-Speech might not be a “big new feature” of Windows 8.1, but it is a “fun new feature.” The new Text-to-Speech API enables you read text out loud using a speech synthesizer.
The Text-to-Speech synthesizer supports three built-in voices: American male (Microsoft David), American female (Microsoft Hazel), and English female (Microsoft Zira). You can use the synthesizer to read plain text, or if you need greater control, you can use text marked up with Speech Synthesis Markup Language (SSML).
If you want to try out the Text-to-Speech synthesizer, I encourage you to install the MyTasks app from the Windows store.
This app includes a Read Tasks button that reads out loud any tasks that you create using the Text-to-Speech synthesizer.
)
I describe how to create the MyTasks app in the last chapter of Windows 8 Apps with HTML5 and JavaScript Unleashed.
Summary
Windows 8.1 includes plenty of other nice changes that I don’t describe here. But these are the big ones for HTML5 and JavaScript developers. Have fun playing with these new features!