Construindo Universal apps para Windows e Windows Phone

Construindo Universal Apps para Windows e Windows Phone

Caio GarcezEspecialista em DesenvolvimentoTwitter: @caio_garcez

Opções de Desenvolvimento para Windows e Windows Phone

PCL – Portable Class Library

Universal Apps

Dicas e Considerações

Agenda

Opções de Desenvolvimento para Windows e Windows Phone

XNA Framework 7.0 (C#)

DirectX 8.0/8.1 (C++) Com ou sem XAML

Silverlight 7.x/8.0/8.1 (XAML com C# ou VB) XAML com C++ no 8.0/8.1

Windows Phone Runtime XAML com C#, VB ou C++ no 8.0 HTML5/JS também a partir do 8.1

Universal App XAML com C# ou C++, HTML5/JS

Tipos de aplicação para Windows Phone

DirectX com C++

Windows Runtime 8.0/8.1 XAML com C#, VB ou C++, HTML5/JS

Universal App XAML com C# ou C++, HTML5/JS

Tipos de aplicação para Windows 8/8.1

Xamarin

PhoneGap/Apache Cordova

Abordagens Multi-Plataforma

PCL – Portable Class Library

Portable Class Libraries (PCLs)Um Código-fonteUm ProjetoUm Binário

Múltiplas Platformas!

Demo - PCL

Universal Apps

“Compro a app apenas uma vez, e posso usá-la em todos os meus dispositivos Windows. Configurações e compras “in-app” migram entre meus dispositivos" reuso

“A app tem tema e funcionalidades similares nos dois dispositivos" reuso

“Mas a experiência e recursos são adaptados ao dispositivo” com adaptações

O que é uma Universal Windows App?

Perspectiva do Usuário:

O que é uma Universal Windows App?

Definição da Store:Use o mesmo Package Full Name (PFN)ao fazer o upload nas duas Stores (Windows Phone e Windows)

• O “badge universal” aparecerá nas listagens das Stores

• Compre a app em uma store, e o mesmo PFN contará como comprado na outra

• Compre um item durável em uma store, e o mesmo contará como comprado na outra

• Dados poderão migrar entre apps em múltiplos dispositivos desde que as mesmas compartilhem o PFN

Universal apps são aplicações que rodam nas plataformas Windows 8.1 e Windows Phone 8.1

Suportadas atualmente nas linguagens C#, C++ e JavaScript

Podem ser criadas a partir dos novos templates de projeto ou pela migração de apps Windows 8.1 e Windows Phone 8.1

Universal apps – Perspectiva do Desenvolvedor

HTML / CSS

JavaScript

Windows Runtime

C#C / C++

XAML

Input, Interaction, & Manipulation DirectX, Media, & Composition

Windows Kernel Services

Universal Apps - Plataforma

Demo – Universal Apps

Permitem o compartilhamento de código-fonte entre apps convergidas

Não geram binários por si só

Suportam todos os tipos de itens Arquivos de código .cs, .js, .cpp, .h XAML Imagens .png, .jpg… Arquivos de recurso RESW XML etc…

Shared projects (Projetos compartilhados)

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_Shared

References

App1_Shared

App1_Shared

App.xaml

Shared Projectscompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_PCL

References

App1_PCL

App1_PCL

App.xaml

App.xaml

.NET PCLscompartilhando binários

Solution 'App1'

App1_Phone81

App1_Windows81

MyData.cs

MyData.cs

MyWebservice

MyData.cs

Linked filescompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

Class1.cs

Page1.xaml

Asset1.png

App.xaml

App.xaml

Solution 'App1'

App1_Phone81

App1_Windows81

MyData.cs

MyData.cs

MyWebservice

MyData.cs

Linked filescompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_Shared

References

App1_Shared

App1_Shared

App.xaml

Shared Projectscompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_PCL

References

App1_PCL

App1_PCL

App.xaml

App.xaml

.NET PCLscompartilhando binários

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

Class1.cs

Page1.xaml

Asset1.png

App.xaml

App.xaml

Solution 'App1'

App1_Phone81

App1_Windows81

MyData.cs

MyData.cs

MyWebservice

MyData.cs

Linked filescompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_Shared

References

App1_Shared

App1_Shared

App.xaml

Shared Projectscompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_PCL

References

App1_PCL

App1_PCL

App.xaml

App.xaml

.NET PCLscompartilhando binários

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

Class1.cs

Page1.xaml

Asset1.png

App.xaml

App.xaml

Solution 'App1'

App1_Phone81

App1_Windows81

MyData.cs

MyData.cs

MyWebservice

MyData.cs

Linked filescompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_Shared

References

App1_Shared

App1_Shared

App.xaml

Shared Projectscompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_PCL

References

App1_PCL

App1_PCL

App.xaml

App.xaml

.NET PCLscompartilhando binários

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

Class1.cs

Page1.xaml

Asset1.png

App.xaml

App.xaml

Solution 'App1'

App1_Phone81

App1_Windows81

MyData.cs

MyData.cs

MyWebservice

MyData.cs

Linked filescompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_Shared

References

App1_Shared

App1_Shared

App.xaml

Shared Projectscompartilhando código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

Page1.xaml

Asset1.png

References

App1_PCL

References

App1_PCL

App1_PCL

App.xaml

App.xaml

.NET PCLscompartilhando binários

Reuse códigoAdapte código

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared/PCL

private void OnSuspending(object sender, SuspendingEventArgs e){ // TODO: Save application state and stop any background activity ApplicationData.Current.RoamingSettings.Values["IsBurnt"] = model.IsBurnt; ApplicationData.Current.RoamingSettings.Values["Velocity"] = model.Velocity;}

// TODO: Load state from previously suspended applicationmodel.IsBurnt = (bool?)ApplicationData.Current.RoamingSettings.Values["IsBurnt"] ?? false;model.Velocity = (double?)ApplicationData.Current.RoamingSettings.Values["Velocity"] ?? 1.0;

Dentro do meu código comum, preciso “ajustá-lo” com uma chamada específica de um dispositivo.

Como fazer isto?

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

#if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareBackPressed;#endif

#if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP StatusBar::GetForCurrentView()->HideAsync();#endif

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

#if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); #endif

// I can provide my own implementation of the missing APIs !!!namespace Windows.UI.ViewManagement{ public class StatusBar { static StatusBar dummy = new StatusBar(); public static StatusBar GetForCurrentView() { return dummy; } public async Task HideAsync() {} }}

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

// Windows\ViewModel.cspublic partial class ViewModel{ async Task HideStatusBarAsync() { }}

// Phone\ViewModel.cspublic partial class ViewModel{ async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); }}

// Shared\Class1.csawait viewModel.HideStatusBarAsync();

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

// Sharedpublic interface IPlatformAbstractionLayer{ Task HideStatusBarAsync();}

await pal.HideStatusBarAsync();

// Windows\WinImpl.cspublic class WindowsPAL: IPlatformAbstractionLayer{ async Task HideStatusBarAsync() { }}

// Phone\PhoneImpl.cspublic class PhonePAL : IPlatformAbstractionLayer{ async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); }}

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_Shared

References

App1_Shared

App1_Shared

#if blockfácil e rápido

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

App1_PCL

References

App1_PCL

App1_PCL

IAbstraction.cs

PhoneImpl.cs

WinImpl.cs

Inversion of Control (IOC)pattern que também funciona com PCL

Partial classesmais organizado

Solution 'App1'

App1_Phone81

App1_Windows81

Class1.cs

References

References

App1_Shared

ViewModel.cs

ViewModel.cs

ViewModel.cs

App1_Shared

App1_Shared

Reuse UIAdapte UI

Dicas e Considerações

Mesma API, mesmo comportamentoMesma API, comportamento adaptadoAPIs específicas de plataforma

Categorias de controles/APIs

Data Binding Modelo de Navegação Layout: Panel, StackPanel, Grid, Border Buttons, Slider, ToggleSwitch, CheckBox,

RadioButton, ProgressBar TextBox/TextBlock Shapes/Path

‘Primitives’ – Mesma API, mesmo comportamento

Hub AppBar/CommandBar Date/Time Pickers and List Pickers ListView

Multi-select; containers, swipe selection

Flyouts Media Ads Animações

‘Primitives’ – Mesma API, comportamento adaptado

<Page.BottomAppBar> <CommandBar> <AppBarButton Icon="Accept" Label="Accept" /> <AppBarButton Icon="Cancel" Label="Cancel" /> <CommandBar.SecondaryCommands> <AppBarButton x:Uid="AboutAppBarButton" Icon="Help" /> <AppBarButton x:Uid="HomeAppBarButton" Icon="Home" /> </CommandBar.SecondaryCommands> </CommandBar></Page.BottomAppBar>

CommandBar

Windows Credenciais FilePicker Botão Back In-App SearchBox SettingsFlyout

APIs específicas de plataforma

Windows Phone Credenciais FilePicker Botão Back no Hardware Pivot AutoSuggestBox ContentDialog Maps System Chrome

Progress area, in-call UI

Obrigado!

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista 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.