Dándole vueltas a la organización de pantallas de la aplicación estoy pretendiendo que el usuario pueda disponer de información sobre sus sitios de interés de una manera sencilla y sin que tenga que estar realizando filtros manuales que puedan complicar la utilización de la misma. Así, por ejemplo, un usuario puede querer ver de forma automática, los sitios que son de su interés que se encuentren próximos a su ubicación, quizá los más visitados, o los marcados como favoritos…
Dentro de Windows Phone vais a poder encontrar fundamentalmente dos controles para la presentación de datos (bueno al menos dos, para lo que a esta entrada se refiere). Uno de ellos es el control «Pivot«. Este control es útil para presentar información o colecciones de datos divididos en subconjuntos.
Desde un punto de vista clásico de análisis de la información, las tablas dinámicas o pivot tables son utilizadas para analizar fracciones o subconjuntos de datos agrupados según alguna característica común. Por ejemplo, una base de datos conteniendo gran información demográfica es difícil de analizar. Normalmente esta información suele segmentarse para facilitar su análisis según el sexo, edad, ingresos, estudios, ubicación geográfica, etc…
Siguiendo esa analogía, el control Pivot tiene una orientación más analítica de la información que quieres presentar en tu aplicación. Un buen ejemplo es el cliente de correo que te permite organizar la vista de tus mensajes de correo según quieras ver «Todos», «Los mensajes Sin Leer», «Urgentes», etc…
Presentación de un Control Pivot
Existe otro control de presentación, que por lo que estoy viendo es el que más se ajusta a mis necesidades que es el control «Panorama«. Este control es una de las incorporaciones de Presentación y Usabilidad más originales de la interfaz de Windows Phone. Al contrario que en otros casos, donde la vista o página está pensada para adaptarse al tamaño de la pantalla. Panorama es un marco ancho, muy ancho. Tanto que pueden caber varios anchos de pantalla para presentar el total de la información.
Presentación de un Control Panorama
El objetivo es disponer en una sola pantalla de diferentes presentaciones de datos, así como de servicios que puedan resultar de utilidad para el usuario. Un par de ejemplos son la aplicación a través de la cual puedes ver Imágenes en tu Windows Phone, Zune o la aplicación oficial de Facebook (desde mi humilde punto de vista, todavía no muy lograda aunque rodando por buen camino).
Así pues, voy a decantarme por una vista principal con un control de tipo Panorama. Para ello hay que empezar con la organización de la información.
La anatomía de un control Panorama es la siguiente:
Anatomía del Control Panorama
El control Panorama está formado por tres capas diferentes:
- Background: Un panel que permite mostrar y animar el contenido del fondo.
- Title: Un panel utilizado para mostrar y animar el título.
- Items: La capa que muestra los diferentes PanoramaItems que definamos en nuestro control y que se distribuyen horizontalmente.
Dice la documentación que, en el caso de que estés utilizando una imagen como fondo para tu control Panorama, y dejas la propiedad «Build Action» asociada a dicha imagen en modo «Content», la carga del fichero se produce de manera asíncrona y puede llegar a apreciarse cierto retardo en la carga de la imagen. Es mejor dejar dicha propiedad como «Resource» de esta manera, la imagen se incluirá como un recurso más de la aplicación cargándose en el lanzamiento de la misma. Siendo sincero, yo no he percibido mucho cambio a simple vista (no he hecho ninguna prueba metódica de tiempos de carga). Simplemente tenedlo en cuenta.
Uno de los aspectos visuales más llamativos del control panorama es que, Fondo, Título y Contenido se mueven a distintas velocidades cuando deslizas la pantalla con el ratón (difícil de mostrar sólo con imágenes) dando así cierta sensación de profundidad muy lograda.
Vamos a algo concreto: Me gusta la fotografía pero mi habilidad como diseñador gráfico está fuera de toda discusión (todo el muno estará de acuerdo en que es desastrosa). Decidí montar dos fondos muy sencillos para mi Panorama. El primero es una sección de una fotografía que tomé a un tronco un día con los amigos en el campo y, la otra, es una variación de la misma, pero dejando un buen espacio en blanco para facilitar el contraste entre el fondo y las fuentes utilizadas para mostrar los contenidos. Tendré que hacer pruebas, pero la idea queda ahí.
Ejemplos de Fondo Panorama
En mi caso, como podéis ver un poco más arriba, he decidido utilizar como fondo una imagen. Esta imagen tiene unas dimensiones de 2048×800 píxeles. Los 800 px de alto son importantes para que no haya ningún redimensionamiento vertical de la imagen que pueda afectar a su aspecto.
Mientras no engañe a mi amigo Dannan (o no se deje engañar) para que me ayude con cosas muy básicas de retoque fotográfico, mis herramientas se reducirán al Paint (tengo instalado Gimp y Expression Designer, pero todavía no me he puesto con ello) Visual Studio y Expression Blend.
Este último es fundamental para hacerte una idea de cómo va a quedar tu aplicación y os recomiendo encarecidamente que lo utilicéis si disponéis de él (en próximos posts miraremos qué cosas podemos hacer con Blend que no podemos hacer con Visual Studio de forma inmediata).
Bien, pues pongamos un control Panorama en nuestra aplicación. ¿Cómo? La verdad es que lo más fácil es pedirle a Visual Studio que lo haga por nosotros (también podrías hacerlo manualmente). Simplemente, botón derecho sobre la solución -> Add New Item -> Panorama Page.
Nueva Página Panorama
Si no lo habías hecho ya cuando creaste la aplicación, sigue estos pasos y podrás écharle un vistazo al (horror) que ha montado Visual Studio. Después, borra casi todo su contenido, para quedarte con lo mínimo.
De momento, voy a montar una página Panorama con el fondo que os indiqué arriba y con tresPanoramaItem
- Sitios Favoritos
- Sitios Cercanos
- Sitios Recientes
En las futuras versiones incluiré algún control más para poder mostrar (probablemente) mis Sitios Favoritos en un mapa de Bing o similar.
Panorama con tres PanoramaItem
Como podéis ver en el código puesto más arriba, he añadido tres PanoramaItem prácticamente idénticos, en este momento sólo se diferencian en el literal (extraído del fichero de recursos de la aplicación) que se mostrará en el texto. Los tres contienen en este momento un ListBox que debería de mostrar elementos del «ViewModel».
Merece la pena reseñar que, mientras estamos en modo de Diseño (es decir, mientras te encuentras diseñando tu página con la ayuda de Visual Studio o Blend) es interesante que puedas hacerte una idea de qué aspecto tienen los controles que estás montando. Para ello existe una característica muy interesante que te permite definir un contexto de datos en diseño de forma que puedas consumir información en un XML (por ejemplo) que te ayude a hacerte una idea del aspecto de tu aplicación cuando esta contiene información. Dentro de los atributos de una página de Windows Phone es posible definir un Contexto de Datos (DataContext) y que dicho contexto de datos sea utilizado sólo en modo de diseño tal y como se indica a continuación.
Contexto de Datos de Diseño de Página
Para crear un contexto de datos en modo diseño podéis revisar este post.
A ver, vamos a intentar dejarlo más claro. Empecemos por las clases que intervienen en el proceso de presentación de la página principal.
Diagrama de Clases para la Presentación de MainPage
Como se ve en la imagen más arriba disponemos de cuatro elementos en juego.
- App: Es la clase que representa el contexto o la aplicación que está en ejecución. Contiene (como vimos en el post anterior) los métodos para gestionar el ciclo de vida.
- IMainViewModel: Se trata de una interfaz y es un pequeño cambio realizado a la estructura que por defecto presenta Visual Studio. La clase App dispone de una referencia al ViewModel, sin embargo, en mi caso he preferido cambiar el tipo y hacer que la referencia sea a la Interfaz que ha de implementar dicho modelo. De esta forma mejoramos el acoplamiento (reduciéndolo) y favorecemos la posible inclusión de patrones como la Inversión de Control (IoC) aunque en este momento App instancie directamente la clase y todavía no haga uso del patrón.
- MainViewModel: Se trata de la VistaModelo para la página principal. Implementa la Interfaz IMainViewModel y, en este momento se trata de una clase que prácticamente hace sólo dos cosas: Definir una lista de elementos (a través de la propiedad Items) y carga dicha lista de elementos (a través del método LoadData).
- MainPage: Por último la clase que representa la página en sí misma y que será la Vista de presentación (la que contiene nuestro elemento Panorama). Esta página se comunica con el MainViewModel a través de la interfaz IMainViewModel que expone la clase App cuando la página es cargada (en la gestión del evento Loaded) tal y como se muestra en el diagrama de secuencia a continuación.
MainPage_Loaded
En breve nos centraremos en el proceso de DataBinding y veremos cómo podemos hacer para realizar filtros de los elementos que componen nuestro conjunto de lugares.
jdmveira 