Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Planificando las bases de una aplicacin Windows Phone

Es comn que en muchas ocasiones cuando se desea aprender Windows Phone, se encuentre gran cantidad de recursos de desarrollo y otra cantidad de guas de diseo sobre cmo aplicar Moder UI, incluso excelentes ejemplos del mismo en los productos disponibles en la tienda de aplicaciones. Sin embargo quienes construimos aplicaciones para Windows Phone, entendemos que hay un paso intermedio del que no se habla tanto, porque incluso simplemente se da por sentada su comprensin. Quienes tienen experiencia con los elementos bsicos de la programacin con XAML en WPF, Silverlight, Windows Phone y Windows 8, reconocen con facilidad el paso intermedio, sin embargo en mi experiencia tratando de ensear la plataforma a desarrolladores principiantes en el tema, e incluso desarrolladores de otras plataformas que an no trabajan con enfoques como MVC, un paso queda en el implcito, y es la construccin de las Vistas Modelo. Independiente de si aplicaremos o no MVVM en su totalidad, o incluso la forma de implementacin que decidamos realizar de este, las Vistas Modelo son la base de nuestra aplicacin, y esa expresin es literal. Algo mucho ms visual con lo que podramos asociarlo es el esqueleto humano Sera posible imaginar un cuerpo humano sin esqueleto? La misma sensacin podra tenerse de tu aplicacin si no se realiza correctamente la planificacin de las Vistas Modelo. Contar con la definicin de estas estructuras hace ms consciente al desarrollador de la necesidad de obtener las fuentes de datos que las alimentan desde el back-end y ofrece lo necesario para aprovechar al mximo las caractersticas de Blend, en especial sus datos autogenerados, y su capacidad de establecer enlaces fcilmente sin intervenir el cdigo XAML, un enfoque que es til incluso cuando se cuenta con el apoyo de un diseador en los equipos de trabajo, puesto que las Vista Modelo mejoran la comunicacin con el diseador para hacerle saber cules son los datos que a proveerle, y viceversa, si el diseador requiere algo, va a solicitar incluir en una Vista Modelo la propiedad necesaria, sin necesidad de conocer la lgica de negocio o el back-end de nuestra aplicacin, logrando as una separacin entre estas dos tareas. La meta del programador ser colocar en los contenedores definidos los datos que se requieren. Antes de continuar con el artculo me es preciso aclarar que usar Blend no debe alejarnos del hecho de entender con claridad todos los elementos y conceptos asociados a XAML, usar Blend correctamente puede ayudarnos a ser altamente productivos, sin embargo en ocasiones, sobre todo cuando no somos tan hbiles manejndolo, es bueno tener discernimiento para revisar el cdigo que se est generando. Mi consejo con Blend, paciencia y calma, con el tiempo construir interfaces se convierte en una tarea bastante divertida y sencilla, an para quienes solo somos programadores. Como si fueran planos Cuando ests planificando una aplicacin, la situacin es bastante similar a como se construyen los planos

de una edificacin, sin embargo es obvio que lo primero que imaginamos es lo externo, aquello que podemos visualizar. Vamos a realizar un ejemplo corto usando una aplicacin que se encuentra en planificacin, Pomori (Tomates en Italiano).

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Imaginar cmo queremos que se vea la aplicacin es bastante fcil, unos usan dibujos a lpiz, otras herramientas, cualquiera prctica es vlida, lo importante siempre es planificar antes de escribir cdigo y el primer paso recomendado es entender el escenario general de la aplicacin para hacernos una idea de los contenedores a crear. Las Vista Modelo, no son ms que las clases que enlazaremos a nuestras vistas (Pginas de XAML) para hacer que se muestren los datos, tambin para que se transporten dichos datos hasta las clases encargadas de procesarlos, sin poner mucho cdigo tras estas pginas o vistas. La razn puede entenderse ms fcilmente cuando pensamos en que llevaremos la aplicacin a Windows 8, entre ms cdigo creemos en las vistas, portar nuestra aplicacin llevar ms trabajo, pero a diferencia de los edificios, si tenemos un armazn bien construido, en software podremos colocar cualquier piel, o ms tcnicamente, crear diferentes vista, reutilizando la mayor cantidad de cdigo posible, gracias a que XAML logra enlazarse con nuestros contenedores aunque cambiemos la forma de las vistas. Ahora bien, para empezar a entender cmo va la aplicacin, uno de los elementos ms importantes es el mapa visual de navegacin. El que se muestra a continuacin es de la aplicacin que estamos usando como ejemplo.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

ADD/MODIFY TASK

SPLASH

TASK S LIST

SETTINGS

PRODUCTIVITY REPORT

ABOUT

La practica ms comn consiste en definir una clase principal la cual es la contenedora de todas las instancias de las dems clases contenedoras que usa nuestra aplicacin, como contenedoras no se debe entender ms que las Vista Modelo. Al observar la navegacin y el prototipo podra estarse tentados a pensar en definir una clase como contenedor principal que tiene asociada una lista de tareas.
class Class Model

MainView Model

TaskView Model

Esto no est mal, pero si se revisa con detenimiento el prototipo y la navegacin, se puede observar que la ventana principal es un Pivot que tiene tareas segn su fecha y estado. En To Do estarn todas las tareas antes de la fecha actual, en Doing estarn las tareas qu estn en curso en la fecha actual, y en Done las tareas finalizadas.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Para que el enlace refleje la manera como estn contenidos los datos debemos aadir entonces algo ms, una clase contenedora que tenga listas de tareas, de tal forma que los enlaces a travs del XAML se establezcan de manera jerrquica.
class Class Model

MainView Model binding

Task's List boundary

binding CategoryView Model TaskView Model

Add/Modify Task boundary

La clase principal estar enlazada a las vistas, y si esto no es comprensible hay que detenerse a entenderlo. Cualquiera podra pensar de la imagen anterior, que si el MainViewModel est enlazado a la pantalla principal de la aplicacin, la ventana de adicionar o modificar una tarea, estara enlazada en consecuencia a su propia Vista Modelo, es decir a TaskViewModel. Pero si hemos leido con detenimiento, se mencion antes que MainViewModel contenia las instancias de los clases contenedoras, por lo que la idea es enlazarse a los objetos que se construyen en tiempo de ejecucin y que estarn en memoria. Para entender esto, es necesario que detallemos las propiedades de las clases que definimos en primera instancia.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

class Class Model

MainView Model + + SelectedTask :TaskViewModel TasksByCategory :ObservableCollection<CategoryViewModel>

CategoryView Model + + + Identifier :int Name :string Tasks :ObservableCollection<TaskViewModel> + + + + + + +

TaskView Model Identifier :int Name :string PlannedDate :DateTime Pomori :int Status :TaskStatus Delete() :void Save() :void

Si se est analizando contra los prototipos podramos preguntarse de donde va a salir el tiempo por ejemplo, en este caso hace falta conocer que la duracin de los pomodoros es estandar as que sera un calculo, as que se puede optar por obviar el atributo en la VistaModelo, solo se necesitaria en la vista enlazar un Converter que transforme la cantidad de Pomodori en tiempo con base a la configuracin que el usuario tenga de la aplicacin, es algo con lo que es ms fcil familiarizarse cuando tienes los conceptos bsicos de XAML bien interiorizados. Otra observacin a realizar es que nuestra clase MainViewModel tiene adems un atributo con la Tarea que fue seleccionada para editar en la pantalla de Adicioar o Editar Tareas, y ah es donde logra entenderse la razn de que las pantallas esten enlazadas con MainViewModel y no con TaskViewModel, ya que alguien ms debe instanciar TaskViewModel para poder enlazarla contra una vista o pgina, y al enlazar adems sus comandos a las vistas estos podrn ser usados.
Manos a la obra

Planear es excelente, sin embargo para los desarrolladores, siempre es ms divertido pasar a la construccin. Para ello usaremos Blend, una de las metas es lograr que el diseo quede lo ms similar posible, cosa que veremos cuando la aplicacin este disponible en la tienda. La meta propuesta en este artculo, es que toda nuestra planificacin sirva para algo un poco ms all de solo imaginar. Es necesario empezar por materializar las clases que planeadas, no sin antes olvidar que estas deben implementar INotifyPropertyChanged para poder enlazar sus propiedades y notificar los cambios de las mismas a las vistas, y adems que las propiedades a enlazar deben ser completas, no implcitas, y que las listas de objetos deben ser ObservableCollection.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Terminada esta labor en Blend creamos un set de datos de ejemplo o Sample Data, con base en una clase, por supuesto en MainViewModel.

Posteriormente enlazamos el LayoutRoot de nuestra MainPage a los datos de ejemplo.

Debemos asegurarnos adems de que el contexto de cada uno de los PivotItem es uno de los items de la lista de categorias..

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

En este es necesario mencionar, que esta forma es solo una de las maneras de hacerlo, otra persona pudo haber optado por ejemplo por crear en MainViewModel, tres listas de tareas y enlazar cada una de ellas a los PivotItem y eso es igualmente vlido Despues de que los PivotItem tengan asignados sus DataContext, crear enlaces en Blend, es tan simple como arrastrarlos.

O como en el caso del nombre de la categoria, enlazarlos a cada propiedad.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

El efecto rpido muestra una plantilla por defecto con los datos autogenerados por Blend.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Es nuestra tarea completa el diseo hasta dejarlo lo ms similar posible al diseo inicial planteado.

Hasta este punto parece claro, sin embargo es necesario recordar dos cosas, los datos autogenerados por Blend con base a una clase, no estn disponibles en tiendo de diseo, de hecho no tendra mucho sentido en esta aplicacin, deben ser los datos de cada uno de los usuarios los que se carguen, as que hace falta conocer en qu momento se crea la instancia del MainViewModel que se cargar con datos en tiempo de ejecucin. La prctica propuesta en las plantillas por defecto de las plantillas tipo Panorama y Pivot consiste en crear una propiedad esttica en App.cs de tal manera que siendo la clase App el contexto general de nuestra aplicacin, dicha propiedad a su vez este siempre disponible.

Sorey Garca (@soreygarcia)

http://blog.soreygarcia.me

Faltara asignar dicha instancia a la pgina principal, y eso tambin est disponible como ejemplo en las plantillas. Lo que debe hacerse es asignar al contexto de la pgina la instancia contenida en App.

Si se intentan quemar datos en el constructor de MainViewModel o iniciar la carga de datos en el Loaded de cada una de las pginas, se podr observar como no es necesaria ninguna otra lnea de cdigo para asignar a las pginas o vistas dichos datos, siempre y cuando estemos alimentando en tiempo de ejecucin los objetos correctos. Les reitero mi consejo de antes, las herramientas disponibles para el desarrollo de tecnologas Microsoft buscan hacer a los profesionales bastante productivos, sin embargo usarlas no debe en ningn momento apartarlos de la necesidad de entender los conceptos fundamentales, tal como las bases de una aplicacin, un desarrollador necesita excelentes bases para entender lo que est haciendo con las herramientas y de esa manera construir excelentes productos. Para finalizar, es un buen ejercicio planificar tu propia aplicacin, si no la tienes, parte de esta aplicacin est sin planificar en el documento. Qu otras clases construira? Cmo las enlazara? Por otra parte, si se pregunta si las Vistas Modelo sirven para las aplicaciones en Windows 8, podemos confirmar que si sirven. Hacer un buen trabajo con las aplicaciones desde el principio, lo nico que facilitar es que sea mucho ms fcil de escalarla y portarla. A planificar entonces y crear buenas bases para poder crecer! Sorey Bibiana Garca Zapata @soreygarcia