Xamarin.Forms en el navegador y WebAssembly

Introducción

Xamarin.Forms en la web. XAML en la web. Dependiendo de con quien hables es una idea que trae malos recuerdos y piensa en algo horrible o piensa que es genial aprovechar la expansión de Xamarin.Forms, llegar a la web y aprovechar para reutilizar herramientas, código, etc.

En cualquier caso, en este artículo, vamos a conocer Xamarin.Forms en la web, a definir estado y posibilidades así como hablar un poco de futuro.

Xamarin.Forms Everywhere!

Xamarin.Forms añade una capa de abstracción en la capa de UI permitiendo definir la misma una única vez (con XAML o C#) para todas las plataformas. La clave es que al ejecutar en cada plataforma, cada abstracción se convierte a un elemento nativo. Las diferentes plataformas soportadas por Xamarin.Forms reciben el nombre de backends y…cada vez tenemos más!. Actualmente hay backends para Android, iOS, GTK, macOS, WPF, UWP, Tizen y web.

Hablando del backend para web de Xamarin.Forms debemos realizar una especial mención a Frank Krueger, gran desarrollador con grandes aplicaciones y herramientas. En este caso, Frank también es el encargado de crear Ooui.

Ooui es una pequeña librería Open Source multiplataforma para simplificar el desarrollo web. Entre las diferentes opciones, Ooui cuenta con renderers Xamarin.Forms para permitir utilizar XAML y acabar teniendo elementos HTML corriendo en un navegador.

¿Cómo funciona?

Estamos hablando de una web, por lo tanto, tiene que haber un servidor que brinde el contenido. Cuando el usuario realiza una solicitud a una URL determinada, se sirve una página que mantiene una conexión con servidor utilizando Web Sockets. El servidor mantiene en memoria un modelo con el árbol visual. La UI real se sirve usando representadores de XAML con elementos nativos. El DOM en el servidor se mantiene sincronizado con la interfaz de usuario del navegador mediante un protocolo de mensajería con paquetes JSON.

Creando un proyecto

Hemos repasado los conceptos básicos, llega el momento de ver como funciona todo. Existe una plantilla de proyecto de Ooui.Forms para Visual Studio pero en este artículo vamos a crearlo todo desde cero.

Comenzamos agregando un proyecto web ASP.NET Core.

Proyecto Asp.net Core

Elegimos la plantilla utilizando MVC.

NOTA: Revisa elegir la plantilla haciendo uso de .NET Core 2.0. Ooui hace uso de la última versión de web sockets.

Tras crear el proyecto, vamos a añadir los paquetes NuGets necesarios:

Paquetes NuGets

El objetivo principal es trabajar con Xamarin.Forms en la web, por lo que también necesitamos añadir la referencia al paquete NuGet de Xamarin.Forms:

Xamarin.Forms

Llega la hora de añadir algo de código. Usaremos la configuración y enrutamiento por defecto de MVC. En Startup.cs:

app.UseOoui ();
Xamarin.Forms.Forms.Init ();

Añadimos la inicialización de Ooui dentro de ASP.net así como la inicialización de Xamarin.Forms.

Ahora continuamos añadiendo una página en XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="OouiForms.Pages.MainPage">
     <ContentPage.Content>
          <StackLayout>
               <Label 
                    Text="Welcome to Xamarin.Forms!"
                    VerticalOptions="CenterAndExpand" 
                    HorizontalOptions="CenterAndExpand" />
          </StackLayout>
     </ContentPage.Content>
</ContentPage>

Para poder utilizar la página recien añadida, debemos modificar el controlador predeterminado, HomeCOntroller.cs, que por convención sirve la vista Index.cshtml para permitir que Ooui inyecte nuestra página en XAML:

public IActionResult Index()
{
     var page = new MainPage();
     var element = page.GetOouiElement();
     return new ElementResult (element, "Hello XAML!");
}

El resultado:

Hola XAML!

Aunque aún hay trabajando por delante, el proyecto cuenta con gran interés por parte de varias comunidades entre las que destaca como no podría ser de otra forma, la comunidad Xamarin. El ejemplo anterior es básico pero en estos momentos hay ya diferentes elementos XAML soportados además de enlace a datos, Converters y otras características básicas.

NOTA: Puedes ver el estado de Xamarin.Forms con Ooui en web en este enlace.

Y ahora, hablemos de WebAssembly

WebAssembly es una nueva definición de bajo nivel de Abstract Syntax Tree (AST) representada en un formato binario. Puedes pensar en ello como un lenguaje ensamblador que los navegadores web pueden ejecutar. Esto quiere decir que sería posible compilar código escrito en muchos idiomas modernos en binarios que los navegadores web ejecutan de forma nativa.

NOTA: Recomiendo también conocer Blazor, un nuevo framework de UI web experimental del equipo ASP.NET, basado en C#, Razor y HTML que se ejecuta en el navegador a través de WebAssembly. La idea es permitir a los desarrolladores escribir aplicaciones web SPA modernas que ejecuten .NET en el lado del cliente en los navegadores web utilizando estándares web.

Ahora .NET se puede ejecutar de forma nativa en el navegador con WebAssembly, sin la necesidad de complementos o extensiones. Esto es posible gracias al soporte de Mono para WebAssembly. Podemos correr código .NET (.NET Standard 2.0) incluidos navegadores móviles.

¿Probamos?

Debemos partir de una librería .NET Standard:

Librería NET Standard

Añadimos los paquetes NuGet necesarios:

Ooui.Wasm

Añade una página XAML, y tras añadir en la clase creada con la librería:

class Program
{
     static void Main (string[] args)
     {
          Forms.Init ();

          UI.Publish ("/", new MainPage ().GetOouiElement ());
     }
}

Inicializamos Xamarin.Forms y publicamos la página. Para probar, compila el proyecto. Desde una línea de comandos, accede la carpeta de salida del proyecto (bin/Debug o bin/Release) y ejecuta:

py server.py

NOTA: Si estas desde Windows debes utilizar Python 2.x.

Accede a un navegador y navega a:

http://localhost:8000

Voila!

Espera…sigo con algunas dudas…

Llegados a este punto, probablemente tengas algunas preguntas en mente.

¿Hola Silverlight?

No, suena parecido pero no es igual. Silverlight era una forma de correr Apps XAML en el navegador pero todo a base de una extensión al estilo de Flash. En este caso los elementos XAML se convierten a elementos HTML5 sin extensiones o similar.

A desarrollar webs con XAML!

No, tampoco. No al menos en estos momentos. Los desarrollo de páginas web actuales son complejos, con una interfaz muy cuidado, diferentes estados, etc. Todo avanza a buen ritmo pero en estos momentos sigue quedando mucho por hacer. Crear una herramienta de gestión, algo no excesivamente complejo es posible hoy día pero no para todo.

Más información

Xamarin.Forms Community Sprint

El origen

En Enero de este año se abría un interesante debate acerca de aquellos puntos que se suelen necesitar crear o extender en Xamarin.Forms. Hablamos de aspectos como Custom Renderers o efectos habituales. No es algo como nuevos controles o cambios drásticos, más bien, cosas como añadir bordes redondeados a ciertos elementos o poder subrayar una parte de texto. Para determinar con exactitud la opinión de la comunidad, y así podemos ayudar al equipo de Xamarin.Forms a afinar las necesidades principales y poder cubrirlas, Adam Pedley creó una encuesta con interesantes resultados.

Comunidad Xamarin

Xamarin.Forms Community Sprint

Aunque la idea inicial era ayudar al equipo de Xamarin.Forms a conocer pequeñas mejoras deseadas por la comunidad, lo cierto es que diferentes miembros de la comunidad se interesaron por ayudar directamente. Esto ha dado lugar a lo que se conoce como Community Sprint. Con la ayuda y revisión del equipo de Xamarin.Forms hay creadas un listado de Issues que se pueden tomar permitiendo que cualquier desarrollador de la comunidad pueda contribuir en todo momento con gran ayuda. Existe un canal Slack donde tener comunicación con todos los miembros de comunidad participando así como con miembros del equipo de Xamarin.Forms.

NOTA: Puedes ver un listado de las mejoras ya realizadas en este enlace.

Si te apetece contribuir, tan solo debes elegir una de las Issues abiertas etiquetadas como Community Sprint. Estaré encantado de ayudarte junto a otros miembros de la comunidad en tus pasos, anímate!.

Más información

[Xamarin] Cache de datos de forma sencilla con Monkey Cache

La importancia de la optimización

Cuando desarrollamos aplicaciones móviles, siempre tenemos en cuenta el dispositivo final donde se va a ejecutar, es decir, las optimizaciones a diferentes niveles se encuentran a la orden del día. Hablamos de opciones como cachear imágenes, reutilizar celdas en listados o compilar el XAML entre una infinidad de opciones.

Por otro lado, la mayoría de aplicaciones necesitan guardar datos como caché para optimizar arranques o bien, para evitar volver a realizar peticiones HTTP innecesarias. En este artículo, vamos a conocer y a utilizar Monkey Cache de James Montemagno.

Cachear datos

Mientras que tenemos diferentes opciones para cachear imágenes, cachear información es algo donde hay diversidad de opciones. A continuación, vamos a conocer Monkey Cache, una forma sencilla y potente de cachear información durante un periodo de duración concreto.

Monkey Cache

Monkey Cache tiene como objetivo permitir cachear información de forma sencilla, sin requerir gran cantidad de dependencias controlando el tiempo de caducidad de los datos. Es importante resaltar que la librería no tiene como objetivo gestionar peticiones HTTP, esstados, etc. tan solo cachear la información.

Estamos ante una librería NET Standard 2.0 con el siguiente soporte a plataformas:

Platforma Versión
Xamarin.iOS iOS 7+
Xamarin.Mac All
Xamarin.Android API 14+
Windows 10 UWP 10.0.16299+
.NET Core 2.0+
ASP.NET Core 2.0+
.NET 4.6.1+

Utilizando Monkey Cache

Vamos a utilizar la aplicación WeatherApp para controlar las diferentes peticiones a la API de OpenWeatherMap.org.

Comenzamos añadiendo los paquetes NuGet necesarios. Monkey Cache cuenta con diferentes implementaciones como SQLite, LiteDB o FilesStore.

En nuestro ejemplo, vamos a utilizar la opción más sencilla (y con menos dependencias), FileStore.

MonkeyCache NuGet

Tras contar con los paquetes necesarios, continuamos creando un identificador de aplicación utilizando la propiedad ApplicationId, que se encargará de crear una carpeta específica para la aplicación en disco:

Barrel.ApplicationId = "com.refractored.weatherappmonkeycache";

Veamos como utilizar Monkey Cache.

if (!Barrel.Current.IsExpired(key: location))
{
     weatherRoot = Barrel.Current.Get<WeatherRoot>(key: location);
     Forecast = Barrel.Current.Get<WeatherForecastRoot>(key: weatherRoot.CityId.ToString());
}
else
{
     weatherRoot = await WeatherService.Instance.GetWeatherAsync(location);
     Barrel.Current.Add(key: location, data: weatherRoot, expireIn: TimeSpan.FromHours(1));
     Forecast = await WeatherService.Instance.GetForecast(weatherRoot.CityId);
     Barrel.Current.Add(key: weatherRoot.CityId.ToString(), data: Forecast, expireIn: TimeSpan.FromHours(1));
}

La aplicación verificará si los datos han expirado o no. En caso de expirar o no existir, realiza la petición HTTP. Al realizar la petición HTTP, añadimos en cache los datos durante 1 hora (expireIn).  Si los datos no han expirado, utilizamos los datos cacheados evitando realizar la petición HTTP.

Sencillo, ¿verdad?.

NOTA: Es posible hacer estas llamadas genéricas para reutilizar en diferentes servicios.

La librería conservará datos a menos que indiquemos que deseamos borrarlos. Podemos borrar todos los datos:

Barrel.Current.EmptyAll();

O podemos eliminar todos los datos expirados:

Barrel.Current.EmptyExpired();

 

WeatherAppMonkeyCache

Tienes el código fuente del ejemplo disponible GitHub:

Ver GitHub

Me he quedado con dudas…

El uso de la librería es sencillo, pero…¿diferencias con Akavache?. Akavache ofrece persistencia en forma de clave-valor con un rendimiento muy alto utilizando SQLite y Reactive Extensions. Monkey Cache busca simplificar uso, gestión de la expiración y dependencias.

Más información

[Xamarin.Forms] FormsGtkToolkit

Introducción

La llegada de nuevas plataformas siempre nos abren nuevas posibilidades. Ante la llegada del backend GTK para Xamarin.Forms podemos llegar a Linux (además de macOS y Windows). Sin embargo, también estamos ante nuevos retos y ante nuevas necesidades.

¿Cómo podemos abordar la llegada a una nueva plataforma de forma más cómoda?

Con más opciones como controles o helpers empaquetados en un Toolkit!

FormsGtkToolkit

FormsGtkToolkit una colección de clases auxiliares y controles personalizados para el backend GTK de Xamarin.Forms. Actualmente incluye:

Forms GTK Toolkit

NOTA: Pulsa en el enlace de un control específico para tener más información.

Tienes el código fuente del Toolkit disponible GitHub:

Ver GitHub

Próximamente disponible en NuGet y con más opciones. ¿Qué opinas del Toolkit?, ¿qué te gustaría ver incluido?.

Más información

[Xamarin.Forms GTK] Forms Live XAML

Introducción

La llegada de nuevas plataformas siempre nos abren nuevas posibilidades. Ante la llegada del backend GTK para Xamarin.Forms podemos llegar a Linux (además de macOS y Windows). Sin embargo, también tenemos nuevas necesidades como desarrolladores. Por ejemplo, el proceso de editar la interfaz de usuario en XAML, compilar el proyecto y ejecutar para ver el resultado en Linux.

Forms Live XAML

Para facilitar esta tarea, tenéis ahora disponible una pequeña (gran) aplicación desarrollada con Xamarin.Forms y el backend GTK que permite ver cualquier cambio de XAML al vuelo.

Live XAML desde Linux

La herramienta es muy sencilla. Cuenta con un panel lateral izquierdo donde escribir código XAML. Cualquier mínimo cambio se previsualizará en el panel de la derecha.

NOTA: También se puede forzar un refresco con el botón de actualizar situado en la parte superior derecha.

Cualquier error en XAML también será mostrado:

Detección de errores

Se soportan desde Layouts simples a aquellos más complejos (estilos, gran cantidad de líneas, etc.) con cambios al vuelo:

Cambios al vuelo

El código fuente de la herramienta esta disponible en GitHub:

Ver GitHub

La herramienta ya compilada también se encuentra disponible.

¿Qué te parece la herramienta?, ¿te resulta interesante?.

Más información

[Xamarin.Forms] Primer vistazo al backend GTK, soporte a Linux!

Introducción

Es increíble pensar que ahora puede tener una aplicación Linux nativa ejecutándose con solo algunos ajustes en una solución Xamarin.Forms.
El soporte de Linux en Xamarin.Forms ahora está en modo Preview. 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.

Gtk# Backend

El soporte de Linux se logra con un nuevo backend basado en Gtk#. Gtk# es un Toolkit de interfaz gráfica de usuario para mono y .Net. El proyecto enlaza el kit de herramientas gtk + y una variedad de bibliotecas de GNOME, lo que permite el desarrollo de aplicaciones gráficas Gnome completamente nativas utilizando Mono y .Net.

NOTA: Este nuevo backend permite crear aplicaciones Linux, pero también aplicaciones para macOS y Windows.

Puede descargar la última versión de Gtk # desde la página de descargas del proyecto Mono.

Configurando un proyecto Linux

Desarrollar para Linux es posible desde Linux, macOS y Windows utilizando MonoDevelop, Visual Studio para macOS y Visual Studio, respectivamente.

Agregar una librería .NET desde Windows

Hasta que las plantillas de Xamarin.Forms agreguen un proyecto de aplicación Linux, podemos agregarlo fácilmente nosotros mismos. Para hacer eso en Visual Studio, agregamos un nuevo proyecto a la solución y elegimos una Biblioteca de clases.

Class Library

Agregar una librería .NET desde Linux

MonoDevelop es un entorno de desarrollo de código abierto disponible para Linux.

MonoDevelop

Para compilar librerías portables (PCL) desde MonoDevelop, es necesario el siguiente comando:

sudo apt-get install referenceassemblies-pcl

Para crear un nuevo proyecto de tipo librería .NET en MonoDevelop, se debe elegir la opción una Biblioteca de clases.

Desde Linux

Y desde macOS

Para crear un nuevo proyecto de biblioteca .NET en Visual Studio para macOS, agregamos un nuevo proyecto a la solución y elegimos una Biblioteca de clases.

Librería desde macOS

Configurar el proyecto

Lo primero que tenemos que hacer para trabajar con el backend Gtk es precisamente agregar al proyecto recién creado las referencias a las bibliotecas Gtk#.

Referencias a Gtk#

También necesitaremos agregar el último paquete Preview de Xamarin.Forms (Nightly).
Editamos  la clase creada con la librería:

public class Program
{
        [STAThread]
        static void Main(string[] args)
        {
            Gtk.Application.Init();
            Forms.Init();
            var app = new App();
            var window = new FormsWindow();
            window.LoadApplication(app);
            window.SetApplicationTitle("WeatherApp");
            window.Show();
            Gtk.Application.Run();
        } 
}

Inicializa Xamarin.Forms, crea una ventana y carga la aplicación Forms.

NOTA: Si tienes otras dependencias que deben inicializarse, aquí puedes hacerlo.

A probar!

Con el proyecto del backend Gtk como proyecto de inicio, ejecútalo (F5). Voila! ¡Ahora tiene una aplicación Gtk nativa!

Voila!

¿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 GTK.

Desde XAML:

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

O desde C#:

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

Temas Gtk#

Hay una gran variedad de temas disponibles para GTK. ¡Se pueden usar desde la aplicación Xamarin.Forms!

GtkThemes.Init();
GtkThemes.LoadCustomTheme("Themes/gtkrc");

Nombre e icono de la aplicación

Para representar la imagen de la aplicación, es importante establecer su título e icono.

window.SetApplicationTitle("WeatherApp");
window.SetApplicationIcon("icon.png")

Forms Embedding

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

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

Tienes un ejemplo disponible en GitHub:

Ver GitHub

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:

  • Pinch Gesture
  • RotationX
  • RotationY
  • Scale
  • Swipe Gesture

Ejemplos, ejemplos, 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 varios ejemplos!

Movies es una aplicación Xamarin.Forms disponible para Linux que hace uso de The Movie Database (TMDb) API, una popular base de datos de películas y series de TV, para demostrar las posibilidades del nuevo backend haciendo uso de una gran variedad de funcionalidades ( mapas, WebView, temas gtk, etc.).

Movies

Disponible en GitHub:

Ver GitHub

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

Weather

Disponible en GitHub:

Ver GitHub

Nuevas posibilidades

Linux se ejecuta bajo una gran variedad de dispositivos. Xamarin.IoT permite a los desarrolladores escribir y compartir código C# en dispositivos IoT tales como Raspberry Pi e Intel Edison. Funciona con cualquier dispositivo IoT que ejecute Linux (distribuciones más populares) y se integra sin problemas con Azure IoT Suite para conectar, analizar y asegurar soluciones de IoT.

Xamarin.IoT

Podemos combinar Xamarin.Forms con Xamarin.IoT!. Se puede crear la interfaz de usuario de la aplicación con XAML o C# usando Xamarin.Forms y acceder a los sensores usando Xamarin.IoT.

Puedes encontrar un ejemplo de la aplicación WeatherApp que accede a la información de un sensor de humedad en GitHub: Ver GitHub

[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

[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.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

[Xamarin.Forms] Uso de SQLite, múltiples tablas, relaciones y operaciones en cascada

Introducción

El trabajo con datos en dispositivos móviles se ha convertido ya en algo común y habitual en el desarrollo de aplicaciones. Existe una gran variedad de tipos de datos y formas de almacenamiento:

  • Archivos de texto. Texto plano o html cacheado en el espacio de almacenamiento aislado de la aplicación.
  • Imágenes. En el espacio de almacenamiento aislado de la aplicación o almacenadas en directorios conocidos del sistema.
  • Archivos serializados. Archivos XML o Json con objetos serializados.
  • Bases de datos. Cuando se requieren datos estructurados, obtener información más compleja con consultas avanzadas entre otro tipo de necesidades, la posibilidad de las bases de datos es la elección idónea.

Las ventajas de utilizar una base de datos son múltiples:

  • Almacenamiento estructurado con eficacia alta.
  • Posibilidad de utilizar consultas y aplicar filtros.
  • Posibilidad de reutilizar conocimientos de base de datos en la gestión de datos en nuestras aplicaciones móviles.

Introducción a SQLite

SQLite es un motor de base de datos Open Source utilizado en todas las plataformas móviles y adoptado tanto por Apple como Google como Microsoft. El uso de SQLite en aplicaciones móviles es una gran opción ya que:

  • La base de datos es pequeña y fácil de portar.
  • La base de datos se concentra en un pequeño archivo.
  • Implementa la mayor parte del estándar SQL92.

Arrancamos el proyecto

Comenzamos creando una aplicación Xamarin.Forms utilizando una librería NET Standard:

Nueva aplicación Xamarin.Forms usando Net Standard

Tras crear la aplicación, añadimos las carpetas básicas para aplicar el patrón MVVM además del paquete NuGet de Autofac para la gestión del contenedor de dependencias.

Estructura del proyecto

Con el proyecto y estructura base creada, vamos a añadir SQLite al proyecto. Para ello, vamos a usar NuGet. Vamos a añadir en cada proyecto de la solución la última versión disponible del paquete utilizando NuGet. El paquete a utilizar es sql-net-pcl, implementación Open Source con soporte a .NET.

sqlite-net-pcl

Tras añadir la referencia vamos a crear una interfaz que defina como obtener la conexión con la base de datos y abstraer la funcionalidad específica de cada plataforma. Trabajando con SQLite, el único trabajo específico a implementar en cada plataforma es determinar la ruta a la base de datos.

public interface IPathService
{
     string GetDatabasePath();
}

En Android, la implementación de IPathService nos permite obtener la ruta a la base de datos.

[assembly: Dependency(typeof(PathService))]
namespace TodoSqlite.Droid.Services.Sqlite
{
     public class PathService : IPathService
     {
          public string GetDatabasePath()
          {
               string path = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
               return Path.Combine(path, AppSettings.DatabaseName);
          }
     }
}

NOTA: Utilizamos el atributo assembly:Dependency para poder realizar la resolución de la implementación con DependencyService.

En iOS:

[assembly: Dependency(typeof(PathService))]
namespace TodoSqlite.iOS.Services.Sqlite
{
     public class PathService : IPathService
     {
          public string GetDatabasePath()
          {
                string docFolder = Environment.GetFolderPath(Environment.SpecialFolder.Personal);
                string libFolder = Path.Combine(docFolder, "..", "Library", "Databases");

                if (!Directory.Exists(libFolder))
                {
                     Directory.CreateDirectory(libFolder);
                }

                return Path.Combine(libFolder, AppSettings.DatabaseName);
          }
     }
}

El archivo de la base de datos lo situamos dentro de la carpeta Library dentro del espacio de almacenamiento de la aplicación.

Y en UWP:

[assembly: Dependency(typeof(PathService))]
namespace TodoSqlite.UWP.Services.Sqlite
{
     public class PathService : IPathService
     {
          public string GetDatabasePath()
          {
               return Path.Combine(ApplicationData.Current.LocalFolder.Path, AppSettings.DatabaseName);
          }
     }
}

Todo listo para comenzar!

La definición de modelos

En nuestra aplicación, trabajaremos con elementos del listado ToDo, una única entidad sencilla.

public class TodoItem
{
     [PrimaryKey, AutoIncrement]
     public int Id { get; set; }
     public string Name { get; set; }
     public string Notes { get; set; }
     public bool Done { get; set; }
}

La gestión de campos especiales o relacionados las gestionamos mediante el uso de etiquetas. En nuestro ejemplo establecemos el campo Id como clave primaria gracias a la etiqueta PrimaryKey y además que autoincremente con el uso de AutoIncrement.

Trabajando con SQLite

Para trabajar con la base de datos utilizaremos DependencyService para obtener la implementación de IPathService y obtener la ruta a la base de datos en cada plataforma.

var databasePath = DependencyService.Get<IPathService>().GetDatabasePath();

Con la ruta de la base de datos, creamos una conexión:

var sqlCon = new SQLiteAsyncConnection(databasePath);

Comenzamos creando la tabla necesaria en la base de datos.

await _sqlCon.CreateTableAsync<TodoItem>().ConfigureAwait(false);

Continuamos con las operaciones básicas de CRUD. Para obtener la información almacenada en una tabla podemos acceder a la tabla y obtener el listado utilizando el método ToListAsync.

public async Task<IList<TodoItem>> GetAll()
{
     var items = new List<TodoItem>();
     using (await Mutex.LockAsync().ConfigureAwait(false))
     {
          items = await _sqlCon.Table<TodoItem>().ToListAsync().ConfigureAwait(false);
     }

     return items;
}

NOTA: Podemos realizar consultar SQL utilizando el método QueryAync.

A la hora de insertar, verificamos si estamos ante un registro existente o no, para realizar el registro de un nuevo elemento o actualizar uno existente con los métodos InsertAsync o UpdateAsync respectivamente.

public async Task Insert(TodoItem item)
{
      using (await Mutex.LockAsync().ConfigureAwait(false))
      {
           var existingTodoItem = await _sqlCon.Table<TodoItem>()
           .Where(x => x.Id == item.Id)
           .FirstOrDefaultAsync();

          if (existingTodoItem == null)
          {
               await _sqlCon.InsertAsync(item).ConfigureAwait(false);
          }
          else
          {
               item.Id = existingTodoItem.Id;
               await _sqlCon.UpdateAsync(item).ConfigureAwait(false);
          }
     }
}

Eliminar es una acción sencilla realizada con el método DeleteAsync.

await _sqlCon.DeleteAsync(item);

El resultado del ejemplo:

Tenéis el código fuente disponible e GitHub:

Ver GitHub

Múltiples tablas

Con lo visto hasta aquí, tenemos suficiente para gestionar una base de datos local en Android, iOS y Windows. Sin embargo, ¿cómo hacemos relaciones entre diferentes tablas?, ¿y operaciones en cascada que afecten a múltiples tablas a la vez?.

Con sqlite-net-pcl, podemos trabajar con diferentes tablas y realizar relaciones. Veamos un ejemplo:

public class Stock 
{ 
     [PrimaryKey, AutoIncrement] 
     public int Id { get; set; } 
     public string Symbol { get; set; } 
} 
 
public class Valuation 
{ 
     [PrimaryKey, AutoIncrement] 
     public int Id { get; set; } 
     [Indexed] 
     public int StockId { get; set; } 
     public DateTime Time { get; set; } 
     public decimal Price { get; set; } 
}

Es importante resaltar el uso de atributo Indexed. Estamos asociando las tablas Valuation y Stock.

Creamos ambas tablas utilizando el método CreateTable por cada tabla:

db.CreateTable<Stock>();       
db.CreateTable<Valuation>();

Y obtenemos la información relacionada con ambas tablas gracias al uso de queries:

return db.Query<Valuation> ("select * from Valuation where StockId = ?", stock.Id);

De esta forma obtendríamos los registros de la tabla Valuation dado un SotckId específico.

Esta es una forma simple de trabajar. Sin embargo, existe un wrapper de SQLite.NET llamado SQLite-Net Extensions que amplía funcionalidades como permitir gestionar relaciones (uno a uno, uno a varios, varios a uno y varios a varios), operaciones en cascada además de otras opciones interesantes de forma muy sencilla.

Vamos a regresar a nuestra aplicación de tareas. Para aprender como gestionar más de una tabla, vamos a añadir una segunda tabla de pasos en las tareas. De modo que, una tarea tendrá N pasos.

Veamos la creación de las tablas. Creamos una segunda tabla (recuerda, una clase) llamada Step:

[Table("Steps")]
public class Step
{
     [PrimaryKey, AutoIncrement]
     public int Id { get; set; }

     public string Name { get; set; }

     [ForeignKey(typeof(TodoItem))]
     public int WorkerId { get; set; }
}

Al crear directamente la definición, vamos a especificar relaciones entre tablas. En este caso, destacamos una propiedad que será la ForeignKey de la tabla TodoItem.

[Table("TodoItems")]
public class TodoItem
{
     [PrimaryKey, AutoIncrement]
     public int Id { get; set; }
     public string Name { get; set; }
     public string Notes { get; set; }
     public bool Done { get; set; }
     [OneToMany(CascadeOperations = CascadeOperation.CascadeInsert)]
     public List<Step> Steps { get; set; }
}

Gracias a las extensiones aportadas, podemos definir directamente la relación entre las tablas TodoItems y Steps. En este caso será un OneToMany. Por defecto, las operaciones no son recursivas. Podemos modificar este compartamiento estableciendo operaciones en cascada. En nuestro caso, usaremos CascadeOperations para establecer el insertar registros en cascada (al registrar un nuevo TodoItem, registraremos también sus Steps).

Para crear ambas tablas, al igual que con sqlite-net-pcl, utilizamos el método CreateTableAsync:

await _sqlCon.CreateTableAsync<Step>(CreateFlags.None).ConfigureAwait(false);
await _sqlCon.CreateTableAsync<TodoItem>(CreateFlags.None).ConfigureAwait(false);

Operaciones en cascada

A la hora de insertar registros, contamos con diferentes métodos en las extensiones de SQLite:

  • InsertWithChildren
  • InserOrReplaceWithChildren
  • InserAllWithChildren
  • InsertOrReplaceAllWithChildren

Su uso dependerá de si vamos a insertar o reemplazar y del número de registros.

NOTA: De cada método existe una version asíncrona.

await _sqlCon.InsertWithChildrenAsync(item, recursive: true).ConfigureAwait(false);

También existen otras opciones interesantes como:

  • Actualizar en cascada.
  • Eliminar en cascada.
  • Propiedades sólo de lectura.
  • Diferentes tipos de relaciones y relaciones inversas.
  • Etc.

Tenéis el código fuente disponible e GitHub:

Ver GitHub

Recordad que podéis dejar cualquier comentario, sugerencia o duda en los comentarios.

Más información