Unique features of windows 8

886 views
744 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
886
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Unique features of windows 8

  1. 1. Unique Features of Windows 8 Store Apps
  2. 2. Peter Newhook CONSULTANT | INFUSION DEVELOPMENT
  3. 3. Agenda • Introduction • UI Conventions • Developer note • Windows 8.1 • http://bit.ly/screenswin8
  4. 4. Introduction
  5. 5. Introduction Topics • Windows 8 • Windows Store Apps • Windows RT
  6. 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. 7. Windows Store Apps • Formerly known as Metro-Style Apps • Distributed through a store • Sandboxed • Run on Windows 8 and Windows RT
  8. 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. 9. http://www.anandtech.com/show/6536/arm-vs-x86-the-real-showdown
  10. 10. http://www.anandtech.com/show/6536/arm-vs-x86-the-real-
  11. 11. UI Conventions
  12. 12. UI Conventions Topics • Overall look and feel • App bars • Snapped view • Semantic zoom • Share and Search Contracts • Live Tiles
  13. 13. Look and Feel • Content over chrome • Fast and fluid • Authentically digital
  14. 14. 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
  15. 15. 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>
  16. 16. 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>
  17. 17. Snapped View • Keep two windows open at once • 320px side window • 1366 x 768 minimum resolution for snapped view
  18. 18. 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; } }
  19. 19. Semantic Zoom • View content with logical grouping • Control over the two levels of zoom
  20. 20. 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>
  21. 21. 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>
  22. 22. Search and Share Contracts • Define ‘contracts’ with the OS • Only communication between apps • Common functionality • Custom search results
  23. 23. 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!"); }
  24. 24. 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
  25. 25. 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);
  26. 26. The Live Tile Update Problem var notifications = Windows.UI.Notifications; // … //Build update XML // … var tileNotification = new notifications.TileNotification(tileXml); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
  27. 27. Developer Notes
  28. 28. Language Choices • HTML/JavaScript • C# or VB/XAML • C++/XAML • C++/DirectX • Mix and match libraries
  29. 29. Async • JavaScript promises • .Net Async and Await • C++ Parallel Patterns Library
  30. 30. JavaScript Promises var promise1 = someOperationAsync(); var promise2 = promise1.then(function completedHandler1 (result1) { return 7103; } ); promise2.then(function completedHandler2 (result2) { });
  31. 31. C# Async Await async Task MyMethodAsync() { // Do asynchronous work. await Task.Delay(1000); // Run when task is done }
  32. 32. 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
  33. 33. Other Control Changes • Date and time picker (XAML) • WebView (HTML) • Command Bar (XAML) • Render to BitMap (XAML) • Hub (XAML and HTML)
  34. 34. Device APIs • Bluetooth • USB/HID • POS • 3D Printer
  35. 35. Thank You http://bit.ly/screenswin8

×