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

Thank You

http://bit.ly/screenswin8