Upload
fitc
View
585
Download
1
Tags:
Embed Size (px)
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.
Citation preview
Unique Features of Windows 8 Store Apps
Peter NewhookCONSULTANT | INFUSION DEVELOPMENT
Agenda
• Introduction
• UI Conventions
• Developer note
• Windows 8.1
• http://bit.ly/screenswin8
Logo
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-showdown
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 Click icon to add picture
• HTML/JavaScript• C# or VB/XAML• C++/XAML• C++/DirectX• Mix and match libraries
Async Click icon to add picture
• 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 Click icon to add picture
• Bluetooth• USB/HID• POS• 3D Printer