SetValue.NET

Open XML SDK 2.5

Sat, 04 May 2013 00:00:00 GMT

Cuando se elabora una aplicación, uno de las situaciones que nos encontramos, es la definición de los requisitos de instalación que vamos a tener, y una vez los tenemos claros, debemos decidir, cuáles podemos proveer nosotros en la instalación por ejemplo un Microsoft SQL Compact, y cuáles debe tener pre-instalado el usuario para que la aplicación funcione correctamente.

Y es en este segundo apartado, en el que la obligación reside en la máquina del usuario, es dónde solemos tener un requisito habitual y es que deba tener instalado Microsoft Office, para que desde la aplicación podamos generar documentos de Excel o de Word.

Pero, para salvar este escenario, suele haber soluciones prácticas, bastante simples, que la verdad es que si bien solucionan la papeleta, no son las formas más adecuadas. Y es por ello que elaboro este post, para hablar de Microsoft Open XML SDK.

Este SDK, que se puede descargar desde aquí, provee unas librerías que nos van a permitir hacer documentos de Word, Excel o PowerPoint, desde cero y con todo lujo de detalles. Para crear los documentos únicamente se requiere el segundo enlace, que además es el que debemos introducir entre los requisitos del paquete de instalación de nuestros desarrollos, para que los usuarios puedan generar documentos sin necesidad de tener instalado Office. No obstante para el desarrollador, el primer enlace es muy interesante, porque permite decompilar un documento de Office y convertirlo a código fuente, así si no somos muy buenos con el diseño, y sobre todo generando documentos muy estéticos podremos decompilar uno, coger el código fuente, y adaptarlo para nuestro objetivo.

Una vez instalado el SDK, creamos un proyecto de Consola de Windows, y agregamos la referencia al proyecto y al código.

Después hacemos un sencillo documento de Word, en el que agregamos una línea de texto con un saludo y la hora y fecha en la que estamos elaborando el documento. Para ello, lo primero es crear un nuevo Documento, una vez creado, debemos agregar un nuevo MainDocumentPart y un nuevo Body (esto es porque el documento es nuevo, si abriéramos uno existente iríamos directamente a por el cuerpo del Word). Seguido, creamos un nuevo Text, en un objeto Run, al que le establecemos distintas propiedades de formato, y este objeto lo anidamos dentro de un párrafo, que será el objeto final, que introducimos en el cuerpo del documento.

using System;
using System.IO;
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Wordprocessing;

namespace OpenXML
{
    class Program
    {
        static void Main(string[] args)
        {
            var file = Path.Combine(Environment.CurrentDirectory, "MiDocumento.docx");
            try
            {
                var doc = WordprocessingDocument.Create(file, WordprocessingDocumentType.Document, true);
                Console.Write("Introduce tu nombre: ");
                var texto = Console.ReadLine();
                var dt = DateTime.Now;

                doc.AddMainDocumentPart();
                doc.MainDocumentPart.Document = new Document
                                                    {
                                                        Body = new Body()
                                                    };

                var text = new Text(String.Format("Hola {0} son las {1} del {2}",
                                           texto, dt.ToShortTimeString(),
                                           dt.ToShortDateString()));
                var run = new Run
                              {
                                  RunProperties = new RunProperties
                                                      {
                                                          FontSize = new FontSize { Val = "30" },
                                                          Color = new Color { Val = "FF0000" }
                                                      }
                              };
                run.AppendChild(text);
                var parg = new Paragraph();
                parg.AppendChild(run);

                doc.MainDocumentPart.Document.Body.AppendChild(parg);
                doc.Close();
                System.Diagnostics.Process.Start(file);
                Console.WriteLine("Abriendo el documento");
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
            Console.WriteLine("Pulse una tecla para continuar...");
            Console.ReadKey();
        }
    }
}

La estructura interna del documento, es un paquete con distintos ficheros en formato XML, es por ello que todos los objetos se van anidando unos dentro de otros, y por eso que parezca tan enrevesado el agregar un texto.

Finalmente esto nos deja un documento como este.

Nota: Si bien generamos los documentos sin necesidad de tener instalada una versión de Office, sí es necesario tener un programa que sea capaz de abrir los documentos generados.

Tutorial MVVM IX (Resumen)

Tue, 09 Apr 2013 00:00:00 GMT

En este tutorial hemos visto elementos esenciales en el uso del Patrón MVVM, pero faltan otros, algunos más importantes y otros menos, el objetivo era tener una de toma de contacto con el patrón.

Cabe destacar, el uso de diccionarios de recursos, que son un elemento fundamental a la hora de establecer diseños de componentes. Generalizando, es algo similar a los estilos css en una aplicación web, aunque más potente y con mayor nivel de personalización.

Otra cosa interesante y fundamental, y que por el tipo de ejemplo utilizado en el tutorial, es el acceso a datos mediante Entity Framework y una capa de servicios WCF.

A continuación un enlace a los distintos artículos, y el fichero de ejemplo de la aplicación.

Post 1: Breve definición del patrón

Post 2: Creación del modelo

Post 3: Lógica de negocio del modelo

Post 4: Ejemplo de test unitarios

Post 5: Creación de la vista

Post 6: Definición ampliada del ViewModel

Post 7: Creación de la vista-modelo

Post 8: Uso de convertidores

Post 9: Resumen y aplicación

Tutorial MVVM VIII

Mon, 08 Apr 2013 00:00:00 GMT

Los Converters son una propiedad de los Binding que permite realizar una llamada a un método, el cuál realiza una conversión a través del paso de un parámetro desde el marcado XAML. En este tutorial vamos a implementar el uso del convertidor para realizar transformaciones entre grados Farenheit y Celsius.

Los convertidores son clases que implementan la interfaz IValueConverter o IMultiValueConverter, la primera permiten el paso de un valor, y la segunda el paso de múltiples valores.

Creamos una clase llamada Degrees a la que le implementamos la interfaz IMultiValueConverter, esta interfaz tiene dos métodos, uno de conversión que va del origen del dato al destino y otro de regreso que va del destino al origen.

Degrees.cs

using System;
using System.Globalization;
using System.Windows.Data;

namespace WeatherApp.Converters
{
    public class Degrees : IMultiValueConverter
    {
        public object Convert(object[] value, Type targetType, object parameter, CultureInfo culture)
        {
            try
            {
                if (value.Length == 2)
                {
                    var farenheit = value[0] is double ? (double)value[0] : 0;
                    var isFarenheit = value[1] is bool && (bool)value[1];
                    var celsius = (farenheit - 32)/1.8;
                    return isFarenheit ? farenheit.ToString("N2") : celsius.ToString("N2");
                }
                
                return null;
            }
            catch (Exception)
            {
                return null;
            }
        }

        public object[] ConvertBack(object value, Type[] targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

E implementamos el convertidor dentro de la página Weather. Para ello, lo primero que hay que hacer es agregar el namespace a las referencias del marcado, luego crear un recurso para que pueda ser llamado desde la propiedad, y por último emplearlo en la propiedad, que vamos a dejarlo así.

Weather.xaml

Y finalmente obtenemos algo como esto.

Tutorial MVVM VII

Sun, 07 Apr 2013 00:00:00 GMT

Continuamos con el ViewModel, después de generar la clase abstracta para la notificación de cambios, y la clase que implementa ICommand, empezamos a crear propiedades en la vista-modelo del componente Search.

Creamos cinco propiedades públicas y un método privado. Las propiedades son, un String que se enlazará con el TextBox de la vista, un ICommand que se enlazará con el botón de búsqueda, una propiedad List, que es la fuente de datos de la que se va a alimentar el ListBox, otra que será la localización que se seleccione en el ListBox. Y una propiedad tipo ViewModel.MainWindow que será el contexto de datos del MainWindow, de esta forma podremos llamar a un método en esa vista-modelo. El método hará una llamada a la clase Client dónde habíamos definido una petición al WebService de Bing Maps.

ViewModel.Search.cs

using System;
using System.Collections.Generic;
using System.Windows.Input;
using WeatherApp.Common;
using WeatherApp.Model;

namespace WeatherApp.ViewModel
{
    public class Search : ObservableObject
    {
        private const int MinLength = 3;

        public MainWindow Mw { get; set; }

        private String _textSearch;
        public String TextSearch
        {
            get { return _textSearch; }
            set
            {
                _textSearch = value;
                OnPropertyChanged("TextSearch");
            }
        }

        private List _locations;
        public List Locations
        {
            get { return _locations; }
            set
            {
                _locations = value;
                OnPropertyChanged("Locations");
            }
        }

        private Location _location;
        public Location Location
        {
            get { return _location; }
            set
            {
                _location = value;
                OnPropertyChanged("Location");
                Mw.GetWeather(value);
            }
        }

        private ICommand _searchIt;
        public ICommand SearchIt
        {
            get { return _searchIt ?? (_searchIt = new RelayCommand(param => GetSearch())); }
        }

        private void GetSearch()
        {
            if (String.IsNullOrEmpty(TextSearch)) return;

            if (TextSearch.Length >= MinLength)
            {
                Locations = Client.GetLocations(TextSearch);
            }
        }
    }
}

A continuación enlazamos las propiedades que hemos definido a la vista, es decir al componente Search, para enlazar estas propiedades, hay que ir a cada elemento del XAML y establecer un Binding.

Search.xaml

Seguimos con la página Weather que en su ViewModel tiene cuatro propiedades y un método, una propiedad que define la ruta de la imagen que se va a cargar con todos los datos del clima de la ciudad seleccionada, una de tipo Weather, otra tipo DataPoint con el clima actual, y una última que indica si es Farenheit o Celsius. El método transforma el clima en una imagen que he cargado en la carpeta Resources, y a las que le he cambiado la forma en que se incluyen en la compilación a Contenido y que se copie siempre.

ViewModel.Weather.cs

using System;
using System.IO;
using WeatherApp.Common;
using WeatherApp.Model;

namespace WeatherApp.ViewModel
{
    public class Weather : ObservableObject
    {
        private Uri _imageSource;
        public Uri ImageSource
        {
            get { return _imageSource; }
            set
            {
                _imageSource = value;
                OnPropertyChanged("ImageSource");
            }
        }

        private Model.Weather _city;
        public Model.Weather City
        {
            get { return _city; }
            set
            {
                _city = value;
                OnPropertyChanged("City");
                GetCurrent();
            }
        }

        private bool _isFarenheit;
        public bool IsFarenheit
        {
            get { return _isFarenheit; }
            set
            {
                _isFarenheit = value;
                OnPropertyChanged("IsFarenheit");
            }
        }

        private DataPoint _currentWeather;
        public DataPoint CurrentWeather
        {
            get { return _currentWeather; }
            set
            {
                _currentWeather = value;
                OnPropertyChanged("CurrentWeather");
            }
        }

        private void GetCurrent()
        {
            if (City != null && City.currently != null)
            {
                CurrentWeather = City.currently;
                var png = String.Format(@"{0}\Resources\{1}.png", 
                    Environment.CurrentDirectory, CurrentWeather.icon);
                ImageSource = new FileInfo(png).Exists
                    ? ImageSource = new Uri(png, UriKind.RelativeOrAbsolute)
                    : null;
            }
            else
            {
                ImageSource = null;
            }
        }
    }
}

Y enlazamos las propiedades a la página.

Weather.xaml

Y seguimos con la ViewModel de MainWindow, aquí estableceremos tres propiedades y dos métodos públicos. La primera propiedad indica si está o no expandido el Expander, la segunda es de tipo ViewModel.Search y una tercera que es un objeto Frame. Los dos métodos son uno que inicia el componente de búsqueda, y el segundo es un método que obtiene el clima de la ciudad seleccionada.

ViewModel.MainWindow.cs

using System.Windows.Controls;
using WeatherApp.Common;
using WeatherApp.Model;

namespace WeatherApp.ViewModel
{
    public class MainWindow : ObservableObject
    {
        private bool _isSearchExpanded;
        public bool IsSearchExpanded
        {
            get { return _isSearchExpanded; }
            set
            {
                _isSearchExpanded = value;
                OnPropertyChanged("IsSearchExpanded");
            }
        }

        public Search Search { get; set; }

        public Frame Browser { get; set; }

        public void Init()
        {
            Search = new Search { Mw = this };
        }

        public void GetWeather(Location location)
        {
            if (location != null)
            {
                var city = Client.GetWeather(location.Coordinates);
                var vm = new Weather { City = city, IsFarenheit = false };
                Browser.Navigate(new Components.Weather { DataContext = vm });
                IsSearchExpanded = false;
            }
        }
    }
}

MainWindow.xaml

Y por último, para poder enlazar los distintos ViewModel a los componentes, tenemos que enlazar el ViewModel.MainWindow.cs al contexto de datos de MainWindow, y para ello accedemos al evento Initialize() de MainWindow, y establecemos el enlace al contexto.

MainWindow.xaml.cs

using System.Windows;

namespace WeatherApp
{
    /// Interaction logic for MainWindow.xaml
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var vm = new ViewModel.MainWindow {Browser = Browser};
            vm.Init();
            DataContext = vm;
        }
    }
}

Nota: Aunque es una práctica habitual acceder al code behind para incluir los DataContext, no es la más correcta, que sería a través de una clase que gestionase los distintos contextos, y que fuese inicializada en un sólo lugar de nuestra aplicación.

En el siguiente post, el uso de converters, en el que cambiaremos los grados que actualmente estamos mostrando como Farenheit

Tutorial MVVM VI

Thu, 04 Apr 2013 00:00:00 GMT

El ViewModel es la parte del patrón MVVM dónde vamos a establecer las distintas propiedades públicas que se van a enlazar a la Vista, así como los distintos comandos de la lógica de presentación.

Depende de quién sea el desarrollador, hay varias convenciones a la hora de nombrar los ficheros del ViewModel. A mi personalmente me gusta crear un namespace llamado ViewModel, pero a otros les gusta llamar a las clases con el sufijo (o prefijo) VM o ViewModel.

Agregamos tres clases nuevas al proyecto, Search, Weather y MainWindow, que van a ser las que utilizaremos para el ViewModel.

INotifyPropertyChanged

Esta interfaz, es fundamental en el patrón MVVM, nos permite actualizar los elementos de la vista que están enlazados a propiedades en la vista-modelo, para ello basta con implementarla en la ViewModel y al modificarse una propiedad lanzamos el evento del cambio. Por ejemplo algo así:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

namespace WeatherApp.ViewModel
{
    public class MainWindow : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }

        private String _sample;
        public String Sample
        {
            get { return _sample; }
            set
            {
                _sample = value;
                OnPropertyChanged("Sample");
            }
        }
    }
}

Al realizar cualquier cambio en la propiedad "Sample" automáticamente se reproduce el cambio en la propiedad o propiedades que la tengan enlazada en la Vista, bueno y siendo rigurosos también dependiendo del modo en que esté enlazado, pero en principio asumimos un modo de enlace "TwoWay".

ICommand

Esta interfaz, dispone de tres miembros (un método, un booleano y un manejador de evento), y es el mecanismo a través del cual los distintos controles del XAML van a realizar operaciones, la ventaja fundamental de esta interfaz frente a los eventos, es que no deja de ser una propiedad en la vista-modelo, y por tanto podremos enlazarlos con la vista y reutilizarlos.

using System;
using System.Windows.Input;

namespace WeatherApp.ViewModel
{
    public class Weather : ICommand
    {
        public void Execute(object parameter)
        {
            throw new NotImplementedException();
        }

        public bool CanExecute(object parameter)
        {
            throw new NotImplementedException();
        }

        public event EventHandler CanExecuteChanged;
    }
}

El método es la lógica de la acción, la función booleana es un "flag" que permite ejecutar el comando, y bueno el manejador controla la ejecución del comando.

Implementando las interfaces

Pero…, si tengo que implementar todo este código por cada acción de la aplicación, o para establecer la notificación de las propiedades de cada clase, ¿dónde está el beneficio?. Pues evidentemente esto para una aplicación sencilla con pocos comandos y con pocas vistas-modelos, es algo asequible, pero para aplicaciones más complejas, conviene elaborar una clase que delegue la implementación del "ICommand", y a la que podamos enviar la ejecución de la acción y sus parámetros.

using System;
using System.Diagnostics;
using System.Windows.Input;

namespace WeatherApp.Common
{
    public class RelayCommand : ICommand
    {
        private readonly Action _execute;
        private readonly Predicate _canExecute;

        public RelayCommand(Action execute) : this(execute, null)
        {
        }

        public RelayCommand(Action execute, Predicate canExecute)
        {
            if (execute == null)
            {
                throw new ArgumentNullException("execute");
            }
            _execute = execute;
            _canExecute = canExecute;
        }

        [DebuggerStepThrough]
        public bool CanExecute(object parameters)
        {
            return _canExecute == null || _canExecute(parameters);
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }
        }

        public void Execute(object parameters)
        {
            _execute(parameters);
        }
    }
}

Para la notificación de propiedades, generaríamos una clase abstracta, que implementase en un método público, "INotifyPropertyChanged", y después cada clase del ViewModel implementaría esta clase abstracta, llamando únicamente al método que lanza la implementación.

using System.ComponentModel;

namespace WeatherApp.Common
{
    public abstract class ObservableObject : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

Después de implementar todo esto, en el siguiente post, toca empezar a agregar las propiedades al ViewModel, establecer la notificación de los cambios para que cuando se produzcan se actualicen inmediatamente en la vista, y enlazarlas al marcado XAML mediante el contexto de datos y los Binding.

Tutorial MVVM V

Wed, 03 Apr 2013 00:00:00 GMT

En este quinto artículo, después de haber montado el Modelo en los anteriores post, y unas pruebas unitarias asociadas al Modelo, vamos a crear la vista, la cual va a estar formada a partir de 3 componentes, aunque todo podría estar en el mismo componente, es más práctico y funcional que esté separado en distintos controles, ya que así nos permite la reutilización de elementos en otros, y es que una de las ventajas más importantes de WPF, es la potencia del marcado XAML, que nos deja introducir controles que contienen a otros que a su vez pueden contener a otros distintos.

En la solución, tenemos un proyecto de WPF, si no es así lo creamos, y lo establecemos como proyecto principal de la compilación. Por defecto, vendrá un control MainWindow.xaml que será la ventana principal de la aplicación. Agregamos un nuevo control de usuario, y en el marcado de este control, al objeto Grid, le agregamos dos filas, en la primera insertamos un StackPanel con orientación vertical, que contenga un TextBox con un ancho mínimo de 200px y un Button alineado a la derecha. En la segunda fila agregamos un objeto ListBox el cual albergará los resultados de la búsqueda que hagamos, que serán las localizaciones que coincidan con el texto del TextBox. Y nos queda algo así:

A continuación agregamos un control tipo Page, este objeto se puede utilizar para integrarlo en un Frame, el cual trae de serie la gestión de una pila de páginas navegadas, y los controles de navegación para poder ir atrás o hacía adelante. La página estará compuesta por un Grid de dos columnas, la primera que se autoajuste y la segunda que se ajuste el ancho al contenido, en la primera agregamos un objeto Image, que de momento no configuramos su Source, y en la segunda agregamos un StackPanel en el que los objetos se orienten verticalmente, y que su alineación vertical sea también en el centro, este panel contiene a su vez dos TextBlock que albergarán la temperatura y el nombre de la ciudad. Por último agregamos un objeto Border con un ColSpan y orientado arriba a la derecha, con dos RadioButton los cuales permitirán el cambio entre grados Farenheit y Celsius.

Seguido, introducimos en el MainWindow un objeto Frame, y a continuación un objeto Expander, que se expande hacía a la izquierda, y lo ubicamos alineado a la derecha, en el Header introducimos un TextBlock con el texto "Búsqueda" y rotado 90 grados, y en el Content el componente de búsqueda que hemos creado antes.

En el siguiente post, continuaremos elaborando el ViewModel de cada uno de estos objetos, y los relacionaremos para después continuar haciendo los Binding a las propiedades.

Tutorial MVVM IV

Tue, 02 Apr 2013 00:00:00 GMT

Creamos un proyecto de Test unitarios, para que verifique el comportamiento de los métodos que hemos incluido en el modelo.

Por organizar un poco el proyecto de test, creamos una carpeta llamada Model, a la que le introducimos una clase llamada ClientTest.cs. Esta clase, verifica lo métodos de la clase Client, los parámetros que recibe y los resultados que arroja:

GetLocations(String query, int maxResults). Este método debe devolver un listado de la clase Location, el cual no puede ser nulo y los parámetros de entrada no pueden ser nulos, y en el caso de maxResults, debe ser un entero en un intervalo entre 0 y 20.
GetWeather(Coordinates coords). Debe devolver un objeto Weather, el cuál no puede ser nulo, y el parámetro de entrada nunca debe llegar nulo.

Para ello debemos referenciar, el proyecto del Modelo en el proyecto de Test, y luego en la clase debemos agregar un Using referenciando al modelo dentro de la clase.

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using WeatherApp.Model;

namespace WeatherApp.Test.Model
{
    [TestClass]
    public class ClientTest
    {
        [TestMethod]
        public void GetLocations()
        {
            var query = String.Empty;
            var maxResults = -1;
            var list = Client.GetLocations(query, maxResults);
            Assert.AreEqual(list, null);
            query = "Madrid";
            maxResults = new Random().Next(0, 20);
            list = Client.GetLocations(query, maxResults);
            Assert.IsTrue(list != null && list.Count >= 0);
        }

        [TestMethod]
        public void GetWeather()
        {
            var coords = new Coordinates
                             {
                                 Latitude = 0D,
                                 Longitude = 0D
                             };
            var weather = Client.GetWeather(null);
            Assert.IsNull(weather);
            weather = Client.GetWeather(coords);
            Assert.IsNotNull(weather);
        }
    }
}

Una vez elaborado el test, programamos la clase Client del Modelo, y nos queda algo así:

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Net;
using System.Runtime.Serialization.Json;
using System.Xml.Linq;

namespace WeatherApp.Model
{
    public static class Client
    {
        private static readonly CultureInfo Culture = new CultureInfo("EN-US");

        public static List GetLocations(String query, int maxResults = 20)
        {
            if (String.IsNullOrEmpty(query) ||
                !(maxResults > 0 && maxResults <= 20)) return null;

            var url = String.Format(Properties.Resources.UrlBing, query,
                                    maxResults, Properties.Resources.KeyBing);

            List list;
            try
            {
                var doc = XDocument.Load(url);
                var locs = from q in doc.Descendants().Where(q => q.Name.LocalName == "Location")
                           select new
                                      {
                                          Name = q.Descendants()
                                                 .Where(r => r.Name.LocalName == "Address")
                                                 .Elements().First(s => s.Name.LocalName == "Locality").Value,
                                          Country = q.Descendants()
                                                    .Where(r => r.Name.LocalName == "Address")
                                                    .Elements().First(s => s.Name.LocalName == "CountryRegion").Value,
                                          Latitude = q.Descendants()
                                                     .Where(r => r.Name.LocalName == "Point")
                                                     .Elements().First(s => s.Name.LocalName == "Latitude").Value,
                                          Longitude = q.Descendants()
                                                      .Where(r => r.Name.LocalName == "Point")
                                                      .Elements().First(s => s.Name.LocalName == "Longitude").Value,

                                      };

                list = locs.Select(q => new Location
                                            {
                                                Name = q.Name,
                                                Country = q.Country,
                                                Coordinates = new Coordinates
                                                                  {
                                                                      Latitude = Convert.ToDouble(q.Latitude, Culture),
                                                                      Longitude = Convert.ToDouble(q.Longitude, Culture)
                                                                  }
                                            }).ToList();
            }
            catch (Exception)
            {
                list = null;
            }
            return list;
        }

        public static Weather GetWeather(Coordinates coords)
        {
            if (coords == null) return null;

            var url = String.Format(Properties.Resources.UrlAPI, Properties.Resources.KeyAPI,
                                    coords.Latitude.ToString(Culture), coords.Longitude.ToString(Culture));
            Weather weather = null;
            try
            {
                var dser = new DataContractJsonSerializer(typeof(Weather));
                var req = WebRequest.Create(url);

                using (var s = req.GetResponse().GetResponseStream())
                {
                    if (s != null)
                    {
                        weather = (Weather)dser.ReadObject(s);
                    }
                }
            }
            catch (Exception)
            {
                weather = null;
            }
            return weather;
        }
    }
}

En el siguiente capítulo empezaremos a trabajar con la vista, a agregar controles al proyecto de WPF.

Tutorial MVVM III

Mon, 01 Apr 2013 00:00:00 GMT

En este tercer capítulo, continuamos con el modelo, dónde vamos a agregar una clase estática, que se ocupe de hacer las peticiones a los servicios web, y transformen las respuestas en listas de localizaciones y datos meteorológicos.

Vamos a hacer peticiones a dos servicios web, el primero es para obtener coordenadas y localizaciones, a partir de una cadena de texto que se introduzca en la aplicación. El segundo devuelve un bloque de datos a partir de las coordenadas que le pasemos de la localización seleccionada de las mostradas en el servicio anterior.

Para hacer todo esto, utilizaremos los servicios gratuitos de Bing Maps para la localización, y de Dark Sky Company. La razón de seleccionar ambos es que el primero, me parece bastante sencillo y en este post puedes ver como obtener la key para poder utilizar el servicio. Y el segundo web service, es porque me parece bastante curioso, puedes hacer peticiones del tiempo por minuto u hora, en un momento determinado en el intervalo de 60 años atrás y hasta 10 años hacía adelante, y aunque tiene algunas limitaciones, creo que puede ser interesante probarlo.

Web Services

Bing Maps
http://dev.virtualearth.net/REST/v1/Locations?query=query&maxResults=maxResults&key=APIKEY&output=xml
Parámetros:

query: Palabra objeto para la consulta
maxResults: Número de resultados que queremos establecer como máximo. Tiene un límite de 20 por consulta.
APIKEY: Es la clave del API que hayamos obtenido de Bing
output: Lo he establecido directamente en XML, pero si se elimina el parámetro automáticamente devuelve un JSON.

Forecast
http://api.forecast.io/forecast/APIKEY/Latitude,Longitude
Parámetros:

APIKEY: Es la clave del API que hayamos obtenido de Forecast
Latitude: Latitud en grados decimales.
Longitude: Longitud en grados decimales.

Antes de generar la clase estática, vamos a almacenar estas urls parametrizadas en el fichero de recursos de proyecto.

Creamos la clase estática, con estos miembros, GetLocations() y GetWeather(), los cuales nos van a proveer los datos para la vista.

Client.cs

using System;
using System.Collections.Generic;
using System.Globalization;

namespace WeatherApp.Model
{
    public static class Client
    {
        private static readonly CultureInfo Culture = new CultureInfo("EN-US");

        public static List GetLocations(String query, int maxResults = 20)
        {
            return null;
        }

        public static Weather GetWeather(Coordinates coords)
        {
            return null;
        }
    }
}

En el siguiente post vamos a establecer unas pruebas unitarias para desarrollar estas funciones.

Tutorial MVVM II

Sun, 31 Mar 2013 00:00:00 GMT

Después de ver un resumen de la teoría del patrón en el anterior post, vamos a comenzar a programar, para ello, lo más conveniente es preparar el modelo. El objetivo de este tutorial, es mostrar el patrón MVVM a través de una aplicación WPF que consuma unos datos de un servicio web. En definitiva una aplicación que muestre el tiempo de una ciudad.

Empezamos creando un nuevo proyecto de WPF, y a la solución le agregamos un nuevo proyecto de librería dinámica, en la cual vamos a trabajar el modelo.

Creación del modelo

Una vez agregado el proyecto, introducimos cinco clases: Location y Coordinates, y DataBlock, DataPoint y Weather.

Coordinates.cs

namespace WeatherApp.Model
{
    public class Coordinates
    {
        public double Latitude { get; set; }

        public double Longitude { get; set; }
    }
}

Location.cs

using System;
namespace WeatherApp.Model
{
    public class Location
    {
        public String Name { get; set; }

        public String Country { get; set; }

        public Coordinates Coordinates { get; set; }
    }
}

DataPoint.cs

using System;
namespace WeatherApp.Model
{
    public class DataPoint
    {
        public int time { get; set; }
        public String summary { get; set; }
        public String icon { get; set; }
        public int? sunriseTime { get; set; }
        public int? punsetTime { get; set; }
        public double precipIntensity { get; set; }
        public double? precipProbability { get; set; }
        public String precipType { get; set; }
        public String precipAccumulation { get; set; }
        public double? temperature { get; set; }
        public double? temperatureMin { get; set; }
        public int? temperatureMinTime { get; set; }
        public double? temperatureMax { get; set; }
        public int? temperatureMaxTime { get; set; }
        public double windSpeed { get; set; }
        public int windBearing { get; set; }
        public double cloudCover { get; set; }
        public double humidity { get; set; }
        public double pressure { get; set; }
        public double visibility { get; set; }
    }
}

DataBlock.cs

using System;

namespace WeatherApp.Model
{
    public class DataBlock
    {
        public String summary { get; set; }

        public String icon { get; set; }
        
        public DataPoint[] data { get; set; }
    }
}

Weather.cs

using System;

namespace WeatherApp.Model
{
    public class Weather
    {
        public double latitude { get; set; }
        public double longitude { get; set; }
        public String timeZone { get; set; }
        public int offset { get; set; }
        public DataPoint currently { get; set; }
        public DataBlock minutely { get; set; }
        public DataBlock hourly { get; set; }
        public DataBlock dayly { get; set; }
        public object[] alerts { get; set; }
        public object flags { get; set; }
    }
}

En el siguiente post continuaremos con el modelo también, generando más lógica de negocio para obtener los datos.

Tutorial MVVM I

Sat, 30 Mar 2013 00:00:00 GMT

En este serial, intentaré explicar de una forma somera y modesta, cómo desarrollar una aplicación WPF con el patrón MVVM.

Las siglas MVVM, corresponden a Model View ViewModel o dicho en castellano Modelo Vista Vista-Modelo. Este patrón es una evolución del patrón MVC, cuyo objetivo es separar la Vista, de la lógica de presentación (el ViewModel), y ésta última procesa los datos recibidos desde el Modelo. Pero…, ¿y qué diferencia hay con lo que hasta ahora se hacía en un desarrollo con un patrón n-layer?, pues fundamentalmente que la capa de presentación se aísla más de la lógica, dividiéndose en más componentes, lo cual permite el trabajo al mismo tiempo de más miembros del equipo de desarrollo (o incluso del equipo de diseño). Y se intenta evitar de forma general, el uso de los ficheros de code-behind asociados a los distintos controles, utilizando el enlace a datos de WPF para adjuntar comandos a la vista.

View

Lógica UI. La vista son los componentes definidos en los ficheros con el marcado XAML. El contexto de datos de los componentes se les asocia su ViewModel. Y se intenta reducir a la mínima expresión el uso del code-behind.

Model

Lógica de negocio. No tiene ninguna relación directa con la Vista, se ocupa de las reglas de negocio, los datos y de la persistencia en el almacén de datos.

ViewModel

Lógica de presentación. Es el adaptador entre la Vista y el Modelo. Maneja y valida los distintos eventos de la Vista y del Modelo. Implementa interfaces como INotifyPropertyChanged e ICommand.

Vista diseño WPF en Blend for Visual Studio 2012

Thu, 28 Mar 2013 00:00:00 GMT

Estaba intentando hacer un post de WPF con Visual Studio 2012, y al intentar utilizar Blend para Visual Studio 2012, la vista diseño de los componentes no está disponible.

Buscando por internet, veo que el Blend for Visual Studio 2012 sólo tiene disponible el diseñador para aplicaciones Windows Store y Windows Phone, por lo que no se puede visualizar el layout de componentes de las aplicaciones para Silverlight o WPF, únicamente se puede ver el marcado XAML. Sólo estará disponible a partir del Update 2, y una de las soluciones que se plantean es instalar la Preview de Blend + Sketchflow.

Para ello vamos al centro de descargas de Microsoft y descargamos la versión de la Preview, para poder instalarlo, se requiere según el Sistema Operativo:

Windows 8

Visual Studio 2012 Professional o superior
Visual Studio 2012 Express

Windows 7 o Windows Server 2012

Visual Studio 2012 Professional o superior

Una vez descargado, ejecutamos la instalación, aceptamos la licencia.

Seleccionamos las opciones, por defecto todo.

Esperamos más o menos 3 minutos en hacerse la instalación.

Una vez completada la instalación tenemos disponible el diseñador en el Blend + SketchFlow Preview for Visual Studio 2012.

Aunque esta no es la mejor solución, es la única mientras no salga el Update 2 de Visual Studio 2012, que ya soportará de nuevo el diseñador para WPF.

Convertir DataGrid.View a DataTable

Mon, 04 Feb 2013 00:00:00 GMT

Un problema recurrente al trabajar con el DataGrid de WPF es recuperar los datos para trabajar con ellos, bien para realizar una nueva consulta, bien para exportarlos a Excel, o incluso para exportarlos a otro almacén de persistencia distinto al original.

El problema que hay es que una vez son cargados en la vista, el origen de datos, salvo que sea una colección que se alimenta de una lista de entidades conocida, a la que se pueda llamar para realizar un casting, y poder volver a trabajar con ella, la colección se convierte en anónima, y más si la colección del DataGrid ha sido manipulada.

Bien, la idea de este post es trabajar con ese objeto anónimo, que contiene el resultado de una consulta, y que no podemos volver a convertir mediante un casting porque desconocemos su origen.

Para ello, lo primero es crear un nuevo proyecto de WPF al que le vamos a agregar un DataGrid, el cual tenga un DataContext con un CollectionViewSource que provea la colección de datos.

Además se ha definido un PopUp, un botón y un TextBox con el fin de desencadenar el evento de transformación de la colección en un DataTable, y ver su resultado.

En una clase estática nueva, generamos dos métodos. El primero devuelve una lista de personas, la cual va a alimentar el CollectionViewSource que hemos creado en el XAML.

El segundo método es el encargado de realizar la conversión de View a DataTable, para ello es preciso agregar la directiva System.Reflection.

using System.Reflection;

Dentro del método creamos un nuevo DataTable que vamos a definir recorriendo las propiedades de la Collection (que no es más que el miembro View del DataGrid) y en un segundo bucle cargamos los valores de las distintas propiedades fila a fila en el nuevo DataTable.

using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Reflection;

namespace DataGridToDataTable
{
    public static class Data
    {
        public static List GetPeople()
        {
            return new List
                           {
                               new Person() {Name = "Raúl", Age = 29, Job = "Analyst"},
                               new Person() {Name = "Juan", Age = 34, Job = "Tester"},
                               new Person() {Name = "Paco", Age = 31, Job = "Developer"}
                           };
        }

        public static DataTable GetTable(IEnumerable collection)
        {
            var dt = new DataTable();
            try
            {
                foreach (var q in collection)
                {
                    Type t = q.GetType();
                    PropertyInfo[] pi = t.GetProperties();
                    if (dt.Columns.Count == 0)
                    {
                        foreach (var p in pi)
                        {
                            var dc = new DataColumn(p.Name, p.PropertyType);
                            dt.Columns.Add(dc);
                        }
                    }
                    var dr = dt.NewRow();
                    for (int x = 0; x < pi.Length; x++)
                    {
                        var value = q.GetType().GetProperty(pi[x].Name).GetValue(q, null);
                        dr[x] = value ?? String.Empty;
                    }
                    dt.Rows.Add(dr);
                    dt.AcceptChanges();
                }
            }
            catch (Exception)
            {
                dt = null;
            }
            return dt;
        }
    }

    public class Person
    {
        public String Name { get; set; }
        public int Age { get; set; }
        public String Job { get; set; }
    }

}

Por simplificar el ejemplo, la ejecución de los eventos lo vamos a hacer desde el Code Behind del MainWindow, pero lo suyo sería hacer esto siguiendo el patrón MVVM y realizarlo en la Vista Modelo.

En el evento Loaded, buscamos el recurso que hemos creado como CollectionViewSource y lo rellenamos con el método GetPeople() de la clase estática creada para tener datos de prueba.

En el evento Click del botón creamos un DataSet al que agregamos el resultado de la conversión del View, aceptamos los cambios y recogemos el XML del DataSet generado dentro del TextBox.

using System.Data;
using System.Windows;
using System.Windows.Data;

namespace DataGridToDataTable
{
    /// Lógica de interacción para MainWindow.xaml
    public partial class MainWindow : Window
    {

        public CollectionViewSource Cv { get; set; }

        public MainWindow()
        {
            InitializeComponent();
        }

        private void WindowLoaded(object sender, RoutedEventArgs e)
        {
            Cv = (CollectionViewSource)TryFindResource("CvPeople");
            if (Cv != null) Cv.Source = Data.GetPeople();
        }

        private void BtnGetDataTableClick(object sender, RoutedEventArgs e)
        {
            var ds = new DataSet("PeopleDs");
            if (Cv != null)
            {
                var dt = Data.GetTable(Cv.View);
                dt.TableName = "Person";
                dt.AcceptChanges();
                ds.Tables.Add(dt);
            }
            ds.AcceptChanges();
            this.TxtResults.Text = ds.GetXml();
            this.PopResults.IsOpen = true;
        }
    }
}

Cambiar de tema dinámicamente

Mon, 15 Oct 2012 00:00:00 GMT

Al elaborar un desarrollo para un cliente, cuando el que dirige el proyecto no es uno, sino varios individuos, te sueles encontrar con problemas con el diseño, más allá del funciona o no funciona, lo más importante es que esto es azul y no verde, o este tono no me gusta, y problemas de esa índole.

Un tiempo atrás, me encontré con un desarrollo, que cuando los clientes vieron la primera beta, la bautizaron como Matrix, la beta fallaba que daba gusto, hubo un cambio de última hora que arrastró varios fallos, pero lo más importante fue que la aplicación fue llamada Matrix, porque era negra con algunos detalles verdes.

Para evitar esto, lo más sencillo, es ofrecer un cambio dinámico en el conjunto de diseños de la aplicación, ojo, sin modificar la estructura, simplemente, haciendo participe al usuario final, del conjunto de colores, o incluso estilos que quiere darle a la aplicación.

Para evitar esto, surgieron varias propuestas de diseño, pero viendo que los diseñadores no terminaban de acertar con el gusto del cliente (de todos los individuos que estaban del lado del cliente) decidimos implementar un cambio dinámico, e incluso, un cambio en ciertos elementos como el tamaño de la fuente, la fuente, o detalles de color.

Creamos un proyecto nuevo de WPF, y le agregamos una carpeta "Theme" por ejemplo, y a ésta le vamos a agregar un diccionario de recursos.

Una vez agregado, lo referenciamos en el App.xaml, para que los estilos del diccionario estén accesibles de forma dinámica.

Después agregamos un estilo para hacer un ejemplo que modifica los TextBlock, ya que es para lo que vamos a preparar un estilo. Una vez realizado este estilo, duplicaremos el diccionario de recursos y modificaremos los estilos para diferenciar los TextBlock entre diccionarios.

A continuación, introducimos en la aplicación, un ComboBox y un TextBlock, el primero lo vamos a cargar con los estilos existentes y el TextBlock, recibirá el estilo, y se modificará el texto con el valor del ComboBox.

El combo se está cargando con un CollectionViewSource, que a priori, no tiene elementos, para ello deberemos cargarlo desde el code behind. Pero, antes de cargar esta colección, debemos modificar unas propiedades de la compilación de los diccionarios alternativos, ya que lo que vamos a hacer es recorrer un directorio de la aplicación en busca de estos diccionarios, así podremos dejar una puerta abierta a la creación dinámica de diccionarios, bien por manualmente por el usuario, bien a través de un control de nuestra aplicación. Las propiedades que debemos modificar son las siguientes, Acción de compilación de Page a Contenido, y Copiar en el directorio a Siempre o a si es Posterior.

Para obtener los diccionarios, tenemos que recorrer el directorio "Theme", que es donde hemos creado los distintos diccionarios, y los agregamos uno a uno al CollectionViewSource. Después adaptaremos el evento SelectionChanged del combo para que desencadene el cambio de estilo.

            var cv = (CollectionViewSource)TryFindResource("CvThemes");
            var list = new ArrayList {"Principal"};
            
            foreach (FileInfo file in new DirectoryInfo(Environment.CurrentDirectory + @"\Theme\").GetFiles("*.xaml"))
            {
                list.Add(file.Name.Replace(file.Extension, String.Empty));
            }
            cv.Source = list;

Para agregar un diccionario de forma dinámica, debemos crear un objeto ResourceDictionary, al cual le referenciamos una URI relativa del diccionario a agregar, después se limpia la caché de diccionarios agregados, y se agrega el que acabamos de crear.

using System;
using System.Collections;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private const string PathTheme = "Theme/{0}.xaml";
        public MainWindow()
        {
            InitializeComponent();
            var cv = (CollectionViewSource)TryFindResource("CvThemes");
            var list = new ArrayList {"Principal"};
            
            foreach (FileInfo file in new DirectoryInfo(Environment.CurrentDirectory + @"\Theme\").GetFiles("*.xaml"))
            {
                list.Add(file.Name.Replace(file.Extension, String.Empty));
            }
            cv.Source = list;
        }

        private void CmbThemesSelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var dictionary = new ResourceDictionary
                {
                    Source = new Uri(String.Format(PathTheme, CmbThemes.SelectedItem), 
                        UriKind.RelativeOrAbsolute)
                };
            Application.Current.Resources.MergedDictionaries.Clear();
            Application.Current.Resources.MergedDictionaries.Add(dictionary);
        }
    }
}

Custom Control WPF II

Mon, 17 Sep 2012 00:00:00 GMT

Continuando con el artículo anterior, vamos a insertar el control que hemos creado y personalizado en el diccionario de recursos, a la aplicación.

Para ello, referenciamos el namespace al marcado, como antes, con el prefijo "local" e insertamos el objeto en el punto de la aplicación que deseemos.

Es fundamental explicar que para que el control tenga el diseño que hemos creado, hay que referenciarlo dinámicamente al estilo creado, y después introducir las distintas propiedades que hemos creado. Para el texto he puesto "@rfcm83", para el contador he introducido un texto que dice "0 clicks" y luego una imagen de twitter, que previamente he introducido al proyecto. Las propiedades de alineación vertical y horizontal, es para que el control salga en el centro de la pantalla, pero esto es totalmente opcional.

Aunque he establecido un valor a la propiedad "Clicks", lo lógico es que esta propiedad se actualice con cada click que se realiza en la aplicación, para ello, hay que implementar la interfaz INotifyPropertyChanged de System.ComponentModel, la cual va a gestionar los cambios en la propiedad "Clicks" y relacionar esta propiedad con una que implementemos en el code behind. Además, es necesario crear un evento MouseLeftButtonDown sobre el control, para que se desencadene finalmente la modificación de la propiedad "Clicks".

Implementamos el código fuente, empezando por implementar los miembros de la interfaz INotifyPropertyChanged. Después creamos la propiedad pública "ClicksTxt", la cual va a ser la que que notifique el cambio, y modifique el texto del control. Por último creamos el evento MouseLeftButtonDown de nuestro control, y este se ocupará de modificar la propiedad, incrementando un contador en el código.

using System;
using System.Windows;
using System.Windows.Input;
using System.ComponentModel;

namespace WpfApplication1
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private const string ClickStr = "{0} click(s)";
        private int _nClicks = 0;
        private string _clicksTxt;
        public String ClicksTxt
        {
            get { return _clicksTxt; }
            set
            {
                _clicksTxt = value;
                NotifyChange("ClicksTxt");
            }
        }

        public MainWindow()
        {
            InitializeComponent();
        }

        private void BtnCControlClick(object sender, MouseButtonEventArgs e)
        {
            _nClicks++;
            ClicksTxt = String.Format(ClickStr, _nClicks);
        }
        
        private void NotifyChange(string property)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(property));
            }
        }
    }
}

A continuación vamos al diseñador, y modificamos el control, agregándole un evento y modificando la propiedad "Clicks" del control, enlazándola a la propiedad que hemos creado en el code behind ("ClicksTxt").

Una vez realizados estos cambios, el control debería incrementar el número de clicks que se vayan pulsando sobre el objeto.

Al arrancar, tendríamos el control sin ningún texto, pues la propiedad no estará iniciada, después de hacer clicks tendremos algo como esto.

Custom Control WPF I

Sat, 15 Sep 2012 00:00:00 GMT

Muchas veces, realizar una personalización de un botón, o de otro de los controles que encontramos en el namespace System.Windows para utilizar directamente en el marcado XAML, resulta un trabajo bastante tedioso y a veces complejo personalizar uno de estos controles si no tienes mucha habilidad con el diseño, y no siempre cumple con las expectativas que tenemos.

Con este artículo, mi intención es crear un control, que contenga un texto, una imagen, y un contador, el cual lo vamos a utilizar a modo de ejemplo para contar los clicks que hagamos en el control.

Crear un proyecto WPF

Creamos un nuevo proyecto de WPF, al que le vamos a agregar dos nuevos elementos, el primero un diccionario de recursos, y el otro un control personalizado.

Control personalizado

Este control, no deja de ser una clase que implementa Control que representa la clase base de los elementos de la interfaz de usuario (UI) que utilizan un control para definir su apariencia de System.Windows.Controls.ControlTemplate.

Lo primero es agregar varias DependecyProperties, una para el icono, otra para el texto del control, y la última el contador de clicks.

        public static readonly DependencyProperty TextProperty;
        public static readonly DependencyProperty IconProperty;
        public static readonly DependencyProperty ClicksProperty;

        public object Icon
        {
            get { return (Image)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }
        public String Text
        {
            get { return (String)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
        public String Clicks
        {
            get { return (String)GetValue(ClicksProperty); }
            set { SetValue(ClicksProperty, value); }
        }

Una vez agregadas las distintas propiedades, las registramos en el constructor.

        static CustomControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
            CustomControl.TextProperty = DependencyProperty.Register("Text", typeof(String), typeof(CustomControl), new UIPropertyMetadata(null));
            CustomControl.IconProperty = DependencyProperty.Register("Icon", typeof(Image), typeof(CustomControl), new UIPropertyMetadata(null));
            CustomControl.ClicksProperty = DependencyProperty.Register("Clicks", typeof(String), typeof(CustomControl), new UIPropertyMetadata(null));
        }

Finalmente tenemos el control listo para ser usado, salvo por un detalle, que no está especificado cómo se disponen los distintos objetos.

using System;
using System.Windows;
using System.Windows.Controls;

namespace WpfApplication1
{
    public class CustomControl : Control
    {
        public static readonly DependencyProperty TextProperty;
        public static readonly DependencyProperty IconProperty;
        public static readonly DependencyProperty ClicksProperty;

        public object Icon
        {
            get { return (Image)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }
        public String Text
        {
            get { return (String)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }
        public String Clicks
        {
            get { return (String)GetValue(ClicksProperty); }
            set { SetValue(ClicksProperty, value); }
        }
        static CustomControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl), new FrameworkPropertyMetadata(typeof(CustomControl)));
            CustomControl.TextProperty = DependencyProperty.Register("Text", typeof(String), typeof(CustomControl), new UIPropertyMetadata(null));
            CustomControl.IconProperty = DependencyProperty.Register("Icon", typeof(Image), typeof(CustomControl), new UIPropertyMetadata(null));
            CustomControl.ClicksProperty = DependencyProperty.Register("Clicks", typeof(String), typeof(CustomControl), new UIPropertyMetadata(null));
        }
    }
}

Diccionario de recursos

El diccionario de recursos, nos permite crear plantillas y estilos globales o específicos, para los controles que introducimos en la aplicación, además, nos permite añadir valores como colores, brochas, fuentes, tamaños, y características comunes entre controles, lo cual nos permite reutilizar recursos, con el fin de dar un formato homogéneo a nuestra aplicación. Más información en MSDN Microsoft.

Una vez agregado el diccionario, lo primero que hay que realizar es vincularlo a la aplicación. Blend Studio lo suele hacer de forma automática, pero si trabajas desde Visual Studio, lo normal es hacerlo uno mismo, ya que si utilizas varias hojas de recursos, el orden de estas es fundamental, ya que en el marcado, cuando agregas varios componentes en la misma posición, prevalece y se superpone el que se encuentra en último lugar.

Bien, para agregar un nuevo diccionario, abrimos el App.xaml, y ahí agregamos a los recursos el diccionario.

Una vez realizado esto, los recursos estarán disponibles de forma dinámica para nuestra aplicación.

A continuación en el diccionario de recursos agregamos un nuevo estilo para personalizar el control que hemos creado, para que podamos crear este estilo primero debemos agregar el namespace al marcado, para lo que voy a utilizar "local" como prefijo.

Después agregamos un par de colores, y sus respectivas brochas, para que podamos dar color al control.

    #FF77AADB
    #FFFDFDFD
    #FF24348C

Y empezamos a crear el estilo, para componer el objeto, voy a utilizar un grid, con dos columnas, y dos filas, en la primera columna insertaré a doble fila una imagen. En la otra columna, en una fila un texto, y en la otra fila un contador de clicks.



    #FF77AADB
    #FFF3F3F3
    #FF24348C

Aprovechando que estaba creando el estilo, he agregado un Trigger para cambiar la apariencia del control cuando el ratón se encuentre encima. Así tendremos dos estados distintos cuando el control tiene encima el cursor.

El siguiente paso es insertar el control dentro de la aplicación, para ello continúo en el siguiente artículo.

Visor GIS con WPF y el API de Esri

Sat, 08 Sep 2012 00:00:00 GMT

Continuando con el hilo del último post, y aprovechando que el marcado en Silverlight y WPF es el mismo, generaremos una aplicación de escritorio, que acceda a servicios WMS como los del PNOA, e implementaremos una funcionalidad de búsqueda mediante el uso de Bing Services.

Ficha técnica:

ESRI API 2.4 for WPF
C# .NET (4.0)
Key de Desarrollador de Bing (ver este post)

Una vez instalado el API, lo primero, como con el API para Silverlight, es referenciar el ArcGIS.Client, ArcGIS.Toolkit y ArcGIS.Toolkit.DataSources. Nota: Al agregar las referencias, es importante agregar únicamente las que son compatibles con el Framework que estamos utilizando, en este post yo estoy utilizando el 4.0, pero aparecen disponibles las del 3.5.

Continuamos trayéndonos el marcado XAML del ejemplo anterior, al que vamos a hacerle algún cambio que otro cambio:

Después vamos con el code behind

        private void MainWindowLoaded(object sender, RoutedEventArgs e)
        {
            const String wmsStr = @"http://www.idee.es/wms/PNOA/PNOA";

            var wms = new WmsLayer
            {
                Url = wmsStr,
                SkipGetCapabilities = false,
                Layers = new string[] { "PNOA" },
                Version = "1.3.0"
               //ProxyUrl = proxyStr
            };

            MyMap.Layers.Add(wms);
            MyMap.Extent = MyMap.Layers.GetFullExtent();
        }

He comentado la parte del proxy porque aquí no la vamos a necesitar. Tampoco vamos a añadir ningún tipo de fichero kml, ya que lo que vamos a hacer es realizar una búsqueda de un lugar mediante una búsqueda de texto. Para ello, vamos a agregar un TextBox y un botón para trabajar esta funcionalidad.

Al evento Click del botón, ya le he añadido un método, el cual va a iniciar la petición de coordenadas al servicio Bing. Cosas fundamentales a tener en cuenta:

La petición de datos al servicio, en este ejemplo es en castellano, pero podría ser en inglés
El ámbito de trabajo siempre va a ser España
Muchas ciudades de España tienen el mismo nombre en América, (Córdoba, Toledo, Madrid, Málaga...)

Considerando esto podemos comprobar si el literal que ha pasado el usuario contiene la palabra España o Spain, y si no lo tiene concatenarlo, y enviárselo al servicio de Bing. Una vez realizada la petición recibimos un xml, al que debemos comprobar que las coordenadas que trae se encuentran dentro de nuestros límites.

Hacemos esto porque si pones New York, España, nunca va a devolverte una ubicación, pero si pones Córdoba, España, seguro que no va a devolverte la Córdoba Argentina. Si las coordenadas que recibimos están fuera del ámbito, le mostraríamos directamente al usuario un mensaje diciéndole que está fuera de los límites del mapa.

        private const Double XMin = -21.37979367;
        private const Double XMax = 5.07891717;
        private const Double YMin = 27.14108121;
        private const Double YMax = 44.03141073;

        private const string UrlBingLocation =
            "http://dev.virtualearth.net/REST/v1/Locations?query={0}&includeNeighborhood=true&maxResults=1&output=xml&key={1}";

        private void BtnSearchClick(object sender, RoutedEventArgs e)
        {
            var txt = TxtSearch.Text;
            if (!String.IsNullOrEmpty(txt))
            {
                if (!txt.ToUpper().Contains("ESPAÑA") && !txt.ToUpper().Contains("SPAIN"))
                {
                    txt += ",%20Spain";
                }
                txt = txt.Replace(" ", "%20");
                var env = GetCoordinates(ref txt);
                if (env != null)
                {
                    var center = env.GetCenter(); 
                    if (IsInSpain(center.X, XMin, XMax) && IsInSpain(center.Y, YMin, YMax))
                    {
                        var gl = new GraphicsLayer {ID = txt};
                        gl.Graphics.Add(new Graphic { Geometry = new MapPoint(center.X, center.Y)});
                        MyMap.Layers.Add(gl);
                        MyMap.Extent = env;
                    }
                    else
                    {
                        MessageBox.Show("La ciudad seleccionada no se encuentra en España, o no está escrita correctamente");
                    }
                }
            }
        }

        private Envelope GetCoordinates(ref string txtSearched)
        {
            var env = new Envelope();
            var key = "KEY_BING_MAPS";
            var url = String.Format(UrlBingLocation, txtSearched, key);
            
            try
            {
                var xmlTxtReader = new XmlTextReader(url);
                var ds = new DataSet("Location");
                ds.ReadXml(xmlTxtReader);
                var dt = ds.Tables["BoundingBox"];
                var sLat = Convert.ToDouble((dt.Rows[0]["SouthLatitude"]).ToString().Replace(".", ","));
                var wLon = Convert.ToDouble((dt.Rows[0]["WestLongitude"]).ToString().Replace(".", ","));
                var nLat = Convert.ToDouble((dt.Rows[0]["NorthLatitude"]).ToString().Replace(".", ","));
                var eLon = Convert.ToDouble((dt.Rows[0]["EastLongitude"]).ToString().Replace(".", ","));
                var dtN = ds.Tables["Location"];
                txtSearched = dtN.Rows[0]["Name"].ToString();
                env = new Envelope(wLon, sLat, eLon, nLat);
                return env;
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
                return null;
            }
        }

        private bool IsInSpain(double value, double min, double max)
        {
            return (min <= value && max >= value);
        }

Es importante reseñar, que estamos haciendo trabajos de remplazo de texto, "." por ",", para salvar la diferencia cultural de los números, y espacios por "%20" para montar la url sin espacios.

Finalmente agregamos una nueva capa gráfica al mapa, con el nombre que nos devuelve el servicio, para mostrar lo que realmente ha localizado.

#HowTo: Hacer mapping y no morir en el intento 7/7

Mon, 27 Aug 2012 00:00:00 GMT

ESRI también provee varios APIs para la web y para escritorio, que mediante controles de alto nivel, permiten proveer cartografía a nuestros usuarios. Aunque claro, llevan algunas limitaciones, que en algunos casos sólo puedes resolver con un licencia de ArcGIS Server, que por supuesto ya no es gratis.

Ficha técnica:

ESRI API 3.0 for Silverlight
C#.NET (4.0)

He seleccionado este API, aunque Silverlight ya no es una prioridad para el gigante de Redmond, el código que vamos a generar servirá para enlazar con el siguiente post, ya que el código XAML y el code behind serán aproximadamente los mismos.

Lo primero que hemos de hacer es descargar el API de la página de descargas de ESRI, si no eres usuario, te puedes registrar rápidamente para descargarlo.

Una vez descargado, procedemos a instalar.

Creamos un nuevo proyecto de Silverlight / ESRI Standard Map Application

Una vez creamos el proyecto, seleccionando una de las plantillas que nos ofrece ESRI, debemos actualizar las referencias de Microsoft.Expressions.Interactions y System.Windows.Interactivity. Generamos y voila, tenemos mapa.

Esta plantilla está muy bien, tenemos un control de mapa, con un montón de elementos y funcionalidades, qué a priori, a parte de estar muy estético, puede resultar que no nos sirva para nada. Así, que vamos a crear nuestra propio control al que le iremos añadiendo los componentes que consideramos necesarios. Para ello, agregamos un nuevo proyecto de Silverlight.

Si la instalación del API ha sido correcto, tendremos en nuestro cuadro de herramientas los controles de ESRI, pero sino es así. Lo más sencillo, y más "limpio" es agregar las referencias a mano, para ello, agregamos la referencia ESRI.ArcGIS.Client a nuestro proyecto, y a nuestro marcado.

Una vez lo hemos agregado, incluimos un nuevo control de mapa en el grid.

Y con esto, tenemos un control de mapa pelado sin ningún componente más. Ahora lo que vamos a hacer es incluir un servicio WMS, concretamente el del PNOA, el cual nos va a permitir cargar el servicio web del plan nacional de ortofotografía aérea española. Para ello, agregamos otra referencia al proyecto de Silverlight, ESRI.ArcGIS.Client.Toolkit.DataSources, y dejamos el control de mapa sin ninguna capa, ya que vamos a agregar el servicio wms desde el código.

            var wms = new WmsLayer
                          {
                              Url = "http://www.idee.es/wms/PNOA/PNOA",
                              SkipGetCapabilities = false,
                              Layers = new string[] { "PNOA" },
                              Version = "1.3.0",
                              ProxyUrl = "http://tusitio.web/proxy.ashx"
                          };

El API de Silverlight, requiere de un proxy para realizar las peticiones al servicio WMS, para ello ESRI sirve un ejemplo para que puedas incluirlo en tu sitio web, más información.

Después continuamos creando una capa KML, y agregando tanto el sevicio WMS como el KML que hemos agregado.

            var kml = new KmlLayer
                          {
                              Url = new Uri("http://tusitio.web/fichero.kml"),
                              ProxyUrl = "http://tusitio.web/proxy.ashx"
                          };
            MyMap.Layers.Add(wms);
            MyMap.Layers.Add(kml);

Por último incorporamos al control de usuario una barra de progreso para que nos indique el proceso de carga de las capas, un control de navegación, la leyenda y la escala.

#HowTo: Hacer mapping y no morir en el intento 6/7

Thu, 23 Aug 2012 00:00:00 GMT

Una vez vistos los fáciles ejemplos para realizar mapping en tu sitio web, sin necesidad de invertir muchísimo tiempo, podemos incluir un mapa muy sencillo, que nos permite mostrar la ubicación de nuestra empresa, o en definitiva lo que deseemos.

En la actualidad, desde la llegada de los smartphone, una de las prioridades es la geolocalización del usuario, para así poder mostrar contenidos en función de la ubicación en la que se encuentra el consumidor. No solo podemos incluir mapas, sino que también información o publicidad acorde a la zona.

HTML5 entre sus novedades propuestas, incluye acceso a la geolocalización, para ello utilizaremos una propiedad del navegador, "geolocation", la cual nos va a permitir acceder a la posición actual del cliente web. Acceder a esta información, requiere que el usuario acepte dar esta información mediante un prompt que aparece en el momento que consultamos esta propiedad.

Para ello verificamos que tiene geolocalización, una vez comprobado, accedemos a la posición, y guardamos la latitud y la longitud en dos input en nuestra página a modo de ejemplo, más adelante, podemos ver que trabajando con esas coordenadas, podemos tener bastante juego.

Ficha técnica:

HTML5
Google Maps / Bing Maps

Vamos a empezar con el API de Google, para ello, lo primero es agregar la clave pública de nuestro sitio. Una vez agregado, creamos una capa con el id "mapGoogle" a la que vamos a cargar el API de Google con las coordenadas que nos ha proveído la geolocalización.

  var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    var myOptions = {
        center: new google.maps.LatLng(lat, lon),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
    var mapGoogle = new google.maps.Map(document.getElementById("mapGoogle"), myOptions);

Después agregamos otra capa "mapBing" la cual va albergar el API de Bing Maps, para ello debemos agregar la referencia al JavaScript y hacemos un "getMap" incluyendo la Key de Bing asociada a nuestro sitio web.




Geolocation(HTML5)

#HowTo: Hacer mapping y no morir en el intento 5/7

Sun, 19 Aug 2012 00:00:00 GMT

Siguiendo con el API de Bing Maps, vamos a incluir un fichero KML, el cual nos va a permitir cargar nuestra propia cartografía con los detalles o elementos que hayamos identificado o dibujado en nuestro mapa.

Con el mismo ejemplo, realizamos varios cambios, el primero es indicar la versión del API 6.3, el anterior artículo contiene referencias al API 7.0, y agregamos al código unas nuevas variables, una de tipo VEShapeLayer y otra de tipo VEShapeSourceSpecification, ésta última nos permitirá agregar un kml, mediante un valor del enumerado VEDataType, que permite importar un xml.



    
        Mapa KML

Una vez sustituido el texto "TU_FICHERO_KML", por tu documento KML. Al final obtenemos un mapa como el siguiente:

Hay algunos intérpretes de GeoRSS, que haciendo transformaciones desde KML a CSV, por XSL, y desde CSV, mediante el intérprete poder visualizar los datos en el API.

Más información del API 6.3: http://msdn.microsoft.com/en-us/library/bb429619 e información y ejemplos del SDK 7.0 http://www.bingmapsportal.com/isdk/ajaxv7

#HowTo: Hacer mapping y no morir en el intento 4/7

Tue, 14 Aug 2012 00:00:00 GMT

Microsoft también provee su propio API de mapas, Bing, el cual posee funciones muy similares al de Google, y otras distintas propias.

En definitiva, escoger uno u otro es una cuestión de gustos, o de afinidad con un proveedor u otro. Por lo que, escojamos el que escojamos, tendremos funciones típicas de APIs de mapas, y otras relacionadas con las tecnologías que vende el proveedor.

Ficha técnica:

Bing Maps
Ajax 7.0

Lo primero que hay que hacer, al igual que con los APIs de Google, es registrarse como desarrollador de Bing. Para ello accedemos aquí y nos registramos como desarrolladores de Bing para así poder obtener la clave para nuestro sitio web.

En este PowerPoint se detalla el proceso completo de registro y obtención de la key necesaria para nuestro sitio web.

Nos logamos con nuestro live id, si no tienes una cuenta puedes crearla desde aquí no es necesario hacer una nueva cuenta de correo puedes asociar tu propia dirección de correo actual.

Una vez dentro del centro de cuentas de map, creamos una nueva key, la cual introducimos el nombre que le queremos poner a nuestra aplicación, la url y el tipo.

En este caso he seleccionado para desarrollador, que no te permite exceder más de 125.000 sesiones o 500.000 transacciones en periodos de 12 meses, lo cual para lo que nos ocupa es más que suficiente.

Una vez obtenida la clave empezamos con la "chicha". En el siguiente ejemplo, introducimos nuestra key en las credenciales donde sustituiremos 'TUCLAVE'.



    
        Nuestro mapa

Finalmente tenemos algo similar a esto:

#HowTo: Hacer mapping y no morir en el intento 3/7

Thu, 09 Aug 2012 00:00:00 GMT

Una alternativa de Google a Maps, es emplear el API de Google Earth, el cual le da la funcionalidad 3D a nuestro mapa. El inconveniente de emplear este API es que requiere que el usuario tenga instalado un complemento de Google Earth, y obligar al usuario que se instale un plugin no suele ser bien recibido, bien por el desconocimiento y el miedo a instalar algún malware, o bien, porque no quiere tener un plugin que por lo pronto a él, únicamente le sirve para nuestro sitio.

La implementación del API, es similar a la que hemos visto de Google Maps, deberemos establecer nuestra clave del sitio web obtenida en la consola de Google Code https://code.google.com/apis/console/, además debes configurar la variable myKml con la url del KML que quieres integrar, y picar un código parecido a este.

El resultado final es el siguiente:

#HowTo: Hacer mapping y no morir en el intento 2/7

Sat, 04 Aug 2012 00:00:00 GMT

Siguiendo con el API de Google, vamos a integrar un fichero KML, el cual permitirá centrar el mapa en los elementos de la capa, con la simbología que hayamos predefinido previamente.

Implementamos un código similar a este, donde como siempre, debemos establecer el código de nuestra API para el sitio web. Cuando cargamos una cartografía en el API no es preciso establecer en myOptions el zoom o las coordenadas, porque el propio control se centrará en la cartografía que le proveamos (en el script, kmlLayer).

Por supuesto, podemos agregar tantas capas cartográficas como deseemos, pero lo más recomendable es intentar integrarlas todas en un mismo documento KML, porque la implementación de muchas capas, requiere un aumento en el tiempo de carga del control, ya que ha de solicitar más ficheros, interpretarlos y por supuesto recalcular la extensión del zoom.

#HowTo: Hacer mapping y no morir en el intento 1/7

Wed, 01 Aug 2012 00:00:00 GMT

Muchas veces, al acceder a una página de una empresa, encuentras que tiene una dirección escrita de donde se encuentran sus oficinas, y si quieres localizarla, has de entrar en otro sitio web como Google Maps o Bing Maps, para ubicar esa empresa. Dadas las facilidades que nos brindan gigantes como Google o Microsoft, mejorar la imagen de nuestra empresa, proveyendo un simple mapa, es algo que está en mano de los desarrolladores, y que implementando unas pocas líneas de código, podemos mejorar la imagen de nuestra empresa, a la par que evitamos que el usuario deje de visualizar nuestro sitio web.

Algunas veces por desconocimiento, y otras por comodidad, se emplean APIs oficiales adaptadas por terceros, que evidentemente unas veces cumplen con las expectativas y otras obligan a integrar un componente muy complejo donde realmente se precisa algo mucho más sencillo, y otras por el contrario no cumplen con todos los requisitos y requiere al final más trabajo del que se estimaba en un principio.

Ficha técnica:

Google Maps API v3
HTML + Javascript

Para utilizar los API de Google, es preciso, en primer lugar hay que visitar el APIs Console de Google (https://code.google.com/apis/console/), y crear un nuevo proyecto.

Después debemos activar el servicio de Google Maps API v3 y aceptamos el contrato, Google advierte entre otras cosas, de que sólo admite un máximo de 25000 peticiones al día, y que no se puede utilizar con fines comerciales, lo más recomendable, si no estás seguro es leerlo con detenimiento.

Una vez aceptado vamos a la sección API Access y creamos una nueva Browser key con la dns del sitio web para el que estamos desarrollando el mapa. Nota: Generalmente no es necesario generar una clave específica para localhost (127.0.0.1), pero si lo fuera con crear una nueva clave bien IP, bien browser, estaría listo.

Por último implementamos un código similar a este, sustituyendo TU_CODIGO_API y TRUE_O_FALSE, por el código de la API y con un verdadero o falso.