El desarrollo de aplicaciones Metro incluye algunos cambios relativos a la interoperabildad entre aplicaciones, lo que nos permite compartir imágenes, texto y multimedia entre aplicaciones mediante el uso del contrato Share, proporcionar una fuente de ficheros usando el contrato FilePicker, y la última opción, que es la que cubre este artículo, es la de poder realizar búsquedas en nuestra aplicación desde cualquier punto del sistema, y desde cualquier aplicación.
En este artículo se verá cómo agregar un contrato de búsqueda a un proyecto existente, MetroTask, así como la lógica necesaria para poder tener un ejemplo funcional.
Agregar el contrato
Para agregar el contrato de búsqueda, el proceso es el mismo que con el otros contratos, en un proyecto existente, se hace click derecho en el icono del proyecto, a continuación en Add new item… Posteriormente se selecciona Search Contract y se agrega a la solución.
Lo que se agregará al proyecto es un fichero xaml que contendrá la interfaz gráfica de búsqueda, así como el código fuente que procesará el término y mostrará los resultados.
En este caso, no es necesaria una configuración adicional, ya que el fichero appxmanifest, que contiene la configuración de declaraciones, capacidades y detalles como el nombre y el icono de nuesta aplicación, se actualiza automáticamente al agregar el fichero.
Tras agregarlo, se puede compilar el proyecto y ejecutarlo, para comprobar que se ejecuta correctamente, si carga el charm de búsqueda desde cualquier punto de la apliacación, o desde cualquier otro punto de la interfaz metro, lo que se mostrará será la siguiente imagen:
Una vez introducido el término de búsqueda, se mostrará una pantalla similar a la siguiente:
Enlazandolo con los datos
Para este ejemplo, agregaré al servicio web de Tareas una función para buscar proyectos, simplemente una pequeña selección, gracias al uso de LINQ. Con ello se puede hacer una consulta, y devolver solamente los proyectos que cumplan dicha consulta (por nombre, en este caso).
public IEnumerable<Project> getProjectByName(string name)
{
ProjectContext p = new ProjectContext();
return p.Projects.Where(proj => proj.Name.Contains(name)).AsEnumerable();
}
Una vez comprobado que el servicio funciona, se agrega en el código una nueva función para gestionar el contenido:
async void getProjectsByName(string search)
{
PageTitle.Text = "Proyectos (Cargando)";
TaskServiceClient client = new TaskServiceClient();
try
{
this.CollectionViewSource.Source = await client.getProjectByNameAsync(search);
client.CloseAsync();
PageTitle.Text = "Proyectos";
}
catch (Exception)
{
PageTitle.Text = "Se ha producido un error";
//Show a Message dialog
}
}
Posteriormente se agrega la siguiente línea dentro de la función «Activate»
getProjectsByName(queryText);
Finalmente, se agrega el siguiente GridView (tomado de la página «CollectionPage.xaml»)
<GridView x:Name="ItemGridView" ItemsSource="{Binding Source={StaticResource CollectionViewSource}}" ItemTemplate="{StaticResource GroupedItemTemplate}" ItemContainerStyle="{StaticResource GridTileStyle}" ItemsPanel="{StaticResource GridItemsPanelTemplate}"
Grid.Row="1" Background="{StaticResource PageBackgroundBrush}" BorderThickness="0" VerticalAlignment="Stretch"
Margin="0"/>
Esta vista cargará el estilo del fichero App.xaml, usando la misma visualización que la página de colección. Un par de detalles gráficos más, y el resultado es el siguiente:
Conclusiones y posibles mejoras
En este artículo se ha visto cómo agregar la capacidad de búsqueda a la aplicación, y cómo usarla desde cualquier lugar del sistema. Como posibles mejoras está el uso del cuadro de sugerencia de búsqueda, que mostraría los datos según los vamos escribiendo (ver enlace al final del artículo), y se pueden filtrar los resultados una vez obtenidos, ya que el botón que indica All(0) puede llegar a ser bastante descriptivo :).
rlbisbe @ dev 