Yeray Julián
jyeray@devsdna.com
4
The future of apps
@josueyeray
Make it fast, easy, and fun to
create great mobile apps.
Xamarin’s Mission
Traditional Xamarin
Approach
With Xamarin.Forms:
More code-sharing, all native
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Backend
Shared UI Code
Shared C# Backend
What’s new in Xamarin Platform?
Enhanced VS Integration Xamarin.Forms 2.0 iOS 9 & Android M Preview
Technologies
Xamarin.Forms 2.0
Ya estaba disponible en 1.4.3-pre1 en modo preview
Se desactivo en 1.4.3-pre3 por problemas de renderizado
Vuelve en 2.0 de forma final
En tiempo de compilación, se realiza el parsing del XAML y se crean archivos
compilados
Mejora del rendimiento de carga de las páginas
Analisis del XAML a nivel sintáctico.
Para depuración puede interferir, por lo que es mejor desactivarlo y usarlo solo en
modo release
XAMLC (Xaml Compilado)
Podemos establecer la compilación:
A nivel de ensamblado, para todas las páginas XAML:
A nivel de página:
XAMLC (Xaml Compilado)
[assembly: XamlCompilation (XamlCompilationOptions.Compile)]
[XamlCompilation (XamlCompilationOptions.Compile)]
public class MyCustomView : ContentView
{ ... }
Soporte previo, no definitivo, para Windows 10 Universal Apps
Se inicializa como cualquier otra plataforma.
Usamos Xamarin.Forms.Platform.UWP para obtener una clase base de página
Problemas conocidos actualmente:
Look/feel de algunos controles no es definitivo.
Problemas y fallos en la navegación.
Problemas de alineamiento de texto.
Sin soporte para mapas.
Existen problemas para cargar tipos usando .NET native tool chain para compilar
nuestra app.
Es usable, pero no está listo para poner en producción como app crítica, por el
Soporte UWP (Windows 10)
10
Este gesto nos permite añadir funcionalidad de Zoom facilmente en nuestros
controles
Añadimos el PinchGestureRecognizer a la colección de reconocedores y
manejamos el evento PinchUpdated
Tres estados: Started, Running, Completed nos permiten adecuar nuestro código.
Gesto Pinch
<Image Source="waterfront.jpg">
<Image.GestureRecognizers>
<PinchGestureRecognizer PinchUpdated="OnPinchUpdated" />
</Image.GestureRecognizers>
</Image>
Ahora ListView tiene dos modos de funcionamiento:
RetainElement
RecycleElement
El modo tradicional es RetainElement, presente en todas las versiones de
Xamarin.Forms
RecycleElement:
solo funciona en iOS/Android.
En Windows, aunque se especifique, se sigue usando el modo antiguo.
Durante la virtualización, el contexto de cada celda se actualiza.
Se realiza un inflate de cada DataTemplate por cada render nativo.
Retain/Recycle en ListView
Se recomienda usar RecycleElement si:
El contexto de datos de cada celda define todas las propiedades de la
vista.
El tamaño de la celda no cambia y su contenido es muy parecido.
La celda tiene un bajo número de bindings.
Se recomienda usar RetainElement si:
Las celdas cambian frequentemente (tamaño, elementos…)
Las celdas tienen muchos bindings (20 o más)
Si al probar RecycleElement, baja el rendimiento.
El futuro será RecycleElement y se tiende a hacer RetainElement obsoleto, pero no
hasta que RecycleElement cubra todos los casos posibles.
Retain/Recycle en ListView
Con Xamarin.Forms 2 se libera una nueva optimización de layout ”experimental”.
Impacta en los LayoutUpdates.
Para obtener el mejor resultado posible:
Intentar no especificar VerticalOptions ni HorizontalOptions.
Con StackLayout, solo tener un hijo como Expand.
Evitar RelativeLayout siempre que se pueda.
Evitar columnas y filas Auto en la Grid.
En AbsoluteLayout evitar AutoSize si es posible.
Siempre que se pueda, evitar usar wrapping multilinea en labels.
Usar la opción NoWrap
Optimización de layout
Efectos
Plantillas
Selector de plantillas
Más… Xamarin.Forms 2.1 pre
Nos permiten modificar la apariencia nativa de un control sin necesidad de crear
un CustomRender desde 0
Podemos crear efectos de sombras, bordes o lo que necesitemos.
Ahora, todo elemento en Xamarin.Forms, contiene una colección de efectos que se
le pueden aplicar.
Por ejemplo, podemos añadir un borde facilmente a un elemento:
Efectos
public class BorderEffect : PlatformEffect
{
protected override void OnAttached ()
{
Control.Layer.BorderColor = UIColor.Purple.CGColor;
Control.Layer.BorderWidth = 2;
}
protected override void OnDetached ()
{
Control.Layer.BorderWidth = 0;
}
}
Tenemos que crear los efectos en cada proyecto de plataforma.
Para que funcione, debemos marcar el ensamblado de cada plataforma con dos
atributos:
Luego, para añadirlo al elemento en el proyecto compartido, usaremos la
resolución de efectos que nos provee la clase Effect:
Si no implementamos un efecto en alguna plataforma, Resolve devolverá un valor
no nulo, por lo que no pasará nada.
Efectos
[assembly: ResolutionGroupName("DevsDNA")]
[assembly: ExportEffect(typeof(FocusEffect), "FocusEffect")]
entryText.Effects.Add(Effect.Resolve("DevsDNA.FocusEffect"));
Se introduce el concepto de plantillas para los controles.
Podemos cambiar el aspecto de un control, directamente en XAML y para todas
las plataformas.
Para que funcione, el control tiene que soportar templating.
En la versión actual se soporta para:
ContentView – TemplateView
ContentPage – TemplatePage
Plantillas
Se incluye por primera vez el selector de plantillas.
Podemos crear una clase que herede de la clase DataTemplateSelector y
sobreescribir el método OnSelectTemplate para devolver la plantilla que queramos
en cada momento.
Como parámetro de OnSelectTemplate, recibimos cada elemento de la
lista.
Debemos devolver un DataTemplate
Es importante que no creemos un nuevo DataTemplate por cada elemento, en su
lugar, reusamos uno existente.
Actualmente, no podemos usar más de 20 templates distintas en un ListView
Selector de plantillas
Están disponibles en GitHub:
http://www.github.com/josueyeray/xamarinforms2
Estos ejemplos…
Get Started Today
xamarin.com
Free 30 Day Trial - xamarin.com/university
Unrivaled Mobile
Development
Training
Live unlimited mobile development training from
mobile experts, in your time-zone, on your
schedule, and as often as you'd like.
evolve.xamarin.com
Thank You! Questions?
Yeray Julián
Tech lead & founder @
jyeray@devsdna.com Devsdna.com/blog @josueyeray

Novedades Xamarin.Forms 2

  • 1.
  • 2.
    Make it fast,easy, and fun to create great mobile apps. Xamarin’s Mission
  • 3.
    Traditional Xamarin Approach With Xamarin.Forms: Morecode-sharing, all native iOS C# UI Windows C# UIAndroid C# UI Shared C# Backend Shared UI Code Shared C# Backend
  • 4.
    What’s new inXamarin Platform? Enhanced VS Integration Xamarin.Forms 2.0 iOS 9 & Android M Preview Technologies
  • 5.
  • 6.
    Ya estaba disponibleen 1.4.3-pre1 en modo preview Se desactivo en 1.4.3-pre3 por problemas de renderizado Vuelve en 2.0 de forma final En tiempo de compilación, se realiza el parsing del XAML y se crean archivos compilados Mejora del rendimiento de carga de las páginas Analisis del XAML a nivel sintáctico. Para depuración puede interferir, por lo que es mejor desactivarlo y usarlo solo en modo release XAMLC (Xaml Compilado)
  • 7.
    Podemos establecer lacompilación: A nivel de ensamblado, para todas las páginas XAML: A nivel de página: XAMLC (Xaml Compilado) [assembly: XamlCompilation (XamlCompilationOptions.Compile)] [XamlCompilation (XamlCompilationOptions.Compile)] public class MyCustomView : ContentView { ... }
  • 8.
    Soporte previo, nodefinitivo, para Windows 10 Universal Apps Se inicializa como cualquier otra plataforma. Usamos Xamarin.Forms.Platform.UWP para obtener una clase base de página Problemas conocidos actualmente: Look/feel de algunos controles no es definitivo. Problemas y fallos en la navegación. Problemas de alineamiento de texto. Sin soporte para mapas. Existen problemas para cargar tipos usando .NET native tool chain para compilar nuestra app. Es usable, pero no está listo para poner en producción como app crítica, por el Soporte UWP (Windows 10) 10
  • 9.
    Este gesto nospermite añadir funcionalidad de Zoom facilmente en nuestros controles Añadimos el PinchGestureRecognizer a la colección de reconocedores y manejamos el evento PinchUpdated Tres estados: Started, Running, Completed nos permiten adecuar nuestro código. Gesto Pinch <Image Source="waterfront.jpg"> <Image.GestureRecognizers> <PinchGestureRecognizer PinchUpdated="OnPinchUpdated" /> </Image.GestureRecognizers> </Image>
  • 10.
    Ahora ListView tienedos modos de funcionamiento: RetainElement RecycleElement El modo tradicional es RetainElement, presente en todas las versiones de Xamarin.Forms RecycleElement: solo funciona en iOS/Android. En Windows, aunque se especifique, se sigue usando el modo antiguo. Durante la virtualización, el contexto de cada celda se actualiza. Se realiza un inflate de cada DataTemplate por cada render nativo. Retain/Recycle en ListView
  • 11.
    Se recomienda usarRecycleElement si: El contexto de datos de cada celda define todas las propiedades de la vista. El tamaño de la celda no cambia y su contenido es muy parecido. La celda tiene un bajo número de bindings. Se recomienda usar RetainElement si: Las celdas cambian frequentemente (tamaño, elementos…) Las celdas tienen muchos bindings (20 o más) Si al probar RecycleElement, baja el rendimiento. El futuro será RecycleElement y se tiende a hacer RetainElement obsoleto, pero no hasta que RecycleElement cubra todos los casos posibles. Retain/Recycle en ListView
  • 12.
    Con Xamarin.Forms 2se libera una nueva optimización de layout ”experimental”. Impacta en los LayoutUpdates. Para obtener el mejor resultado posible: Intentar no especificar VerticalOptions ni HorizontalOptions. Con StackLayout, solo tener un hijo como Expand. Evitar RelativeLayout siempre que se pueda. Evitar columnas y filas Auto en la Grid. En AbsoluteLayout evitar AutoSize si es posible. Siempre que se pueda, evitar usar wrapping multilinea en labels. Usar la opción NoWrap Optimización de layout
  • 13.
  • 14.
    Nos permiten modificarla apariencia nativa de un control sin necesidad de crear un CustomRender desde 0 Podemos crear efectos de sombras, bordes o lo que necesitemos. Ahora, todo elemento en Xamarin.Forms, contiene una colección de efectos que se le pueden aplicar. Por ejemplo, podemos añadir un borde facilmente a un elemento: Efectos public class BorderEffect : PlatformEffect { protected override void OnAttached () { Control.Layer.BorderColor = UIColor.Purple.CGColor; Control.Layer.BorderWidth = 2; } protected override void OnDetached () { Control.Layer.BorderWidth = 0; } }
  • 15.
    Tenemos que crearlos efectos en cada proyecto de plataforma. Para que funcione, debemos marcar el ensamblado de cada plataforma con dos atributos: Luego, para añadirlo al elemento en el proyecto compartido, usaremos la resolución de efectos que nos provee la clase Effect: Si no implementamos un efecto en alguna plataforma, Resolve devolverá un valor no nulo, por lo que no pasará nada. Efectos [assembly: ResolutionGroupName("DevsDNA")] [assembly: ExportEffect(typeof(FocusEffect), "FocusEffect")] entryText.Effects.Add(Effect.Resolve("DevsDNA.FocusEffect"));
  • 16.
    Se introduce elconcepto de plantillas para los controles. Podemos cambiar el aspecto de un control, directamente en XAML y para todas las plataformas. Para que funcione, el control tiene que soportar templating. En la versión actual se soporta para: ContentView – TemplateView ContentPage – TemplatePage Plantillas
  • 17.
    Se incluye porprimera vez el selector de plantillas. Podemos crear una clase que herede de la clase DataTemplateSelector y sobreescribir el método OnSelectTemplate para devolver la plantilla que queramos en cada momento. Como parámetro de OnSelectTemplate, recibimos cada elemento de la lista. Debemos devolver un DataTemplate Es importante que no creemos un nuevo DataTemplate por cada elemento, en su lugar, reusamos uno existente. Actualmente, no podemos usar más de 20 templates distintas en un ListView Selector de plantillas
  • 18.
    Están disponibles enGitHub: http://www.github.com/josueyeray/xamarinforms2 Estos ejemplos…
  • 19.
  • 20.
    Free 30 DayTrial - xamarin.com/university Unrivaled Mobile Development Training Live unlimited mobile development training from mobile experts, in your time-zone, on your schedule, and as often as you'd like.
  • 21.
  • 22.
    Thank You! Questions? YerayJulián Tech lead & founder @ jyeray@devsdna.com Devsdna.com/blog @josueyeray

Notas del editor

  • #4 Xamarin recently introduced Xamarin.Forms a new library for cross platform user interface. We will touch up on this later, but this enables you to be highly productive, share code, but build out UI on each platform and access platform APIs. With Xamarin.Forms you now have a nice Shared UI Code layer, but still access to platform APIs You can start from native, pick a few screens, or start with forms, and replace with native later
  • #6 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #7 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #8 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #9 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #10 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #11 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #12 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #13 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #14 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #15 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #16 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #17 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #18 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #19 AppCompat delivers visual beautify across all version of Android ListView overhaul with amazing optimizations for images and cell recycling Support for iOS, Android, Windows Phone 8, Win RT Phone/Store 8.1, and Windows 10 UWP Pull to refresh & Pinch gestures & more to come!
  • #20 Get started today with free 30 day trial of Xamarin at xamarin.com