Conectándonos desde Metro a un servicio web con WCF

El enfoque de las aplicaciones Metro está centrado en el contenido más que en el continente, aunque en esta serie de artículos se han visto varias características que hacen únicas las aplicaciones de Windows 8. En este artículo se verá cómo crear un servicio WCF muy simple, y acceder a él desde una aplicación Metro.

Para este artículo se necesita la versión completa de Visual Studio 11, que se puede desde aquí ya que la versión que se incluye está limitada a creación de aplicaciones Metro únicamente.

Creando el servicio

Un servicio web es un conjunto de funciones que expone un servidor, y a las que puede acceder un cliente. Para crear un servicio WCF basta con agregar un nuevo proyecto a la solución, de tipo WCF Service Application:

De los elementos creados, los más interesantes son los siguientes:

  • IService.cs: Contiene la interfaz pública que expondrá el servicio.
  • Service.svc: Contiene la implementación de lo expuesto en la interfaz.

Además de estos elementos, se agrega una clase Project que servirá como ejemplo para recibir un dato compuesto del servidor.

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

namespace TareasService
{
    public class Project
    {
        public int ProjectId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }
}

Finalmente, se crea un método para poder obtener una lista de proyectos del servidor:

...
public IEnumerable<Project> getProjects()
{
    return new List<Project>{
        new Project{Name="Proyecto1"},
        new Project{Name="Proyecto2"}};
}
...

En el fichero de interfaz, se agrega la cabecera de la función:

...
[OperationContract]
IEnumerable<Project> getProjects();
...

Al compilar y ejecutar el proyecto se mostrará una ventana del navegador con instrucciones para consumir este servicio de manera manual.

Consumiendo el servicio

Para consumir el servicio se ha de agregar una referencia al proyecto, haciendo click derecho en el proyecto y seleccionando la opción “Agregar referencia de servicio“. En la ventana que surgirá, al hacer en el botón “Discover” se mostrará una referencia a todos los proyectos de tipo servicio web que se hayan creado recientemente como se muestra en la imagen:


Una vez pultado OK se habrá importado la referencia en el proyecto y se podrán usar las funciones definidas anteriormente.

En el caso de aplicaciones Metro, la técnica obliga a usar los métodos asíncronos, siendo la manera de tratar las funciones diferente, como se muestra en el código.

...
    TaskServiceClient client = new TaskServiceClient();
    Task<List<Project>> results = client.getProjectsAsync();
    List<Project> result = results.Result;
    this.Items = result;
    client.CloseAsync();
...

Para poder visualizar la información se emplea el enlace a datos o databinding, una característica de los controles XAML que permite definir directamente la correspondencia entre los distintos elementos de una clase y los campos a visualizar de un documento XAML.

...
<DataTemplate x:Key="GroupedItemTemplate">
    <Grid HorizontalAlignment="Left" Width="252" Height="252">
        <StackPanel Grid.Column="1" Style="{StaticResource OverlayStackPanelStyle}">
            <TextBlock TextWrapping="Wrap" Text="{Binding Name}"" HorizontalAlignment="Stretch" Height="60"/>
            <TextBlock TextWrapping="Wrap" Text="{Binding Description}" HorizontalAlignment="Stretch" Height="20"/>
        </StackPanel>
    </Grid>
</DataTemplate>
...

Importante: En Windows 8 será necesario abrir el puerto TCP del firewall para que la aplicación tenga acceso al servicio, de otra manera el sistema devolverá un error.

Con esto sería suficiente para que la aplicación tenga la capacidad de acceder a un servicio web. Con algo de práctica no será dificil tener un servicio un poco más complejo

Más información:

Un pensamiento en “Conectándonos desde Metro a un servicio web con WCF

  1. Pingback: Datos locales en aplicaciones Metro: Diccionarios clave-valor. | [email protected]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s