Xamarin Forms: Pre visualizando los formularios (Opción 1)

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:

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:

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:

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:

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

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>

Cabe destacar que la herramienta es una muy buena ayuda para no iniciar desde cero nuestros formularios, o bien, si queremos reutilizar formularios existentes.

Saludos.

Xamarin Forms: Consumiendo un servicio web basado en JSON Parte 2: Creando el ViewModel

En este post nos enfocaremos a crear el ViewModel del proyecto. En primer lugar, crearemos una carpeta llamada ViewModel, donde alojaremos nuestro código correspondiente al ViewModel.

Crearemos una clase llamda MainPageViewModel, a la cual implementaremos la interfaz: INotifyPropertyChanged, de la siguiente manera:

using System.ComponentModel;
using System.Runtime.CompilerServices;
using JsonWebServices.Annotations;

namespace JsonWebServices.ViewModel
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        #region InotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

Para poder llevar a cabo la notificación de un cambio en una de las propiedades para poder comunicársela a la interfaz gráfica a través de un binding, debemos crear una propiedad  por cada valor que queramos notificar a la interfaz gráfica, seguido de la llamada al método OnPropertyChanged(), como en el siguiente ejemplo:

        private string _stationName;
        public string StationName
        {
            get
            {
                return _stationName;
            }

            set
            {
                _stationName = value;
                OnPropertyChanged();
            }
        }

Para ejemplos demostrativos, implementaremos las propiedades de StationName, Elevation, Temperature y Humidity, de la siguiente forma

        #region Properties
        private string _stationName;
        private int _elevation;
        private string _temperature;
        private int _humidity;
        public string StationName
        {
            get
            {
                return _stationName;
            }

            set
            {
                _stationName = value;
                OnPropertyChanged();
            }
        }
        public int Elevation
        {
            get
            {
                return _elevation;
            }

            set
            {
                _elevation = value;
                OnPropertyChanged();
            }
        }

        public string Temperature
        {
            get
            {
                return _temperature;
            }

            set
            {
                _temperature = value;
                OnPropertyChanged();
            }
        }

        public int Humidity
        {
            get
            {
                return _humidity;
            }

            set
            {
                _humidity = value;
                OnPropertyChanged();
            }
        }
        #endregion

Para la siguiente parte, debemos instalar un par de paquetes de nuget, los cuales puedes instalar a través de la Consola de paquetes de nuget, apuntando al proyecto Portable:

los cuales son:

Install-Package Microsoft.Net.Http

Install-Package Newtonsoft.Json

 

Posteriormente, debemos crear un método llamado GetWeatherAsync que se encargue de llevar a cabo la solicitud al sitio web, a través de una instancia de HttpClient. y su posterior deserialización de la siguiente forma:

        public async Task GetWeatherAsync(string url)
        {
            //Creamos una instancia de HttpClient
            var client = new HttpClient();
            //Asignamos la URL
            client.BaseAddress = new Uri(url);
            //Llamada asíncrona al sitio
            var response = await client.GetAsync(client.BaseAddress);
            //Nos aseguramos de recibir una respuesta satisfactoria
            response.EnsureSuccessStatusCode();
            //Convertimos la respuesta a una variable string
            var jsonResult = response.Content.ReadAsStringAsync().Result;
            //Se deserializa la cadena y se convierte en una instancia de WeatherResult
            var weather = JsonConvert.DeserializeObject<WeatherResult>(jsonResult);
            //Asignamos el nuevo valor de las propiedades
            SetValue(weather);
        }

Por último, agregaremos un método llamado SetValue, que nos servirá para actualizar las propiedades de la clase contenida en el ViewModel, de la siguiente forma:

        private void SetValue(WeatherResult weather)
        {
            var stationName = weather.WeatherObservation.StationName;
            var elevation = weather.WeatherObservation.Elevation;
            var temperature = weather.WeatherObservation.Temperature;
            var humidity = weather.WeatherObservation.Humidity;

            StationName = stationName;
            Elevation = elevation;
            Temperature = temperature;
            Humidity = humidity;
        }

El resultado final de la clase, deberá verse de la siguiente forma:

using System;
using System.ComponentModel;
using System.Net.Http;
using System.Runtime.CompilerServices;
using System.Threading.Tasks;
using JsonWebServices.Annotations;
using JsonWebServices.Model;
using Newtonsoft.Json;

namespace JsonWebServices.ViewModel
{
    public class MainPageViewModel : INotifyPropertyChanged
    {
        #region Properties
        private string _stationName;
        private int _elevation;
        private string _temperature;
        private int _humidity;
        public string StationName
        {
            get
            {
                return _stationName;
            }

            set
            {
                _stationName = value;
                OnPropertyChanged();
            }
        }
        public int Elevation
        {
            get
            {
                return _elevation;
            }

            set
            {
                _elevation = value;
                OnPropertyChanged();
            }
        }

        public string Temperature
        {
            get
            {
                return _temperature;
            }

            set
            {
                _temperature = value;
                OnPropertyChanged();
            }
        }

        public int Humidity
        {
            get
            {
                return _humidity;
            }

            set
            {
                _humidity = value;
                OnPropertyChanged();
            }
        }
        #endregion

        #region Methods
        public async Task GetWeatherAsync(string url)
        {
            //Creamos una instancia de HttpClient
            var client = new HttpClient();
            //Asignamos la URL
            client.BaseAddress = new Uri(url);
            //Llamada asíncrona al sitio
            var response = await client.GetAsync(client.BaseAddress);
            //Nos aseguramos de recibir una respuesta satisfactoria
            response.EnsureSuccessStatusCode();
            //Convertimos la respuesta a una variable string
            var jsonResult = response.Content.ReadAsStringAsync().Result;
            //Se deserializa la cadena y se convierte en una instancia de WeatherResult
            var weather = JsonConvert.DeserializeObject<WeatherResult>(jsonResult);
            //Asignamos el nuevo valor de las propiedades
            SetValue(weather);
        }

        private void SetValue(WeatherResult weather)
        {
            var stationName = weather.WeatherObservation.StationName;
            var elevation = weather.WeatherObservation.Elevation;
            var temperature = weather.WeatherObservation.Temperature;
            var humidity = weather.WeatherObservation.Humidity;

            StationName = stationName;
            Elevation = elevation;
            Temperature = temperature;
            Humidity = humidity;
        }
        #endregion

        #region InotifyPropertyChanged
        public event PropertyChangedEventHandler PropertyChanged;

        [NotifyPropertyChangedInvocator]
        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion
    }
}

En la siguiente entrada, nos encargaremos de la parte de la vista. Cualquier duda o comentario, no dudes en escribirlo, y recuerda que el código fuente del ejemplo lo puedes encontrar aquí.

Saludos.

Xamarin Forms: Consumiendo un servicio web basado en JSON Parte 1: Creando el Modelo

Para llevar a cabo el consumo de un servicio web basado en Json, en primer lugar, debemos tener disponible el servicio mismo. Para llevar a cabo esta demostración, utilizaré los servicios alojados en este enlace.

Esta página nos permite utilizar más de 30 servicios web diferentes, cuya respuesta puede ser XML, JSON, RDF, CSV, TXT, RSS ó KML, basta con dar click sobre el enlace requerido para que se nos muestre un ejemplo de la respuesta del servicio. Yo utilizaré el servicio findNearByWeather.

Para iniciar el desarrollo de la aplicación, debemos crear un proyecto de tipo Xamarin.Forms, de tipo Portable:

Una vez creado el proyecto, crearemos 1 carpeta llamada Model, y dentro de esta, crearemos una clase que aloje las propiedades que correspondan al modelo del archivo Json, a la cual llamaremos WeatherObservation.

Ahora bien, para llevar a cabo la creación de las propiedades dentro de la clase, podríamos pensar que debemos de escribirlas a mano una por una, sin embargo, Visual Studio nos ofrece la posibilidad de generar el modelo a partir del archivo json. Una vez copiado el archivo json, debemos pegarlo a través del menú Edit –> Paste Special –> Paste JSON As Classes, lo cual nos generará el siguiente código:

namespace JsonWebServices.Model
{

    public class Rootobject
    {
        public Weatherobservation weatherObservation { get; set; }
    }

    public class Weatherobservation
    {
        public int elevation { get; set; }
        public float lng { get; set; }
        public string observation { get; set; }
        public string ICAO { get; set; }
        public string clouds { get; set; }
        public string dewPoint { get; set; }
        public string cloudsCode { get; set; }
        public string datetime { get; set; }
        public string countryCode { get; set; }
        public string temperature { get; set; }
        public int humidity { get; set; }
        public string stationName { get; set; }
        public string weatherCondition { get; set; }
        public int windDirection { get; set; }
        public int hectoPascAltimeter { get; set; }
        public string windSpeed { get; set; }
        public float lat { get; set; }
    }

}

A continuación, renombraremos la clase Rootobject por WeatherResult. y modificaremos las propiedades para que inicien con mayúsculas, quedando nuestro modelo de la siguiente forma:

namespace JsonWebServices.Model
{

    public class WeatherResult
    {
        public Weatherobservation WeatherObservation { get; set; }
    }

    public class Weatherobservation
    {
        public int Elevation { get; set; }
        public float Lng { get; set; }
        public string Observation { get; set; }
        public string Icao { get; set; }
        public string Clouds { get; set; }
        public string DewPoint { get; set; }
        public string CloudsCode { get; set; }
        public string Datetime { get; set; }
        public string CountryCode { get; set; }
        public string Temperature { get; set; }
        public int Humidity { get; set; }
        public string StationName { get; set; }
        public string WeatherCondition { get; set; }
        public int WindDirection { get; set; }
        public int HectoPascAltimeter { get; set; }
        public string WindSpeed { get; set; }
        public float Lat { get; set; }
    }

}

En el siguiente post, nos enfocaremos a crear e ViewModel correspondiente a la aplicación.

El proyecto con los cambios que vayamos haciendo lo pueden encontrar aquí.

Saludos.

Xamarin Forms: El método Device.OnPlatform

Cuando trabajamos en un desarrollo multiplataforma, a veces es necesario que ciertas propiedades se comporten de forma diferente de acuerdo a la plataforma en la que se encuentre ejecutándose.

Una clase que nos puede ayudar a alcanzar dicho objetivo, es la clase estática Device, la cual dentro de sus métodos incluye un método llamado OnPlatform, cuya definición indica que “Ejecuta diferentes acciones dependiendo en el Xamarin.QcuikUI.TargetOS Form que se encuentre ejecutando.

Es decir, que con dicho método, podremos asignar que una propiedad Text aparezca con un texto diferente en cada plataforma, que un tamaño de letra sea diferente en cada plataforma, etc.

La documentación indica que los parámetros de dicho méotod, son opcionales y van ordenados de la siguiente forma:

iOS

(optional) The Action to execute on iOS.

Android

(optional) The Action to execute on Android.

WinPhone

(optional) The Action to execute on WinPhone.

Default

(optional) The Action to execute if no Action was provided for the current OS.

Veamos un ejemplo práctico con un proyecto recién creado en Xamarin Forms:

            MainPage = new ContentPage
            {
                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!"
                        }
                    }
                }
            };

El código anterior, muestra el código que es creado en un nuevo proyecto tipo Xamarin Forms, lo modificaremos para que muestre un texto de acuerdo a la plataforma en específico:

                Content = new StackLayout
                {
                    VerticalOptions = LayoutOptions.Center,
                    Children = {
                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = Device.OnPlatform("IOS", "ANDROID", "WINPHONE")
                        }
                    }
                }

O podemos hacer que un control sea o no visible de acuerdo a la plataforma:

                        new Label {
                            XAlign = TextAlignment.Center,
                            Text = "Welcome to Xamarin Forms!",                            
                            IsVisible = Device.OnPlatform(true,false,true)
                        }

Incluso, podemos implementar un manejador de eventos distinto para un botón en cada plataforma:

            var button1 = new Button
            {
                Text = "Click Me!"
            };
            Device.OnPlatform(
                iOS: () => button1.Clicked += (sender, e) =>
                {
                    DisplayAlert("IOS", "Estoy en un Iphone!", "Ok");
                },
                Android: () => button1.Clicked += (sender, e) =>
                {
                    DisplayAlert("Android", "Estoy en un Androide!", "Ok");
                },
                WinPhone: () => button1.Clicked += (sender, e) =>
                {
                    DisplayAlert("WinPhone", "Estoy en un Lumia!", "Ok");
                }
            );

 

Espero que les sea de utilidad

 

¡Saludos!

Utilizando la Biblioteca SqlHelper (3/3)

Ejecutar una consulta y devolver un sólo valor:

Como bien es sabido, para ejecutar una consulta y devolver un sólo valor a través de un SqlCommand, debemos ejecutar un el método ExecuteNonQuery().

Es fácil realizar una ejecución de este método de forma controlada a través de la biblioteca SqlHelper, ya que contiene métodos que nos facilitarán dicha tarea. Esto nos permitirá devolver un valor con tan sólo 2 líneas de código:

        private void StartScalarDemo()
        {
            var query = "SELECT CompanyName FROM Customers WHERE CustomerID = 'BLAUS'";
            var result = SqlHelper.ExecuteScalar(GlobalData.ConnectionString, CommandType.Text, query);
            Debug.WriteLine(result);                               
        }

En primer lugar, hemos de definir la sentencia a ejecutar, mientras que en la siguiente ejecutaremos el método denominado ExecuteNonQuery que se encargará de llevar a cabo todo el proceso correspondiente al manejo de apertura y cierre de la base de datos, así como la gestión de errores.

Ejecutar una consulta del tipo NonQuery:

Si lo que deseamos es llevar a cabo la ejecución de una consulta que no devuelva información de la base de datos (tal como un insert o un delete), la lógica será similar al ejemplo anterior, con la diferencia de que el método que hemos de ejecutar es ExecuteNonQuery, que nos devolverá el número de filas afectadas, y el cual ejecutaremos de la siguiente forma en el caso de querer insertar información:

        private void StartNonQueryDemo1()
        {
            String query = "";
            query = query + "INSERT INTO [dbo].[Customers] " + "\n";
            query = query + "           ([CustomerID] " + "\n";
            query = query + "           ,[CompanyName] " + "\n";
            query = query + "           ,[ContactName] " + "\n";
            query = query + "           ,[ContactTitle] " + "\n";
            query = query + "           ,[Address] " + "\n";
            query = query + "           ,[City] " + "\n";
            query = query + "           ,[Region] " + "\n";
            query = query + "           ,[PostalCode] " + "\n";
            query = query + "           ,[Country] " + "\n";
            query = query + "           ,[Phone] " + "\n";
            query = query + "           ,[Fax]) " + "\n";
            query = query + "     VALUES " + "\n";
            query = query + "           ('XYZ' " + "\n";
            query = query + "           ,'HECTORS COMPANY' " + "\n";
            query = query + "           ,'HÉCTOR PÉREZ' " + "\n";
            query = query + "           ,'M.C.C' " + "\n";
            query = query + "           ,'AV. HOGWARTS' " + "\n";
            query = query + "           ,'MAGICLAND' " + "\n";
            query = query + "           ,'REGIONLAND' " + "\n";
            query = query + "           ,'99999' " + "\n";
            query = query + "           ,'UK' " + "\n";
            query = query + "           ,'2222' " + "\n";
            query = query + "           ,'2222')";

            var result = SqlHelper.ExecuteNonQuery(GlobalData.ConnectionString, CommandType.Text, query);
            Debug.WriteLine("Registros agregados: {0}", result);
        }

En caso de desear eliminar el registro insertado en el ejemplo anterior, o bien, algún otro, debemos hacer una ejecución como en el siguiente ejemplo:

        private void StartNonQueryDemo2()
        {
            String query = "DELETE FROM [Customers] WHERE [CustomerID] = 'XYZ'";            

            var result = SqlHelper.ExecuteNonQuery(GlobalData.ConnectionString, CommandType.Text, query);
            Debug.WriteLine("Filas eliminadas: {0}", result);
        }

Hemos visto que la utilización de la biblioteca SqlHelper es de mucha ayuda a la hora de programar, lo único que falta es que la integres a tus proyectos si te ha gustado. De nuevo, dejo el link de github si deseas integrar una biblioteca de clases de utilidades que se irán agregando poco a poco.

Saludos.