Evento Desarrollo Metro con Windows 8 UPM: Materiales

El pasado 28 de octubre tuve la ocasión de asistir a la Escuela Técnica Superior de Ingenieros de Telecomunicación (ETSIT) de la Universidad Politécnica de Madrid, invitado por la rama universitaria del IEEE de la UPM (el cubo, como se le conoce de manera coloquial) que incluye el DotNetClub de esa escuela.

Durante una hora y media, y cuelgues del sistema mediante (recordemos que es una Developer Preview) pudimos ver las características más notables del sistema, las charms, los tiles, la pantalla sin marco, los contratos. Vimos cómo simular la rotación de la pantalla usando el simulador y finalmente pudimos ver un ejemplo de uso (mi querida aplicación de gestión de tareas).

Gracias a Jose Angel, coordinador del DotNetClub de la UPM por la invitación y a los asistentes, que tiene mérito estar viendo una charla técnica a la hora de comer un viernes.

Más información

Ejemplo práctico de desarrollo Metro: MetroTask

Estos días, en la serie de desarrollo para Windows 8 usando la interfaz Metro se han visto varias características que lo hacen bastante diferente, y qué mejor manera que mostrarlas que con un ejemplo completo?

Para ello ha surgido MetroTask, un simple gestor de tareas, organizadas en proyectos. Consiste en 3 proyectos:

  • Una aplicación Metro (C#).
  • Un servicio web WCF.
  • Una aplicación de consola que uso para depuración.
Para poder abrir el proyecto, se necesita Windows Developer Preview, así como Visual Studio 11 Developer Preview.

Es un proyecto en curso, y por ahora es poco funcional, pero espero que se convierta en un ejemplo completo que poder mostrar y continuar su desarrollo.

Entre las características comentadas, y que se incluyen, están:

  • Conexión a un servicio WCF
  • Uso de la App Bar para crear tareas
  • Uso de la opción de compartir para crear tareas a partir de otras aplicaciones.
Las características que pienso incluir de cara a una primera versión estable son:
  • Creación, edición y eliminación de tareas.
  • Creación, edición y eliminación de proyectos.
  • Alertas cuando la tarea caduque.
  • Uso de los tiles para recuento de tareas pendientes, y similar.
Por ahora la funcionalidad, como he comentado antes, es limitada, por lo tanto solamente se pueden agregar tareas a proyectos actuales, que solo se pueden editar en la base de datos de manera manual (estoy trabajando en ello, y portar la App Bar a la otra ventana).
Cualquier funcionalidad adicional, o crítica sobre el estilo de código será amablemente recibida, se puede dejar el comentario aquí en el blog, o en la página del proyecto en CodePlex.

Más información

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: