Consumir ficheros en aplicaciones Metro

En artículos anteriores se ha visto cómo compartir contenido desde nuestras aplicaciones así como consumir contenido de otras. En este artículo y en el siguiente se hablará de cómo consumir ficheros del sistema de archivos, y como proporcionar opciones para que otras aplicaciones puedan hacerlo usando el contrato File Picker.

Consumiendo ficheros

Para poder consumir ficheros solamente es necesario cargar un menú, de la misma manera que lo haríamos con una aplicación Windows Forms.

Lo primero necesario es una referencia a Windows.Storage.Pickers así como a Windows.Storage

Tras agregar la referencia, el siguiente paso es cargar el filePicker, para ello, se puede asignar a un botón, enlazandolo con el evento Click, o también se podría cargar automáticamente (por ejemplo, si estuviese vacía una base de datos, para una importación inicial). Estos métodos, como se ha visto en otros artículos relacionados con Metro, deberán ser asíncronos.

Finalmente se podrán establecer filtros para seleccionar una extensión concreta, la manera de mostrar el menú de selección, o si lo que se carga es una selección simple o una múltiple.

De esta manera para seleccionar un único fichero txt situado en la biblioteca Documents, y que se muestre como una lista de ficheros, el código a usar será este:

async void Button_Click(object sender, RoutedEventArgs e)
{
    FileOpenPicker openPicker = new FileOpenPicker();
    openPicker.ViewMode = PickerViewMode.List;
    openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    openPicker.FileTypeFilter.Add(".txt");
    StorageFile file = await openPicker.PickSingleFileAsync();
}

Como alternativas a este código, si el objetivo es cargar múltiples ficheros, se ha de cambiar la última llamada del código por pickMultipleFilesAsync(). En caso de que el contenido sean imágenes, lo más recomendable sería cambiar la cuarta línea del código para que se mostraran como miniaturas, para lo que se usaría PickerViewMode.Thumbnail.

En el próximo artículo se mostrará cómo se pueden proporcionar ficheros a otras aplicaciones y al sistema como si de otro origen de datos se tratara.

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:

Interacción en Metro: Application Bar

En el artículo anterior se ha visto cómo agregar un menú contextual a una aplicación Metro. La otra interacción disponible es la Application Bar, que sustituye la barra de menús y las diferentes barras de herramientas. En este artículo se verán las caracteristicas que hacen diferente la Application Bar y cómo implementar una.

Características

La Application Bar se puede situar encima o debajo de la pantalla, ya que los laterales están reservados para el cambio de aplicaciones y las diferentes charms, de las que se ha hablado en este artículo.

Otra característica, es que es deseable, y así se muestra en las aplicaciones de ejemplo, que los controles se sitúen a los lados de la pantalla, ya que, al estar enfocado a tablets, los laterales hacen el acceso táctil más fácil al sostener el ordenador con ambas manos.

Además, usando este control se podrán mostrar notificaciones, como la que aparece al terminar de descargar un fichero en Internet Explorer.

Implementación

Para poder implementar esta funcionalidad se agrega un control de tipo ApplicationBar a la página, dentro del contenedor principal (Un grid o un StackPanel). En este control se especifican las propiedades como la alineación, el color de fondo, su persistencia y el estado que tendrá al cargar la página.

<ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">

El resto del comportamiento es similar a cualquier otro contenedor de XAML como se aprecia en el código completo:

     <ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">
            <ApplicationBar.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="SegoeUI" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </ApplicationBar.Resources>
            <Grid Margin="15,0,15,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="90" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="90" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="0">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="Back" />
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="4">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="View Full" />
                </StackPanel>
            </Grid>
        </ApplicationBar>

El resultado será una barra como la que se muestra en la siguiente pantalla:

Mas información en MSDN:

Capacidad de compartir para nuestra aplicación Metro

Una de las opciones que incorpora Windows 8, es el chime o pestaña Share, que permite que nuestras aplicaciones puedan enviar contenidos a otras de una manera sencilla. Para ello, tanto la aplicación origen como la destino tiene que tener la capacidad de aceptar elementos (ShareTarget) o de enviarlos (SendTarget).

Leer más “Capacidad de compartir para nuestra aplicación Metro”