introducción al desarrollo de aplicaciones universales
DESCRIPTION
Introducción al desarrollo de aplicaciones universales, diferencias de las plataformas, controles comunes e implementación de MVVMTRANSCRIPT
![Page 2: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/2.jpg)
Agenda…Introducción al desarrollo de aplicaciones universales
Qué son y qué no son las aplicaciones universalesXAML en aplicaciones universalesControlesQue podemos compartirQue no debemos compartir
MVVM en aplicaciones universales
![Page 3: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/3.jpg)
Aplicaciones universales:Qué son y Qué no son
![Page 4: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/4.jpg)
No son una misma aplicación que se ejecuta en Windows y Windows Phone automáticamente
Primero… qué no son las aplicaciones universales
3.5” – 6”
7” – 12”
20” – 42”
![Page 5: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/5.jpg)
Son casi universales… dentro del universo Microsoft
No son lo mismo que Xamarin, ni su competencia… ni siquiera juegan en la misma liga ambos.(Incluso son deportes diferentes!!)
Primero… qué no son las aplicaciones universales
![Page 6: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/6.jpg)
Son un concepto, que engloba el desarrollo para varios dispositivos
Windows y Windows Phone por ahora.En el futuro: Xbox!, Desktop…
Son la herramienta que Microsoft nos brinda para maximizar la reutilización de código
Ante todo: en realidad es una nueva forma de organizar el código.
Facilitan el desarrollo para Windows y Windows Phone
Ahora… Qué son las aplicaciones universales.
![Page 7: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/7.jpg)
Anatomía de una aplicación universal
Proyecto Windows Store
Proyecto Windows PhoneProyecto Shared
Proyectos de plataforma
![Page 8: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/8.jpg)
Proyecto Shared
![Page 9: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/9.jpg)
El Proyecto shared puede acceder a cualquier código de los proyectos de plataforma
Puede contener XAML y C# y tiene acceso a todas las APIs WinRT
El código del Proyecto shared se inyecta en los proyectos de plataforma en tiempo de compilación
No puede tener referencias, usa la de los proyectos de plataforma
Proyecto Shared
![Page 10: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/10.jpg)
Creando una app simple
demo
![Page 11: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/11.jpg)
XAML: controles
![Page 12: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/12.jpg)
Controles convergentes
¿Qué significa en realidad?80% exactamente el mismo XAML 20% personalizado
Comunes PropietariosOptimizados
DatePickerTimePicker
CommandBar
Button
CheckBox
RadioButton
ProgressBar
Slider
ToggleSwitch Hub
PivotListViewGridViewSysTray
![Page 13: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/13.jpg)
Controles comunes“Un botón es un botón es un botón…”
![Page 14: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/14.jpg)
Controles de textoTextBlockMuestra texto.Soporta salto de línea y ajuste de texto.
RichTextBlockParagraphs, spans, y runs te permiten formatear las secciones de tu texto.
TextBoxSoporta corrector de texto, marca de agua, texto predictivo e input scopes para definir el teclado en pantalla a usar. Soporte multilínea. Además de cabecera personalizable.
PasswordBoxOculta la entrada de texto.Soporta marca de agua y cabecera personalizable.
![Page 15: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/15.jpg)
Con
tenid
o d
el
botó
nButton e HyperlinkButton<Button Content="Simple Button" Style="{StaticResource ButtonStyle}"/>
<Button Background="LightBlue" Foreground="Black" Content="Colored Button“ BorderBrush="Orange" Style="{StaticResource ButtonStyle}"/>
<Button Background="White" Foreground="Black" BorderBrush="CornflowerBlue" Style="{StaticResource ButtonStyle}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="ms-appx:///Assets/Surface2.jpg" Width="150" Stretch="Uniform" Grid.Column="0" /> <StackPanel Grid.Column="1" Margin="5"> <TextBlock Text="Microsoft Surface 2" Foreground="CornflowerBlue" FontFamily="Segoe UI" FontWeight="Light"/> <TextBlock FontSize="12" Text="This is a button with complex content. ..." Foreground="Gray" TextWrapping="Wrap"/> </StackPanel> </Grid></Button>
<HyperlinkButton FontSize="30" Content="Visit MicrosoftStore.com" NavigateUri="http://microsoftstore.com" />
![Page 16: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/16.jpg)
ProgressRing y ProgressBar<TextBlock Text="Progress Ring" FontSize="20" Margin="10,10,10,0"/><ProgressRing IsActive="True" Width="80" Height="80" Margin="10,10,10,100"/>
<TextBlock Text="Progress Bar" FontSize="20" Margin="10,30,10,0"/><ProgressBar Minimum="0" Maximum="250" Value="50" Height="50" Margin="10"/>
<TextBlock Text="Indeterminate" FontSize="20" Margin="10,30,10,0"/><ProgressBar Height="50" IsIndeterminate="True" Margin="10"/>
¡Importante!Debes desactivar el ProgressRing y ProgressBar cuando no sean visibles. Si no lo haces tendrás una penalización de rendimiento.
![Page 17: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/17.jpg)
Controles optimizadosLa misma gran API, diferente UX
![Page 18: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/18.jpg)
DatePicker / TimePickerLa misma API en Windows y Windows PhoneUI apropiada para cada plataforma
Permite restringir información
(mostrar solo mes/año por ejemplo)Windows
Windows Phone
![Page 19: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/19.jpg)
FlyoutsLos mismos que Windows 8.1
MenuFlyout se usa para crear menús contextuales
Nuevos Flyouts solo para PhoneList Picker FlyoutsDate/TimePicker FlyoutsGeneric Picker Flyouts
Todos son “Light dismiss”Ciérralos con el botón atrás, o para flyouts que no sean a pantalla completa como el MenuFlyout, ciérralos haciendo tap fuera del control.
![Page 20: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/20.jpg)
ContentDialog (Solo Phone)Un MessageBox totalmente personalizable.
Soporta pantalla completa o parcial.
![Page 21: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/21.jpg)
Qué podemos compartirY qué NO debemos compartir
![Page 22: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/22.jpg)
Podemos compartir todo el XAML
Esto incluye las páginas XAML
En teoría, podríamos crear una aplicación universal poniendo código SOLO en el proyecto Shared.
Pero eso, en general, no va a funcionar
![Page 23: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/23.jpg)
El layout de una página cambia mucho entre Windows y Windows Phone
Distinto tamaño, factor de forma, orientacion…
En Windows vas a tener más espacio y scroll horizontal
En Windows Phone tendrás que jugar con scrolls verticales y un espacio de pantalla más compacto
![Page 24: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/24.jpg)
Crea tus páginas para cada plataforma.
Si quieres reutilizar como se muestran ciertos datos, usa controles personalizados, plantillas… incluso una mezcla de ambos.
Pero diseña cada experiencia para aprovechar la plataforma
![Page 25: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/25.jpg)
Puedes compartir la página, si dotas a sus controles de un comportamiento que fluya
Páginas simples, que soporten multiples orientaciones
Puedes compartir algunas páginas, hacer otras específicas…
No hay una sola manera de hacerlo bien
![Page 26: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/26.jpg)
Compartiendo XAML
demo
![Page 27: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/27.jpg)
MVVM
![Page 28: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/28.jpg)
MVVM se aplica de la misma forma que ya lo hacíamos en Windows y Windows Phone
Al desacoplar las Views y ViewModels, podemos usar el Proyecto Shared para ViewModels y bases, mientras las Views están en los proyectos de plataforma.
La unificación del código simplifica tareas de navegación y el código de las ViewModels
![Page 29: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/29.jpg)
MVVM en aplicaciones universalesdemo
![Page 30: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/30.jpg)
BONUS TRACK:No todo lo que reluce…
![Page 31: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/31.jpg)
El avance por parte de Microsoft con las aplicaciones universales es incredible
Pero debido a restricciones en Windows Phone (LMD) Algunas APIs no son exactamente iguales…
Del patron “Async” hemos pasado al patron “AndContinue”
Tendremos que usar compilación condicional
![Page 32: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/32.jpg)
En otros casos, encontraremos “cosas” un poco extrañas
Las APIs de WinRT son COM y a veces los errores son crípticos
Otras veces hay APIs que devuelven excepciones en vez de resultados
Hay mucho espacio para la mejora.
Lo mejor: Es un camino que se está recorriendo.
![Page 33: Introducción al desarrollo de aplicaciones universales](https://reader033.vdocumento.com/reader033/viewer/2022052523/55636cbad8b42a3b708b46f2/html5/thumbnails/33.jpg)
© 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.
¡GRACIAS!
Yeray Julián [email protected]/blogs/jyeray