Lab01

Desarrollo de Apps para Windows 8 Trabajando con datos: Vistas de Lista y Enlace de datos

Página 1 de 27 http://ticapacitacion.com

Laboratorio

Trabajando con datos: Vistas de Lista y Enlace de datos

Version: 2.0.0



CONTENIDO

INTRODUCCIÓN

EJERCICIO 1: CREAR UN PROYECTO METRO

Tarea 1: Crear el proyecto

Tarea 2: Familiarizarse con el proyecto

Tarea 3: Personalizar la página de inicio

Tarea 4: Personalizar la aplicación

EJERCICIO 2: CARGAR DATOS DE RECETAS

Tarea 1: Importar los datos de las Recetas

Tarea 2: Cargar los datos de las recetas

Tarea 3: Probar el resultado

EJERCICIO 3: PERSONALIZAR LA INTERFAZ DE USUARIO

Tarea 1: Modificar la página de inicio

Tarea 2: Modificar la página de detalle del grupo

Tarea 3: Modificar la página de detalle del elemento

RESUMEN



Introduccio n

Windows 8 ofrece una nueva plataforma de desarrollo que permite a los desarrolladores escribir

aplicaciones que pueden utilizarse de manera similar tanto en computadoras de escritorio,

Tabletas u otros dispositivos.

Las aplicaciones desarrolladas en esta nueva plataforma son conocidas como “Aplicaciones estilo

Metro” o en inglés “Metro-Style apps”. Las aplicaciones que se ejecutan sobre esta nueva

plataforma, pueden ser escritas con HTML y JavaScript o con XAML y C#, VB o C++.

El modelo de programación HTML permite a los desarrolladores familiarizados con HTML5 y

JavaScript aplicar sus conocimientos para construir aplicaciones estilo Metro.

De la misma forma, el modelo de programación XAML proporciona un ambiente familiar para los

desarrolladores de Silverlight y Windows Presentation Foundation que pueden ahora aplicar sus

conocimientos para construir aplicaciones estilo Metro.

Tanto los desarrolladores de HTML como los desarrolladores de XAML, pueden ofertar sus

aplicaciones estilo Metro a través del Windows Store.

Las aplicaciones estilo Metro responden a las APIs proporcionadas por el Windows Runtime

también conocido como WinRT. WinRT proporciona miles de clases agrupadas dentro de más de

100 espacios de nombres y permiten realizar prácticamente cualquier cosa, desde compartir

contenido con otras aplicaciones hasta acceder al Windows Storage.

Para las aplicaciones desarrolladas con HTML y JavaScript, las APIs del WinRT son complementadas

por La Biblioteca de Microsoft Windows para JavaScript, conocida en inglés como Microsoft

Windows Library for JavaScript o simplemente WinJS.

Para las aplicaciones desarrolladas en XAML y C#, VB o C++, las APIs del WinRT son

complementadas por las APIs .NET para el estilo Metro, conocidas en inglés como .NET APIs for

Metro style.

En este laboratorio, utilizarás XAML y C# para crear una aplicación llamada “Contoso CookBook”.

En los siguientes laboratorios, continuaras desarrollando la aplicación para obtener finalmente

una aplicación Metro que esté lista para ser publicada hacia el Windows Store.



Objetivos

Crear un nuevo proyecto Metro utilizando las plantillas de Visual Studio

Entender la estructura del proyecto y los archivos incluidos

Personalizar la aplicación con imágenes que la individualicen

Utilizar la clase HttpClient para obtener los datos de las recetas desde Windows Azure

Consumir los datos obtenidos y enlazarlos a un control GridView

Utilizar plantillas de datos para personalizar la forma en que los datos son presentados por

el control GridView

Modificar el código y el marcado generado por Visual Studio para personalizar la interfaz

de usuario de la aplicación

Requisitos

Para la realización de este laboratorio es necesario contar con un equipo de desarrollo con el

siguiente software instalado:

Microsoft Windows 8 Release Preview

Microsoft Visual Studio 2012 RC

Puede utilizarse una máquina virtual como equipo de desarrollo.

Tiempo estimado para completar este laboratorio: 60 minutos.



Ejercicio 1: Crear un proyecto Metro

En este primer ejercicio crearás una nueva solución en Visual Studio conteniendo un proyecto C#

Windows Metro Style Grid Application. Posteriormente examinarás los archivos generados y

realizarás modificaciones sencillas para personalizar la interfaz de usuario de la aplicación.

Tarea 1: Crear el proyecto

El primer paso es crear un nuevo proyecto para hospedar el código y los recursos que formarán

parte de la aplicación “Contoso Cookbook“ así como para examinar los elementos que Visual

Studio incluye en el proyecto creado.

1. Inicia Visual Studio y utiliza el comando File - New Project para crear un nuevo proyecto

Visual C# llamado “ContosoCookbook”. Debes asegurarte de seleccionar “Windows Metro

Style” desde la lista de plantillas Visual C# y de seleccionar “Grid App (XAML)” desde la

lista de tipos de plantillas como se muestra en la siguiente figura.



2. Selecciona Start Debugging desde el menú Debug o simplemente presiona F5 para lanzar

la aplicación en modo de depuración. La aplicación iniciará y se mostrará la pantalla de

inicio de la aplicación similar a la siguiente.

Esta página también es conocida como Home Page o Start Page.

3. Tomate un tiempo para jugar con la aplicación. Utiliza el mouse (o tu dedo si tienes una

pantalla sensible al tacto - touch screen -) para desplazar la pantalla horizontalmente.

Nota: La cuadricula y el desplazamiento horizontal es proporcionado por el control GridView que es uno de los muchos controles proporcionados por el WinRT en el espacio de nombres Windows.UI.Xaml.Controls para construir ricas interfaces de usuario.

4. Examina que sucede cuando tocas o das clic en los elementos del GridView. Por ejemplo,

da clic en el elemento “Item Title: 1”. Se mostrará la página de detalle del elemento.



Nota: Al estar en la página de detalle del elemento, puedes desplazarte horizontalmente para ver todos los elementos del grupo. Si estas utilizando un Mouse, puedes dar clic sobre las flechas que aparecen en los extremos derecho e izquierdo de la pantalla. Ese desplazamiento es proporcionado por un control FlipView, el cual, es otro de los controles que aparecen en Windows.UI.Xaml.Controls.

5. Regresa a la página de inicio de la aplicación dando clic en el botón de regreso ubicado en

la parte superior izquierda de la pantalla.



6. Da clic sobre el título “Group Title: 1” debajo del titulo “ContosoCookbook”.

Se muestra ahora la imagen de la página de detalle del grupo similar a la siguiente.

7. Regresa a Visual Studio (puedes presionar la tecla Windows y la tecla D simultáneamente

para ir al modo Desktop de Windows 8).

Selecciona Stop Debugging desde el menú Debug para detener la aplicación.

Tarea 2: Familiarizarse con el proyecto

Visual Studio crea varios archivos al momento de crear el proyecto. Específicamente, crea varias

páginas XAML. También incluye lógica para navegar entre páginas y datos de ejemplo. Para

implementar la aplicación “Contoso Cookbook” debemos trabajar con lo que Visual Studio ha



generado. Tómate un momento para familiarizarte con la estructura del proyecto y con los

recursos creados por Visual Studio.

1. En la ventana Solution Explorer, observa el contenido del folder raíz del proyecto. Ahí

podrás encontrar 4 archivos clave con el código detrás (code-behind) de dichos archivos:

App.xaml. Este archivo representa a la aplicación y sus recursos.

GroupDetailPage.xaml. Este archivo representa la página de detalle de un grupo.

GroupedItemsPage.xaml. Este archivo representa la página de inicio de la

aplicación.

ItemDetailPage.xaml. Este archivo representa la página de detalle de un

elemento.

2. Examina el folder Assets del proyecto, ahí encontrarás imágenes utilizadas para

personalizar la aplicación.

3. Examina el folder Common del proyecto. Entre los archivos que podrás encontrar está el

archivo BooleanToVisibilityConverter.cs el cual contiene una clase que implementa la

Interface IValueConverter para convertir los valores booleanos False y True en

Visibility.Collapsed y Visibility.Visible respectivamente. Ahí mismo podrás encontrar el

archivo StandardStyles.xaml que contiene recursos XAML utilizados para aplicar estilos a la

aplicación.

4. Examina el contenido del folder DataModel, ahí encontrarás un archivo llamado

SampleDataSource.cs conteniendo clases para representar datos así como datos de

ejemplo.

Tarea 3: Personalizar la página de inicio

Actualmente el nombre del proyecto “ContosoCookook” aparece en la parte superior de la página

de inicio. Lo que haremos es modificar ese texto para que se muestre “Contoso Cookook”.

1. Abre la página App.xaml en Visual Studio

2. Busca el recurso string llamado “AppName” y cambia su valor de “ContosoCookook” a

“Contoso Cookook” como se muestra a continuación:

3. Presiona F5 para lanzar la aplicación y confirma que el texto del título al inicio de la página

de inicio ha cambiado.



4. Regresa a Visual Studio y detén la aplicación utilizando el comando Debug/Stop

Debugging.

Tarea 4: Personalizar la aplicación

Si vas a la pantalla de inicio de la interfaz Metro, podrás notar que aparece un mosaico (Tile)

“ContosoCookbook”. Ese mosaico es el mosaico primario de la aplicación y es creado

normalmente cuando la aplicación es instalada. En nuestro caso fue creado la primera vez que fue

ejecutada la aplicación desde Visual Studio. La imagen en el mosaico es tomada del archivo

Logo.png dentro del folder Assets.

En esta tarea remplazarás el logo que Visual Studio ha generado con uno propio. Al mismo tiempo

remplazaras las otras imágenes para personalizar la aplicación y finalizaras la personalización

modificando el Manifiesto de la aplicación.

1. En la pantalla de inicio de la interfaz Metro, da clic con el botón derecho del mouse sobre

el mosaico de la aplicación ContosoCookbook y selecciona Uninstall para desinstalar la

aplicación y eliminar el mosaico.



2. Regresa a Visual Studio y da clic con el botón derecho del mouse sobre el folder Assets.

Selecciona la opción Add - Existing Item… para importar los archivos Logo.png,

SmallLogo.png, SplashScreen.png, Storelogo.png y WideLogo.png desde el folder

labs\images que acompañan a este documento. Cuando te sea preguntado, permite que

los archivos remplacen los archivos existentes con el mismo nombre.

3. En la ventana Solution Explorer da doble clic al archivo package.appxmanifest para abrir el

manifiesto de la aplicación.

Nota: El manifiesto de la aplicación contiene metadata relacionada con la aplicación estilo Metro (Metro-style app) y es incrustada en cada aplicación que construyas. En tiempo de ejecución, el manifiesto le dice a Windows 8 todo lo que necesita saber acerca de la aplicación incluyendo el nombre de la aplicación, el publicador y las capacidades que la aplicación requiere incluyendo el acceso a cámaras Web, micrófonos, Internet y elementos del sistema de archivos – específicamente, las bibliotecas de los documentos del usuario, música y videos.

4. Modifica el nombre a mostrar de la aplicación por “Contoso Cookbook” y su descripción

por “Contoso Cookbook application”. Escribe también “Assets\WideLogo.png” en el

cuadro de texto “Wide logo” para proporcionar a la aplicación un mosaico amplio.



5. Presiona F5 para lanzar la aplicación

6. Observa el nuevo splash screen (la pantalla que se muestra brevemente conforme la

aplicación se abre).

7. Dirígete hacia la pantalla de inicio de Windows 8 y confirma que contiene un mosaico

similar al siguiente.



Nota: Si prefieres un mosaico cuadrado, haz clic con el botón derecho al mosaico (o en un monitor táctil arrastra el mosaico ligeramente hacia abajo y suéltalo) y haz clic en “Smaller” de la barra de aplicación.

El mosaico se mostrará ahora cuadrado.

8. Regresa a Visual Studio y detén la ejecución.



Ejercicio 2: Cargar datos de recetas

El proyecto actualmente incluye datos de ejemplo pero desearás remplazarlos con datos propios.

En este ejercicio remplazaras los datos de ejemplo con datos reales de recetas así como de sus

imágenes.

Tarea 1: Importar los datos de las Recetas

El primer paso es remplazar las clases de datos de ejemplo que Visual Studio ha creado con clases

de datos de recetas.

1. En la ventana Solution Explorer, haz clic con el botón derecho del Mouse sobre el folder

DataModel y utiliza el comando Add – Existing Item para importar el archivo

RecipeDataSource.cs localizado dentro del folder labs\data que acompaña a este

documento. Puedes también copiarlo arrastrando el archivo desde el Windows Explorer

hacia el folder DataModel en la ventana Solution Explorer.

Nota: Visual Studio proporciona un archivo llamado SampleDataSource.cs que contiene clases de datos llamadas SampleDataCommon, SampleDataItem, SampleDataGroup, y SampleDataSource. RecipeDataSource.cs contiene versiones de esas mismas clases, adaptadas a los datos de recetas: RecipeDataCommon, RecipeDataItem, RecipeDataGroup, y RecipeDataSource. A diferencia de SampleDataSource, la cual incluye datos de ejemplo por código, RecipeDataSource contiene los métodos llamados LoadLocalDataAsync y LoadRemoteDataAsync los cuales cargan los datos de las recetas desde archivos que importarás en la siguiente tarea o desde Azure. También incluye todo el código Windows.Data.Json necesario para convertir los datos de recetas que se encuentran en formato JSON y cargarlos en instancias de RecipeDataItem y RecipeDataGroup. Tómate el tiempo necesario para examinar el contenido del archivo RecipeDataSource.cs para entender la forma en que carga y consume los datos. En particular, examina el método LoadRemoteDataAsync el cual utiliza la clase HttpClient de .NET para cargar los datos de las recetas desde la nube.

2. Abre el archivo GroupdedItemsPage.xaml.cs y cambia todas las referencias de

SampleDataSource hacia RecipeDataSource, todas las referencias de SampleDataGroup

hacia RecipeDataGroup y todas las referencias de SampleDataItem hacia RecipeDataItem.

3. Realiza lo mismo en el archivo GroupDetailPage.xaml.cs.



4. Realiza lo mismo con el archivo ItemDetailPage.xaml.cs.

Tarea 2: Cargar los datos de las recetas

El siguiente paso es importar las imágenes de las recetas y modificar la aplicación para cargar los

datos de las recetas.

1. Crea un nuevo folder llamado “Data” en el proyecto ContosoCookbook. Puedes realizar

esa acción dando clic con el botón derecho del Mouse sobre el proyecto dentro de la

ventana Solution Explorer y seleccionando la opción Add – New Folder.

2. Haz clic con el botón derecho de Mouse sobre la carpeta Data y utiliza el comando Add –

Existing Item para importar el archivo Recipes.txt desde el folder labs\data que acompaña

a este documento.

Nota: Si examinas el archivo Recipes.txt, observarás que contiene datos codificados en formato JSON denotando recetas y grupos de recetas.

3. Agregar un folder llamado “Images” al proyecto.

4. Copia los folders llamados chinese, french, german, indian, italian, y mexican (incluyendo

sus contenidos) desde el folder labs\images que acompaña a este documento hacia el

directorio images del proyecto. Es importante que los coloques en este directorio ya que

los URLs de las imágenes dentro del archivo Recipes.txt asumen que ahí están colocadas

las imágenes.

Nota: La manera más fácil de importar los archivos es arrastrándolos desde el Explorador de Windows hacia el directorio images de la ventana Solution Explorer de Visual Studio.

5. Abre el archivo App.xaml.cs y agrega la siguiente sentencia using al inicio.

6. Ahora agrega el siguiente código al método OnLaunched justo después del primer if:



Nota: RecipeDataSource.LoadLocalDataAsync lee los datos de las recetas en formato JSON desde el archivo Recipes.txt que importaste previamente. Los URLs de las imágenes que aparecen en el archivo Recipes.txt se refieren a imágenes dentro del folder images del Proyecto. Si lo prefieres, puedes descargar los datos de las recetas desde Windows Azure remplazando la llamada de RecipeDataSource.LoadLocalDataAsync por la llamada a RecipeDataSource.LoadRemoteDataAsync.

Tarea 3: Probar el resultado

Ahora es tiempo de ejecutar la aplicación y ver como Contoso Cookbook ha cambiado.

1. Presiona F5 para ejecutar la aplicación y verifica que la página de inicio se muestra como la

siguiente imagen.



2. Regresa a Visual Studio y detén la aplicación.



Ejercicio 3: Personalizar la interfaz de

usuario

Esto es un buen inicio considerando que solo hemos escrito algunas líneas de código. Ahora

necesitamos personalizar la interfaz de usuario y amoldarla a nuestro modelo de datos.

En este ejercicio, modificarás la página de inicio, la página de detalle de elemento y la página de

detalle del grupo para mejorar la apariencia de la aplicación Contoso Cookbook.

Tarea 1: Modificar la página de inicio

Empecemos modificando la página de inicio para mejorar la apariencia de los elementos receta.

1. Abre el archivo StandardStyles.xaml localizado en el folder Common del proyecto.

2. Busca el elemento DataTemplate cuyo nombre es “Standard250x250ItemTemplate”. Esta

es la plantilla de datos utilizada para mostrar los elementos de las recetas en la página de

inicio.

3. Elimina el TextBlock del elemento DataTemplate (el TextBlock cuya propiedad Text esta

enlazada a “Subtitle”) ya que la clase RecipeDataItem no tiene una propiedad “Subtitle”.

4. En la misma plantilla, cambia el ancho y alto del Grid a 320 por 240 para mantener la

relación de tamaño de las imágenes de las recetas de manera proporcional. También

cambia la altura del TextBlock restante de 60 a 48 para decrementar la altura del área

parcialmente transparente sobrepuesta en la parte inferior de cada elemento (la parte

negra parcialmente transparente en la que aparecen los títulos de las recetas).



Cambia también la propiedad enlazada a la propiedad Text del TextBlock de “Title” por

“ShortTitle.

El código debe ser similar al siguiente:

5. Ahora presiona F5 para ejecutar la aplicación. Verifica que los elementos en la página de

inicio se muestren como en la siguiente imagen:



Se puede notar la diferencia en el aspecto del tamaño de la imagen que ahora es

proporcional en la altura y el ancho. Además se puede notar la disminución de la parte

sobresaliente.

6. Regresa a Visual Studio y detén la ejecución de la aplicación.

Tarea 2: Modificar la página de detalle del grupo



Hasta este momento, has modificado la página de inicio para mejorar la apariencia de la aplicación

pero también necesitas modificar la página de detalle del grupo.

En esta tarea, trabajarás con la página de detalle del grupo para mejorar la presentación del

detalle del grupo.

1. Inicia la aplicación nuevamente y da clic en el titulo “Chinese” de la parte superior

izquierda de la pantalla para navegar a la página de detalle del grupo que muestra las

recetas chinas. Los cambios que realizaremos aquí son mínimos. Acortaremos el espacio

entre el nombre del grupo “Chinese” y la imagen debajo de él. Remplazaremos los títulos

de las recetas con títulos cortos y agregaremos el tiempo de preparación de cada receta.


3. Abre el archivo GroupDetailPage.xaml y busca el elemento <GridView.Header>. Elimina el

primer TextBlock. En el elemento Image remplaza Height=”400” por Width=”480” y

cambia el margen superior de 0 a 10. El código debe ser similar al siguiente:

4. Regresa al archivo StandardStyles.xaml y busca el elemento DataTemplate cuyo nombre es

“Standard500x130ItemTemplate”. Esta es la plantilla de datos utilizada para mostrar los

elementos de la receta en la página de detalle del grupo.

5. Cambia el ancho del Grid dentro de la plantilla de datos de 480 a 360.

6. Elimina el atributo Width=”110” del elemento Border dentro de la plantilla para mantener

el tamaño proporcional de las imágenes de las recetas.

7. Elimina los dos TextBlock cuya propiedad Text esta enlazada a las propiedades “Subtitle” y

“Description” de la fuente de datos respectivamente.

8. En el TextBlock restante, cambia la propiedad enlazada a la propiedad Text de “Title” a

“ShortTitle”.

9. Debajo del elemento TextBlock, agrega las siguientes sentencias para incluir el tiempo de

preparación debajo del título de la receta.



10. Después de realizar los cambios anteriores, el elemento DataTemplate será similar a lo

siguiente:



11. Inicia la aplicación y selecciona nuevamente “Chinese”. Verifica que la página de detalle

del grupo sea similar a la siguiente:


Tarea 3: Modificar la página de detalle del elemento

La tarea final de la creación de una interfaz de usuario básica para la aplicación es modificar la

página de detalle del elemento para mostrar más información de las recetas incluyendo

instrucciones de cocción y los ingredientes.

1. Ejecuta la aplicación y selecciona una de las recetas. Claramente puede notarse que

necesitaremos realizar más trabajo en la página de detalle de la receta.




3. Haz clic sobre el folder en la ventana Solution Explorer y utiliza el comando Add – New

Item para agregar una nueva clase al proyecto. Nombra el archivo como ListConverter.cs.

4. Agrega las siguientes sentencias using:

5. Modifica la clase ListConverter para implementar la Interface IValueConverter.

6. Haz clic con el botón derecho del Mouse sobre el tipo IValueConverter y selecciona la

opción Implement Interface - Implement Interface.

7. Remplaza el contenido del método Convert por el siguiente:



Nota: ListConverter es un convertidor de valor que convierte un arreglo de cadenas a una simple cadena conteniendo saltos de líneas. Esto lo necesitamos porque enlazaremos la propiedad Text de un TextBlock con un arreglo de cadenas y eso requiere de un convertidor del valor.

8. Abre el archivo itemDetailPage.xaml y agrega las siguientes sentencias a la sección

<Page.Resources> cerca del inicio del archivo para declarar una instancia de ListConverter.

9. Desplázate hacia abajo en el archivo itemDetailPage.xaml y busca el elemento FlipView

cuyo nombre es “flipView”.

10. Remplaza el elemento DataTemplate dentro del elemento FlipView con el contenido del

archivo DataTemplate.txt ubicado en el directorio labs\data que acompaña a este

documento.

Nota: La nueva plantilla de datos muestra recetas utilizando un formato de 3 columnas. El nombre de la receta, la imagen y tiempo de preparación aparecen en la columna 1, una lista de ingredientes aparece en la columna 2 y las instrucciones de preparación aparecen en la columna 3.



11. Ahora ejecuta la aplicación nuevamente. Selecciona “Fried Dumpling” y verifica que la

página de detalle del elemento sea similar a la siguiente:




Resumen

En este laboratorio creaste un nuevo proyecto Metro Style Grid App en Visual Studio, remplazaste

los datos de ejemplo con datos reales, remplazaste las imágenes predeterminadas de la aplicación

con imágenes propias y personalizaste la interfaz de usuario modificando algunos de los archivos

XAML proporcionados por Visual Studio. Por otra parte, tuviste la oportunidad de conocer la

estructura de un proyecto Metro y la forma en que se relacionan cada uno de sus elementos.

Aprendiste también como System.Net.Http.HttpClient puede ser utilizado para cargar datos de

una fuente remota y cómo los datos pueden ser enlazados a un control ListView para mostrar la

información en la pantalla y cómo las clases Windows.Data.Json del WinRT pueden ser utilizadas

para consumir datos JSON en C#. Al modificar las plantillas de datos, personalizaste la forma en

que los datos de las recetas y los grupos de recetas son presentados al usuario.

Esto es un gran inicio, pero hay mucho por hacer para que la aplicación Contoso Cookbook sea una

aplicación Metro de primera clase.

La jornada continúa en el siguiente laboratorio.

Documents

Lab01