Xamarin Forms: Pre visualizando los formularios

¡Adquiere mi Máster en Xamarin Forms!

Antes de iniciar, te invito a adquirir el Máster en Xamarin Forms, que contiene:

Más de 65 horas de contenido
10 cursos de Xamarin
1 curso tipo Máster de C#

curso de xamarin

Opción 1: Windows Phone Forms to Xamarin Forms

Una de las características más solicitadas por los desarrolladores en Xamarin Forms, es el poder ver en tiempo de diseño sus formularios. Aunque en el evento “Xamarin Evolve 2016” se ha anunciado un pre visualizador oficial, aún se encuentra en estado Alpha.

Una de las opciones para llevar a cabo una previsualización de nuestros formularios (aunque no es en tiempo real), es la utilización del proyecto Windows Phone Forms to Xamarin Forms, el cual nos permite convertir un formulario desarrollado para Windows Phone en un formulario de Xamarin. Aquí van las instrucciones:

1.- Creando el formulario en un proyecto tipo Windows Phone

Debemos crear un nuevo formulario en un proyecto tipo Windows Phone, o bien utilizar uno existente:

Screen Shot 04-28-16 at 10.25 AM
Screen Shot 04-28-16 at 10.25 AM 001
Screen Shot 04-28-16 at 10.27 AM

Una vez agregado el archivo en el proyecto, podemos comenzar a diseñarlo con ayuda del diseñador integrado para este tipo de proyectos, en mi caso, crearé un formulario que quedará de la siguiente manera:

Screen Shot 04-28-16 at 10.28 AM

con el código correspondiente:

<phone:PhoneApplicationPage
x:Class="JsonWebServices.WinPhone.WeatherPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackPanel Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="XAMARIN" FontSize="20"/>
<TextBlock Text="Weather App" Margin="9,-7,0,0" FontSize="72" />
</StackPanel>

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock>Latitud</TextBlock>
<TextBox Width="300" x:Name="txtLatitude"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock>Longitud</TextBlock>
<TextBox Width="300" x:Name="txtLongitude"></TextBox>
</StackPanel>
<Button Content="Obtener Datos" Click="ButtonBase_OnClick"></Button>
<StackPanel Orientation="Horizontal">
<TextBlock Width="130">Ubicación</TextBlock>
<TextBlock Text="{Binding StationName}"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Width="130">Elevación</TextBlock>
<TextBlock Text="{Binding Elevation}"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Width="130">Temperatura</TextBlock>
<TextBlock Text="{Binding Temperature}"></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Width="130">Humedad</TextBlock>
<TextBlock Text="{Binding Humidity}"></TextBlock>
</StackPanel>
</StackPanel>
</Grid>
</Grid>

</phone:PhoneApplicationPage>

2.- Leer la documentación y descargar la herramienta

El autor de la herramienta es Jonathan Yates, y podemos encontrar la entrada principal de la herramienta aquí. Aunque los enlaces de la página a la página de OneDrive llevan a un link desactualizado, puedes enviarle un mail a pete@petevickers.co.uk para solicitarle una copia de la herramienta, quien, en mi caso particular me respondió mi correo de forma rápida.

3.- Utilizando la herramienta

Una vez que hemos instalado la herramienta, nos aparecerá algo parecido a esto:

Screen Shot 04-28-16 at 10.37 AM

Lo que haremos en este caso en particular, será colocarle un espacio de nombres dentro del proyecto donde se alojará el formulario, seleccionaremos la ruta al archivo, y automáticamente nos generará una ruta para un archivo destino:

Screen Shot 04-28-16 at 10.40 AM

Posteriormente, debemos dar click en el botón “Generate”, lo cual nos mostrará un mensaje si la conversión es correcta:

Screen Shot 04-28-16 at 10.40 AM 001

El resultado será el siguiente código, que podremos reutilizar para no iniciar nuestros desarrollos desde cero:

<?xml version="1.0" encoding="utf-8" ?>
<!–Code generated by 'WP to XF' created by GUI Innovations Limited–>
<!–For more details, enhancement requests, bugs etc. please email–>
<!– pete@gui-innovations.com – Thanks –>
<formtype xmlns=|http://xamarin.com/schemas/2014/forms|
xmlns:x=|http://schemas.microsoft.com/winfx/2009/xaml|
x:Class=|PageName|>

<StackLayout Orientation="Vertical"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Padding="10,40,10,30"
Spacing="10">

<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!–TitlePanel contains the name of the application and page title–>
<StackLayout Grid.Row="0" Padding="12,17,0,28">
<Label Text="XAMARIN" FontSize="20"/>
<Label Text="Weather App" FontSize="72" />
</StackLayout>

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Padding="12,0,12,0">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal">
<Label>Latitud</Label>
<Entry WidthRequest="300" x:Name="txtLatitude"></Entry>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label>Longitud</Label>
<Entry WidthRequest="300" x:Name="txtLongitude"></Entry>
</StackLayout>
<Button Text="Obtener Datos"></Button>
<StackLayout Orientation="Horizontal">
<Label WidthRequest="130">Ubicación</Label>
<Label Text="{Binding StationName}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label WidthRequest="130">Elevación</Label>
<Label Text="{Binding Elevation}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label WidthRequest="130">Temperatura</Label>
<Label Text="{Binding Temperature}"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label WidthRequest="130">Humedad</Label>
<Label Text="{Binding Humidity}"></Label>
</StackLayout>
</StackLayout>
</Grid>
</Grid>
</StackLayout>
</ContentPage>

Opción 2: Gorilla Player

La segunda opción para llevar a cabo la pre visualización de los formularios, es a través de Gorilla Player. Aún se encuentra en estado beta, y para utilizarlo se requiere de una invitación, ya que es una beta privada, a mí me tardó alrededor de una semana en llegar el código desde que la solicité. Una vez que nos ha llegado el código, podemos realizar la descarga desde aquí. Procederemos a instalarlo, e inmediatamente nos aparecerá una ventana para loguearnos al servicio:

Screen Shot 05-03-16 at 11.25 AM

Posterior a este paso, nos aparecerá una venta con los 3 pasos que debemos llevar a cabo para utilizar el servicio:

1.- Verificar que Gorilla Player se encuentre corriendo desde la barra de tareas:

Screen Shot 05-04-16 at 08.40 AM

2.- Se requiere desplegar la aplicación derivada de la solución Player.sln, a cada uno de los emuladores y dispositivos donde vayamos a llevar a cabo pruebas:

2a) Abrir la solución desde el Wizard de Gorilla Player:

Screen Shot 05-04-16 at 08.43 AM
Screen Shot 05-04-16 at 08.44 AM

2b) Desplegar el dispositivo en el emulador o dispositivo físico correspondiente(Debemos asegurarnos de descargar los paquetes de nuget faltantes:

Screen Shot 05-04-16 at 09.15 AM

3c) La aplicación tratará de encontrar el servidor de Gorilla Player en el equipo que tengamos conectado. Una vez realizado este paso, nos indicará que se encuentra listo para realizar las pre visualizaciones necesarias:

Screenshot_2016-05-04-09-22-11

3.- Probar los ejemplos que vienen en la solución:

3a) Abrir la solución de ejemplo:

Screen Shot 05-04-16 at 09.30 AM

3b) De nueva cuenta, restaurar los paquetes de nuget:

Screen Shot 05-04-16 at 09.30 AM 001

3c) Un ícono de un gorila nos mostrará que estamos conectados y listos para probar el código XAML de nuestro proyecto:

Screen Shot 05-04-16 at 09.34 AM

3d) Ahora, basta con que abramos la aplicación recién instalada llamada Gorilla Player desde nuestro emulador o dispositivo, y ejecutar el comando Guardar desde el formulario que queremos probar desde Visual Studio (Ctrl + S) para que nos despliegue el resultado en el dispositivo o emulador deseado:

Screenshot_2016-05-04-09-35-43

Al llevar a cabo algún cambio, bastará con volver a presionar Ctrl + S para verificar el cambio en tiempo real:

Screenshot_2016-05-04-09-37-49

Podemos ahora abrir algún proyecto desarrollado previamente, y ver en tiempo real si existe algún problema de diseño como en el siguiente caso:

Screenshot_2016-05-04-10-12-00

Este formulario, lo podemos corregir de una manera muy sencilla y rápida con ayuda de Gorilla Player:

Screenshot_2016-05-04-10-15-46

Como podemos ver, llevar a cabo la realización de formularios a través de Gorilla Player es una excelente alternativa para ahorrarnos muchísimo tiempo. La única advertencia que hay que tener en cuenta, es que el servicio, seguramente tendrá un costo extra en la versión final.

Por último, como advertencia, Visual Studio en conjunto con Gorilla Player se me congela si el proyecto se encuentra alojado en un repositorio GitHub.

Saludos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *