[Preview] Primer vistazo a Xamarin.Forms CollectionView

Introducción

Como parte de las novedades que llegan con Xamarin.Forms 4.0 se encuentra el nuevo control CollectionView.

Xamarin.Forms CollectionView

CollectionView llega con el objetivo de mejorar lo ofrecido por el control ListView hasta ahora:

  • Facilitar más opciones como listados horizontales o Grids.
  • Cubrir opciones muy solicitadas (vista para cuando no hay contenido, etc.).
  • Mejorar rendimiento.
  • Etc.

Primeros pasos

Para habilitar CollectionView es necesario utilizar un flag antes de inicializar Xamarin.Forms (recuerda, estamos ante una preview).

global::Xamarin.Forms.Forms.SetFlags("CollectionView_Experimental");

Layout básico

Podemos conseguir el mismo Layout de un ListView de forma sencilla. Como ventaja, con CollectionView no es necesario utilizar celdas, es decir, no usaremos ViewCell. Esto tiene un impacto en el rendimiento, sobretodo en Android, pero manteniendo la estructura y Layout del ListView.

<CollectionView 
     ItemsSource="{Binding Monkeys}">
     <CollectionView.ItemTemplate>
          <DataTemplate>
               <Grid 
                    HeightRequest="48">
                    <Label 
                         Text="{Binding Name}"
                         FontSize="18"
                         VerticalOptions="Center"/>
               </Grid>
          </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>

El resultado:

Layout básico

Fíjate que usamos un DataTemplate sin necesidad de ViewCell!.

Listas horizontales

Por defecto, el CollectionView utilizar un layout lineal. Esto quiere decir que se pueden hacer listas verticales pero…también horizontales!.

El control CollectionView cuenta con la propiedad ItemsLayout. Podemos establecer esta propiedad a una nueva instancia de GridItemsLayout que cuenta con una propiedad Orientation para definir la orientación.

<CollectionView.ItemsLayout>
     <GridItemsLayout
          Orientation="Horizontal" />
</CollectionView.ItemsLayout>

El resultado:

Listas horizontales

Carousel

Algo similar pero más complejo, un Carousel. Contar con un elemento scrollable pero navegando de elemento en elemento. Contamos con un control llamado CarouselView, un control nuevo basado en CollectionView, que podemos utilizar para conseguir el formato clásico de “carta” y paso de elemento a elemento:

<CarouselView 
     ItemsSource="{Binding Monkeys}">
     <CarouselView.ItemsLayout>
          <GridItemsLayout
               Orientation="Horizontal" 
               SnapPointsAlignment="Center" 
               SnapPointsType="Mandatory"/>
     </CarouselView.ItemsLayout>
</CarouselView>

El resultado:

Carousel

Una de las características más interesantes que tenemos disponible es la posibilidad de controlar el comportamiento y alineación de cada elemento al hacer el desplazamiento. Lo conseguimos con las propiedades SnapPointsType y SnapPointsAlignment.

Grid

Por defecto, CollectionView utiliza un layout lineal. Es decir, por defecto podemos hacer listas verticales u horizontales. Como ya vimos previamente, con la propiedad ItemsLayout podemos modificar el comportamiento del Layout.

<CollectionView.ItemsLayout>
     <GridItemsLayout
          Orientation="Vertical"
          Span="2"/>
</CollectionView.ItemsLayout>

Utilizando GridItemsLayout podemos controlar la orientación con la propiedad Orientation y con la propiedad Span el número de elementos por fila o columna.

Grid Layout

Vista cuando no hay contenido

¿Qué ocurre cuando ItemsSource no tiene elementos?. Probablemente, hasta ahora con el ListView has jugado con paneles y visibilidad para dar feedback al usuario ante esta situación. CollectionView viene a mejorar esto. Podemos utilizar la propiedad EmptyView para mostrar cualquier contenido en caso de tener elementos.

<CollectionView 
     ItemsSource="{Binding Monkeys}">
     <CollectionView.EmptyView>
          <Grid>
          <Label 
               Text="No items"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
          </Grid>
     </CollectionView.EmptyView>
</CollectionView>

El resultado:

Sin contenido

Sencillo, ¿verdad?.

Tienes el ejemplo disponible en GitHub:

Ver GitHub¿Qué te parece?, ¿qué te resulta más interesante?. Recuerda, puedes dejar comentarios en la entrada!.

Más información

[Material] Monkey Conf 2018

El evento

En España tenemos una comunidad .NET activa y diversa. Gracias a ello tenemos eventos anuales de gran calidad relacionadas con Azure, SQL Server e incluso AI. Sin embargo, a pesar de contar con una enorme variedad de desarrolladores Xamarin realizando grandes cosas, nos faltaba un evento donde reunirnos todos. Para solventar este problema, nace Monkey Conf 2018.

Con una enorme facilidad, hablando con compañeros y amigos el evento empezó a tomar forma muy rápidamente. Muchos quisieron patrocinar el evento (gracias a ellos pudimos tener desayuno, almuerzo, camisetas o regalar licencias), otros querían participar con sesiones, e incluso algunos se ofrecieron para ayudar con la organización, etc.

Gracias a todos ellos, el pasado 01 de Diciembre, celebramos la Monkey Conf 2018. A continuación, una pequeña galería del evento:

Fue un día lleno de sesiones técnicas de calidad. Es increíble ver sesiones donde se dan consejos de distribución y venta de apps basadas en la experiencia real con consejos de arquitectura de código. Esto demuestra el nivel y madurez de la comunidad Xamarin. Desde la recepción hasta el final, donde no podía faltar “el preguntón” (gracias a MFractor, LiveXaml y Steema por facilitarnos licencias) el día fluyo de forma natural, sin ningun problema de ningún tipo. Muchas gracias a sponsors, asistentes y ponentes por ello!.

Sponsors, gracias!

Quiero destacar un momento, inesperado y emotivo. Entre los ponentes decidieron darme una sorpresa y me regalaron un teclado Corsair mecánico que ya estoy utilizando. Como se suele decir, chicos, no teníais porque, pero muy agradecido!.

Muchas gracias!

El material

Vamos al material. Participé en el evento con una sesión acerca de Xamarin.Forms Shell.

Aprendimos en que consiste, vimos como funciona Visual para conseguir la misma apariencia en Android e iOS y también conocimos CollectionView.

Por la tarde participé en un taller de desarrollo de aplicaciones Xamarin.

Realizamos una divertida aplicación con Xamarin.Forms y Custom Vision para determinar si una foto tomada desde la aplicación, es un HotDot o no (si, la idea viene de la serie Silicon Valley de HBO).

En cuanto al material (ejemplos, demos), se esta recopilando todo en un repositorio disponible en GitHub:

Ver GitHub

Más información

[Evento] Monkey Conf 2018

El evento

Llega el evento técnico Xamarin que estabas esperando, Monkey Conf!.

Monkey Conf 2018

Monkey Conf será un evento gratuito, en el que trataremos temas relacionados con desarrollo móvil, Xamarin, Xamarin.Forms, App Center, testing y más…

La fecha

Será el próximo Sábado, 01 de Diciembre de 09:30h a 18:30h (GMT+1). Tendremos dos tracks en paralelo con diferentes sesiones técnicas de 50 minutos de duración cada una. Además contaremos con regalos y sorpresas!.

¿Te apuntas?

NOTA: Las entradas del evento son gratuitas pero limitadas!

El lugar

El evento se celebrará en Liferay. Dirección detallada:

Paseo de la Castellana, 280, 28046 Madrid, Madrid

Liferay

Call 4 Papers

¿Has desarrollado una aplicación con Xamarin?, ¿quieres hablar acerca de como usas App Center?, ¿revisar las próximas novedades de Xamarin.Forms?, ¿un taller?. El C4P del evento está abierto y estoy seguro que puedes hablar sobre algun tema que interese y ayude al resto!

Más información

[Xamarin.Forms] Utilizando TitleView

Introducción

Necesitar personalizar la barra superior de la aplicación añadiendo un logo, o un texto personalizado (utilizando una fuente específica, múltiples líneas, etc.) es bastante habitual. Hasta ahora, en Xamarin.Formsera algo posible pero…utilizando un Custom Renderer. Es un punto positivo de Xamarin.Forms, poder crear un Custom Renderer para acceder a características y elementos específicos de cada plataforma. Sin embargo, añade la necesidad de añadir más código (por plataforma) para conseguir un resultado.

Sin embargo, con la llegada de Xamarin.Forms 3.2 nos llega TitleView, una nueva opción para personalizar la barra superior sin necesidad de llegar a necesitar código específico por plataforma.

TitleView

TitleViewes parte de NavigationPage, donde se muestra el contenido del título de una ContentPage.

Cabecera personalizada

Comenzamos por un ejemplo sencillo. Vamos a personalizar la cabecera con un icono y título:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit" />
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

Podemos añadir el contenido deseado tal y como haríamos en el contenido de una página.

El resultado:

Cabecera personalizada!

Comandos

Podemos utilizar los eventos, comandos e incluso GestureRecognizersen los elementos de la cabecera:

<NavigationPage.TitleView>
     <StackLayout
          Orientation="Horizontal"
          VerticalOptions="Center"
          Spacing="10">
          <Image
               Source="Icon.png"
               Aspect="AspectFit">
               <Image.GestureRecognizers>
                    <TapGestureRecognizer
                         Tapped="OnHeaderIconTapped"/>
               </Image.GestureRecognizers>
          </Image>
          <Label
               Text="TitleView"
               FontSize="18"
               TextColor="White"
               VerticalTextAlignment="Center" />
     </StackLayout>
</NavigationPage.TitleView>

En este sencillo, ejemplo, mostramos un dialogo al pulsar sobre el logo de la cabecera:

Gestos

Barra de búsqueda

Pasemos a un ejemplo más complejo y típico. Vamos a añadir una barra de búsqueda:

<NavigationPage.TitleView>
     <Frame
          CornerRadius="{OnPlatform 12, UWP=1}"
          BackgroundColor="{OnPlatform Transparent, Android={StaticResource WhiteColor}}"
          HasShadow="False"
          IsClippedToBounds="True"
          Padding="0">
          <Frame.Content>
               <SearchBar
                    x:Name="SearchBar"
                    Placeholder="Search movie..."
                    HorizontalOptions="FillAndExpand"
                    SearchCommand="{Binding SearchCommand}"
                    SearchCommandParameter="{Binding Text, Source={x:Reference SearchBar}}">
                    <SearchBar.Behaviors>
                         <behaviors:SearchTextChangedBehavior />
                    </SearchBar.Behaviors>
               </SearchBar>
          </Frame.Content>
     </Frame>
</NavigationPage.TitleView>

Mostramos un listado de peliculas de modo que, cada vez que cambia el texto de la barra de búsqueda, se actualiza el contenido de la página con el listado de películas filtrado.

El resultado:

Búsqueda

Puedes encontrar el ejemplo en GitHub:

Ver GitHub

Limitaciones o problemas conocidos actuales

Entre el listado de limitaciones actuales encontramos:

  • SearchBar debe ser contenido en un panel con HorizontalOptions=LayoutOptions.Fill y VerticalOptions=LayoutOptions.Fill, o bien, utilizar WidthRequest y HeightRequest específicos para que todo se vea correctamente en iOS.
  • TitleView no es compatible con Android FormsApplicationActivity.
  • El contenido no puede ser más grande que el tamaño predeterminado de la barra de navegación en iOS/UWP. En caso de intentarlo, habrá recorte de forma automática.
  • Ya contábamos con las propiedades BackTitle, Title, TitleIcon y ahora con TitleView ocupando el mismo espacio en la barra de navegación, puede que haya conflictos y espacio limitado para admitir todas estas propiedades al mismo tiempo. Esto variará según la plataforma y el tamaño de la pantalla.

Más información

[Xamarin] Utilizando OpenJDK

¿OpenJDK?

OpenJDK es una opción alternativa al JDK de Oracle creada y diseñada con el desarrollo Android en mente. La idea es conseguir una versión más reducida (descarga menor, menos espacio en disco), evitar problemas con instaladores y herramientas de terceros además de mejorar la experiencia de desarrollo evitando que futuras actualizaciones de JDK (9, 10) afecte al desarrollo en Android.

Actualmente ya se puede probar en las últimas versiones de Visual Studio tanto para Windows como macOS y a partir de la versión 15.9 en Windows y 7.7 en macOS, será la opción que vendrá por defecto.

Porbar Open JDK

Ventajas

Las principales ventajas son:

  • Contar siempre con una versión operativa de OpenJDK con desarrollo Android independientemente de JDKs o herramientas de terceros.
  • Descargas de menor tamaño.
  • Menor espacio en disco.
  • Evitar problemas de configuración y versionado relacionadas con JDK.

Configuración

Debemos comenzar por la descarga:

NOTA: Al momento de escribir este artículo, estamos probando con la versión 1.8.0.9 de OpenJDK . Es posible que pruebes con una versión posterior. Descarga la versión más reciente y el único cambio es la versión y nombre de la carpeta de OpenJDK .

En Windows

Tras descargar, en Windows debemos copiar la carpeta descomprimida en C:\Archivos de programa\Android\jdk\microsoft_dist_openjdk_1.8.0.9

A continuación, accedemos a la configuración de Xamarin, Android Settings:

Configuración en Windows

Y cambiamos la ruta de “Java Development Kit Location” por la de OpenJDK.

En macOS

En macOS debemos descomprimir OpenJDK en $HOME/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_1.8.0.9.

Tras crear la carpeta, desde Visual Studio macOS, accedemos a Tools > SDK Manager > Locations donde cambiaremos la ubicación del SDK de Java por la de OpenJDK.

NOTA: En cualquier momento podemos volver a usar el JDK de Oracle. Bastará con volver a cambiar las rutas y recompilar la solución.

Más información

[Material] Taller Xamarin en OpenSouthCode 2018

El evento

El pasado 01 y 02 de Juniose celebró en Málaga OpenSouthCode 2018, un evento gratuito para promocionar y dar a conocer las tecnologías abiertas: software/hardware libre y opensource.

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 conXamarin.Formspara Android, iOS, UWP, macOS y Linux utilizando una Custom Vision. 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, acceso a APIs nativas de cada plataforma y acabamos realizando peticiones HTTP para obtener información.

La aplicación realizada fue HotDotOrNot en inspiración de la serie “Silicon Valley”.

HotDotOrNot

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

Puedes encontrar la App realizada paso a paso en GitHub:

Ver GitHub

Más información

Xamarin Essentials

Introducción

Xamarin permite compartir código de lógica de negocio entre aplicaciones Android y iOS, incluso código relacionado con la interfaz de usuario utilizando Xamarin.Forms. Sin embargo, es habitual requerir acceder a APIs nativas de cada plataforma. En este caso es necesario crear código específico por plataforma. Gracias a la gran comunidad Xamarin existe una enorme variedad de Plugins.

Los Plugins nos facilitan el acceso a funcionalidad específica de cada plataforma sin necesidad de escribir grandes cantidades de código. Instalar un paquete NuGet, seguir documentación para inicialización y con pocas líneas se usa API multiplataforma para por ejemplo, verificar el estado de la red. Sin embargo, para poder hacer uso del Plugin tenemos que conocer el nombre del paquete, en ocasiones hay diferentes paquetes destinados al mismo objetivo, etc.

Xamarin.Essentials

Para hacerlo todo más sencillo, llega Xamarin.Essentials. Estamos ante un paquete oficial que podemos usar en nuestras aplicaciones Xamarin añadiendo acceso a APIs multiplataforma como uso de acelerómeto, red, batería o poder hacer llamadas.

Con soporte tanto a Xamarin tradicional como a Xamarin.Forms, actualmente cuenta con:

  • Accelerometer – Obtiene datos del acelerómetro.
  • App Information – Información de la App.
  • Battery – Detectar estado y nivel de la batería.
  • Clipboard – Copiar y pegar desde el Clipboard.
  • Compass – Monitorear cambios en la brújuja.
  • ConnectivityVerificar el estado de conectividad y detectar cambios.
  • Data Transfer – Enviar información a otras Apps.
  • Device Display InformationObtener las métricas y la orientación de la pantalla del dispositivo.
  • Device Information – Información del dispositivo.
  • Email – Enviar email.
  • File System Helpers – Forma sencilla de almacenar ficheros.
  • Flashlight – Forma sencilla de encender y apagar la linterna.
  • GeocodingGeocodificar direcciones y coordenadas.
  • Geolocation – Obtiene la localización del GPS..
  • GyroscopeRotación alrededor de los tres ejes principales del dispositivo.
  • MagnetometerDetecta la orientación del dispositivo en relación con el campo magnético de la Tierra.
  • Open Browser – Forma sencilla de abrir una web en el navegador.
  • Phone Dialer – Abre la App de teléfono.
  • Preferences – Sistema de preferencias rápido y sencillo.
  • Screen Lock – Mantiene la pantalla del dispositivo activa.
  • Secure Storage – Almacenamiento seguro.
  • SMS – Crea un SMS para enviarlo.
  • Text-to-Speech – Sintetizar texto en voz.
  • Version TrackingSeguimiento de la versión de la aplicación.
  • Vibrate – Hace que el dispositivo vibre.

NOTA: Los Plugins seguirán existiendo y aparecerán nuevos que cubran escenarios no cubiertos por Xamarin.Essentials. Contar con una vía oficial con soporte a las plataformas básicas de APIs fundamentales, es genial, pero no suprime los Plugins.

Las plataformas soportadas (en estos momentos) son:

  • Android 4.4 o superior
  • iOS 10.0 o superior
  • UWP 10.0.6299.0 o superior

Empezar a utilizar Xamarin.Essentials

Pasamos a ver como utilizarlo. Partimos de una aplicación nueva Xamarin.Forms. Vamos a añadir nuevo paquete NuGet:

Xamarin.Essentials NuGet

Buscamos por Xamarin.Essentials e instalamos el paquete en todos los proyectos, tanto librería .NET Standard como en Android, iOS y UWP.

Xamarin.Essentials requiere algo de código de inicialización por cada plataforma.

En Android, en la actividad principal vamos a incializar Xamarin.Essentials en el método OnCreate:

Xamarin.Essentials.Platform.Init(this, bundle);

Para poder gestionar en tiempo de ejecución el acceso a los permisos necesarios, debemos añadir también:

public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)
{
     Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);

     base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
}

No se requiere código especifico por plataforma en iOS o UWP.

¿Y a continuación?.

A continuación, tenemos todo preparado para tener acceso a cada una de las APIs listadas previamente.

Por ejemplo, para verificar si tenemos acceso a Internet:

using Xamarin.Essentials;

if (Connectivity.NetworkAccess != NetworkAccess.Internet) 
{
     // No internet access 
}

O para enviar un SMS:

using Xamarin.Essentials;

var message = new SmsMessage(messageText, recipient);
await Sms.ComposeAsync(message);

Al igual que Xamarin.Forms u otras grandes piezas relacionadas con Xamarin, Xamarin.Essentials es Open Source. Puedes utilizar GitHub para abrir una Issue o bien, puedes añadir acceso a una nueva API enviando una pull request.

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