Unique features of windows 8
Upcoming SlideShare
Loading in...5
×
 

Unique features of windows 8

on

  • 760 views

Presented at SCREENS 2013 in Toronto. ...

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.

Statistics

Views

Total Views
760
Views on SlideShare
760
Embed Views
0

Actions

Likes
0
Downloads
15
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Unique features of windows 8 Unique features of windows 8 Presentation Transcript

  • 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/operating-system-market-share.aspx) • New App Store Model
  • Windows Store Apps • Formerly known as Metro-Style Apps • Distributed through a store • Sandboxed • Run on Windows 8 and Windows RT
  • 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
  • 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 • Live Tiles
  • 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 App Bar left used as context menu • Bottom right frequent settings access
  • 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>
  • 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>
  • 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: 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; } }
  • 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. --> </SemanticZoom.ZoomedOutView> <SemanticZoom.ZoomedInView> <!-- Put the GridView for the zoomed in view here. --> </SemanticZoom.ZoomedInView> </SemanticZoom>
  • 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>
  • Search and Share Contracts • Define ‘contracts’ with the OS • Only communication between apps • Common functionality • Custom search results
  • 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!"); }
  • 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
  • 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);
  • The Live Tile Update Problem var notifications = Windows.UI.Notifications; // … //Build update XML // … var tileNotification = new notifications.TileNotification(tileXml); notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
  • 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) { return 7103; } ); promise2.then(function completedHandler2 (result2) { });
  • 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 • Visual Studio 2013 Release Nov 13
  • Other Control Changes • Date and time picker (XAML) • WebView (HTML) • Command Bar (XAML) • Render to BitMap (XAML) • Hub (XAML and HTML)
  • Device APIs • Bluetooth • USB/HID • POS • 3D Printer
  • Thank You http://bit.ly/screenswin8