El Bruno

Hola!

Hoy toca dar un repaso a otra opción interesante para tener un preview online del diseño de nuestros XAMLs en Xamarin Forms. En este caso se trata de Gorilla Player, además de ser una buena opción para trabajar con nuestros XAMLs en tiempo real, tiene uno de llos logos más simpáticos que he visto desde el Octocat.

El producto está en fase beta. Te puedes apuntar y luego es momento de esperar un tiempo para ver si has sido aceptado. Cuando te aceptan, te envían la información para descargar la app y además un usuario y contraseña para usar la misma.

Instalación (muy rápido)

Voy a pasar de largo el proceso de instalación, ya que es bastante intuitivo. Lo unico que debería reseñar, es que la app está integrada con Visual Studio 2015 y Xamarin Studio.

Trabajando con Gorilla Player

Lo primero que tenemos que hacer es abrir con Visual Studio, la solucion “Player”. Luego tenemos que compilar y desplegar la app en el device en el que deseemos tener el preview online. En mi caso, desplegaré la app en 2 devices Android con resoluciones diferentes

• Samsung Galaxy 5S Mini, 5’’
• VS Emulador 7’’ KitKat

Una vez desplegada la app, ya podremos ver la misma como una nueva app en nuestro escritorio.

Si nuestro entorno está bien configurado, debemos ver el estado “Connected” en la misma. La siguiente imagen muestra la app conectada en el emulador de 7’’ y en el S5 Mini.

Ahora es momento de abrir esta app. Cuando lanzamos la app veremos que la misma nos muestra el estado de conectada. Esto es porque, el instalador de Gorilla Player ha instalado una pequeña app que es la que hace de bridge entre los devices y nuestro diseñador.

Importante: Si no tienes en ejecución esta app, debes abrirla. Una búsqueda por Gorilla nos lleva al shortcut a la misma.

Real Time Preview con Gorilla Player

Con el entorno funcionando, ya podemos utilizar Gorilla Player. Cada vez que modifiquemos un archivo XAML veremos como en los devices en los que tenemos la app en ejecución, veremos en tiempo real un preview de nuestro XAML. Por ejemplo:

Un detalle que intuyo después de usarlo un tiempo, es que funciona perfecto cuando todas las declaraciones de estilos, bindings y demás están en el XAML. Si realizas algún tipo de binding por código, parece que no termina de resolver correctamente algunos tipos.

Personalmente, me gusta la idea de trabajar con el emulador de Android de Visual Studio para poder tener un preview rápido de mis XAMLs. Le daré un poco de uso durante un tiempo, y además me servirá para aprender a declarar más información en XAML (yo soy muy de C# para casi todo).

Si te han quedado ganas de más, el siguiente video nos muestra una demo en vivo de algunas features de la app:

Saludos @ Madrid

-El Bruno

References

• Gorilla Player Home
• Gorilla Player Getting Started
• Wikipedia Octocat