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
Desarrollo de Aplicaciones Universales
Josué Yeray Juliá[email protected]/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 [email protected]/blogs/jyeray