This document summarizes some unique features of Windows 8 Store apps, including UI conventions like app bars and snapped view, semantic zooming, contracts for search and sharing, and live tiles. It also discusses language choices for developing apps, asynchronous programming, and new features in Windows 8.1 like the start menu and device APIs.

1. Unique Features of Windows 8 Store Apps

2. Peter Newhook
CONSULTANT | INFUSION DEVELOPMENT

3. Agenda
• Introduction
• UI Conventions
• Developer note
• Windows 8.1
• http://bit.ly/screenswin8

4. Introduction

5. Introduction Topics
• Windows 8
• Windows Store Apps
• Windows RT

6. Windows 8
• Still runs anything that ran on Windows 7
• 7.41% desktop market share
(http://www.netmarketshare.com/operating-system-market-share.aspx)
• New App Store Model

7. Windows Store Apps
• Formerly known as Metro-Style Apps
• Distributed through a store
• Sandboxed
• Run on Windows 8 and Windows RT

8. Windows RT
• Windows designed to run on ARM chips
• Microsoft developed desktop apps
• Word
• Excel
• Notepad
• Third party desktop apps cannot be installed
• Focused on Windows Store Apps

9. http://www.anandtech.com/show/6536/arm-vs-x86-the-real-showdown

10. http://www.anandtech.com/show/6536/arm-vs-x86-the-real-

11. UI Conventions

12. UI Conventions Topics
• Overall look and feel
• App bars
• Snapped view
• Semantic zoom
• Share and Search Contracts
• Live Tiles

13. Look and Feel
• Content over chrome
• Fast and fluid
• Authentically digital

20. App bars
• Available when the user needs chrome
• Top and bottom of page
• Top App Bar is meant for navigation
• Bottom App Bar left used as context menu
• Bottom right frequent settings access

23. App Bar HTML
<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand“
data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand“
data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',section:'global',tooltip:'Remove item'}"></button>
<hr data-win-control="WinJS.UI.AppBarCommand“
data-win-options="{id:'appBarSeparator',type:'separator',section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand“
data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'global',tooltip:'Delete item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand“
data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',section:'selection',tooltip:'Take a picture'}">
</button>
</div>

24. App Bar XAML
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
</Page.BottomAppBar>

25. Snapped View
• Keep two windows open at once
• 320px side window
• 1366 x 768 minimum resolution for snapped
view

28. Snapped View Media Query
@media screen and (-ms-view-state: snapped) {
.fragment header[role=banner] {
-ms-grid-columns: auto 1fr;
margin-left: 15px;
margin-right: 15px;
}
}
@media screen and (-ms-view-state: fullscreen-portrait) {
.fragment header[role=banner] {
-ms-grid-columns: 29px 71px 1fr;
}
}

29. Semantic Zoom
• View content with logical grouping
• Control over the two levels of zoom

32. Semantic Zoom XAML
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
</SemanticZoom>

33. Semantic Zoom HTML
<div data-win-control="WinJS.UI.SemanticZoom">
<!-- The control that provides the zoomed-in view goes here. -->
<!-- The control that provides the zoomed-out view goes here. -->
</div>

34. Search and Share Contracts
• Define ‘contracts’ with the OS
• Only communication between apps
• Common functionality
• Custom search results

37. Registering for Share Events
function registerForShare() {
var dataTransferManager =
Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareTextHandler);
}
function shareTextHandler(e) {
var request = e.request;
request.data.properties.title = "Share Text Example";
request.data.properties.description = "Demonstrates how to share text.";
request.data.setText("Hello World!");
}

40. Live Tiles
• Ability to dynamically add text or images to
your app tile
• Only available to Windows 8 store apps
• Available for large and small tiles
• No way to determine which content the user
clicked on

43. Live Tile JavaScript
var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileWide310x150ImageAndText01;
var tileXml = notifications.TileUpdateManager.getTemplateContent(template);
var tileTextAttributes = tileXml.getElementsByTagName("text");
tileTextAttributes[0].appendChild(tileXml.createTextNode("Hello World! My very own tile notification"));
var tileImageAttributes = tileXml.getElementsByTagName("image");
tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");
var squareTemplate = notifications.TileTemplateType.tileSquare150x150Text04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.getElementsByTagName("text");
squareTileTextAttributes[0].appendChild(
squareTileXml.createTextNode("Hello World! My very own tile notification"));
var node = tileXml.importNode(squareTileXml.getElementsByTagName("binding").item(0), true);
tileXml.getElementsByTagName("visual").item(0).appendChild(node);
var tileNotification = new notifications.TileNotification(tileXml);
var currentTime = new Date();
tileNotification.expirationTime = new Date(currentTime.getTime() + 600 * 1000);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

44. The Live Tile Update Problem
var notifications = Windows.UI.Notifications;
// …
//Build update XML
// …
var tileNotification = new notifications.TileNotification(tileXml);
notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

45. Developer Notes

46. Language Choices
• HTML/JavaScript
• C# or VB/XAML
• C++/XAML
• C++/DirectX
• Mix and match libraries

48. Async
• JavaScript promises
• .Net Async and Await
• C++ Parallel Patterns Library

49. JavaScript Promises
var promise1 = someOperationAsync();
var promise2 = promise1.then(function completedHandler1
(result1) { return 7103; } );
promise2.then(function completedHandler2 (result2) { });

50. C# Async Await
async Task MyMethodAsync()
{
// Do asynchronous work.
await Task.Delay(1000);
// Run when task is done
}

51. Windows 8.1
• Start Menu
• Flexible split screen
• Host of other UI controls
• Device APIs
• New Store
• Release Oct 18
• Visual Studio 2013 Release Nov 13

56. Other Control Changes
• Date and time picker (XAML)
• WebView (HTML)
• Command Bar (XAML)
• Render to BitMap (XAML)
• Hub (XAML and HTML)

57. Device APIs
• Bluetooth
• USB/HID
• POS
• 3D Printer

60. Thank You
http://bit.ly/screenswin8