Desarrollo de Aplicaciones Universales

Josué Yeray Julián@JosueYerayGeeks.ms/blogs/jyeray

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

Aplicaciones universales:Qué son y Qué no son

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”

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

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.

Anatomía de una aplicación universal

Proyecto Windows Store

Proyecto Windows PhoneProyecto Shared

Proyectos de plataforma

Proyecto Shared

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

Creando una app simple

demo

XAML: controles

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

Controles comunes“Un botón es un botón es un botón…”

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.

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" />

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.

Controles optimizadosLa misma gran API, diferente UX

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

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.

ContentDialog (Solo Phone)Un MessageBox totalmente personalizable.

Soporta pantalla completa o parcial.

Qué podemos compartirY qué NO debemos compartir

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

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

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

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

Compartiendo XAML

demo

MVVM

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

MVVM en aplicaciones universalesdemo

BONUS TRACK:No todo lo que reluce…

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

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.

© 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 Ferreiro@JosueYeraywww.geeks.ms/blogs/jyeray