Your SlideShare is downloading. ×
Planificando las bases de una aplicación windows phone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Planificando las bases de una aplicación windows phone

3,403
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,403
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
44
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sorey García (@soreygarcia) http://blog.soreygarcia.mePlanificando las bases de una aplicación Windows PhoneEs común que en muchas ocasiones cuando se desea aprender Windows Phone, se encuentre gran cantidadde recursos de desarrollo y otra cantidad de guías de diseño sobre cómo aplicar Moder UI, inclusoexcelentes ejemplos del mismo en los productos disponibles en la tienda de aplicaciones. Sin embargoquienes construimos aplicaciones para Windows Phone, entendemos que hay un paso intermedio del queno se habla tanto, porque incluso simplemente se da por sentada su comprensión.Quienes tienen experiencia con los elementos básicos de la programación con XAML en WPF, Silverlight,Windows Phone y Windows 8, reconocen con facilidad el paso intermedio, sin embargo en mi experienciatratando de enseñar la plataforma a desarrolladores principiantes en el tema, e incluso desarrolladores deotras plataformas que aún no trabajan con enfoques como MVC, un paso queda en el implícito, y es laconstrucción de las Vistas Modelo.Independiente de si aplicaremos o no MVVM en su totalidad, o incluso la forma de implementación quedecidamos realizar de este, las Vistas Modelo son la base de nuestra aplicación, y esa expresión es literal.Algo mucho más visual con lo que podríamos asociarlo es el esqueleto humano ¿Sería posible imaginar uncuerpo humano sin esqueleto? La misma sensación podría tenerse de tu aplicación si no se realizacorrectamente la planificación de las Vistas Modelo.Contar con la definición de estas estructuras hace más consciente al desarrollador de la necesidad deobtener las fuentes de datos que las alimentan desde el back-end y ofrece lo necesario para aprovechar almáximo las características de Blend, en especial sus datos autogenerados, y su capacidad de establecerenlaces fácilmente sin intervenir el código XAML, un enfoque que es útil incluso cuando se cuenta con elapoyo de un diseñador en los equipos de trabajo, puesto que las Vista Modelo mejoran la comunicacióncon el diseñador para hacerle saber cuáles son los datos que a proveerle, y viceversa, si el diseñador requierealgo, va a solicitar incluir en una Vista Modelo la propiedad necesaria, sin necesidad de conocer la lógicade negocio o el back-end de nuestra aplicación, logrando así una separación entre estas dos tareas. La metadel programador será colocar en los contenedores definidos los datos que se requieren.Antes de continuar con el artículo me es preciso aclarar que usar Blend no debe alejarnos del hecho deentender con claridad todos los elementos y conceptos asociados a XAML, usar Blend correctamente puedeayudarnos a ser altamente productivos, sin embargo en ocasiones, sobre todo cuando no somos tan hábilesmanejándolo, es bueno tener discernimiento para revisar el código que se está generando. Mi consejo conBlend, paciencia y calma, con el tiempo construir interfaces se convierte en una tarea bastante divertida ysencilla, aún para quienes solo somos programadores.Como si fueran planosCuando estás planificando una aplicación, la situación es bastante similar a como se construyen los planosde una edificación, sin embargo es obvio que lo primero que imaginamos es lo externo, aquello quepodemos visualizar. Vamos a realizar un ejemplo corto usando una aplicación que se encuentra enplanificación, Pomori (Tomates en Italiano).
  • 2. Sorey García (@soreygarcia) http://blog.soreygarcia.meImaginar cómo queremos que se vea la aplicación es bastante fácil, unos usan dibujos a lápiz, otrasherramientas, cualquiera práctica es válida, lo importante siempre es planificar antes de escribir código yel primer paso recomendado es entender el escenario general de la aplicación para hacernos una idea delos contenedores a crear.Las Vista Modelo, no son más que las clases que enlazaremos a nuestras vistas (Páginas de XAML) parahacer que se muestren los datos, también para que se transporten dichos datos hasta las clasesencargadas de procesarlos, sin poner mucho código tras estas páginas o vistas. La razón puede entendersemás fácilmente cuando pensamos en que llevaremos la aplicación a Windows 8, entre más códigocreemos en las vistas, portar nuestra aplicación llevará más trabajo, pero a diferencia de los edificios, sitenemos un armazón bien construido, en software podremos colocar cualquier piel, o más técnicamente,crear diferentes vista, reutilizando la mayor cantidad de código posible, gracias a que XAML lograenlazarse con nuestros contenedores aunque cambiemos la forma de las vistas.Ahora bien, para empezar a entender cómo va la aplicación, uno de los elementos más importantes es elmapa visual de navegación. El que se muestra a continuación es de la aplicación que estamos usandocomo ejemplo.
  • 3. Sorey García (@soreygarcia) http://blog.soreygarcia.me ADD/MODIFY TASK SPLASH TASK S LIST SETTINGS PRODUCTIVITY REPORT ABOUTLa practica más común consiste en definir una clase principal la cual es la contenedora de todas lasinstancias de las demás clases contenedoras que usa nuestra aplicación, como contenedoras no se debeentender más que las Vista Modelo.Al observar la navegación y el prototipo podría estarse tentados a pensar en definir una clase comocontenedor principal que tiene asociada una lista de tareas. class Class Model MainView Model TaskView ModelEsto no está mal, pero si se revisa con detenimiento el prototipo y la navegación, se puede observar quela ventana principal es un Pivot que tiene tareas según su fecha y estado. En “To Do” estarán todas lastareas antes de la fecha actual, en “Doing” estarán las tareas qué están en curso en la fecha actual, y en“Done” las tareas finalizadas.
  • 4. Sorey García (@soreygarcia) http://blog.soreygarcia.mePara que el enlace refleje la manera como están contenidos los datos debemos añadir entonces algomás, una clase contenedora que tenga listas de tareas, de tal forma que los enlaces a través del XAML seestablezcan de manera jerárquica.class Class Model MainView Model «binding» Tasks List «binding» «boundary» 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 aentenderlo. Cualquiera podría pensar de la imagen anterior, que si el MainViewModel está enlazado a lapantalla principal de la aplicación, la ventana de adicionar o modificar una tarea, estaría enlazada enconsecuencia a su propia Vista Modelo, es decir a TaskViewModel. Pero si hemos leido condetenimiento, se mencionó antes que MainViewModel contenia las instancias de los clasescontenedoras, por lo que la idea es enlazarse a los objetos que se construyen en tiempo de ejecución yque estarán en memoria.Para entender esto, es necesario que detallemos las propiedades de las clases que definimos en primerainstancia.
  • 5. Sorey García (@soreygarcia) http://blog.soreygarcia.me class Class Model MainView Model + SelectedTask :TaskViewModel + TasksByCategory :ObservableCollection<CategoryViewModel> CategoryView Model TaskView Model + Identifier :int + Identifier :int + Name :string + Name :string + Tasks :ObservableCollection<TaskViewModel> + PlannedDate :DateTime + Pomori :int + Status :TaskStatus + Delete() :void + Save() :voidSi se está analizando contra los prototipos podríamos preguntarse de donde va a salir el tiempo porejemplo, en este caso hace falta conocer que la duración de los pomodoros es estandar así que sería uncalculo, así que se puede optar por obviar el atributo en la VistaModelo, solo se necesitaria en la vistaenlazar un Converter que transforme la cantidad de Pomodori en tiempo con base a la configuración queel usuario tenga de la aplicación, es algo con lo que es más fácil familiarizarse cuando tienes los conceptosbásicos de XAML bien interiorizados.Otra observación a realizar es que nuestra clase MainViewModel tiene además un atributo con la Tareaque fue seleccionada para editar en la pantalla de Adicioar o Editar Tareas, y ahí es donde logra entendersela razón de que las pantallas esten enlazadas con MainViewModel y no con TaskViewModel, ya quealguien más debe instanciar TaskViewModel para poder enlazarla contra una vista o página, y al enlazarademás sus comandos a las vistas estos podrán ser usados.Manos a la obraPlanear es excelente, sin embargo para los desarrolladores, siempre es más divertido pasar a laconstrucción. Para ello usaremos Blend, una de las metas es lograr que el diseño quede lo más similarposible, cosa que veremos cuando la aplicación este disponible en la tienda. La meta propuesta en esteartículo, es que toda nuestra planificación sirva para algo un poco más allá de solo imaginar.Es necesario empezar por materializar las clases que planeadas, no sin antes olvidar que estas debenimplementar INotifyPropertyChanged para poder enlazar sus propiedades y notificar los cambios de lasmismas a las vistas, y además que las propiedades a enlazar deben ser completas, no implícitas, y que laslistas de objetos deben ser ObservableCollection.
  • 6. Sorey García (@soreygarcia) http://blog.soreygarcia.meTerminada 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 además de que el contexto de cada uno de los PivotItem es uno de los items de lalista de categorias..
  • 7. Sorey García (@soreygarcia) http://blog.soreygarcia.meEn este es necesario mencionar, que esta forma es solo una de las maneras de hacerlo, otra persona pudohaber optado por ejemplo por crear en MainViewModel, tres listas de tareas y enlazar cada una de ellasa los PivotItem y eso es igualmente válidoDespues de que los PivotItem tengan asignados sus DataContext, crear enlaces en Blend, es tan simplecomo arrastrarlos.O como en el caso del nombre de la categoria, enlazarlos a cada propiedad.
  • 8. Sorey García (@soreygarcia) http://blog.soreygarcia.meEl efecto rápido muestra una plantilla por defecto con los datos autogenerados por Blend.
  • 9. Sorey García (@soreygarcia) http://blog.soreygarcia.meEs nuestra tarea completa el diseño hasta dejarlo lo más similar posible al diseño inicial planteado.Hasta este punto parece claro, sin embargo es necesario recordar dos cosas, los datos autogenerados porBlend con base a una clase, no están disponibles en tiendo de diseño, de hecho no tendría mucho sentidoen esta aplicación, deben ser los datos de cada uno de los usuarios los que se carguen, así que hace faltaconocer en qué momento se crea la instancia del MainViewModel que se cargará con datos en tiempo deejecución.La práctica propuesta en las plantillas por defecto de las plantillas tipo Panorama y Pivot consiste en crearuna propiedad estática en App.cs de tal manera que siendo la clase App el contexto general de nuestraaplicación, dicha propiedad a su vez este siempre disponible.
  • 10. Sorey García (@soreygarcia) http://blog.soreygarcia.meFaltaría asignar dicha instancia a la página principal, y eso también está disponible como ejemplo en lasplantillas. Lo que debe hacerse es asignar al contexto de la página la instancia contenida en App.Si se intentan quemar datos en el constructor de MainViewModel o iniciar la carga de datos en el Loadedde cada una de las páginas, se podrá observar como no es necesaria ninguna otra línea de código paraasignar a las páginas o vistas dichos datos, siempre y cuando estemos alimentando en tiempo de ejecuciónlos objetos correctos.Les reitero mi consejo de antes, las herramientas disponibles para el desarrollo de tecnologías Microsoftbuscan hacer a los profesionales bastante productivos, sin embargo usarlas no debe en ningún momentoapartarlos de la necesidad de entender los conceptos fundamentales, tal como las bases de unaaplicación, un desarrollador necesita excelentes bases para entender lo que está haciendo con lasherramientas y de esa manera construir excelentes productos.Para finalizar, es un buen ejercicio planificar tu propia aplicación, si no la tienes, parte de esta aplicaciónestá sin planificar en el documento. ¿Qué otras clases construiría? ¿Cómo las enlazaría? Por otra parte, sise pregunta si las Vistas Modelo sirven para las aplicaciones en Windows 8, podemos confirmar que sisirven. Hacer un buen trabajo con las aplicaciones desde el principio, lo único que facilitará es que seamucho más fácil de escalarla y portarla. ¡A planificar entonces y crear buenas bases para poder crecer!Sorey Bibiana García Zapata@soreygarcia