Primer vistazo a Xamarin Live Reload

Introducción

Xamarin.Forms es un toolkit que crea una abstracción sobre la interfaz de usuariode Android, iOS, Tize, WPF, macOS, Linux y Windows permitiendo desarrollarla una única vez con códigoC#o Extensible Application Markup Language(XAML).

A la hora de trabajar con la interfaz de usuario, tenemos grandes herramientas como IntelliSense en XAML, Previewer o Xamarin Live Player. Sin embargo, las dos últimas opciones no soportan todas las características que se pueden utilizar en una aplicación móvil lo que provoca errores al renderizar y previsualizar el contenido. Por este motivo, tenemos algunas grandes herramientas por parte de la comunidad Xamarin comoLive XAMLo Gorilla Player.

En este artículo, vamos a conocer Xamarin Live Reload, nueva herramienta oficial que nos permite ver cualquier cambio de XAML al vuelo.

Xamarin Live Reload

El objetivo principal de Xamarin Live Reload es permitir ver cualquier cambio relacionado con la interfaz de usuario de forma rápida y sencillo, soportando cambios al vuelo sin necesidad de compilar y desplegar. Cualquier cambio en XAML será reflejado de forma automática manteniendo los cambios.

La clave fundamental de esta nueva herramienta es que soporta cualquier librería, control de terceros además de Custom Renderers o efectos. A la hora de ver la previsualización, podemos utilizar emuladores o dispositivos físicos.

Instalación

Para poder instalar Live Reload necesitamos los siguientes requisitos:

Bastará con descargar e instalar la siguiente extensión:

Instalar Xamarin Live Reload

Instalamos…

Live Reload

Tras instalar la herramienta es hora de configurar nuestra App para utilizarla. Es tarea sencilla ya que solo tendremos que añadir el paquete NuGet Xamarin.LiveReloada nuestra librería .NET Standard 2.0.

Xamarin.LiveReload

NOTA:Es necesario utilizar .NET Standard para utilizar Live Reload en estos momentos.

Para completar la configuración y utilizar la herramienta en nuestra aplicación, en la clase App.xaml.csdebemos añadir:

 LiveReload.Init();

En el punto de entrada de la misma, es decir, en el constructor.

Todo preparado!

Utilizando la herramienta

Tras crear un proyecto Xamarin.Forms y lanzarlo en depuración en el emulador vemos lo siguiente:

Comenzamos a usar Live Reload

Visual Studio nos indica (parte superior) que Live Reload esta funcionando en un emulador de Android. A partir de este momento, cualquier cambio será aplicado:

Live Reload en acción!

A tener en cuenta…

  • Live Reload funciona con XAML. Cualquier cambio en C# requiere recompilación.
  • Se soportan las plataformas soportadas por Xamarin.Forms.
  • No se soportan (por ahora) estilos CSS.
  • Sólo funciona utilizando librerías .NET Standard.
  • Se puede utilizar en emuladores o dispositivos.
  • No hay límite en el número de dispositivos a utilizar.
  • Si no se cambia la configuración de Live Reload ni tampoco la máquina donde se compiló el código, no es necesario desplegar de nuevo. Basta con abror la aplicación previamente desplegada, conectar y continuar.

Más información

[Tips and Tricks] Corregir “Xcode license must be accepted in order to be connected…”

El problema

Tras actualizar XCode a una versión posterior y desde entonces al intentar conectar desde Windows utilizando Xamarin Mac Agent…

Oops!

El mensaje de error nos lo deja todo muy claro, debemos abrir XCode y aceptar la neuva licencia. Sin embargo, tras abrir XCode, nunca salta la ventana para poder aceptar la licencia.

¿Qué ocurre?, ¿qué podemos hacer?.

La solución

Encontramos una sencilla solución al poder aceptar la licencia de XCode utilizando la línea de comandos.

Abre XCode y dirígete a Preferences > Locations. Asegúrate de tener establecida a la última versión de XCode la opción Command Line Tools:

Command Line Tools

Todo preparado. Abre una línea de comandos y ejecuta:

sudo xcodebuild -license

Acepta la licencia (agree), vuelve a Visual Studio en Windows e intenta de nuevo establecer una conexión. Todo debería funcionar sin problemas.

Más información

Probando nuevo IntelliSense Xamarin.Forms XAML de Visual Studio 2017 15.7

Introducción

Con la llegada de la última Preview de Visual Studio 2017, la versión 15.7, llegan grandes mejoras en la experiencia al editar XAML de Xamarin.Forms. Ahora el engine que gestiona IntelliSense de XAML de Xamarin.Forms pasa a ser el mismo que WPF o UWP. Hablamos de mejoras en autocompletado, sugerencias, extensiones de marcado o navegación entre diferente código.

En este artículo, vamos a realizar un rápido repaso por las mejoras principales.

NOTA: Recuerda, hablamos de una versión Preview de Visual Studio. Es posible contar con la versión Preview instalada junto a la versión estable aunque estas mejoras aún no estan disponibles en la versión estable.

Un repaso a las mejoras principales

Autocompletado

Comenzamos con la funcionalidad básica, el autocompletado. Esta versión mejora la búsqueda de coincidencias con lo escrito obteniendo resultados aun con valores no correctos, incompletos, o con minúsculas o mayúsculas.

Autocompletado

Se obtiene ayuda para completar tanto elementos visuales como paneles o controles, así como sus propiedades o eventos.

Extensiones de marcado

Las extensiones de marcado son una forma de obtener un valor que no sea específico de tipo primitivo o un objeto XAML. Mediante la apertura y cierre de llaves, se define en su interior lo que se conoce como extensión de marcado.

Otra necesidad muy habitual al trabajar con XAML dada la alta probabilidad de requerir hacer un enlace a datos o acceder a un recurso:

Extensiones de marcado

Tenemos autocompletado con extensiones de marcado como Binding, StaticResource o x:Static, pero también con aquellas personalizadas.

 

Namespaces

Ahora también tenemos sugerencias al trabajar con XML namespaces:

Namespaces

Sugerencias

También tendremos sugerencias, como al editar C# aparecerá la linterna, principalmente indicando que algo no es correcto para permitir corregir el problema. Renombrar, crear espacio de nombres, etc…

Sugerencias

Resolución de recursos

Los recursos definidos en la misma página son detectados por IntelliSense facilitando sugerencias:

Resolución de recursos

NOTA: De momento, no se detectan recursos a nivel de aplicación, solo a nivel de página.

Errores

Cualquier error de marcado se indicará subrayando en azul la línea problemática.

Errores

Sin duda un paso sólido y necesario adelante de una de las opciones más reclamadas. Aun hay posibilidad de mejora (recursos a nivel de aplicación, más opciones de autocompletado como con estilos, etc.) pero tras probar desde pequeños proyectos a algunos de mayor tamaño, la mejora es notoria. Y a ti, ¿que te parece?.

Más Información

Crear Add-ins para Visual Studio para macOS utilizando Xamarin.Forms

Crear add-ins para Visual Studio macOS

Visual Studio para macOS esta basado en MonoDevelop. Antes de lanzarnos de lleno a crear un Add-in es importante conocer lo que se conoce como el modelo de extensión. La arquitectura de Visual Studio para macOS es extensible. La forma de extender se basa en rutas de extensión que permiten que terceros extiendan el comportamiento. Por ejemplo: para extender la zona de edición de código, se expone /MonoDevelop/SourceEditor2/ContextMenu/Editor permitiendo añadir nuevos comandos en el menu contextual al hacer clic derecho.

AddIn Maker

AddIn Maker es un proyecto Open Source creado por Mikayla Hutchinson que permite el desarrollo y la depuración de add-ins para Visual Studio macOS desde Visual Studio macOS.

Para añadirlo, nos dirimos al menu principal de Visual Studio y pulsamos sobre Addins…

Desde aquí podemos gestionar Addins en Visual Studio.

Crear proyecto de Add-in

Tras instalar AddIn Maker, tenemos accefso a un nuevo tipo de proyecto, Addin.

Seleccionamos la nueva plantilla, asignamos un nombre y continuamos.

Xamarin.Forms GTK

Llegamos a este punto, habitualmente, crearíamos nuestra interfaz de usuario utilizando GTK# o XWT. Cuando hablamos de XWT nos referimos a un tookit cross platform de UI para crear aplicaciones de escritorio con Mono y .NET.

Recientemente, hemos recibido los paquetes NuGet de la versión Preview de Xamarin.Forms 3.o. Entre las diferentes novedades encontramos soporte a Linux. El soporte de Linux se logra con un nuevo backend basado en GTK#.

Por lo que si usamos GTK#, ¿podríamos usar XAML y Xamarin.Forms para definir la UI de add-ins para Visual Studio?.

Es una posibilidad que personalmente he pensado en multitud de ocasiones e incluso lo he llegado a hablar con miembros de la comunidad Xamarin como con Matthew Robbins creador de MFRactor (tuvimos una genial conversación en el pasado MVP Summit).

Manos a la obra!

Comenzamos creando un proyecto de tipo IDE Extension:

IDE Extension

Este proyecto ya cuenta con la referencia a MonoDevelop.Addins, versión 0.4.4 al escribir este artículo. Continuamos añadiendo el paquete NuGet de Xamarin.Forms

Xamarin.Forms.Platform.GTK

Para trabajar con Xamarin.Forms, debemos realizar la inicialización. La mejor opción para realizar esta tarea es realizarla nada más se abra el IDE. Para ello, vamos a crear un comando:

public class InitXamarinFormsCommand : CommandHandler
{
     protected override void Run()
     {
          Forms.Init();
     }
}

Y modificaremos el archivo Manifiest.addin.xml para añadir nuestro comando como punto de extensión en el arranque del IDE.

<Extension path="/MonoDevelop/Ide/StartupHandlers">
      <Class class="LiveXAMLAddin.Commands.InitXamarinFormsCommand"/>
</Extension>

Llega la hora de extender. En nuestro caso, vamos a crear un sencillo Previewer de XAML para Xamarin.Forms.

NOTA: El objetivo de este ejemplo es demostrar como utilizar Xamarin.Forms para definir la UI de extensiones par Visual Studio. No estamos ante un nuevo Previewer de XAML. Aunque el funcionamiento es bastante rápido y correcto, no es el objetivo buscado.

Añadimos otro punto de extensión:

<Extension path = "/MonoDevelop/Ide/MainMenu/Edit">
     <CommandItem id="LiveXAMLAddin.Commands.PreviewXAMLCommand"/>
</Extension>

Fíjate que en esta ocasión, añadiremos un nuevo comando en el menu principal, opción editar.

Veamos la definición del comando:

public class PreviewXAMLCommand : CommandHandler
{
     protected override void Run()
     {
          Pad pad = null;

          var pads = IdeApp.Workbench.Pads;

          foreach (var p in IdeApp.Workbench.Pads)
          {
               if (string.Equals(p.Id, "LiveXAMLAddin.Pads.XAMLPreviewerPad", StringComparison.OrdinalIgnoreCase))
               {
                    pad = p;
               }
          }

          if (pad == null)
          {
               var content = new Pads.XAMLPreviewerPad();

               pad = IdeApp.Workbench.ShowPad(content, "LiveXAMLAddin.Pads.XAMLPreviewerPad", "XAML Previewer", "Right", null);

               if (pad == null)
                    return;
          }

          pad.Sticky = true;
          pad.AutoHide = false;
          pad.BringToFront();
     }

     protected override void Update(CommandInfo info)
     {
          info.Visible = true;

          if (IdeApp.Workbench.ActiveDocument != null && IdeApp.Workbench.ActiveDocument.FileName.ToString().Contains(".xaml"))
          {
               info.Enabled = true;
          }
          else
          {
               info.Enabled = false;
          }
     }
}

Reconoces a un Pad como un panel lateral anclable tanto a izquierda como derecha. En esta ocasión, creamos un nuevo Pad donde mostrar la previsualización de XAML, de título “XAML Previewer” y anclado a la derecha.

Para habilitar la opción de menu, vamos a determinar si el usuario esta editando un archivo XAML. Para ello, utilizamos IdeApp.Workbench.ActiveDocument. Tenemos posibilidad de acceder a toda la información del documento, como su formato o contenido.

Utilizando XAML para definir UI

¿Qué vamos a mostrar en el Pad?

Vamos a utilizar XAML!.  Creamos una nueva ContentPage:

<ContentPage 
     xmlns="http://xamarin.com/schemas/2014/forms" 
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
     x:Class="LiveXAMLAddin.Views.PreviewerView">
     <ContentPage.Content>
          <Grid>
               <ContentView
                    Content="{Binding Preview}" />
          </Grid>
     </ContentPage.Content>
</ContentPage>

Tenemos acceso a todas las opciones disponibles con XAML, entre ellas, sistema de enlace a datos, etc.  Para utilizar la página XAML como contenido del Pad vamos a embeber el contenido:

var page = new PreviewerView();
var pageContainer = page.CreateContainer();

Tenemos disponible el método de extensión CreateContainer de Xamarin.Forms en el backend GTK para obtener la ContentPage como contenido nativo.

Cafa vez que se cambie el texto de la página XAML en el editor de Visual Studio, vamos a actualizar la previsualización XAML:

IdeApp.Workbench.ActiveDocument.Editor.TextChanged += (sender , args) =>
{ 
     PreviewXaml(IdeApp.Workbench.ActiveDocument.Editor.Text);
};

Podemos utilizar MVVM (de hecho en este ejemplo se usa) en combinación con toda la potencia y las opciones de extensión que tenemos.

El resultado:

El resultado

Tienes el código fuente del ejemplo disponible GitHub:

Ver GitHub

¿Qué te parece?. Quizás en un futuro sea una opción a la hora de extender Visual Studio. Ahora que tenemos el IDE en más de un sistema operativo, es hora de pensar en contar con una opción para crear extensiones que compartan la mayor cantidad de código posible.

Más información

[Evento CartujaDotNet] Plugins, Multi-Targeting y NuGets

El evento

En un proyecto multiplataforma, una buena arquitectura y organizar de forma adecuada nuestro código nos permite compartir grandes cantidades de código entre las diferentes plataformas soportadas. Pero…¿y con otros proyectos?, ¿la comunidad?.

En este evento vamos a ver como crear libreríasmultiplataforma con funcionalidad específica por cada una de ellas utilizando múltiples proyectos así como el Multi-Targeting. Además, vamos a revisar las mejores opciones para compartir con la comunidad así como la creación de paquetes NuGet.

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, 24 de Abril de 19:00h a 20:30h(GMT+1).

¿Te apuntas?

Más información

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] Multi-Targeting

Introducción

Con la llegada de .NET Core (y el formato project.json) llegamos a tener la opción de hacer multi-targeting. El multi-targeting no es más que compilar casi el mismo código varias veces para plataformas diferentes. Por ejemplo, con ASP.NET Core era habitual utilizar net45 o netcoreapp1.0. Más habitual era crear librerías con diferente funcionalidad basada en diferentes versiones de .NET Core. Por ejemplo, una librería con netstandard1.0 y netstandard1.4 como target.

Aunque con algunas otras plataformas (como UWP) era posible hacer algo similar no ha sido hasta el cambio a MSBuild y últimas versiones de Visual Studio 2017 donde hemos llegado a poder hacer multi-targeting con UWP, PCLs, Xamarin.Android y Xamarin.iOS.

En este artículo, vamos a conocer todos los conceptos básicos de Multi-Target así como sus beneficios a la hora de trabajar con Xamarin.

Multi-Targeting con Xamarin

Si cuentas con una librería que no requiere de código específico por plataforma no es necesario hacer multi-targeting. Como desarrolladores Xamarin, si utilizas una librería portable sin requerir código específico por plataforma, te puede interesar actualizar a una libreria .NET Standard pero sin necesidad de multi-targeting. Uno de los motivos principales para necesitar multi-target es utilizar código específico desde una librería. En estos casos, podemos tener una librería con el código común junto con N proyectos por cada plataforma que deseamos soportar. Con el uso de inyección de dependencias accedemos a la implementación específica de una plataforma. Es una forma de trabajar habitual y correcta. Sin embargo, con multi-targeting podemos tener un único proyecto con el que acceder al código de plataforma directamente.

Vamos a crear el ejemplo más básico. Partimos desde una librería .NET Standard.

Librería .NET Standard

Tras crear el proyecto, hacemos clic derecho sobre el mismo y elegimos la opción Editar:

Editar proyecto

Podemos editar el proyecto sin necesidad de descargar o cerrar el mismo viendo los cambios de forma inmediata.

Cambiamos la línea:

<TargetFramework>netstandard2.0</TargetFramework>

Por:

<TargetFrameworks>netstandard1.3;netstandard2.0</TargetFrameworks>

Y tras guardar cambios…

Multi-Targeting

Acontinuación, tienes el código fuente de un ejemplo disponible GitHub haciendo uso de Multi-Targeting en Xamarin:

Ver GitHubEl ejemplo es una librería con soporte a Multi-Targeting para netstandard1.0, netstandard2.0, MonoAndroid80, XamariniOS11 y uap10.0.15063.

NOTA: Se puede añadir soporte a .NET Framework, TvOS, macOS o Tizen en la misma librería con Multi-Targeting.

En el ejemplo, tenemos una interfaz IMultiTargeting con un único método:

string Sample ();

En la implementación de cada plataforma, sencillamente se devuelve una cadena con el nombre de la plataforma. Sin embargo, en cada implementación tenemos acceso a APIs nativas de la plataforma.

Ejemplo

Plugin Visual Studio para crear plantillas Multi-Targeting

James Montemagno que ya ha actualizado sus plugins para utilizar Multi-Targeting ha agrupado su experiencia en actualizar Plugin For Xamarin Templates para Visual Studio 2017 con soporte a Multi-Targeting.

Tras instalar el plugin, encontraremos dentro del conjunto de plantillas de proyecto de C# una llamada Plugin for Xamarin:

A crear nuevo plugin!

Este tipo de proyecto se encarga de preparar todo lo necesario para crear un nuevo Plugin para Xamarin para múltiples plataformas con un único proyecto utilizando Multi-Targeting:

Estructura del proyecto

Recuerda, cualquier duda o comentario es bienvenido en los comentarios!

Más información

[Material Codemotion 2017] Taller Xamarin

El evento

El pasado 24 y 25 de Noviembre, en la universidad San Pablo CEU, tenía lugar el Codemotion 2017. Evento destinado a desarrolladores en España con más de 2000 desarrolladores, más de 30 comunidades técnicas y más de 150 sesiones técnicas.

Codemotion 2017

El material

He tenido la oportunidad de participar este año con un divertido taller de desarrollo con Xamarin.

El objetivo fue realizar una aplicación multiplataforma con Xamarin.Forms para Android, iOS, UWP, macOS y Linux utilizando una API Rest. Tras una breve introducción donde repasamos conceptos básicos, comenzamos a crear la aplicación. Vimos una introducción al concepto de enlace a datos, MVVM y su aplicación para acabar realizando a peticiones HTTP para obtener información. Completamos la aplicación conociendo el concepto de navegación y añadiendo una página de detalles.

Para acabar el taller nos relajamos con un divertido concurso de preguntas, algunos pequeños regalos, preguntas y networking.

La presentación:

En cuanto a las demos realizadas, junto a snippets y otro material lo tenéis disponible en GitHub:

Ver GitHub

Más información

[Quedada Informal] CartujaDotNet & SVQXDG

Quedada múltiple

Desde CartujaDotNet, grupo de usuarios .NET de Sevilla y SVQXDG, grupo de desarrolladores Xamarin de Sevilla, vamos a realizar una quedada informal (la última del año!) para charlar abiertamente sobre tecnologías Microsoft, Xamarin, herramientas utilizadas, intercambiar impresiones, etc. Además, se analizarán las próximas charlas ya planteadas y los eventos confirmados entre otros temas de interés. Al ser quedada de dos grupos diferentes creemos que es una gran oportunidad para conocer, intercambiar e interactuar entre ambos permitiendo a miembros de cada uno conocer a los del otro y tratar otros aspectos.

No hace falta confirmar asistencia, y por supuesto será gratuito.

¿Te apuntas?

A continuación tienes disponible la fecha, hora y lugar:

  • Día: 13 de Diciembre (Miércoles)
  • Horario:  19:00h
  • Lugar: En la Terraza del McDonald’s de Santa Justa

Más información

[Xamarin.Forms] Probando Live XAML, actualizando XAML al vuelo!

Productividad trabajando con XAML

Conseguir aplicaciones con una interfaz rica, elegante y perfectamente adaptada a cada plataforma requiere un proceso de repetición de cambio, compilación, depuración y vuelta a repetir.

Contamos con opciones interesantes para solventar este problema como Previewer, Gorilla Player o Xamarin Live Player. Ya vimos todas las herramientas anteriores, ahora, nos llega el turno de probar otra opción muy interesante, Live XAML.

Live XAML

Live XAML es una extensión disponible para Visual Studio tanto en Windows como en macOS que se encarga de inyectar el código necesario para reaccionar ante cualquier cambio de XAML. Esto significa que, con tu aplicación en modo depuración en un emulador o en un dispositivo, puedes ver al vuelo cualquier cambio en XAML.

La instalación

Desde la página oficial de la herramienta podemos descargar una extensión para Visual Studio disponible tanto para Windows como para macOS.

Tras descargar e instalar la extensión todo listo. Uno de los grandes puntos positivos de la herramienta es su facilidad de uso, tras instalar, para utilizar la herramienta en cada proyecto bastará con indicarle a la herramienta que añada paquete NuGet en la librería compartida llamado LiveXAML o bien, añadir el paquete a mano.

LiveXAML NuGet

Comenzamos con un ejemplo sencillo

Partimos de un proyecto básico, la plantilla vacía de Xamarin.Forms. Lanzamos el proyecto en depuración.

Comenzamos con las pruebas más sencillas posibles, cambiar propiedades básicas como el texto o el color del Label añadido por defecto:

Continuamos con otros requisitos básicos al desarrollar en aplicaciones, el uso de recursos y estilos.

La herramienta se comporta sin problemas al utilizar recursos tanto a nivel de elemento, como a nivel de página como a nivel de aplicación.

Probamos posibilidades más complejas

Tiene buena pinta, pero…¿y será válido con aplicaciones más complejas?. Recientemente, en el blog vimos un recopilatorio de ejemplos Xamarin.Forms con intefaz atractiva. Entre ese recopilatorio se encuentra un ejemplo que intenta reproducir la interfaz de Netflix en Xamarin.Forms. Vamos a utilizarla.

Podemos realizar pruebas con enlace a datos en sus difentes modos.

La cabecera con transparencias haciendo uso de Custom Renderer, efecto Parallax, el uso de controles personales para listados, etc. Estamos trabajando con una página relativamente compleja. Podemos realizar cambios al vuelo y realizar pruebas directamente. Por ejemplo, cambios en el tamaño de la cabecera y pruebas con el efecto Parallax:

Puedes descargar el ejemplo de Netflix desde GitHub:

Ver GitHub¿Aumentamos la complejidad?

¿Funcionaría con .NET Standard?, ¿y con librerías personalizadas?. Pasamos a continuación a ver un ejemplo haciendo uso de .NET Standard, SkiaSharp y la librería Microcharts que aporta diversas gráficas de gran belleza y posibilidades creadas con SkiaSharp.

Creamos un pequeño control que añade animaciones a la gráfica. Ajustar la velocidad de la animación, tamaño de fuentes, elementos, etc. Sería fantástico poder aplicar estos cambios al vuelo, sin necesidad de parar, recompilar, esperar el despliegue, etc., ¿verdad?.

Fíjate que en la cabecera de la gráfica hacemos también uso de efectos. Aplicamos un efecto que añade sombras al texto.

Puedes descargar el ejemplo desde GitHub:

Ver GitHub

Conclusiones

Tras todas las pruebas que has podido ver anteriormente (más muchas otras), los resultados son excelentes. No he encontrado errores de renderizado, comunicación o funcionamiento en general de la herramienta. Así que, debemos destacar su fácil instalación y su buen hacer. Tampoco es necesario aprender nada nuevo ya que todo se integra en Visual Studio y con el flujo habitual. Eso si, recuerda, estamos ante una herramienta que tiene coste.

Más información