Etiqueta: vs11

Microsoft Tech Days 2012

El pasado 22 de Noviembre, un año más, Microsoft España nos presentaba a todos los miembros de las diferentes comunidades (MSP, Technical Rangers, MVP, MAP, Dotnetclubs, grupos de usuarios y todo aquel que quisiera venir) las novedades en cuanto a Visual Studio, Azure, Windows 8 y Windows Phone, todo bajo la dirección de Jose Bonnin y aderezado con un poco de humor y magia para concluir la velada.

El evento con una keynote donde a golpe de datos y estadísticas Jose Bonnin nos contaba cómo la visión de la empresa ha cambiado los últimos tiempos, y que ya es solamente el recuerdo de aquel gigante gris de los noventa, por cambiar han cambiado hasta el logo! (Yo me siento un poco nostálgico por aquél clásico en negrita y cursiva). Esta presentación pasó del clásico powerpoint a un HTML5+CSS3+Javascript+Video…

Tras la keynote nos dividimos en dos grupos. En mi caso me quedé en las charlas de desarrollo, aunque había un track de IT y un par de laboratorios de desarrollo de aplicaciones.

La primera charla que me sorprendió gratamente nos enseñó cómo portar aplicaciones desarrolladas para Windows Phone 7.5 a Windows Phone 8 y finalmente Windows 8, reutilizando la mayor cantidad de código disponible. Para ello tenían una aplicación funcionando, desarrollada mediante el el patrón MVVM (Model-View-ViewModel), y la fueron adaptando a las diferentes plataformas:

  • Convirtieron la aplicación a Windows Phone 8 y adaptaron el live tile a los nuevos formatos.
  • Crearon una Portable Library para evitar repetir código entre estas plataformas. Este tipo proyecto además, garantizaba que el código fuera compatible con todas ellas.
  • Crearon una versión para Windows 8, reutilizando los modelos y los view Models. En Windows 8 había un problema, que todas las API de acceso a disco/red/etc son asíncronas, con lo cual había que cambiar el proyecto de la Portable Library para permitir este tipo de interacción sin perder la compatibilidad con otras plataformas.
  • Finalmente, mediante Azure, crearon un servicio para almacenar los datos generados por las aplicaciones, y poder acceder a ellos desde cualquier plataforma.

Una charla muy dinámica e interesante, que nos fue llevando paso a paso por cada una de las etapas de la migración.

Tras esta, una sesión sobre las novedades que trae Visual Studio 2012 y Team Foundation como plataforma ALM (Application Lifecycle Management o gestión del ciclo de vida del producto). Entre las novedades que comentaron me parecieron destacables:

  • Mejoras en Intellitrace para poder reproducir fallos incluso en producción.
  • Métricas de código y análisis estático del mismo, poder saber qué código está cubierto por tests, medir la complejidad ciclomática…
  • Soporte para tests unitarios con C++, así como para frameworks de terceros como nUnit o xUnit.
  • Coded UI, la manera de generar tests de interfaz, con soporte para aplicaciones Web.

La última charla altamente recomendable estuvo protagonizada por nuestro «Scott Hanselman» vasco, David Salgado. Bajo el nombre de «Orgullo Backend», nos comentó las novedades de Azure, la facilidad de desplegar máquinas virtuales con linux, así como desplegar sitios web vía git, que si recordamos, no hace demasiado tiempo los despliegues se realizaban a mano generando un paquete con Visual Studio y subiéndolos mediante el portal de Azure, cómo ha cambiado todo… Además hablamos de SignalR que nos permite establecer una comunicación en tiempo real entre clientes y servidor, diseñando un pequeño sistema de chat en tiempo record (y cómo no, colgándolo en su blog horas más tarde).

Este evento lo cerró el Mago More con un poco de Magia 2.0 y algo de humor, que no debería faltar nunca.

Tras el evento, el Community Day, con algunas horas para ver a viejos amigos y conocer a gente que viene, que la familia de las comunidades Microsoft se hace más grande cada año.

Las charlas se grabaron y deberían estar disponibles pronto.

Estado de conexión para aplicaciones Metro

Uno de los requisitos que necesita cumplir nuestra aplicación Metro para su correcta validación es que sea capaz de comportarse correctamente sin conexión a internet. En este artículo veremos 2 maneras de obtener esta información, o bien de manera activa, solicitando el estado del perfil de conexión, o bien de manera pasiva, suscribiendonos a un evento.

Solicitando el perfil de conexión

El siguiente código fuente hace uso de la clase NetworkInformation para consultar el tipo de perfil que tiene la aplicación. En caso de ser nulo, significa que el sistema no tiene ninguna manera de conectarse a Internet.

var profile = NetworkInformation.GetInternetConnectionProfile();
if (profile == null)
{
  //No tenemos ninguna conexión disponible.
}
else
{
  //Al parecer, tenemos internet, pero tenemos que ver que tipo.
}

Sin embargo, el hecho de tener un perfil de conexión no nulo no garantiza la correcta conexión a la red, ya que podemos tener un perfil válido sin conexión. Esto es lo que comprueba la segunda parte del código mostrado.

  var level = profile.GetNetworkConnectivityLevel();
  if(level == NetworkConnectivity.LocalAccess || level == NetworkConnectivityLevel.None)
  {
     //Tenemos conexión, pero no tenemos acceso a internet.
  }

Deberemos ser capaces de informar correctamente a nuestros usuarios del estado de la conexión de manera no intrusiva, este último parámetro es muy importante.

Recibiendo de manera activa los cambios que ocurran con la conexión

La segunda manera de saber el estado de la red, es que nuestra aplicación informe al usuario si existen cambios en la red (cambio de conectado a desconectado y viceversa). Afortunadamente la clase NetworkInformation proporciona un evento al que podemos suscribirnos y obtener esta información:

En la página principal. nos suscribimos al evento:

public MainPage()
{
  this.InitializeComponent();
  NetworkInformation.NetworkStatusChanged += NetworkInformation_NetworkStatusChanged;
}

Posteriormente, hacemos una llamada al dispatcher para poder actualizar la interfaz de usuario (ya que, de otra manera obtendremos una excepción):

async void NetworkInformation_NetworkStatusChanged(object sender)

  await Dispatcher.RunAsync(CoreDispatcherPriority.Normal,UpdateUI);
}

Finalmente, actualizamos la interfaz de usuario con el mensaje más apropiado:

private void UpdateUI()
{
  //Informar al usuario del cambio de condiciones de la red.
}

Conclusiones

Estos dos ejemplos los podemos combinar para mejorar la experiencia del usuario, y con ella la calificación de nuestra aplicación,

Más información:

Datos locales en aplicaciones Metro: Diccionarios clave-valor.

Hemos visto en artículos anteriores que es posible acceder a datos de un servicio remoto usando WCF, pero también tendremos casos donde nuestra aplicación necesitará guardar datos de manera local, ya sean opciones de configuración o ficheros locales.

En este artículo veremos cómo guardar datos empleando una de las maneras que nos ofrece WinRT, a través de diccionarios.

Guardando los datos

En primer lugar, agregar la instrucción using Windows.Storage; al fichero, para poder acceder a los detalles de la clase.

Para guardar los datos iremos al método OnSuspending:

void OnSuspending(object sender, SuspendingEventArgs e)
{
    //TODO: Save application state and stop any background activity
}

Dentro de este método accedermos a la variable que contiene la información local de nuestra aplicación:

ApplicationDataContainer localSettings = ApplicationData.Current.LocalSettings;

En esta variable podremos, entonces, asignar los valores a la misma de esta manera:

localSettings.Values["tipoEntero"] = 10;
localSettings.Values["tipoString"] = "Una cadena de texto";

Con estas líneas, los datos se guardarán cuando la aplicación salga de primer plano. Recordemos que la aplicación no recibirá ningún aviso cuando, por limitaciones de memoria u otras causas la aplicación se cierre.

Cargando los datos

Para acceder a los datos cuando se vuelva a cargar la aplicación, se puede emplear el método OnLaunched, que carga los contenidos que necesita nuestra aplicación, y posteriormente lanza la pantalla inicial:

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    ...
}

La manera de acceder a los datos no podía ser más simple, una vez obtenida la variable localSettings como se ha mencionado anteriormente, se pueden acceder a los datos de la siguiente manera:

object valor = localSettings.Values[«valor»];

//Importante comprobar si tenemos el valor, ya que si se intenta hacer un casting antes se provocará una excepción.
if(valor != null)
{
    //Operar con valor (casting, etc...)
}

Conclusiones

Almacenar claves y valores en Metro es una operación muy sencilla que nos permite almacenar las opciones de configuración de nuestras aplicaciones. No es la única, ya que se pueden almacenar y cargar ficheros de texto, o usar estructuras más complejas, dejando esto último para el próximo artículo.

Como extra interesante se recomienda comprender cómo funciona el ciclo de vida de una aplicación Metro, para lo cual recomiendo este artículo de Josué Yeray, donde explica con detalle los diferentes escenarios que se pueden encontrar.

Referencias

Evento: Metro en Valencia

El pasado 3 de Abril me fui a la ETSE (Escola Tècnica Superior d’Enginyeria) de la Universidad de Valencia para hablarles de Metro, de desarrollo de aplicaciones para Windows 8, y de por qué es importante dar difusión al proyecto.

Tuvimos un interesante debate sobre qué tipos de aplicaciones encajan en la filosofía Metro y cómo un juego como Cut the Rope respeta esa filosofía, pese a que no tiene nada que ver con lo que esperamos de una aplicación de estilo metro, es decir, una tipografía clara, unos colores vivos, el número justo y necesario de opciones, entre otras.

Aquí dejo la presentación realizada con los ejemplos de código.

Ejemplos

Gracias a Samuel por la invitación y enhorabuena por la organización.

Eventos esta semana: Windows 8 por partida doble!

Esta semana (mañana sin ir más lejos) estaré dando un par de charlas de desarrollo con Windows 8 en dos localizaciones muy singulares.

Primera Ronda: 12:00 en la E.U.I.

La primera, a las 12h en la Escuela Universitaria de Informática de la UPM (cómo llegar) donde la pasada semana se organizó el CodeMotion. En esta charla, organizada por el DotNetClub de la facultad, daremos una introducción a Windows 8, veremos los diferentes lenguajes, las herramientas y algunos ejemplos de aplicaciones qué podemos hacer en él.

Segunda Ronda: 19:00 en Microsoft Ibérica

La segunda charla, a las 19h, en las oficinas de Microsoft Ibérica (cómo llegar) en La Finca en el marco del grupo de usuarios .net de Madrid Mad.Nug hablaremos, tras dar una introducción al sistema, de en qué nos afecta la llegada de WinRT como desarrolladores, y cómo sacarle provecho a las mejoras introducidas tanto a nivel de interfaz, interacción con el usuario y a nivel de código interno. Dejo el enlace de inscripción al evento (recomendable para agilizar el proceso en recepción) así como cómo llegar.

Más información y registro: Mad.Nug

Navegación entre páginas con Metro en C#

Salvo que estemos desarrollando una aplicación tremendamente sencilla, siempre tendremos la necesidad de cambiar entre diferentes ventanas de la misma. En este artículo hablaremos de navegación entre diferentes páginas de una misma aplicación Metro.

Introducción

Las aplicaciones en Windows 8 se caracterizan por tener una única pantalla mostrándose cada vez, siguiendo el estilo Metro, esto no implica que nuestras aplicaciones tengan que tener solamente una página, sino que tendremos que contar con un flujo de navegación, como muestra la siguiente imagen:

Flujo de navegación en una aplicación Metro
Flujo de navegación en una aplicación Metro

La primera idea de cómo ocurre la navegación la vemos en el proceso principal que carga la misma (situado en App.xaml.cs) y que contiene el método OnLaunched, que establece la página principal. Se genera una primera instancia del marco principal (Frame), y mediante este marco se navega a una nueva página, que es del tipo BasicPage1, que es la que se solicita en este caso como página principal.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    // Create a Frame to act navigation context and navigate to the first page
    var rootFrame = new Frame();
    rootFrame.Navigate(typeof(BasicPage1));

    // Place the frame in the current window and ensure that it is active
    Window.Current.Content = rootFrame;
    Window.Current.Activate();
}

Para realizar la navegación entre varias ventanas de una aplicación se podrá reusar parte de este código, como muestra la siguiente línea, que se puede introducir dentro del cuerpo de cualquier función como resultado de la acción de un botón, por ejemplo.

    this.Frame.Navigate(typeof(Page2));

Al ejecutarse esta función, se selecciona la página actual, seguidamente se recupera el Frame correspondiente (que hemos visto cómo se creaba anteriormente) a partir del cual se navega a otra página, en este caso definida como Page2.xaml.

Entrada y salida en las páginas

Al igual que con Windows Phone (como comentábamos en este artículo), al navegar hacia o desde una página se ejecutan los comandos:

  • OnNavigatedTo (al convertirse en la página en primer plano)
  • OnNavigatedFrom (al abandonar el primer plano)

Este método nos puede ser de utilidad para realizar carga de datos, o para guardar el contexto actual al abandonar la misma.

Parámetros

Otra de las características de la navegación entre las diferentes páginas de Windows 8, es que permite el paso de parámetros de una manera bastante más sofisticada que la que comentábamos anteriormente con Windows Phone 7, y es que permite pasar, como parámetros, cualquier clase de objeto, como se muestra en los siguientes ejemplos:

Página origen, se pasa como parámetro una cadena de texto:

    this.Frame.Navigate(typeof(OtraPagina),"Estamos pasando un texto");

Página destino, se recupera el parámetro enviado y se hace un casting a string para operarlo como cadena.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string name = e.Parameter as string;
}

Conclusiones

La navegación entre páginas en una aplicación Metro nos proporciona una capa más de abstracción para el desarrollo de Software, de la misma manera que se nos proporcionaba con Windows Phone. Podemos además agregar opciones de navegación como Back, Home y similares, que se proporcionan con las plantillas incluidas en Visual Studio 11 Express for Windows Phone.

Más información

En MSDN:

Live Tiles en Metro II, Tiles secundarios y tamaño doble

En el artículo anterior se veía cómo personalizar el tile principal de nuestra aplicación para agregar contenido dinámico. Sin embargo, otra de las opciones que nos da Windows 8, al igual que Windows Phone 7, es la de crear accesos secundarios a nuestra aplicación. Además, en el caso de Metro para Windows 8 tenemos la posibilidad de usar un tile de tamaño doble, pudiendo así dar más información.

En este artículo se verá cómo usar un tile de tamaño doble para mostrar más información sobre la aplicación así cómo generar un tile secundario para nuestra aplicación.

Tiles secundarios

Un tile secundario proporciona la capacidad de agregar accesos a la pantalla de inicio que, al cargarlos, se dirijan a una sección concreta de nuestra aplicación (En el ejemplo iremos a un proyecto concreto). Al cargar la aplicación, es importante destacar que lo que se abrirá es una instancia nueva de la aplicación, es decir, el hecho de que el tile esté presente no implica que la aplicación esté ejecutándose en segundo plano.

El primer paso es agregar la referencia al espacio de nombres Windows.UI.StartScreen:

using Windows.UI.StartScreen;

Una vez agregada, se pasa a definir una variable de tipo SecondaryTile, que contendrá la siguiente información:

  • Título
  • Título secundario
  • Argumentos de activación (donde podemos poner argumentos adicionales, como la ruta de la nueva página)
  • Logo

Posteriormente se genera una solicitud de creación de tile, que deberá ser aprobada por el usuario.

//Se establecen los atributos de activación
Uri logo = new Uri("ms-resource:images/Logo.png");
string tileActivationArguments = "ArgumentosDeActivacion";

//Se genera el tile
SecondaryTile secondaryTile = new SecondaryTile(MainPage.tileId,
    "Acceso Secundario",
    "Un ejemplo práctico",
    tileActivationArguments,
    TileDisplayAttributes.ShowName,
    logo);

//Se solicita al usuario que autorice la creación del tile, es importante la funcion de la palabra reservada await.
await secondaryTile.RequestCreateAsync();

El código mostrado se puede usar en un botón para agregar un elemento concreto, lo que implicará que, al pulsarlo, obtengamos la siguiente imagen:

Ventana de autorización para el live tile

Finalmente, quedaría comprobar los argumentos por los cuales se carga la aplicación. Esto se realiza en el método OnLaunched situado en el fichero App.xaml.cs, que recibe los argumentos de la aplicación, lo que permite procesar la información mediante el valor args.Arguments, que contiene los valores que hemos especificado antes, el resto es historia :)

Tiles de tamaño doble

Una ventaja adicional de Metro para Windows 8 son las tiles de tamaño doble, que permiten disponer de un espacio más amplio para mostrar mensajes. Es importante detallar que aunque cree un tile de tamaño doble será el usuario quien decida si usar la vista ampliada o reducida.

Para poder agregar un tile de tamaño doble, primeramente es necesario agregar un icono de tamaño doble (310×150) ya que de otra manera el sistema no será capaz de procesarlo. Para ello es necesario acudir a nuestro siempre socorrido Package.appxmanifest y agregar una imagen en el apartado Wide Logo:

El código empleado es muy similar al visto en el anterior artículo, con la diferencia de que este actualiza un texto, y la plantilla seleccionada es diferente.

void ActualizarTileDoble(string text)
{
    // Se obtiene desde la plantilla el documento XML que contendrá el XML del icono
    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    // Se edita el XML para agregar los datos deseados, en este caso será un atributo hijo que contendrá el texto
    XmlNodeList textElements = tileXml.GetElementsByTagName("text");
    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    // Se crea una notificación desde el XML editado
    TileNotification tile = new TileNotification(tileXml);

    // Finalmente, se actualiza el contenido de la aplicación
    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);
}

El resultado se muestra a continuación:

Resumen

En este, y en el anterior artículo se ha visto cómo crear tiles y usarlos desde la propia aplicación. El hecho de poder mostrar información contextual permite que los usuarios puedan acceder a información de la aplicación con ella cerrada, lo que permite que el usuario vuelva a ella, en comparación con otras que no posean estas características.

Más información:

Live Tiles en Metro, la herencia de Windows Phone

Si ha tenido la ocasión de ver un Windows Phone antes de Windows Developer Preview, habrá notado que las similitudes son mas que notables, en concreto en lo que se refiere a los iconos, unos elementos mucho mayores que lo habitual y que poseen información adicional. Para muestra un par de imágenes:

Windows Phone
Windows 8

En este articulo se verá una definición de estos iconos, los Live Tiles, sus características y como actualizarlos desde nuestra aplicación.

Los tiles: Definición y características

Un Tile (cuya traducción a castellano sería algo así como baldosa) es en su base un icono que identifica nuestra aplicación. Un Live Tile, es un icono vivo, que además de servir como primera imagen de nuestra aplicación permite que el usuario reciba información de esta aún estando cerrada. Se pueden actualizar los tiles de varias maneras:

  • En la aplicación principal, lo que se verá en este artículo
  • Usando un proceso en segundo plano, que servirá para actualizar la aplicación aunque ésta esté cerrada.
  • Mediante una notificación push desde un servidor remoto

Existen dos tipos de tiles:

  • Básico, de tamaño 150x150px y obligatorio para poder enviar la aplicación al marketplace.
  • Ancho (Wide), de tamaño 310x150px y opcional, permitirá mostrar un icono que ocupe dos espacios contiguos.
Además, existe como en Windows Phone la opción de crear Tiles secundarios con información adicional y que permitan un acceso directo a un apartado concreto de nuestra aplicación.

Implementación

Para este ejemplo, se parte de la aplicación MVCTask que estaba desarrollando, donde se actualizará el tile para que muestre el número total de proyectos. Este código se ejecutará tras recibir desde el servidor la información de proyectos.

        /// <summary>
        /// Actualiza el icono de la aplicación con un número
        /// </summary>
        /// <param name="numero"></param>
        void ActualizarIcono(int numero)
        {
            // Se obtiene desde la plantilla el documento XML que contendrá el XML del icono
            XmlDocument badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);

            // Se edita el XML para agregar los datos deseados, en este caso un número
            XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
            badgeElement.SetAttribute("value", "" + numero.ToString());
            badgeElement.SetAttribute("version", "1");

            // Se crea una notificación desde el XML editado
            BadgeNotification badge = new BadgeNotification(badgeXml);

            // Finalmente, se actualiza el contenido de la aplicación
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
        }

A diferencia de Windows Phone, en este caso las Tiles no se especifican de una manera explícita, sino que es necesario crear un texto en formato XML que contendrá esta información. Esto permite poder crear tiles más complejos que en el sistema móvil.

La función mostrada anteriormente obtiene el XML básico de un constructor, agrega el dato del número (en este caso value, que contendrá el número de proyectos obtenidos), se crea un nuevo elemento Badge a partir de este XML, y finalmente usando el BadgeUpdateManager, se actualiza el icono de la aplicación, quedando entonces de esta manera:

Icono sin indicador
Icono con indicador

 

 

 

 

 

 

Como se aprecia, el propio sistema se encarga de crear todo el estilo alrededor de la notificación, y se puede ver la diferencia entre los iconos.

Conclusiones

Los Live Tiles permiten conseguir una interacción con el usuario más allá de la de hacer de lanzador de la aplicación, lo que aumenta las posibilidades de que el usuario vuelva a ejecutarla respecto a aplicaciones que no posean estas características.

En el próximo artículo se verá cómo crear un tile de tamaño doble con más información, así como un tile secundario que acceda a un proyecto concreto.

Más información:

Panel de preferencias para nuestra aplicación Metro

El panel o Charm de preferencias, que se muestra al pulsar la combinación de teclas Windows + I o al seleccionar Settings en el menú de inicio, contiene la información de la aplicación, información genérica del sistema como wifi, brillo o estado de batería. Además de esta información, nuestra aplicación Metro puede colocar enlaces a secciones como las preferencias, acerca de, etc.

En este artículo se verá cómo agregar enlaces a este panel, y posteriormente cómo crear un panel de preferencias que se muestre u oculte usando estos enlaces. El código de este artículo está basado en la última versión de MetroTask, disponible en Codeplex, y en el estado en el que quedó en el anterior artículo.

Agregar los accesos

Para poder agregar los accesos al menú de preferencias primeramente se ha de obtener una referencia al panel de preferencias de la vista actual, siendo este dependiente de la página que se este mostrando.

Posteriormente se agregarán, a la colección ApplicationCommands, el comando deseado, para que se muestre en el panel. Además de agregar un campo que muestra el texto del comando o en este caso, un valor de la colección KnowSettingsCommand, Además, se agregará la llamada a una función que se ejecutará al pulsar sobre la opción:


public CollectionPage()
{
   ...
   SettingsPane pane = SettingsPane.GetForCurrentView();
   pane.ApplicationCommands.Add(new SettingsCommand(KnownSettingsCommand.About, About);
   ...
}

private void About(IUICommand command)
{
    //Aquí se situará la lógica de las preferencias
}

El resultado se aprecia a continuacíón. Este botón ejecuta el comando seleccionado, que sin duda podría cargar otra página con la configuración y las preferencias, pero los ejemplos mostrados nos dan la idea de que el panel de preferencias de nuestra aplicación debe tener un formato similar al Charm que se muestra, y eso es lo que vamos a hacer a continuación.

Crear el panel

Para crear un panel de preferencias el proceso consiste en crear una página XAML (que en este caso se llamará AppSettingsPane), cargarla dentro de la vista mostrada, y ocultarla, de tal manera que la acción que se ejecute sea solamente mostrarla.

Para poder cargar la página lo primero es agregar una sentencia using al documento xaml, para poder usar las referencias al proyecto, y posteriormente cargar la misma:

xmlns:local="using:Tareas"
...
<local:AppSettingsPane x:Name="Settings" HorizontalAlignment="Right" Margin="0,0,-346,0"/>
...

Con este proceso se incrusta el contenido del fichero AppSettingsPane en la página, desplazado 346px a la derecha (y oculto), según dicta la guía de diseño. Finalmente se modifica el código generado anteriormente para que desplace la capa:

private void About(IUICommand command)
{
    Settings.Margin = ThicknessHelper.FromUniformLength(0);
}

El problema de este código es que no hay manera de ocultar la ventana, para lo cual se agrega un método adicional llamado PointerPressed en el Grid principal, que estará pendiente de los cambios de posición del cursor, lo que permitirá que cuando el cursor haga click fuera del panel este se oculte.


<Grid x:Name="LayoutRoot" PointerPressed="LayoutRoot_PointerPressed" Style="{StaticResource LayoutRootGridStyle}">

 

        private void LayoutRoot_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)
        {
            if (Settings.Margin.Right == 0)
            {
                Settings.Margin = ThicknessHelper.FromLengths(0, 0, -346, 0);
            }
        }

Conclusiones

Las preferencias permiten al usuario personalizar su aplicación, habilitar o deshabilitar funciones, y está en nuestras manos proporcionar un panel que permita dicha personalización. En este artículo se ha visto cómo insertar un elemento en el panel de preferencias, y cómo cargar un menú de opciones desde éste.

Más información

Incorporando búsquedas a nuestra aplicación Metro

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 :).

Más información:

  • Código editado en Codeplex
  • Ejemplo de uso del contrato de búsqueda en MSDN