[Evento SVQXDG] Productividad al desarrollar con Xamarin, hablamos de herramientas

El evento

Ver cambios de código al vuelo, tener feedback visual al crear la interfaz de usuario, generar automáticamente enlace a datos y propiedades o comandos en la ViewModel al realizar cambios en vistas, ayuda en la localización o generar los iconos de la aplicación. Hablamos de acciones que una a una van sumando para acabar logrando aumentar increíblemente la productividad de nuestro día a día. Hablamos de herramientas como MFractor, LiveXAML o Gorilla Player. Tanto si conoces algunas de las herramientas a utilizar como si no, te esperamos en este evento donde veremos muchas herramientas que te ayudarán a incrementar tu productividad al desarrollar en Xamarin.

El lugar

El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula B1.32
Av. Reina Mercedes s/n
Sevilla Se 41012

La fecha

Será el próximo Martes, 13 de Febrero de 19:00h a 20:30h (GMT+1).

¿Te apuntas?

Más información

[Xamarin.Forms] Usando Lottie

Introducción

Día a día vamos viendo la evolución de las aplicaciones móviles. Actualmente, la mayoría de usuarios estan acostumbrados a utilizar aplicaciones visualmente atractivas que hacen uso de diferentes transiciones, efectos y animaciones.

En Xamarin.Forms contamos con API compartida para la gestión de animaciones que además da pie a crear librerías como Xamanimation. Sin embargo, en ocasiones crear algunas animaciones (diferentes pasos, transformaciones, etc.) es complejo.

Lottie

¿Te imaginas tomar una animación creada por un diseñador y poder utilizarla?.

Lottie es una librería de animaciones creada por Airbnb para iOS y Android que se encarga de tomar animaciones de After Effect exportadas en JSON y renderizarla utilizando APIs de animación nativa en cada plataforma.

Lottie

Las animaciones pueden ser extremadamente complejas pero al final, trabajamos con archivos de imagen y JSONs lo que se traduce en un requisito pequeño en tamaño otorgando unas posibilidades altas. Las animaciones se pueden reproducir, pausar, detener, jugar con la velocidad o cambiar la escala.

Obtener recursos

Un gran fuente de animaciones es LottieFiles. Puedes encontrar una gran variedad de animaciones listas para utilizar con opciones de búsqueda, etc.

LottieFiles

NOTA: Si usas animaciones de LottieFiles, recuerda otorgar crédito a sus creadores.

Lottie & Xamarin.Forms

La librería Lottie fue creada por Airbnb inicialmente para iOS, Android y React Native. Sin embargo, gracias a la contrinución de Martijn van Dijk y otros miembros de la comuidad, tenemos soporte en Xamarin y Xamarin.Forms.

Para comenzar a trabajar con Lottie en Xamarin.Forms utilizaremos el paquete NuGet Aribnb.Xamarin.Forms.Lottie:

Install-Package Com.Airbnb.Xamarin.Forms.Lottie

NOTA: En UWP utilizaremos el paquete Lottie.UWP.

Para completar el proceso de preparación de Lottie en nuestro proyecto Xamarin.Forms, necesitamos añadir la siguiente línea tras la inicialización de Xamarin.Forms en cada proyecto nativo:

AnimationViewRenderer.Init();

Todo listo!.

Para poder mostrar una animación de Lottie, debemos contar con ella. En nuestro ejemplo vamos a utilizar esta animación disponible en LottieFiles creada por Salatiel Queiroz.

Tras descargar el archivo JSON, vamos a añadirlo en cada proyecto nativo:

  • Android: En la carpeta Assets. El archivo debe tener como acción de compilación AndroidAsset.
  • iOS: En la carpeta Resources. El archivo debe tener como acción de compilación BundleResource.
  • UWP: En la carpeta Assets (o en la raíz), el archivo debe tener como acción de compilación Content.

Para mostrar la animación necesitamos un elemento visual que nos permita además realizar una gestión de la misma. Este elemento visual es AnimationView.

Las propiedades fundamentales del elemento visual son:

  • Animation: El archivo JSON a utilizar.
  • Loop: Un booleano que indica si la animación se repite en bucle o no.
  • AutoPlay: Booleano que determina si la animación se auto reproduce.
  • IsPlaying: Indica si la animación se esta reproduciendo o no.
  • Speed: Determina la velocidad de reproducción de la animación.
  • Progress: Valor numérico que nos indica el progreso actual de la animación en reproducción.

Los eventos:

  • OnPlay: Se inicia la animación.
  • OnPause: Pausa.
  • OnFinish: Fin de la animación.

Comandos:

  • PlaybackStartedCommand: Comanzo lanzado cuando se inicia la animación.
  • PlaybackFinishedCommand: Comando lanzado al completar la animación.

Para utilizar AnimationView desde XAML necesitamos utilizar el siguiente espacio de nombres:

xmlns:lottie="clr-namespace:Lottie.Forms;assembly=Lottie.Forms"

La interfaz:

<lottie:AnimationView
     x:Name="LottieView" 
     Animation="Tadah.json" 
     Loop="False" 
     AutoPlay="True"
     PlaybackStartedCommand="{Binding PlayingCommand}"
     PlaybackFinishedCommand="{Binding FinishedCommand}"
     VerticalOptions="FillAndExpand"
     HorizontalOptions="FillAndExpand" />

Podemos pausar la animación utilizando el método Pause y lanzar la animación con Play.

El resultado:

El resultado

Como podemos observar, el resultado es increíble. Con diferentes recursos y aplicando diferentes animaciones de rotación, trasladación, etc. podríamos conseguir resultados similares pero con un esfuerzo mucho más elevado.

Ejemplo disponible en GitHub:

Ver GitHub

Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.

Más información

[Evento SVQXDG] Nos debería preocupar más el diseño que el código

El evento

El valor diferencial que ofrecemos con Xamarin es poder compartir código entre plataformas. Xamarin.Forms incluso nos permite compartir la UI. Usamos MVVM, hacemos tests unitarios, tenemos builds, etc.; pero, ¿somos buenos diseñando?. Si la respuesta es no, ¿qué podemos hacer, por dónde podemos comenzar?. En esta charla intentaremos responder a todas estas preguntas con Marcos Cobeña!

Ven preparado con tu bolígrafo para una parte práctica, el papel lo ponemos nosotros!

A diseñar!

El lugar

El evento se celebrará en la ETS de Ingeniería Informática. Dirección detallada:

E.T.S. Ingeniería Informática – Universidad de Sevilla, Aula B1.32
Av. Reina Mercedes s/n
Sevilla Se 41012

La fecha

Será el próximo Miércoles, 07 de Febrero de 19:00h a 21:00h (GMT+1).

¿Te apuntas?

Más información

[Xamarin.Forms] Aplicaciones WPF

Introducción

El soporte de WPF en Xamarin.Forms ahora está  disponible en la Nightly (paquetes previos) de Xamarin.Forms. En este artículo, vamos a ver cómo agregar este nuevo proyecto a una solución existente de Xamarin.Forms, los obstáculos que puedes encontrar así como el estado actual y el futuro de las características de esta nueva plataforma.

Backend WPF

WPF es la abreviación de Windows Presentation Foundation. Hablamos de un conjunto de APIs destinadas a crear interfaces de usuario enriquecidas para Windows.

Cabe destacar que se soporta Windows Vista hasta Windows 10.

Crear nuevo proyecto

Tras crear un nuevo proyecto Xamarin.Forms con una librería NET Standard.

New Cross Platform App

A continuación, vamos a añadir un proyecto WPF. Dentro de la categoría escritorio clássico de Windows, elegimos la opción Aplicación de WPF:

Nueva App WPF

A continuación, vamos a actualizar el paquete de Xamarin.Forms para utilizar la última Nightly (donde ya se incluye la Preview de WPF).

Debemos añadir https://www.myget.org/F/xamarinforms-ci/api/v2 como origen de paquetes NuGet (Herramientas > Opciones > Administrador de paquetes NuGet).

Y actualizamos Xamarin.Forms además de instalar el paquete en todos los proyectos:

Xamarin.Forms Nightly

A continuación, vamos a instalar el paquete Xamarin.Forms.Platform.WPF en el proyecto WPF. Este paquete es el que cuenta con las implementaciones necesarias de Xamarin.Forms en WPF.

Xamarin.Forms.Platform.WPF

Todo listo a nivel de dependencias. Es hora de cambiar levemente el código para inicializar Forms.

En el archivo App.xaml vamos a añadir algunos recursos utilizados por el backend WPF:

<Application.Resources>
 <ResourceDictionary>
 <ResourceDictionary.MergedDictionaries>
 <ResourceDictionary Source="/WPFLightToolkit;component/Assets/Default.xaml" />
 </ResourceDictionary.MergedDictionaries>

<!-- Default Global Color -->
 <SolidColorBrush x:Key="WindowBackgroundColor" Color="White" />
 <SolidColorBrush x:Key="AccentColor" Color="#3498db" />

     <!-- Default Command Bar Color -->
     <SolidColorBrush x:Key="CommandBarBackgroundColor" Color="#3498db" />
     <SolidColorBrush x:Key="CommandBarTextColor" Color="White" />

     <!-- Default Title Bar Color -->
     <SolidColorBrush x:Key="DefaultTitleBarBackgroundColor" Color="#3498db" />
     <SolidColorBrush x:Key="DefaultTitleBarTextColor" Color="White" />

     <!-- Default Tabbed Bar Color -->
     <SolidColorBrush x:Key="DefaultTabbedBarBackgroundColor" Color="#3498db" />
     <SolidColorBrush x:Key="DefaultTabbedBarTextColor" Color="White" />

     </ResourceDictionary>
</Application.Resources>

Actualizamos la ventana principal, MainWindow.xaml para utilizar FormsApplicationPage:

<wpf:FormsApplicationPage x:Class="WPFSample.WPF.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:wpf="clr-namespace:Xamarin.Forms.Platform.WPF;assembly=Xamarin.Forms.Platform.WPF"
     mc:Ignorable="d"
     Title="MainWindow" Height="350" Width="525">
     <Grid>
 
     </Grid>
</wpf:FormsApplicationPage>

También actualizaremos el tipo del code behind en MainWindow.xaml.cs:

using Xamarin.Forms.Platform.WPF;

namespace WPFSample.WPF
{
     public partial class MainWindow : FormsApplicationPage
     {
          public MainWindow()
          {
               InitializeComponent();
          }
     }
}

Todo listo, ejecutamos!

Hola WPF!

Más ejemplos!

Un nuevo backend ofrece la posibilidad de llegar a nuevas plataformas, es normal querer probar todas las posibilidades. ¡No te preocupes, vamos a ver más ejemplos!

WeatherApp es otro ejemplo de aplicación Xamarin.Forms con soporte a WPF. Es una aplicación para ver la información meteorológica de forma muy visual.

WeatherApp

Disponible en GitHub:

Ver GitHub

Native Embedding

La posibilidad de tomar cualquier ContentPage y usarlo en aplicaciones nativas, ¡también está disponible en el backend de WPF!

var settingsView = new SettingsView().CreateContainer();
vbox.PackEnd(settingsView, true, true, 0);

El resultado:

Native Embedding

Tienes un ejemplo disponible en GitHub:

Ver GitHub

¿Algo más?

Ahora que tienes una aplicación, es hora de ponerse la gorra de diseñador de UX y comenzar a explorar los cambios necesarios para adaptar la aplicación a esta nueva plataforma.

Estilos

Échale un vistazo al estilo de la interfaz de usuario para Linux. Es posible que el mismo estilo utilizado en los dispositivos móviles no se vea bien. ¡Esto lo cambios fácilmente!
Con los cambios recientes realizados en OnPlatform, ahora puede seleccionar cada plataforma. Eso incluye a WPF.

Desde XAML:

<Button.TextColor>
     <OnPlatform x:TypeArguments="Color">
           <On Platform="iOS" Value="White"/>
           <On Platform="WPF" Value="White"/>
           <On Platform="Android" Value="Black"/>
     </OnPlatform>
</Button.TextColor>

O desde C#:

if (Device.RuntimePlatform == Device.WPF)
     return "Images/image.jpg";
else if (Device.RuntimePlatform == Device.UWP)
     return "Assets/image.jpg";
else
     return "image.jpg";

Recuerda, es una Preview…

Esta Preview tiene un soporte muy alto de las características y opciones de Xamarin.Forms. Sin embargo, hay algunas características aun no disponibles:

  • Accessibility
  • List (mucho trabajo pendiente aún)
  • NativeViewWrapper
  • NavigationMenu
  • TimePicker

Más información

Xamarin Android Device Manager y emuladores Oreo

Introducción

Recientemente hemos recibido Xamarin Android Device Manager en fase Preview. Una herramienta que viene a reemplazar a Emulator Manager de Google. Usaremos esta herramienta para crear y configurar emuladores de Android con una enorme variedad de opciones.

¿A que se debe este cambio?

Desde la versión 26.0.1 de las Android SDK Tools (necesario para utilizar Android 8.0 Oreo) se ha eliminado el soporte de gestión de SDKs y emuladores (AVD) mediante interfaz de usuario para dejar solo línea de comandos (CLI).

«The Google Emulator Manager visual interface is not available for your version of SDK tools. Please use the SDK manager to downgrade to SDK Tools 25, or switch to the command line AVD manager tool.»

En este artículo, vamos a conocer Xamarin Android Device Manager así como crear y utilizar nuevos emuladores de Android Oreo.

Requisitos

Para poder utilizar Xamarin Android Device Manager se necesita:

  • Visual Studio 2017 15.5 o superior en Windows o Visual Studio macOS 7.4 o superior en macOS.
  • Xamarin para Visual Studio 4.8 o superior.
  • Android SDK 26.0 o superior.

Para instalar la herramienta utilizando su instalación en Windows o macOS.

NOTA: Es necesario tener el SDK de Android instalado en la siguiente ruta C:\Program Files (x86)\Android\android-sdk en Windows.

Xamarin Android Device Manager

Todo preparado para usar la herramienta!. La podemos lanzar desde Visual Studio y también la encontraremos fuera de Visual Studio, en el menú de inicio de Windows o en el listado de aplicaciones en macOS.

NOTA: Es necesario ejecutar la aplicación con privilegios de administrador en Windows.

Recuerda, es necesario tener instalado Android SDK tools 26.0.0 o superior. Si te aparece un mensaje de error:

«The AVD Manager visual interface is not available for yor version of SDK tools.»

Es necesario:

Instalar Android SDK Tools 26.0.0

La herramienta:

Android Devices

Tenemos un listado de emuladores creados donde podemos ver el nombre, versión de sistema operativo, CPU, memoria y resolución de pantalla de cada emulador. También contamos con la opción de lanzar o detener el emulador.

Emulador Android Oreo

Nuevos emuladores

Para crear un nuevo emulador, debemos pulsar el botón New.

Tras asignar un nombre al emulador, elegimos la imágen del sistema. Podemos elegir entre todas las imágenes de emuladores instaladas (Android SDK tools). Tendremos opción de crear emuladores con Nougat, Oreo, etc.

Imágenes de sistema

A continuación, podemos elegir el dispositivo físico a emular:

Dispositivos

A continuación, tenemos todas las propiedades básicas de cada emulador tales como la cantidad de memoria RAM, sensores, etc. Si necesitamos alguna opción no incluida, podemos añadir nuevas propiedades:

Propiedades

NOTA: El listado de propiedades disponibles la puedes encontrar en este enlace.

Más información

[Xamarin.Forms] Estilos con CSS

Introducción

En toda aplicación móvil la apariencia visual es vital. Cada vez es mayor el esfuerzo depositado a la hora de crear aplicaciones atractivas a la par que intuitivas y en muchos casos conseguir una imagen única que diferencia a la Aplicación del resto es prioritario. Por este motivo, debemos de contar con opciones sencillas de poder personalizar los distintos elementos que componen la interfaz.

Los estilos permitir definir múltiples propiedades visuales de elementos de la interfaz de forma reutilizable.

Hasta ahora, podíamos utilizar C# o XAML para definir estilos. También tenemos la posibilidad de utilizar diferentes diccionarios de recursos entre otras opciones. Ahora, con la llegada de la última versión nightly de Xamarin.Forms, se incluye soporte a definir los estilos utilizando CSS.

NOTA: Puedes ver el conjunto de opciones soportadas en esta Pull Request de Stephane Delcroix.

En este artículo, vamos a conocer las opciones disponibles utilizando CSS para definir estilos.

Estilos utilizando CSS

Vamos a crear un nuevo proyecto Xamarin.Forms utilizando una librería NET Standard. Tras crear el proyecto, actualizamos Xamarin.Forms a su última versión nightly disponible (2.6.0.52014-nightly al momento de escribir este artículo).

Xamarin.Forms Nightly

NOTA: Para tener acceso a las versiones nightly de Xamarin.Forms es necesario añadir https://www.myget.org/F/xamarinforms-ci/api/v2 como origen de paquetes.

Crear un Stylesheet

Los estilos los aplicaremos utilizando CSS, para ello debemos crear archivo/s CSS. Puedes crear estos archivos en la librería NET Standard en cualquier localización aunque la recomendación sería mantener todos los estilos manteniendo una estructura de carpetas que ayude a mantener el proyecto con facilidad. En nuestro ejemplo, creamos una carpeta llamada Styles y dentro un archivo MainView.css donde aplicaremos los estilos a utilizar en la vista principal de la aplicación.

Es importante recordar que se debe establecer la propiedad Build Action del archivo CSS a EmbeddedResource.

Tras crear el archivo, desde la ContentPage:

<ContentPage.Resources>
 <StyleSheet Source="../Styles/MainView.css" />
</ContentPage.Resources>

De esta forma, podemos acceder a los estilos CSS desde la ContentPage.

Opciones soportadas (selectores y propiedades)

Los selectores en CSS son imprescindibles para poder aplicar los estilos. El selector es quien determina a que elemento hay que aplicar el estilo.

Los mismos selectores utilizados en CSS se utilizan en este caso en Xamarin.Forms salvo una excepción, ^base , que solo aplica en Xamarin.Forms.

Selector Ejemplo Descripción
.class .header Selecciona todos los elementos con la propiedad StyleClass que contiene ‘header’.
#id #email Selecciona todos los elementos con StyleId establecido a email.
* * Secciona todos los elementos.
element label Selecciona todos los elementos de tipo Label.
^base ^contentpage Selecciona todos los elementos con ContentPage como clase base, esto incluye a la propia ContentPage. Este selector no esta presente en la especificación CSS y solo aplica a Xamarin.Forms.
element,element label,button Selecciona todos los Buttons y todos los Labels.
element element stacklayout label Selecciona todos los Labels dentro de un StackLayout.
element>element stacklayout>label Selecciona todos los Labels con un StackLayout como padre directo.
element+element label+entry Selecciona todos los Entries que están directamente tras un Label.
element~element label~entry Selecciona todos los Entries precedidos por un Label.

Se pueden realizar combinaciones de diferentes selectores lo que nos otorga grandes posibilidades de forma muy simple. Ejemplo:

StackLayout > ContentView > label.email

El resto de selectores que no aparecen en la tabla no estan soportados por ahora (Ejemplo: @media o @supports).

Pasamos a ver el listado de propiedades soportadas:

Propiedad Aplica a
background-color VisualElement
background-image Page
border-color ButtonFrame
border-width Button
color ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePicker

direction VisualElement
font-family ButtonDatePickerEditorEntryLabelPicker,

SearchBarTimePickerSpan

font-size ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePickerSpan

font-style ButtonDatePickerEditorEntryLabelPicker

SearchBarTimePickerSpan

height VisualElement
margin View
margin-left View
margin-top View
margin-right View
margin-bottom View
min-height VisualElement
min-width VisualElement
opacity VisualElement
padding LayoutPage
padding-left LayoutPage
padding-top LayoutPage
padding-right LayoutPage
padding-bottom LayoutPage
text-align EntryEntryCellLabelSearchBar
visibility VisualElement
width VisualElement

Se soportan diferentes formatos de colores (RGB, RGBA, Hex, HSL, etc) y propiedades de Thickness con el mismo formato que en XAML.

Aplicando estilos en XAML

Tras ver el conjunto de selectores y propiedades soportadas, podemos aplicar estilos.

El estilo:

.CSSButton {
     background-color: #11313F;
     color: white;
     font-size: 16;
     height: 60;
     border: 0;
}

Utilizar el estilo:

<Button
     Text="CSS Style Button"
     StyleClass="CSSButton" />

Con StyleClass buscamos el estilo definido por un selector de tipo .class.

Ejemplo disponible en GitHub:

Ver GitHub

Es importante recordar que, la posibilidad de aplicar estilos utilizando CSS es un añadido. No llega para reemplazar la posibilidad de estilos con XAML (en estos momentos, aplicar estilos con XAML o C# cuenta con más características).

El aplicar estilos con CSS cuenta con ciertos beneficios como la flexibilidad aportada por los selectores además de reducir la verbosidad de XAML. Además, hoy día, la mayoría de herramientas de diseño (como Sketch) cuentan con la posibilidad de facilitar los estilos en CSS.

¿Qué te parece esta nueva característica?. Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.

Más información