unique features of windows 8
DESCRIPTION
Presented at SCREENS 2013 in Toronto. Details at fitc.ca/screens with Peter Newhook These aren’t your daddy’s Windows apps! Windows 8 Store apps are a significant departure from the traditional development model on Windows. At first glance the differences are obvious: full screen, flat UI, touch-centric navigation. But there’s more available to Windows 8 developers to deeply integrate with the platform. This session will highlight features that let a Windows 8 app a deeply integrate with the system. Topics will include, app bars, share and search contracts, semantic zoom, live tiles and changes to the Windows 8.1 snap view.TRANSCRIPT
![Page 1: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/1.jpg)
Unique Features of Windows 8 Store Apps
![Page 2: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/2.jpg)
Peter NewhookCONSULTANT | INFUSION DEVELOPMENT
![Page 3: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/3.jpg)
Agenda
• Introduction
• UI Conventions
• Developer note
• Windows 8.1
• http://bit.ly/screenswin8
Logo
![Page 4: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/4.jpg)
Introduction
![Page 5: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/5.jpg)
Introduction Topics
• Windows 8
• Windows Store Apps
• Windows RT
![Page 6: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/6.jpg)
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
![Page 7: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/7.jpg)
Windows Store Apps
• Formerly known as Metro-Style Apps• Distributed through a store• Sandboxed• Run on Windows 8 and Windows RT
![Page 8: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/8.jpg)
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
![Page 9: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/9.jpg)
http://www.anandtech.com/show/6536/arm-vs-x86-the-real-showdown
![Page 10: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/10.jpg)
http://www.anandtech.com/show/6536/arm-vs-x86-the-real-showdown
![Page 11: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/11.jpg)
UI Conventions
![Page 12: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/12.jpg)
UI Conventions Topics
• Overall look and feel
• App bars
• Snapped view
• Semantic zoom
• Share and Search Contracts
• Live Tiles
![Page 13: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/13.jpg)
Look and Feel
• Content over chrome• Fast and fluid• Authentically digital
![Page 14: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/14.jpg)
![Page 15: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/15.jpg)
![Page 16: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/16.jpg)
![Page 17: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/17.jpg)
![Page 18: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/18.jpg)
![Page 19: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/19.jpg)
![Page 20: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/20.jpg)
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
![Page 21: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/21.jpg)
![Page 22: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/22.jpg)
![Page 23: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/23.jpg)
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>
![Page 24: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/24.jpg)
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>
![Page 25: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/25.jpg)
Snapped View
• Keep two windows open at once
• 320px side window
• 1366 x 768 minimum resolution for snapped view
![Page 26: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/26.jpg)
![Page 27: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/27.jpg)
![Page 28: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/28.jpg)
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; }}
![Page 29: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/29.jpg)
Semantic Zoom
• View content with logical grouping
• Control over the two levels of zoom
![Page 30: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/30.jpg)
![Page 31: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/31.jpg)
![Page 32: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/32.jpg)
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>
![Page 33: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/33.jpg)
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>
![Page 34: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/34.jpg)
Search and Share Contracts
• Define ‘contracts’ with the OS
• Only communication between apps
• Common functionality
• Custom search results
![Page 35: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/35.jpg)
![Page 36: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/36.jpg)
![Page 37: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/37.jpg)
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!");}
![Page 38: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/38.jpg)
![Page 39: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/39.jpg)
![Page 40: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/40.jpg)
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
![Page 41: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/41.jpg)
![Page 42: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/42.jpg)
![Page 43: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/43.jpg)
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);
![Page 44: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/44.jpg)
The Live Tile Update Problem
var notifications = Windows.UI.Notifications;// …//Build update XML// … var tileNotification = new notifications.TileNotification(tileXml);notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
![Page 45: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/45.jpg)
Developer Notes
![Page 46: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/46.jpg)
Language Choices Click icon to add picture
• HTML/JavaScript• C# or VB/XAML• C++/XAML• C++/DirectX• Mix and match libraries
![Page 47: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/47.jpg)
![Page 48: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/48.jpg)
Async Click icon to add picture
• JavaScript promises• .Net Async and Await• C++ Parallel Patterns Library
![Page 49: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/49.jpg)
JavaScript Promises
var promise1 = someOperationAsync();var promise2 = promise1.then(function completedHandler1 (result1) { return 7103; } );promise2.then(function completedHandler2 (result2) { });
![Page 50: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/50.jpg)
C# Async Await
async Task MyMethodAsync(){ // Do asynchronous work. await Task.Delay(1000); // Run when task is done}
![Page 51: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/51.jpg)
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
![Page 52: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/52.jpg)
![Page 53: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/53.jpg)
![Page 54: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/54.jpg)
![Page 55: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/55.jpg)
![Page 56: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/56.jpg)
Other Control Changes
• Date and time picker (XAML)• WebView (HTML)• Command Bar (XAML)• Render to BitMap (XAML)• Hub (XAML and HTML)
![Page 57: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/57.jpg)
Device APIs Click icon to add picture
• Bluetooth• USB/HID• POS• 3D Printer
![Page 58: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/58.jpg)
![Page 59: Unique features of windows 8](https://reader035.vdocuments.net/reader035/viewer/2022062511/54bb868e4a7959b7238b45e7/html5/thumbnails/59.jpg)