MS Design style za Windows Phone / MS Design style for Windows Phone
Construindo Universal apps para Windows e Windows Phone
-
Upload
caio-chaves-garcez -
Category
Software
-
view
129 -
download
1
description
Transcript of 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.