Con la llegada de Xamarin.Forms 3.1 llegan una gran cantidad de mejoras y correcciones (es genial ver que muchas vienen de la comunidad). Entre el conjunto de novedades tenemos la posibilidad de crear TabbedPage en la parte inferior en Android.
En este artículo, vamos a ver como crear una Bottom TabbedPage.
Bottom TabbedPage
Podemos crear una TabbedPage con posición en la parte inferior de forma muy sencilla en Android utilizando platform specific:
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.
Los recursos XAML son objetos que podemos reutilizar más de una vez. Hablamos desde un sencillo color o tamaño de fuente, a el uso de estilos. Los diccionarios de recursos o ResourceDictionaries permiten definir una zona donde definir recursos.
Hasta ahora…
Podíamos definir diccionarios de recursos en archivos totalmente independientes. Hablamos de una clase derivada de ResourceDictionary, que consta de un par de archivos. Por un lado tenemos el archivo XAML donde se definen los recursos y por otro lado, la clase subyacente encarga de realizar InitializeComponent.
NOTA: Para crear un archivo de tipo ResourceDictionary, crea una ContentPage o ContentView y renombra la clase base de ContentPage o ContentView a ResourceDictionary.
La forma anterior de añadir el diccionario de recursos a pesar de ser válida es muy limitada ya que sólo nos permite utilizar los recursos del diccionario instanciado. Podríamos necesitar utilizar mñas de un diccionario de recursos o añadir otros recursos.
Para solucionar este problema, tenemos disponible la posibilidad de utilizar diccionarios de recursos combinados.
Podemos combinar varias instancias de diccionarios de recursos en uno existente. Se puede realizar directamente desde XAML utilizando la propiedad MergedDictionaries.
Con la llegada de Xamarin.Forms 3.0
La combinación de ResourceDictionary se simplifica con la llegada de Xamarin.Forms 3.0. Por un lado, ya no es necesario utlizar las etiquetas MergedDictionaries ya que en su lugar, podemos agregar directamente otro ResourceDictionary utilizando la propiedad Source.
Además, Xamarin.Forms 3.0 crea automáticamente una instancia de ResourceDictionary por lo que ya no es necesario añadir estas etiquetas.
Esta nueva sintaxis no crea una instancia del diccionario de recursos. Gracias a este cambio, ya no es necesario mantener la clase subyacente o code behind del diccionario de recursos (MyResourceDictionary.xaml.cs) por lo que podemos borrarlo además del atributo x:Class de la ráiz del diccionario.
A la hora de desarrollar aplicaciones móviles nos encontramos con ciertas necesidades a cubrir. Una bastante habitual es la de ofrecer en una experiencia sencilla y fluida una breve explicación de la propia aplicación, su funcionalidad o características más importantes.
Walkthrough
Para evitar que el usuario acabe “saltando”(Skip) el tutorial, es necesario atraer su atención. En este artículo, vamos a crear un Walkthrough o tutorial donde vamos a utilizar Lottie, animaciones de diferente tipo para conseguir atraer la atención de usuario.
Creando el Carousel
Comenzamos por la parte fundamental, el Carousel. El Carousel es un control que contiene una colección de contenido permitiendo navegar entre el mismo realizando un gesto de deslizamiento lateral.
Entre las diferentes opciones que tenemos disponibles (recuerda que existe paquete oficial para obtener un Carousel) tenemos CarouselView de Alexander Reyes. Es una opción interesante al permitir trabajar con:
Indicadores de posición.
Orientación: Vertical o Horizontal.
Animaciones
Control sobre estado, posición, si se muestran flechas para la navegación o no, etc.
CarouselView.FormsPlugin
Para trabajar con este Carousel, tras añadir el paquete NuGet correspondiente, añadimos el siguiente namespace en XAML:
Bien, en nuestro caso, cada paso del tutorial será una ContentView. Podemos gestionar la colección de diferentes formas, una sencilla:
_views = new View[]
{
new BikingHardView(),
new AcrobaticsView(),
new SoExcitedView(),
new BikingCoolView()
};
Y utilizando la propiedad ItemsSource(se puede utilizar un enlace a datos), establecemos la colección.
Carousel.ItemsSource = _views;
Tenemos lo básico. Continuamos!.
Lottie a escena!
Utilizando páginas estáticas, sin movimiento, podemos conseguir la atención del usuario con una buena combinación de uso de imágenes, fuentes y otros recursos visuales.
Con un poco de “acción”lo tenemos más sencillo. Tenemos la posibilidad de trabajar con Lottiedesde Xamarin para Android, iOS, así como en UWP y en Xamarin.Forms gracias a la gran comunidad Xamarin.
¿Qué es Lottie?
Airbnb ha desarrollado una herramienta Open Source con la que facilitar la creación de animaciones móviles. Podemos utilizar animaciones potentes creadas con After Effects y utilizarlas desde nuestras aplicaciones móviles de forma sencilla.
Para trabajar con Lottie en Xamarin.Forms, comenzamos añadiendo un paquete NuGet:
Lottie Xamarin.Forms
Recuerda añadirlo en cada proyecto de plataforma además de en la librería .NET Standard.
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 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.
Para utilizar AnimationViewdesde XAML necesitamos utilizar el siguiente espacio de nombres:
Hasta este punto, de forma sencilla, conseguimos un resultado bastante atractivo.
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.
Añadimos más animaciones
Podemos continuar mejorando todo. En cada paso del tutorial vamos a añadir información relevante en texto y otros elementos visuales. Vamos a necesitar saber cuando el usuario pasa de un paso a otro.
De forma sencilla, podemos crear una interfazcomo la siguiente:
public interface IAnimatedView
{
void StartAnimation();
}
De modo que, cada vez que el usuario cambie la ContentView seleccionada, si el paso hereda de nuestra interfaz, ejecutamos la implementación de la misma.
var currentView = _views[e.NewValue];
if (currentView is IAnimatedView animatedView)
{
animatedView.StartAnimation();
}
¿Qué conseguimos con esto?
Vamos a añadir otra dependencia vía NuGet con la librería Xamanimation. Esta pequeña librería añade una gran variedad de animaciones predefinidas además de la posibilidad de crear Storyboards, lanzar animaciones desde XAML, etc.
NOTA:Xamanimation formará parte del bloque de animaciones del Toolkitde Xamarin.Forms.
Esta animación, animará un elemento visual marcado con el nombre InfoPanel, primero la opacidad de su estado inicial, 0, es decir, no visible, a 1 además de realizar una trasladación en el eje Y.
Para lanzarla:
if (Resources["InfoPanelAnimation"] is StoryBoard animation)
{
animation.Begin();
}
Sencillo, ¿verdad?.
De igual forma, aprovechamos algunas animaciones de la librería para animar el color de fondo al pasar de un paso a otro entre otros detalles.
El resultado:
El resultado
NOTA:Las animaciones de Lottie de este ejemplo corresponden a Yue XIde LottieFiles.
Tienes el código fuente del ejemplo disponible GitHub:
Una de las grandes nuevas características que tendremos en Xamarin.Forms, ya disponible en paquetes Nightly, es FlexLayout.
En este artículo, vamos a realizar una introducción a este nuevo Layout, sus opciones y características principales.
Layouts de Xamarin.Forms
En Xamarin.Forms contamos con diferentes Layouts que nos permiten organizar y posicionar los diferentes elementos visuales que componen la interfaz de usuario.
Las clases Layout y Layout<T> en Xamarin.Forms son tipos especiales de Views que actúan como contenedores de otras Views o Layouts.
Layouts en Xamarin.Forms
¿Qué es FlexLayout?
Al trabajar con CSS en desarrollo web, para adoptar una sintaxis limpia para crear diseños adaptativos llegó Flexbox.
Flexbox proporciona una forma eficiente de distribuir, alinear y gestionar el espacio entre elementos incluso cuando el tamaño de la ventana o de cada elemento es dinámico o desconocido.
Basados en esta opción, contamos con un nuevo Layout llamado FlexLayout con gran cantidad de opciones para la gestión de la distribución y tamaño de elementos.
¿Por dónde empezamos?
Probablente sea tu primera pregunta. Comenzamos creando un nuevo proyecto Xamarin.Forms.
Tras crear el proyecto, actualizamos el paquete a la versión Nightly de Xamarin.Forms:
Xamarin.Forms Nightly
NOTA: Puedes ver como acceder a versiones Nightly de Xamarin.Forms en este enlace.
Basta con añadir en la página:
<FlexLayout>
</FlexLayout>
Para comenzar a trabajar con FlexLayout.
FlexLayout, propiedades
El comportamiento del Layout es diferente en base a sus propiedades. A continuación, vamos a revisar las propiedades fundamentales.
Direction
La propiedad Direction controla la dirección de los elementos. Los valores posible son:
Row
Column
RowReverse
ColumnReverse
Simplificando, esta propiedad permite definir como se distribuyen los elementos que contiene. Puede ser de forma horizontal, vertical o de forma invertida en ambas direcciones. La dirección predeterminada es horizontal, de izquierda a derecha.
NOTA: En el “mundo flexible” no se usa “horizontal” o “vertical” si no eje principal (main-axis) y eje transversal (cross-axis).
Aunque no se establezca de forma explícita, FlexLayout tiene como valor predeterminado Row.
Wrap
Contamos con los siguientes valores:
Wrap
NoWrap
Reverse
Pero…¿para qué lo usamos?.
Para entender correctamente esta propiedad vamos a crear un sencillo ejemplo. Dentro de un FlexLayout añadimos elementos:
Comenzando el ejemplo
Son textos de 24px de ancho. Por defecto, como hemos visto anteriormente se organizarán en formato de Row de izquierda a derecha.
Bien, vamos a duplicar los elementos. ¿Qué va a ocurrir?, ¿se salen elementos de pantalla?, ¿se ajusta el tamaño de todo?, ¿se dividen elementos a una nueva línea?.
Duplicamos elementos
Nada como probar, para tener la respuesta. El contenedor se adapta para poder contenedor todos los elementos hijos. Este es el comportamiento por defecto. Es decir, la propiedad Wrap tiene como valor predeterminado NoWrap.
Podemos modificar el comportamiento de forma sencilla:
Wrap
JustifyContent
Si hasta ahora piensas que todo tiene buena pinta, esta propiedad te va a gustar. Cuenta con las siguientes opciones:
Start
Center
End
SpaceBetween
SpaceAround
SpaceEvenly
Esta propiedad te puede recordar a la alineación de texto. Define como se organizan los elementos en el eje principal. El valor por defecto es Start. Con este valor los elementos se agrupan al inicio del eje principal.
Start
Por el contrario, la opción End agrupa los elementos al final del eje principal:
End
Centrados:
Center
La opción SpaceBetween mantiene el mismo espacio entre cada elemento:
SpaceBetween
SpaceAround, es similar a la opción anterior, los elementos se distribuyen uniformemente manteniendo además el mismo espacio alrededor (en ambos lados). Nota que el primer elemento tendrá una unidad de espacio con respecto al borde del contenedor, pero dos unidades con respecto al siguiente elemento (el siguiente elemento cuenta con su propio espacio).
SpaceAround
Por último, contamos con SpaceEvenly donde los elementos se distribuyen manteniendo el mismo espacio entre elementos y los bordes.
SpaceEvenly
AlignItems
Esta propiedad es similar a la anterior por lo que es rápida de asimilar. Los posibles valores son:
Start
Center
End
Stretch
Define el comportamiento predeterminado de cómo se colocan los elementos a lo largo del eje transversal (cross-axis).
El valor predeterminado es Stretch que se encargará de “estirar” los elementos para que rellenen toda la altura del contenedor. El resto de opciones hacen justo lo que imaginas, agrupan los elementos al inicio, centro o final del contenedor.
AlignContent
¿Recuerdas lo que pasaba al añadir más elementos al probar la propiedad relacionada con Wrap?. Utilizando Wrap tenemos un contenedor flexible multilínea.
Esta propiedad permite controlar la alineación de los elementos haciendo Wrapping. Nos permite controlar el espacio adicional en el eje transversal.
NOTA: Esta propuedad no tiene efcto cuando solo hay una línea de elementos.
Los valores posibles son:
Start
Center
End
Stretch
SpaceBetween
SpaceAround
SpaceEvenly
Como en AlignItems el valor por defecto es Stretch. Con este valor, los elementos se “estiran” para adaptarse al espacio disponible a lo largo del eje transversal.
Hemos visto anteriormente el resto de propiedades, sin embargo, hay en esta ocasión ligeras diferencias.
El valor Start alinea los elementos del contenedot al inicio del eje transversal. Recuerda que el eje transversal tiene como orden predeterminado de arriba hacia abajo. Por lo tanto, el valor End los coloca en la parte inferior (abajo) y Center en el centro.
Propiedades de cada elemento
Además de poder cambiar el comportamiento del Layout gracias a sus propiedades principales, podemos adaptar diferentes opciones utilizando propiedades de cada elemento.
FlexLayout.Grow
La gran aportación de FlexLayout es permitir que sus elementos sean “flexibles”. Esta propiedad nos permite tener aún más control en este sentido. El valor de la propiedad puede ser desde cero a cualquier valor numérico positivo. Vamos a ver en que consiste.
Por defecto, el valor de la propiedad es 0. Este valor hace que el elemento no crezca para ajustarse al espacio disponible. Podríamos decir que es como un “interruptor apagado”. Si tenemos en un contenedor un elemento, y establecemos el valor a 1, el elemento pasa a ocupar todo el espacio.
Básicamente, esta propiedad define la capacidad de un elemento para crecer si es necesario. Acepta un valor sin unidades que sirve como una proporción. Indica qué cantidad de espacio disponible dentro del contenedor flexible debe ocupar el elemento.
Si todos los elementotienen un crecimiento flexible establecido en 1, el espacio restante en el contenedor se distribuirá por igual a todos los hijos. Si uno de los hijostiene un valor de 2, el espacio restante ocuparía el doble de espacio que los demás (o lo intentará, al menos).
FlexLayout.Basis
Esta propiedad define el tamaño predeterminado de un elemento antes que se distribuya el espacio restante disponible. Puede ser una proporción, por ejemplo un porcentaje (5%, 25%, etc.). También se pueden utilizar algunas palabras reversadas como Auto.
En combinación con FlexLayout.Grow permite un control bastante completo sobre el tamaño de cada elemento hijo del contenedor.
Conclusiones
No es extraño encontrar la necesidad de gestionar Wrapping de elementos, elementos con diferentes espacios de forma dinámica, etc. La llegada de un nuevo Layout basado en algo conocido como Flexbox y que aporte la posibilidad de gestionar Layouts flexibles de forma sencilla es importante.
FlexLayout
Tienes un ejemplo de FlexLayout disponible en GitHub:
¿Qué te parece esta nueva opción?. Recuerda, cualquier duda o pregunta es bienvenida en los comentarios de la entrada.
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.
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.
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:
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:
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.
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:
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:
La herramienta ya compilada también se encuentra disponible.
¿Qué te parece la herramienta?, ¿te resulta interesante?.
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
MonoDevelopes 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.
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:
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:
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:
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:
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:
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:
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:
Recordar que podéis dejar en los comentarios cualquier tipo de sugerencia o pregunta.
Resource Dictionaries
Introducción
Introducción
Introducción
La importancia de la optimización
Introducción
Introducción
Introducción
