networking proximity in-app purchase sensors location file system core app model threading windows...

Build It Once For BothWriting & Designing for Windows 8

and Windows Phone 8

Matthias Shapiromashapir@microsoft.com@matthiasshap

WPH-B303

The App Is Dead

Long Live The Platform

Build Across Devices

Windows Phone 8

Windows 8

Build Across Devices

NetworkingProximityIn-App PurchaseSensorsLocationFile SystemCore app modelThreading

Windows 8 Windows Phone 8

Build Across DevicesJavaScript (HTML5)

WinJS for Windows 8Windows 8 and

Windows Phone 8

Internet Explorer 10

Exact Same Engine

Build Across Devices – JS + HTML5

+

Build Across Devices – JS + HTML5

Yeti Bowl - https://yetibowl.codeplex.com/

Build Across Devices

NetworkingProximityIn-App PurchaseSensorsLocationFile SystemCore app modelThreading

Windows 8 Windows Phone 8

Build Across Devices - Native

Build Across Devices – XAML + C++

Peter Torr

Build 2012: Using C++ in your Windows Phone Applicationshttp://aka.ms/TorrCppXaml WPH-B308 – Using C and C++ in Your

Windows Phone 8 Applications

Build Across Devices – XAML + C#

OverviewDevelop Across Devices• MVVM Best Practice• Portable Class Libraries• Code Sharing – Do’s and Don’ts

Design Across Devices• UX Similarities• XAML Control guidance

MVVM Overview

Model

View (XAML)

ViewModel

Design/Development Separation

Code Reuse

Multiple Views On the Same Logic

View-Logic Testability

MVVM Overview

Model

View (XAML)

ViewModel

Data Bindings Command

s

ModelSimple representation of dataNo logic or functionality

ViewModelApplication logicService callsData management

ViewUser InterfaceNavigate to viewsInteraction layer

Build For Both Structure

Portable Class Libraries

Windows 8Windows Phone

8

Services

ViewModels (limited or abstract)

Models

Views (XAML) App LifecycleNavigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Build For Both Structure

Portable Class Libraries

Windows 8 Windows Phone 8

Services

ViewModels (limited or abstract)

Models

Views (XAML) App LifecycleNavigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Model

View (XAML)

ViewModel

Build For Both In Action

“This Means Something”

Roy Neary – Close Encounters of the Third Kind

Demo

Hue For Both

Philips Hue – RESTful LED bulbs

Demo

Hue For Both

Build For Both Structure

Portable Class Libraries

Windows 8 Windows Phone 8

Services

ViewModels (limited or abstract)

Models

Views (XAML) App LifecycleNavigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Model

View (XAML)

ViewModel

Hue For Both

Hue For Both

HueService

HueControlViewModel

HueLight

UI and Controls UpdateLightCommand

GetLightsCommand

Hue For Both

HueControlViewModel

HueLight

UI and Controls

UpdateLightCommand

HueLight

DataBinding

HueService

GetLightsCommand

Portable Class Libraries

• HttpClient PCL Library

• One Source• One Project• One Binary• Multiple Platforms

Hue For Both – PCL ViewModel

HueService Instance

HueControlViewModel

HueLight1

UpdateLight1

HueLight2

UpdateLight2

HueLight3

UpdateLight3

Hue For Both Structure

Portable Class Libraries

Services

ViewModels (limited or abstract)

Models HueLight HueService

HueControlViewModel

UpdateLightCommand

Portable Class Libraries Limits• No File I/O Access (Storage)• Platform Specific OS Functions

• No DispatcherTimer

Hue For Both –Shared Client ViewModel

HueService Instance

HueClientViewModel : HueControlViewModel

HueLight1

UpdateLight1

HueLight2

UpdateLight2

HueLight3

UpdateLight3

GetLightsCommand User Storage Service

Hue For Both Structure

Shared ViewModels (Add as Link) Storage, Alerts

Portable Class Libraries

Services

ViewModels (limited or abstract)

Models

HueClientViewModel

GetLightsCommand

#if conditionalsDispatcherTimer _dt;_dt = new DispatcherTimer();_dt.Interval = new TimeSpan(0, 0, 0, 1);_dt.Tick += _dt_Tick;_dt.Start();

// Windows 8void _dt_Tick(object sender, object e){ … }// Windows Phone 8void _dt_Tick(object sender, EventArgs e){ … }

#if conditionalsDispatcherTimer _dt;_dt = new DispatcherTimer();_dt.Interval = new TimeSpan(0, 0, 0, 1);

#if NETFX_CORE_dt.Tick += _dt_Tick_Win8;

#elif WINDOWS_PHONE_dt.Tick += _dt_Tick_WinPhone;

#endif_dt.Start();

void _dt_Tick_Win8(object sender, object e){ … }

void _dt_Tick_WinPhone(object sender, EventArgs e){ … }

Hue For Both StructureWindows 8

Windows Phone 8

Views (XAML) App Lifecycle

Navigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Portable Class Libraries

Services

ViewModels (limited or abstract)

Models

Hue For Both StructureWindows 8 XAML Windows Phone 8 XAML

DataBindings

Invoke Commands

DataBindings

Invoke Command

HueClientViewModel : HueControlViewModel

<Slider Value="{Binding HueLight2.Red, Mode=TwoWay}" />

Data Bindings & Commands (WinPhone 8)

<Slider Value="{Binding HueLight1.Red, Mode=TwoWay}“ >

<Path Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}“ />

<i:Interaction.Triggers> <i:EventTrigger EventName="MouseLeftButtonUp"> <Command:EventToCommand Command="{Binding UpdateLight1}" /> </i:EventTrigger> </i:Interaction.Triggers></Slider>

<Slider Value=Binding HueLight2.Red, Mode=TwoWay}" />

Data Bindings & Commands (Windows 8)

<Slider Value="{Binding HueLight1.Red, Mode=TwoWay}“ PointerExited="OnPointerExited1" />

<Path Fill="{Binding HueLight1, Converter={StaticResource HueToColor}}“ />

private void OnPointerExited1(object sender, PointerRoutedEventArgs e){ ((HueClientViewModel)this.DataContext).UpdateLight1.Execute(null);}

XAML

XAML.CS

Differences

Windows Phone 8800x480, 1280x720, 1280x768

Portrait, Landscape

<5 inch screen

Windows 81024x768 - huge

Landscape, Portrait, Snapped

+10 inch screens

ControlsSemantic Zoom Pivot

ControlsGridView LongListSelector

Build For Both Structure

Portable Class Libraries

Windows 8 Windows Phone 8

Services

ViewModels (limited or abstract)

Models

Views (XAML) App LifecycleNavigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Platform Specific

Different XAML

Different Controls

Same DataBindings

Same Commands for Key Interactions

Converters

Build For Both Structure

Portable Class Libraries

Windows 8 Windows Phone 8

Services

ViewModels (limited or abstract)

Models

Views (XAML) App LifecycleNavigation

Views (XAML)Converters

Shared ViewModels (Add as Link)Storage, Alerts

Model

View (XAML)

ViewModel

Related contentCommands, RelayCommands and EventToCommands (MSDN Magazine, May 2013)Designing Awesome XAML Apps for Windows 8 and Windows Phone 8 (Build 2012)

Create Cross-Platform Apps using Portable Class Libraries (Build 2012)

Windows Phone Breakout SessionsMonday, June 3:

1:15pm - The phone that has everything the enterprise needs: Windows Phone 83:00pm – The top down guide for developers: Windows Phone 84:45pm – Radical perspectives on mobility strategy

Tuesday, June 4:8:30am – The power of collaboration: Integrating Windows Phone with Office 365, Exchange and SharePoint Online10:15am – All aboard for the future of HTML5 mobile & hybrid web apps for Windows Phone 8 and Windows Tablets1:30pm – The Windows Phone 8 networking survival kit3:15pm – Build it once for both: Writing code and designing for Windows 8 and Windows Phone 85:00pm – Secrets of using background agents for Windows Phone 8

Windows Phone Breakout SessionsWednesday, June 5:

8:30am – Mobile security in the enterprise: Windows Phone 8 answers the call10:15am – Using C and C++ in your Windows Phone 8 applications1:30pm – Developing large-scale enterprise mobile apps for Windows Phone 83:15pm – Speechifying your Windows Phone 8 applications

Thursday, June 6:8:30am – Manage Windows Phone enterprise apps10:15am – Support your demanding LOB apps with SQLite and Windows Phone 81:00pm – Creating Windows Phone 8 apps for SharePoint

Windows Phone Hands On LabsPorting Windows 8 to Windows Phone 8Windows Phone 8: File and Protocol AssociationWindows Phone 8: Lock Screen WallpaperWindows Phone 8: Voice CommandWindows Phone 8: TilesWindows Phone 8: PurchaseWindows Phone 8: WalletWindows Phone 8: Running Tracker

Windows Phone BoothDevice Bar featuring the latest Windows Phones in the marketplaceExpert Area – Stop by the booth to get all your Windows Phone questions answered by Windows Phone expertsTheater Presentations:

The Windows connected experienceGet Hands on with Windows Phone for BusinessWindows Phone 8 Developer focused sessions

Windows Phone PromotionsWindows Phone Hats – Stop by the Windows Phone booth to get your free hat. Wear the hat for a chance to win a Windows Phone. Attend a Windows Phone theater session to be entered into a drawing for Windows Phones and other prizes.Windows Phone Breakout Sessions – Attend Windows Phone breakout sessions and be entered into a drawing to win a Windows Phone.Windows Phone Hoodie’s – Get a demo from the Windows Phone roaming demo team in the expo hall. Wear the hoodie for a chance to win a Windows Phone.

Track Resources

For more information about Windows Phone:http://www.windowsphone.com/business

msdn

Resources for Developers

http://microsoft.com/msdn

Build 2012

Microsoft Certification & Training Resources

www.microsoft.com/learning

TechNet

Resources

Inside Windows Phone

http://channel9.msdn.com/Shows/Inside+Windows+Phone

Resources for IT Professionals

http://microsoft.com/technet

Complete an evaluation on CommNet and enter to win!

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.