Vista previa en tiempo real para Xamarin.Forms

January 1, 2017
3 min read

A partir de **Xamarin.Forms 2.2 stable channel**, Xamarin incluye el *XAML Previewer for Xamarin.Forms* que nos permite obtener una vista previa de nuestras vistas en XAML (**https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer**).

Ventajas

Incluido en Xamarin.
Compatible con iOS y Android

Desventajas

En Visual Studio, requiere de una conexión activa con una Mac.
En Android, la vista previa puede diferir considerablemente del resultado final.

##Una mejor alternativa con dispositivos reales…

Gorilla Player, incluye soporte para recursos, controles personalizados, estilos, design-time data y vistas previas automáticas en múltiples dispositivos y plataformas(http://gorillaplayer.com).

###Instalación y configuración de Gorilla player La instalación consta de dos partes, instalaremos el servidor y configuraremos los dispositivos en los que obtendremos la vista previa. ####Instalando el servidor de Gorilla Player

Descargar Gorilla Player desde http://gorillaplayer.com/download.html, actualmente existe soporte para Windows y Mac.
La instalación es bastante sencilla, el setup se encargará de configurar un servidor web en tu máquina que nos permite comunicarnos con los dispositivos en los que veremos la vista previa.
Debemos aceptar los términos y condiciones de UXDrivers, como era de esperarse.
Gorilla Player es compatible con Visual Studio y Xamarin Studio, en mi caso solo tengo Visual Studio instalado así que instalo el addin.
Para terminar la configuración en nuestro equipo procedemos a iniciar sesión con nuestra Gorilla account. Si no contamos con una cuenta, en http://gorillaplayer.com podemos registrarnos. Una vez registrados, procedemos a iniciar sesión.
Permitan la comunicación de gorilla a través del firewall cuando sea solicitada.
Una vez hecho esto, verán que nuestro gorilla player server se encuentra corriendo.

####Configurando los dispositivos

Para instalar el cliente de gorilla player en nuestros dispositivos, UXDrivers nos ofrece in Proyecto de Xamarin con los clientes para Android y iOS, a través del botón Opening Player.sln…
Después de abrir la solución, ya sea en Visual Studio o en Xamarin Studio, procedemos a conectar nuestros dispositivos de pruebas.
Tal cual nos lo indica el walkthrough, conectamos y elegimos el dispositivo en el que queremos instalar el cliente y desplegamos la aplicación.
Sugiero hacerlo sin depuración, es decir con el shortcut Ctrl + F5.
Al desplegar la aplicación, asegúrense de que tanto su máquina de desarrollo donde instalaron Gorilla Player y su dispositivo de pruebas se encuentren en la misma red local. De ser así su cliente se conectará automáticamente.
Y eso es todo!! Podemos empezar a usar gorilla player.

##Empezando a usar Gorilla Player Gorilla Player incluye algunos ejemplos, pero en esencia, cualquier aplicación de Xamarin.Forms puede usarse para probar el potencial de nuestra vista previa.

Al abrir una página en XAML, podremos ver el símbolo de gorilla en la esquina superior derecho y si revisamos nuestro dispositivo podremos ver la vista previa en todo momento actualizada. Por ejemplo, si editamos el color y cambiamos a negritas el texto, estos cambios se reflejan automáticamente en todos nuestros dispositivos sincronizados al mismo tiempo.

##ProTip: Usando datos en tiempo de diseño Muchas veces gran parte del diseño de nuestras pantallas está asociado a datos, ya sea de nuestro ViewModel o simplemente datos que la pagina carga. Así que para resolver el problema que supone tener una vista previa sin datos Gorilla Player incluye una forma sencillísima de usar datos en tiempo de diseño.

Debemos agregar in archive json llamado SampleData.json, y dentro de este documento agregaremos una clave para cada pantalla a la que queramos agregarle datos en tiempo de diseño. Por ejemplo

{
  "SampleDataFilePage.xaml": 
   [				
        { "Name": "John", "Age":29, "Photo":"friend_thumbnail_27.jpg" },		
        { "Name": "Pam", "Age":32, "Photo":"friend_thumbnail_31.jpg"}, 
        { "Name": "Cassy", "Age":58, "Photo":"friend_thumbnail_93.jpg"}, 
        { "Name": "Susan", "Age":29, "Photo":"friend_thumbnail_75.jpg" }
  ] 
}

De esta forma nuestra página SampleDataFilePage.xaml tendrá ese listado como BindingContext. ¿Simple verdad?

####Y si no estás del todo convencido con Gorilla Player Te sugiero ver este video corto y practico de todo lo que se puede hacer.