Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Unique Features of Windows 8 Store Apps
Peter Newhook
CONSULTANT | INFUSION DEVELOPMENT
Agenda
• Introduction
• UI Conventions
• Developer note
• Windows 8.1
• http://bit.ly/screenswin8
Introduction
Introduction Topics
• Windows 8
• Windows Store Apps
• Windows RT
Windows 8
• Still runs anything that ran on Windows 7
• 7.41% desktop market share
(http://www.netmarketshare.com/operatin...
Windows Store Apps
• Formerly known as Metro-Style Apps
• Distributed through a store
• Sandboxed
• Run on Windows 8 and W...
Windows RT
• Windows designed to run on ARM chips
• Microsoft developed desktop apps
• Word
• Excel
• Notepad
• Third part...
http://www.anandtech.com/show/6536/arm-vs-x86-the-real-showdown
http://www.anandtech.com/show/6536/arm-vs-x86-the-real-
UI Conventions
UI Conventions Topics
• Overall look and feel
• App bars
• Snapped view
• Semantic zoom
• Share and Search Contracts
• Liv...
Look and Feel
• Content over chrome
• Fast and fluid
• Authentically digital
App bars
• Available when the user needs chrome
• Top and bottom of page
• Top App Bar is meant for navigation
• Bottom Ap...
App Bar HTML
<div id="commandsAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="Wi...
App Bar XAML
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizo...
Snapped View
• Keep two windows open at once
• 320px side window
• 1366 x 768 minimum resolution for snapped
view
Snapped View Media Query
@media screen and (-ms-view-state: snapped) {
.fragment header[role=banner] {
-ms-grid-columns: a...
Semantic Zoom
• View content with logical grouping
• Control over the two levels of zoom
Semantic Zoom XAML
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</S...
Semantic Zoom HTML
<div data-win-control="WinJS.UI.SemanticZoom">
<!-- The control that provides the zoomed-in view goes h...
Search and Share Contracts
• Define ‘contracts’ with the OS
• Only communication between apps
• Common functionality
• Cus...
Registering for Share Events
function registerForShare() {
var dataTransferManager =
Windows.ApplicationModel.DataTransfer...
Live Tiles
• Ability to dynamically add text or images to
your app tile
• Only available to Windows 8 store apps
• Availab...
Live Tile JavaScript
var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileWide3...
The Live Tile Update Problem
var notifications = Windows.UI.Notifications;
// …
//Build update XML
// …
var tileNotificati...
Developer Notes
Language Choices
• HTML/JavaScript
• C# or VB/XAML
• C++/XAML
• C++/DirectX
• Mix and match libraries
Async
• JavaScript promises
• .Net Async and Await
• C++ Parallel Patterns Library
JavaScript Promises
var promise1 = someOperationAsync();
var promise2 = promise1.then(function completedHandler1
(result1)...
C# Async Await
async Task MyMethodAsync()
{
// Do asynchronous work.
await Task.Delay(1000);
// Run when task is done
}
Windows 8.1
• Start Menu
• Flexible split screen
• Host of other UI controls
• Device APIs
• New Store
• Release Oct 18
• ...
Other Control Changes
• Date and time picker (XAML)
• WebView (HTML)
• Command Bar (XAML)
• Render to BitMap (XAML)
• Hub ...
Device APIs
• Bluetooth
• USB/HID
• POS
• 3D Printer
Thank You
http://bit.ly/screenswin8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Unique features of windows 8
Upcoming SlideShare
Loading in …5
×

Unique features of windows 8

1,192 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
  • Be the first to comment

  • Be the first to like this

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

×