SlideShare una empresa de Scribd logo
Sorey García (@soreygarcia)                                                    http://blog.soreygarcia.me


Planificando las bases de una aplicación Windows Phone
Es común que en muchas ocasiones cuando se desea aprender Windows Phone, se encuentre gran cantidad
de recursos de desarrollo y otra cantidad de guías de diseño sobre cómo 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 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 experiencia
tratando de enseñar la plataforma a desarrolladores principiantes en el tema, e incluso desarrolladores de
otras plataformas que aún no trabajan con enfoques como MVC, un paso queda en el implícito, y es la
construcción de las Vistas Modelo.

Independiente de si aplicaremos o no MVVM en su totalidad, o incluso la forma de implementación que
decidamos 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 un
cuerpo humano sin esqueleto? La misma sensación podría tenerse de tu aplicación si no se realiza
correctamente la planificación de las Vistas Modelo.

Contar con la definición de estas estructuras hace más 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
máximo las características de Blend, en especial sus datos autogenerados, y su capacidad de establecer
enlaces fácilmente sin intervenir el código XAML, un enfoque que es útil incluso cuando se cuenta con el
apoyo de un diseñador en los equipos de trabajo, puesto que las Vista Modelo mejoran la comunicación
con el diseñador para hacerle saber cuáles son los datos que a proveerle, y viceversa, si el diseñador requiere
algo, va a solicitar incluir en una Vista Modelo la propiedad necesaria, sin necesidad de conocer la lógica
de negocio o el back-end de nuestra aplicación, logrando así una separación entre estas dos tareas. La meta
del 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 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 hábiles
manejándolo, es bueno tener discernimiento para revisar el código 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, aún para quienes solo somos programadores.

Como si fueran planos

Cuando estás planificando una aplicación, la situación es bastante similar a como se construyen los planos
de una edificación, sin embargo es obvio que lo primero que imaginamos es lo externo, aquello que
podemos visualizar. Vamos a realizar un ejemplo corto usando una aplicación que se encuentra en
planificación, Pomori (Tomates en Italiano).
Sorey García (@soreygarcia)                                                  http://blog.soreygarcia.me




Imaginar cómo queremos que se vea la aplicación es bastante fácil, unos usan dibujos a lápiz, otras
herramientas, cualquiera práctica es válida, lo importante siempre es planificar antes de escribir código y
el primer paso recomendado es entender el escenario general de la aplicación para hacernos una idea de
los contenedores a crear.

Las Vista Modelo, no son más que las clases que enlazaremos a nuestras vistas (Páginas de XAML) para
hacer que se muestren los datos, también para que se transporten dichos datos hasta las clases
encargadas de procesarlos, sin poner mucho código tras estas páginas o vistas. La razón puede entenderse
más fácilmente cuando pensamos en que llevaremos la aplicación a Windows 8, entre más código
creemos en las vistas, portar nuestra aplicación llevará más trabajo, pero a diferencia de los edificios, si
tenemos 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 logra
enlazarse 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 el
mapa visual de navegación. El que se muestra a continuación es de la aplicación que estamos usando
como ejemplo.
Sorey García (@soreygarcia)                                                    http://blog.soreygarcia.me




                                                                                               ADD/MODIFY
                                                                                                  TASK




   SPLASH                                       TASK S LIST




                                                                                                SETTINGS




                                 PRODUCTIVITY REPORT                                             ABOUT

La practica más común consiste en definir una clase principal la cual es la contenedora de todas las
instancias de las demás clases contenedoras que usa nuestra aplicación, como contenedoras no se debe
entender más que las Vista Modelo.

Al observar la navegación y el prototipo podría 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 navegación, se puede observar que
la ventana principal es un Pivot que tiene tareas según su fecha y estado. En “To Do” estarán todas las
tareas 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.
Sorey García (@soreygarcia)                                                       http://blog.soreygarcia.me


Para que el enlace refleje la manera como están contenidos los datos debemos añadir entonces algo
más, una clase contenedora que tenga listas de tareas, de tal forma que los enlaces a través del XAML se
establezcan de manera jerárquica.
class Class Model




                                                                     MainView Model

                                                         «binding»




                      Task's 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 a
entenderlo. Cualquiera podría pensar de la imagen anterior, que si el MainViewModel está enlazado a la
pantalla principal de la aplicación, la ventana de adicionar o modificar una tarea, estaría 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 ejecución y
que estarán en memoria.

Para entender esto, es necesario que detallemos las propiedades de las clases que definimos en primera
instancia.
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() :void




Si se está analizando contra los prototipos podríamos preguntarse de donde va a salir el tiempo por
ejemplo, en este caso hace falta conocer que la duración de los pomodoros es estandar así que sería 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 configuración que
el usuario tenga de la aplicación, es algo con lo que es más fácil familiarizarse cuando tienes los conceptos
básicos de XAML bien interiorizados.

Otra observación a realizar es que nuestra clase MainViewModel tiene además 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 razón de que las pantallas esten enlazadas con MainViewModel y no con TaskViewModel, ya que
alguien más debe instanciar TaskViewModel para poder enlazarla contra una vista o página, y al enlazar
además sus comandos a las vistas estos podrán ser usados.

Manos a la obra

Planear es excelente, sin embargo para los desarrolladores, siempre es más divertido pasar a la
construcción. Para ello usaremos Blend, una de las metas es lograr que el diseño quede lo más similar
posible, cosa que veremos cuando la aplicación este disponible en la tienda. La meta propuesta en este
artí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 deben
implementar INotifyPropertyChanged para poder enlazar sus propiedades y notificar los cambios de las
mismas a las vistas, y además que las propiedades a enlazar deben ser completas, no implícitas, y que las
listas de objetos deben ser ObservableCollection.
Sorey García (@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 además de que el contexto de cada uno de los PivotItem es uno de los items de la
lista de categorias..
Sorey García (@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 válido

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 García (@soreygarcia)                                               http://blog.soreygarcia.me




El efecto rápido muestra una plantilla por defecto con los datos autogenerados por Blend.
Sorey García (@soreygarcia)                                                   http://blog.soreygarcia.me


Es 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 por
Blend con base a una clase, no están disponibles en tiendo de diseño, de hecho no tendría mucho sentido
en esta aplicación, 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
ejecución.

La práctica propuesta en las plantillas por defecto de las plantillas tipo Panorama y Pivot consiste en crear
una propiedad estática en App.cs de tal manera que siendo la clase App el contexto general de nuestra
aplicación, dicha propiedad a su vez este siempre disponible.
Sorey García (@soreygarcia)                                                    http://blog.soreygarcia.me




Faltaría asignar dicha instancia a la página principal, y eso también está disponible como ejemplo en las
plantillas. 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 Loaded
de cada una de las páginas, se podrá observar como no es necesaria ninguna otra línea de código para
asignar a las páginas o vistas dichos datos, siempre y cuando estemos alimentando en tiempo de ejecución
los objetos correctos.

Les reitero mi consejo de antes, las herramientas disponibles para el desarrollo de tecnologías Microsoft
buscan hacer a los profesionales bastante productivos, sin embargo usarlas no debe en ningún momento
apartarlos de la necesidad de entender los conceptos fundamentales, tal como las bases de una
aplicación, 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 aplicación, si no la tienes, parte de esta aplicación
está sin planificar en el documento. ¿Qué otras clases construiría? ¿Cómo las enlazaría? 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 más fácil de escalarla y portarla. ¡A planificar entonces y crear buenas bases para poder crecer!

Sorey Bibiana García Zapata
@soreygarcia

Más contenido relacionado

La actualidad más candente

Un Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation FoundationUn Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation Foundation
juliocasal
 
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
juliocasal
 
Reglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows VistaReglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows Vista
juliocasal
 
DotNet 2019: Optimizando Apps con Xamarin.Forms
DotNet 2019: Optimizando Apps con Xamarin.FormsDotNet 2019: Optimizando Apps con Xamarin.Forms
DotNet 2019: Optimizando Apps con Xamarin.Forms
Javier Suárez Ruiz
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
Luis Fernando Aguas Bucheli
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes Web
Javier Vélez Reyes
 
Ajax tsis
Ajax tsisAjax tsis
Ajax tsis
iagardea
 
MVC
MVCMVC
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.FormsdotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
Javier Suárez Ruiz
 
Extendiendo Xamarin.Forms
Extendiendo Xamarin.FormsExtendiendo Xamarin.Forms
Extendiendo Xamarin.Forms
Javier Suárez Ruiz
 
Frameworks Java
Frameworks JavaFrameworks Java
Frameworks Java
Jose Luis Bugarin Peche
 
Novedades en XAML
Novedades en XAMLNovedades en XAML
Novedades en XAML
Javier Suárez Ruiz
 
Java frameworks
Java frameworksJava frameworks
Java frameworks
maurocol13
 
Semana 4 Estructura y componentes SPA
Semana 4  Estructura y componentes SPASemana 4  Estructura y componentes SPA
Semana 4 Estructura y componentes SPA
Richard Eliseo Mendoza Gafaro
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
cok12v
 
Monkey Conf 2018: Conociendo Xamarin.Forms Shell
Monkey Conf 2018: Conociendo Xamarin.Forms ShellMonkey Conf 2018: Conociendo Xamarin.Forms Shell
Monkey Conf 2018: Conociendo Xamarin.Forms Shell
Javier Suárez Ruiz
 
Introducción a Xamarin utilizando MVVMCross
Introducción a Xamarin utilizando MVVMCrossIntroducción a Xamarin utilizando MVVMCross
Introducción a Xamarin utilizando MVVMCross
Javier Suárez Ruiz
 
Tendencias de movilidad en el mercado masivo y empresarial
Tendencias de movilidad en el mercado masivo y empresarialTendencias de movilidad en el mercado masivo y empresarial
Tendencias de movilidad en el mercado masivo y empresarial
Sorey García
 
WinObjC: Windows Bridge para iOS
WinObjC: Windows Bridge para iOSWinObjC: Windows Bridge para iOS
WinObjC: Windows Bridge para iOS
Javier Suárez Ruiz
 
OpenSouthCode 2018: Taller Xamarin
OpenSouthCode 2018: Taller XamarinOpenSouthCode 2018: Taller Xamarin
OpenSouthCode 2018: Taller Xamarin
Javier Suárez Ruiz
 

La actualidad más candente (20)

Un Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation FoundationUn Vistazo A Windows Presentation Foundation
Un Vistazo A Windows Presentation Foundation
 
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
Nuevas formas de pensar en datos con LINQ y Visual Studio 2008
 
Reglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows VistaReglas de Oro para el Desarrollo con Windows Vista
Reglas de Oro para el Desarrollo con Windows Vista
 
DotNet 2019: Optimizando Apps con Xamarin.Forms
DotNet 2019: Optimizando Apps con Xamarin.FormsDotNet 2019: Optimizando Apps con Xamarin.Forms
DotNet 2019: Optimizando Apps con Xamarin.Forms
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
 
Principios de Diseño de Componentes Web
Principios de Diseño de Componentes WebPrincipios de Diseño de Componentes Web
Principios de Diseño de Componentes Web
 
Ajax tsis
Ajax tsisAjax tsis
Ajax tsis
 
MVC
MVCMVC
MVC
 
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.FormsdotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
dotNetMálaga 2017 - Trucos y consejos rendimiento Xamarin.Forms
 
Extendiendo Xamarin.Forms
Extendiendo Xamarin.FormsExtendiendo Xamarin.Forms
Extendiendo Xamarin.Forms
 
Frameworks Java
Frameworks JavaFrameworks Java
Frameworks Java
 
Novedades en XAML
Novedades en XAMLNovedades en XAML
Novedades en XAML
 
Java frameworks
Java frameworksJava frameworks
Java frameworks
 
Semana 4 Estructura y componentes SPA
Semana 4  Estructura y componentes SPASemana 4  Estructura y componentes SPA
Semana 4 Estructura y componentes SPA
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
 
Monkey Conf 2018: Conociendo Xamarin.Forms Shell
Monkey Conf 2018: Conociendo Xamarin.Forms ShellMonkey Conf 2018: Conociendo Xamarin.Forms Shell
Monkey Conf 2018: Conociendo Xamarin.Forms Shell
 
Introducción a Xamarin utilizando MVVMCross
Introducción a Xamarin utilizando MVVMCrossIntroducción a Xamarin utilizando MVVMCross
Introducción a Xamarin utilizando MVVMCross
 
Tendencias de movilidad en el mercado masivo y empresarial
Tendencias de movilidad en el mercado masivo y empresarialTendencias de movilidad en el mercado masivo y empresarial
Tendencias de movilidad en el mercado masivo y empresarial
 
WinObjC: Windows Bridge para iOS
WinObjC: Windows Bridge para iOSWinObjC: Windows Bridge para iOS
WinObjC: Windows Bridge para iOS
 
OpenSouthCode 2018: Taller Xamarin
OpenSouthCode 2018: Taller XamarinOpenSouthCode 2018: Taller Xamarin
OpenSouthCode 2018: Taller Xamarin
 

Similar a Planificando las bases de una aplicación windows phone

Clase numero 6
Clase numero 6Clase numero 6
Clase numero 6
cesitar2010
 
Framework
FrameworkFramework
Framework
Vivi Marquez
 
Framework
FrameworkFramework
Framework
Vivi Marquez
 
Framework
FrameworkFramework
Framework
Vivi Marquez
 
Framework
FrameworkFramework
Framework
franciscocain
 
Modelado por descomposición
Modelado por descomposiciónModelado por descomposición
Modelado por descomposición
Vanessa Estefania Corredor Andrade
 
Modelo por descomposicion
Modelo por descomposicionModelo por descomposicion
Modelo por descomposicion
Vanessa Estefania Corredor Andrade
 
Framework
FrameworkFramework
Framework
ALfonsx Viejo
 
Presentación1
Presentación1Presentación1
Presentación1
elvis mendieta
 
modelo MVC.pptx
modelo MVC.pptxmodelo MVC.pptx
modelo MVC.pptx
Ram Vazquez
 
Compu 1
Compu 1Compu 1
Framework
FrameworkFramework
Capítulo 9 qbasic introducción a la poo
Capítulo 9 qbasic  introducción a la pooCapítulo 9 qbasic  introducción a la poo
Capítulo 9 qbasic introducción a la poo
Julio Ayala Rolón
 
DREAMWEABER
DREAMWEABERDREAMWEABER
DREAMWEABER
Kerlis Lopez
 
Framework
FrameworkFramework
Framework
alexmoncada21
 
Framework
FrameworkFramework
Framework
Marcelo Brocel
 
Framework
FrameworkFramework
Framework
Marcelo Brocel
 
Spring framework
Spring frameworkSpring framework
Spring framework
Isabel Samaniego
 
Framework
FrameworkFramework
Framework
Eduardo Bazurto
 
56874982 curso-de-delphi-7
56874982 curso-de-delphi-756874982 curso-de-delphi-7
56874982 curso-de-delphi-7
Ismael Batista
 

Similar a Planificando las bases de una aplicación windows phone (20)

Clase numero 6
Clase numero 6Clase numero 6
Clase numero 6
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Modelado por descomposición
Modelado por descomposiciónModelado por descomposición
Modelado por descomposición
 
Modelo por descomposicion
Modelo por descomposicionModelo por descomposicion
Modelo por descomposicion
 
Framework
FrameworkFramework
Framework
 
Presentación1
Presentación1Presentación1
Presentación1
 
modelo MVC.pptx
modelo MVC.pptxmodelo MVC.pptx
modelo MVC.pptx
 
Compu 1
Compu 1Compu 1
Compu 1
 
Framework
FrameworkFramework
Framework
 
Capítulo 9 qbasic introducción a la poo
Capítulo 9 qbasic  introducción a la pooCapítulo 9 qbasic  introducción a la poo
Capítulo 9 qbasic introducción a la poo
 
DREAMWEABER
DREAMWEABERDREAMWEABER
DREAMWEABER
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Framework
FrameworkFramework
Framework
 
Spring framework
Spring frameworkSpring framework
Spring framework
 
Framework
FrameworkFramework
Framework
 
56874982 curso-de-delphi-7
56874982 curso-de-delphi-756874982 curso-de-delphi-7
56874982 curso-de-delphi-7
 

Más de Sorey García

Mision inspiración para docentes
Mision inspiración para docentesMision inspiración para docentes
Mision inspiración para docentes
Sorey García
 
NetConfUY: Maximizando la productividad del desarrollo móvil
NetConfUY: Maximizando la productividad del desarrollo móvilNetConfUY: Maximizando la productividad del desarrollo móvil
NetConfUY: Maximizando la productividad del desarrollo móvil
Sorey García
 
Introducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAMLIntroducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAML
Sorey García
 
WIE: El poder de transformar al mundo con tecnología
WIE: El poder de transformar al mundo con tecnologíaWIE: El poder de transformar al mundo con tecnología
WIE: El poder de transformar al mundo con tecnología
Sorey García
 
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
Sorey García
 
Internet de las Cosas y Netduino
Internet de las Cosas y NetduinoInternet de las Cosas y Netduino
Internet de las Cosas y Netduino
Sorey García
 
Misión: Inspiración
Misión: InspiraciónMisión: Inspiración
Misión: Inspiración
Sorey García
 
Codies.Launch()
Codies.Launch()Codies.Launch()
Codies.Launch()
Sorey García
 
[Avanet] Fiesta del Libro y la Cultura Medellín
[Avanet] Fiesta del Libro y la Cultura Medellín[Avanet] Fiesta del Libro y la Cultura Medellín
[Avanet] Fiesta del Libro y la Cultura Medellín
Sorey García
 
MVP Open Day - Best Practices/Experiences
MVP Open Day - Best Practices/Experiences MVP Open Day - Best Practices/Experiences
MVP Open Day - Best Practices/Experiences
Sorey García
 
GWAB: Azure Mobile Services
GWAB: Azure Mobile ServicesGWAB: Azure Mobile Services
GWAB: Azure Mobile Services
Sorey García
 
Similitudes y deferencias en UX para Windows Phone y Windows
Similitudes y deferencias en UX para Windows Phone y WindowsSimilitudes y deferencias en UX para Windows Phone y Windows
Similitudes y deferencias en UX para Windows Phone y Windows
Sorey García
 
Conociendo el ecosistema de Windows Phone 8 y Windows 8
Conociendo el ecosistema de Windows Phone 8 y Windows 8Conociendo el ecosistema de Windows Phone 8 y Windows 8
Conociendo el ecosistema de Windows Phone 8 y Windows 8
Sorey García
 
Hackaton Globant - Windows Phone (snnipets and tips)
Hackaton Globant - Windows Phone (snnipets and tips)Hackaton Globant - Windows Phone (snnipets and tips)
Hackaton Globant - Windows Phone (snnipets and tips)
Sorey García
 
Windows Phone 8: Tips de Diseño para Desarrolladores
Windows Phone 8: Tips de Diseño para DesarrolladoresWindows Phone 8: Tips de Diseño para Desarrolladores
Windows Phone 8: Tips de Diseño para Desarrolladores
Sorey García
 
Windows Phone 8 en Campus Party
Windows Phone 8 en Campus PartyWindows Phone 8 en Campus Party
Windows Phone 8 en Campus Party
Sorey García
 
Introducción a XAML y MVVM
Introducción a XAML y MVVMIntroducción a XAML y MVVM
Introducción a XAML y MVVM
Sorey García
 
Sensibilización en Metodologías Ágiles
Sensibilización en Metodologías ÁgilesSensibilización en Metodologías Ágiles
Sensibilización en Metodologías Ágiles
Sorey García
 
Boya.ca - Introducción a Windows Phone
Boya.ca - Introducción a Windows PhoneBoya.ca - Introducción a Windows Phone
Boya.ca - Introducción a Windows Phone
Sorey García
 
Gestión de conocimiento
Gestión de conocimientoGestión de conocimiento
Gestión de conocimiento
Sorey García
 

Más de Sorey García (20)

Mision inspiración para docentes
Mision inspiración para docentesMision inspiración para docentes
Mision inspiración para docentes
 
NetConfUY: Maximizando la productividad del desarrollo móvil
NetConfUY: Maximizando la productividad del desarrollo móvilNetConfUY: Maximizando la productividad del desarrollo móvil
NetConfUY: Maximizando la productividad del desarrollo móvil
 
Introducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAMLIntroducción a Xamarin Forms con XAML
Introducción a Xamarin Forms con XAML
 
WIE: El poder de transformar al mundo con tecnología
WIE: El poder de transformar al mundo con tecnologíaWIE: El poder de transformar al mundo con tecnología
WIE: El poder de transformar al mundo con tecnología
 
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
TechDay 2015 - C# y XAML: El poder de construir aplicaciones en todas las pla...
 
Internet de las Cosas y Netduino
Internet de las Cosas y NetduinoInternet de las Cosas y Netduino
Internet de las Cosas y Netduino
 
Misión: Inspiración
Misión: InspiraciónMisión: Inspiración
Misión: Inspiración
 
Codies.Launch()
Codies.Launch()Codies.Launch()
Codies.Launch()
 
[Avanet] Fiesta del Libro y la Cultura Medellín
[Avanet] Fiesta del Libro y la Cultura Medellín[Avanet] Fiesta del Libro y la Cultura Medellín
[Avanet] Fiesta del Libro y la Cultura Medellín
 
MVP Open Day - Best Practices/Experiences
MVP Open Day - Best Practices/Experiences MVP Open Day - Best Practices/Experiences
MVP Open Day - Best Practices/Experiences
 
GWAB: Azure Mobile Services
GWAB: Azure Mobile ServicesGWAB: Azure Mobile Services
GWAB: Azure Mobile Services
 
Similitudes y deferencias en UX para Windows Phone y Windows
Similitudes y deferencias en UX para Windows Phone y WindowsSimilitudes y deferencias en UX para Windows Phone y Windows
Similitudes y deferencias en UX para Windows Phone y Windows
 
Conociendo el ecosistema de Windows Phone 8 y Windows 8
Conociendo el ecosistema de Windows Phone 8 y Windows 8Conociendo el ecosistema de Windows Phone 8 y Windows 8
Conociendo el ecosistema de Windows Phone 8 y Windows 8
 
Hackaton Globant - Windows Phone (snnipets and tips)
Hackaton Globant - Windows Phone (snnipets and tips)Hackaton Globant - Windows Phone (snnipets and tips)
Hackaton Globant - Windows Phone (snnipets and tips)
 
Windows Phone 8: Tips de Diseño para Desarrolladores
Windows Phone 8: Tips de Diseño para DesarrolladoresWindows Phone 8: Tips de Diseño para Desarrolladores
Windows Phone 8: Tips de Diseño para Desarrolladores
 
Windows Phone 8 en Campus Party
Windows Phone 8 en Campus PartyWindows Phone 8 en Campus Party
Windows Phone 8 en Campus Party
 
Introducción a XAML y MVVM
Introducción a XAML y MVVMIntroducción a XAML y MVVM
Introducción a XAML y MVVM
 
Sensibilización en Metodologías Ágiles
Sensibilización en Metodologías ÁgilesSensibilización en Metodologías Ágiles
Sensibilización en Metodologías Ágiles
 
Boya.ca - Introducción a Windows Phone
Boya.ca - Introducción a Windows PhoneBoya.ca - Introducción a Windows Phone
Boya.ca - Introducción a Windows Phone
 
Gestión de conocimiento
Gestión de conocimientoGestión de conocimiento
Gestión de conocimiento
 

Último

Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
sunwndniel
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
MenaOlortinYherlyEli
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
walter729637
 
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
KEVINYOICIAQUINOSORI
 
Pedagogía : Gamificación en la educación
Pedagogía : Gamificación en la educaciónPedagogía : Gamificación en la educación
Pedagogía : Gamificación en la educación
César Luis Camba Martínez
 
Conceptos basicas de programacion (1) (1).docx
Conceptos basicas de programacion (1) (1).docxConceptos basicas de programacion (1) (1).docx
Conceptos basicas de programacion (1) (1).docx
JuanVelandia33
 
Solución de vulnerabilidades en dispositivos de Area Local
Solución de vulnerabilidades en dispositivos de Area LocalSolución de vulnerabilidades en dispositivos de Area Local
Solución de vulnerabilidades en dispositivos de Area Local
investigacionproec
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
sunwndniel
 
Tecnologia segundo periodo unicab Ciclo VI Camila Ochoa
Tecnologia segundo periodo unicab Ciclo VI Camila OchoaTecnologia segundo periodo unicab Ciclo VI Camila Ochoa
Tecnologia segundo periodo unicab Ciclo VI Camila Ochoa
camilaochoacortina
 
MATERIAL BASE D A T O S .docx
MATERIAL BASE    D A T O S              .docxMATERIAL BASE    D A T O S              .docx
MATERIAL BASE D A T O S .docx
CarlosAndresLoaizaRe
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
estudios22
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
gregory760891
 
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMSLA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
lzavaletagu17
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
Henry W. Zavala
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
cyberquiximies
 
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptxDESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
fortinodominguez78
 
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
AMADO SALVADOR
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
Katia Reyes
 
Tecnología comercial y tipos de tecnología
Tecnología comercial y tipos de tecnologíaTecnología comercial y tipos de tecnología
Tecnología comercial y tipos de tecnología
rnzs85wvch
 
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videosCAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
Iris505525
 

Último (20)

Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
Reconocimiento del Secuenciador de nanoporos (Nanopore sequencing) MinIon Mk1...
 
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
TESisssssssss de yhnnjuuhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj...
 
Catalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdfCatalogo-Voxtech- accesorios radios RF.pdf
Catalogo-Voxtech- accesorios radios RF.pdf
 
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdfInforme de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
Informe de electroforesis del ADN MEDIANTE EL MinION Mk1C.pdf
 
Pedagogía : Gamificación en la educación
Pedagogía : Gamificación en la educaciónPedagogía : Gamificación en la educación
Pedagogía : Gamificación en la educación
 
Conceptos basicas de programacion (1) (1).docx
Conceptos basicas de programacion (1) (1).docxConceptos basicas de programacion (1) (1).docx
Conceptos basicas de programacion (1) (1).docx
 
Solución de vulnerabilidades en dispositivos de Area Local
Solución de vulnerabilidades en dispositivos de Area LocalSolución de vulnerabilidades en dispositivos de Area Local
Solución de vulnerabilidades en dispositivos de Area Local
 
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdfBIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
BIOSENSORES BASADOS EN NANOTECNOLOGÍA.pdf
 
Tecnologia segundo periodo unicab Ciclo VI Camila Ochoa
Tecnologia segundo periodo unicab Ciclo VI Camila OchoaTecnologia segundo periodo unicab Ciclo VI Camila Ochoa
Tecnologia segundo periodo unicab Ciclo VI Camila Ochoa
 
MATERIAL BASE D A T O S .docx
MATERIAL BASE    D A T O S              .docxMATERIAL BASE    D A T O S              .docx
MATERIAL BASE D A T O S .docx
 
DN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en PerúDN Consultores | Una mirada al mercado de fibra en Perú
DN Consultores | Una mirada al mercado de fibra en Perú
 
Generaciones de Computadoras .
Generaciones de Computadoras                 .Generaciones de Computadoras                 .
Generaciones de Computadoras .
 
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMSLA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
LA INTERCULTURALIDAD EN EL PERU SEGUN LA OMS
 
Evolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TICEvolución, características, aplicación, ventajas y desventajas de las TIC
Evolución, características, aplicación, ventajas y desventajas de las TIC
 
aplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geograficoaplicaciones de sistema de informacion geografico
aplicaciones de sistema de informacion geografico
 
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptxDESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
DESARROLLO_DE_APLICACIONES_MULTIMEDIA.pptx
 
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
Catalogo General Elica Campanas Extraccion Amado Salvador Distribuidor Oficia...
 
El uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptxEl uso de las TIC en la vida cotidiana.pptx
El uso de las TIC en la vida cotidiana.pptx
 
Tecnología comercial y tipos de tecnología
Tecnología comercial y tipos de tecnologíaTecnología comercial y tipos de tecnología
Tecnología comercial y tipos de tecnología
 
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videosCAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
CAPCUT PASO A PASO - herramientas tecnológicas de edición de videos
 

Planificando las bases de una aplicación windows phone

  • 1. Sorey García (@soreygarcia) http://blog.soreygarcia.me Planificando las bases de una aplicación Windows Phone Es común que en muchas ocasiones cuando se desea aprender Windows Phone, se encuentre gran cantidad de recursos de desarrollo y otra cantidad de guías de diseño sobre cómo 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 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 experiencia tratando de enseñar la plataforma a desarrolladores principiantes en el tema, e incluso desarrolladores de otras plataformas que aún no trabajan con enfoques como MVC, un paso queda en el implícito, y es la construcción de las Vistas Modelo. Independiente de si aplicaremos o no MVVM en su totalidad, o incluso la forma de implementación que decidamos 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 un cuerpo humano sin esqueleto? La misma sensación podría tenerse de tu aplicación si no se realiza correctamente la planificación de las Vistas Modelo. Contar con la definición de estas estructuras hace más 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 máximo las características de Blend, en especial sus datos autogenerados, y su capacidad de establecer enlaces fácilmente sin intervenir el código XAML, un enfoque que es útil incluso cuando se cuenta con el apoyo de un diseñador en los equipos de trabajo, puesto que las Vista Modelo mejoran la comunicación con el diseñador para hacerle saber cuáles son los datos que a proveerle, y viceversa, si el diseñador requiere algo, va a solicitar incluir en una Vista Modelo la propiedad necesaria, sin necesidad de conocer la lógica de negocio o el back-end de nuestra aplicación, logrando así una separación entre estas dos tareas. La meta del 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 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 hábiles manejándolo, es bueno tener discernimiento para revisar el código 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, aún para quienes solo somos programadores. Como si fueran planos Cuando estás planificando una aplicación, la situación es bastante similar a como se construyen los planos de una edificación, sin embargo es obvio que lo primero que imaginamos es lo externo, aquello que podemos visualizar. Vamos a realizar un ejemplo corto usando una aplicación que se encuentra en planificación, Pomori (Tomates en Italiano).
  • 2. Sorey García (@soreygarcia) http://blog.soreygarcia.me Imaginar cómo queremos que se vea la aplicación es bastante fácil, unos usan dibujos a lápiz, otras herramientas, cualquiera práctica es válida, lo importante siempre es planificar antes de escribir código y el primer paso recomendado es entender el escenario general de la aplicación para hacernos una idea de los contenedores a crear. Las Vista Modelo, no son más que las clases que enlazaremos a nuestras vistas (Páginas de XAML) para hacer que se muestren los datos, también para que se transporten dichos datos hasta las clases encargadas de procesarlos, sin poner mucho código tras estas páginas o vistas. La razón puede entenderse más fácilmente cuando pensamos en que llevaremos la aplicación a Windows 8, entre más código creemos en las vistas, portar nuestra aplicación llevará más trabajo, pero a diferencia de los edificios, si tenemos 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 logra enlazarse 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 el mapa visual de navegación. El que se muestra a continuación es de la aplicación que estamos usando como ejemplo.
  • 3. Sorey García (@soreygarcia) http://blog.soreygarcia.me ADD/MODIFY TASK SPLASH TASK S LIST SETTINGS PRODUCTIVITY REPORT ABOUT La practica más común consiste en definir una clase principal la cual es la contenedora de todas las instancias de las demás clases contenedoras que usa nuestra aplicación, como contenedoras no se debe entender más que las Vista Modelo. Al observar la navegación y el prototipo podría 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 navegación, se puede observar que la ventana principal es un Pivot que tiene tareas según su fecha y estado. En “To Do” estarán todas las tareas 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.me Para que el enlace refleje la manera como están contenidos los datos debemos añadir entonces algo más, una clase contenedora que tenga listas de tareas, de tal forma que los enlaces a través del XAML se establezcan de manera jerárquica. class Class Model MainView Model «binding» Task's 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 a entenderlo. Cualquiera podría pensar de la imagen anterior, que si el MainViewModel está enlazado a la pantalla principal de la aplicación, la ventana de adicionar o modificar una tarea, estaría 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 ejecución y que estarán en memoria. Para entender esto, es necesario que detallemos las propiedades de las clases que definimos en primera instancia.
  • 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() :void Si se está analizando contra los prototipos podríamos preguntarse de donde va a salir el tiempo por ejemplo, en este caso hace falta conocer que la duración de los pomodoros es estandar así que sería 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 configuración que el usuario tenga de la aplicación, es algo con lo que es más fácil familiarizarse cuando tienes los conceptos básicos de XAML bien interiorizados. Otra observación a realizar es que nuestra clase MainViewModel tiene además 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 razón de que las pantallas esten enlazadas con MainViewModel y no con TaskViewModel, ya que alguien más debe instanciar TaskViewModel para poder enlazarla contra una vista o página, y al enlazar además sus comandos a las vistas estos podrán ser usados. Manos a la obra Planear es excelente, sin embargo para los desarrolladores, siempre es más divertido pasar a la construcción. Para ello usaremos Blend, una de las metas es lograr que el diseño quede lo más similar posible, cosa que veremos cuando la aplicación este disponible en la tienda. La meta propuesta en este artí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 deben implementar INotifyPropertyChanged para poder enlazar sus propiedades y notificar los cambios de las mismas a las vistas, y además que las propiedades a enlazar deben ser completas, no implícitas, y que las listas de objetos deben ser ObservableCollection.
  • 6. Sorey García (@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 además de que el contexto de cada uno de los PivotItem es uno de los items de la lista de categorias..
  • 7. Sorey García (@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 válido 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.
  • 8. Sorey García (@soreygarcia) http://blog.soreygarcia.me El efecto rápido muestra una plantilla por defecto con los datos autogenerados por Blend.
  • 9. Sorey García (@soreygarcia) http://blog.soreygarcia.me Es 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 por Blend con base a una clase, no están disponibles en tiendo de diseño, de hecho no tendría mucho sentido en esta aplicación, 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 ejecución. La práctica propuesta en las plantillas por defecto de las plantillas tipo Panorama y Pivot consiste en crear una propiedad estática en App.cs de tal manera que siendo la clase App el contexto general de nuestra aplicación, dicha propiedad a su vez este siempre disponible.
  • 10. Sorey García (@soreygarcia) http://blog.soreygarcia.me Faltaría asignar dicha instancia a la página principal, y eso también está disponible como ejemplo en las plantillas. 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 Loaded de cada una de las páginas, se podrá observar como no es necesaria ninguna otra línea de código para asignar a las páginas o vistas dichos datos, siempre y cuando estemos alimentando en tiempo de ejecución los objetos correctos. Les reitero mi consejo de antes, las herramientas disponibles para el desarrollo de tecnologías Microsoft buscan hacer a los profesionales bastante productivos, sin embargo usarlas no debe en ningún momento apartarlos de la necesidad de entender los conceptos fundamentales, tal como las bases de una aplicación, 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 aplicación, si no la tienes, parte de esta aplicación está sin planificar en el documento. ¿Qué otras clases construiría? ¿Cómo las enlazaría? 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 más fácil de escalarla y portarla. ¡A planificar entonces y crear buenas bases para poder crecer! Sorey Bibiana García Zapata @soreygarcia