Eligiendo el estilo
Lo primero será elegir el estilo base, el icono, el mosaico y la pantalla de inicio de nuestra aplicación. Recuerden que para esto uso Inkscape y que pueden encontrar un video de ejemplo en mi blog o tambien el post de ideas para aplicar el estilo metro.
Notarán que adicionalmente he creado unos íconos que tienen un fondo gris, el gris siempre lo dejo como temporal, ya que lo uso para dar las dimensiones que quiero a la imagen.
Los iconos blancos son de 48 x 48 y los uso para iconos de la barra de aplicación o Application Bar, las imagenes dentro no deben ser de más de 26 X 26 para dejar espacio al circulo propio de estos botones. Los otros iconos son para poner un adorno a los títulos del panorama que ya verán más adelante.
No sé ustedes, si yo tengo una interfaz agradable trabajo mejor :)
Este es el momento de soñar (en mi caso por que es mi aplicación), cuando tenemos un cliente es momento de acordar como se verá nuestra aplicación.
Veamos cuales son los retos del sueño, en primer lugar hay que generar bastantes elementos gráficos y ni que decir de los estilos.
¿Qué eso que tiene que ver con MVVM? Cada cosas que vemos aquí tendrá una implicación en la implementación, y detalles como usar un corazón cuando un item es favorito o usar imágenes diferentes segun el tipo de item del rss va a ser algo que nos facilitará el implementar bien las propiedades que enlazamos.
Con respecto al estilo, puse un ejemplo que no voy a implementar en la imagen, cuando se da compartir, pero es más por colocar un ejemplo de cuanto podemos complicarnos, si lo notan bien la imagen cuando el item de twitter está seleccionada cambia, para hacerlo más sencillo implementaré el sombreado en el ejemplo de la lista de post, el cual no cambia la imagen asociada al item. Sin embargo, reto para el final de la serie de post, será implementar el estilo propuesto en la imagen ¿qué tal? Es simple, veremos como les va, pero mejor después de aprender ;)
Otra anotación muy importante para el estilo, aprovechando este post, es definir si permitiremos que nuestra aplicación cambie de color cuando se cambia el tema de fondo en el dispositivo. Si bien esto quedaría muy bien, implica mucho más tiempo cuidando que todo vaya bien en ambos estilos y en ocasiones crear estilos que cambien de acuerdo al tema, así que yo lo pensaría dos veces ;
En esta aplicación no vamos a intentarlo, la razón es que la verdad no se vé muy bien :S
Ahora planeamos las demás ventanas de nuestra aplicación, son simples prototipos, algunas cosas no quedarán o se pueden hacer por etapas.
Planeando la aplicación
Hasta este punto hemos estado pensando en nuestras Vistas, nada de implementación, esto mismo se podría hacer con lapiz y papel, usando plantillas para prototipos. Con estas vistas podemos empezar a planear algo de lo que serán nuestras Vista Modelo.
Una manera más formal de mirar el tema de planear la aplicación puede encontrarse en el Blog de Arturo Toledo, en el cual nos explica sobre Arquitectura de la Información en una aplicación Windows Phone. En esta imagen tomada desde ese post, nos podemos hacer una idea global sobre como deberíamos planificar por ejemplo la navegación
Noten que la navegación es planificada de forma lineal, cada camino conduce a una ruta de páginas a través de las cuales el usuario avanza o retrocede, y debemos cuidar que esto sea intuitivo y que no se los usuarios no se pierdan a través de ellas.
Para quienes quieran explorar alternativas a este tipo de navegación, exíste una forma de evitarlo, y la explica Josue Yeray en su blog.
Por otro lado y continuando en nuestro post, las Vista Modelo deben ser pensadas no en terminos de las pantallas que usamos si no en terminos de los elementos que manejan nuestras pantallas. Si observamos con detenimiento nuestra planeación veremos que nuestra ventana o panorama principal, tiene tres listas, y existe otra lista adicional de mensajes de visitantes, por lo que nuestras vistas modelo iniciales en UML podrían ser las siguientes:
Como podemos observar, el MainViewModel no refiere unicamente a la pantalla principal, de hecho esta clase sirve como el contexto general de la aplicación y las propiedades de esta sirven para reflejar muchos comportamientos generales. En el ejemplo que les refiero de las plantillas por defecto se encuentra generalmente una propiedad denominada IsDataLoaded, que ayuda a controlar que cuando la aplicación se recupera de un segundo plando, si los datos se encuentran aún en memoria estos no vuelvan a intentar cargarse.
Otra propiedad que añadiré para poder iniciar en el siguiente post el montaje de nuestra aplicación es el item seleccionado, el cual nos ayudará a mostrar los datos en la pantalla de detalle de un item.
Además de esto debemos tener en cuenta, que nuestras Vistas Modelo deben heredar de la clase INotifyPropertyChanged, interfaz que a su vez obliga a nuestra clase a implementar un evento que permitirá a las Vista Model, reportar los cambios en los datos y estructuras a las Vistas y que las listas que queremos mostrar en nuestra interfaces deben ser de tipo ObservableCollection. Estos son temas de infraestructura del patrón que abordaremos en el siguiente post.
Por lo pronto nuestro modelo UML de Vistas Modelo se vería de la siguiente forma:
Si tienen dudas agradezco sus comentarios, realizar actualizaciones a los post es importante para que podamos comprender el tema. Si eres un experto en esto y andas leyendo por aquí y ves alguna equivocación, también agradeceré profundamente tus constructivos comentarios.
Nos vemos en el siguiente post.
Sorey
ليست هناك تعليقات:
إرسال تعليق