Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

216
Desarrollo de Aplicaciones Móviles II

Transcript of Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

Page 1: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

Desarrollo de Aplicaciones Móviles II

Page 2: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

2

CARRERAS PROFESIONALES CIBERTEC

Page 3: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3

CIBERTEC CARRERAS PROFESIONALES

ÍNDICE

Página

Presentación 5

Red de contenidos 7

Unidad de aprendizaje 1

CONSTRUYENDO UNA APLICACIÓN WINDOWS PHONE

1.1 Tema 1 : Introducción a Windows Phone 11

1.1.1. : Plataforma del Windows Phone 11

1.1.2. : Ciclo de vida de una Aplicación Windows Phone 15

1.1.3. : Requerimientos de Windows Phone 17

1.1.4. : Laboratorio 19

1.2 Tema 2 : Trabajando con SilverLight en Windows Phone 32

1.2.1. : Introducción a Silverlight 32

1.2.2. : Controles en SilverLight 32

1.2.3. : Laboratorio 38

1.3 Tema 3 : Navegando entre páginas, manejo de estados 55

1.3.1. : Navegando entre páginas 55

1.3.2. : Manejo de estados 60

1.3.3. : Laboratorio 66

Unidad de aprendizaje 2

ACCESO A DATOS POR WINDOWS PHONE 7

2.1 Tema 3 : Almacenamiento de datos en WP7 77

2.1.1. : Almacenamiento Local: IsolatedStoraged 77

2.1.2. : Laboratorio 85

2.2 Tema 4 : Acceso a datos en Archivos XML 96

2.2.1. : Acerca de XML 96

2.2.2. : Manejo de datos en XML en aplicación Phone 97

2.2.3. : Controles enlazados a los datos 102

2.2.4. : Laboratorio 103

2.2 Tema 5 : Windows Communication Foundation 121

2.3.1. : WCF, Arquitectura 121

2.3.2. : Características del WCF 125

2.3.3. : Windows Phone y WCF 127

2.3.4. : Laboratorio 132

Page 4: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

4

CARRERAS PROFESIONALES CIBERTEC

Unidad de aprendizaje 3

DESARROLLANDO UNA APLICACIÓN XNA EN WINDOWS PHONE

3.1 Tema 6 : XNA 147

3.1.1. : XNA, características y requerimientos 147

3.1.2. : Plantilla del Proyecto 148

3.1.3. : Objetos Sprites 153

3.1.4. : Laboratorio 158

3.2 Tema 7 : Animación en XNA 175

3.2.1. : Animación: movimiento de imágenes, rotación, tintes,

acelerómetro

175

3.2.2. : Animación por dispositivos de entrada 179

3.2.3. : Manejo de colisiones 182

3.2.4. : Laboratorio 183

3.3 Tema 8 : Creando un Game FrameWork 197

3.3.1. : Diseño de un Game FrameWork 197

3.3.2. : Clases de un Game FrameWork 198

3.3.3. : Laboratorio 206

Page 5: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5

CIBERTEC CARRERAS PROFESIONALES

PRESENTACIÓN

Desarrollo de Aplicaciones Moviles II pertenece a la línea formativa y se dicta

en las carreras de tecnologías de la institución. El curso brinda un conjunto de

herramientas de programación para trabajar con una aplicación móvil que

permita al alumno desarrollar aplicaciones para el manejo de datos y consulta de

datos remotas, así como el desarrollo de juegos para una aplicación móvil en

forma eficiente.

El manual para el curso ha sido diseñado bajo la modalidad de unidades de

aprendizaje, las que se desarrollan durante semanas determinadas. En cada una

de ellas, hallará los logros, que debe alcanzar al final de la unidad; el tema

tratado, el cual será ampliamente desarrollado; y los contenidos, que debe

desarrollar, es decir, los subtemas. Por último, encontrará las actividades y

trabajos prácticos que deberá desarrollar en cada sesión, que le permitirán

reforzar lo aprendido en la clase.

El curso es eminentemente práctico: consiste en programación C# implementado

en una aplicación Windows Phone. La primera parte del manual nos enseña a

implementar las herramientas de SilverLight en una aplicación Windows Phone

para el manejo de datos locales y remotos. En primer lugar, se inicia con el

reconocimiento de las características de SilverLight. Continúa con el manejo de

las herramientas de SilverLight. Luego, vamos a realizar operaciones para el

manejo de datos locales y consulta de datos remotos utilizando Windows

Communication Foundation. La segunda parte del curso es la implementación de

juegos utilizando XNA. En primer lugar, reconoceremos los objetos que trabajan

en una aplicación de juegos; luego implementamos una aplicación de juegos con

animación. Se concluye con la realización de una aplicación de juegos con

animación con los formatos efectuados en el curso.

Page 6: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

6

CARRERAS PROFESIONALES CIBERTEC

Page 7: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7

CIBERTEC CARRERAS PROFESIONALES

RED DE CONTENIDOS

Desarrollo de Aplicaciones Móviles II

Construyendo una

aplicación Windows

Phone

Introduccion

WP7

Controles

SilverLight

Acceso a datos por Windows

Phone

Datos

locales

Datos remoto y

WCF

Desarrollando

aplicaciones XNA en

Windows

Phone

Objetos

Sprites Animación

Page 8: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

8

CARRERAS PROFESIONALES CIBERTEC

Page 9: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9

CIBERTEC CARRERAS PROFESIONALES

CONSTRUYENDO UNA APLICACIÓN WINDOWS PHONE

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, el alumno desarrolla procesos de diseño en una aplicación Windows Phone utilizando los controles estándares de la aplicación SilverLight, navegando entre las páginas, definiendo la textura y diseño del layout de una página.

TEMARIO

Unidad de aprendizaje 1: Construyendo una Aplicación Windows Phone 1.1 Tema 1 : Introducción a Windows Phone

1.1.1. : Plataforma del Windows Phone 1.1.2. : Ciclo de vida de una Aplicación Windows Phone 1.1.3. : Requerimientos de Windows Phone

1.2 Tema 2 : Trabajando con SilverLight en Windows Phone 1.2.1. : Introducción a Silverlight 1.2.2. : Controles en SilverLight 1.2.3. : Laboratorio

1.3 Tema 3 : Navegando entre páginas, manejo de estados 1.3.1. : Navegando entre páginas 1.3.2. : Manejo de estados 1.3.3. : Laboratorio

ACTIVIDADES PROPUESTAS

Los alumnos implementarán una aplicación Mobile para el manejo de imágenes, videos y archivos de audio.

Los alumnos aprenderán a navegar entre páginas, enviando datos entre ellas.

UNIDAD DE

APRENDIZAJE

1

Page 10: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

10

CARRERAS PROFESIONALES CIBERTEC

Page 11: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 1

CIBERTEC CARRERAS PROFESIONALES

1.1 INTRODUCCION A WINDOWS PHONE

Microsoft Windows Phone es un gran consumidor de aplicaciones móviles, porque

tiene todas las características a las que los usuarios se han acostumbrado con el

iPhone de Apple y los teléfonos inteligentes que utilizan tecnología Android, tales

como el Motorola Droid y HTC.

Estas características incluyen multi-touch. Una interfaz que implementa un nuevo

diseño moderno llamado METRO, los servicios de redes sociales como Facebook, y

soporta cuentas de correo electrónico tales como Yahoo, Hotmail, Google y AOL.

Incluso, si usted es un usuario corporativo, brinda soporte para Microsoft Exchange.

Excepcionalmente, el teléfono cuenta con una versión de Microsoft Office que puede

utilizar para leer, editar, guardar y sincronizar los archivos de Word, hojas de cálculo

Excel y otros formatos de Office, por lo que es un gran sistema operativo para el

teléfono de aquellos que utilizan Office en casa o en la oficina. Windows Phone

también se puede integrar con Xbox Live, lo que lo convierte en una gran opción para

los jugadores.

Microsoft Windows Phone utiliza el software de Zune para sincronizar las

aplicaciones instaladas, imágenes, música, las copias de seguridad y actualizaciones

flash del sistema operativo.

Microsoft también introduce el concepto de CENTRO: un centro de personas donde

los usuarios puede almacenar todos sus contactos y conexiones de redes sociales. Un

centro musical donde los consumidores pueden escuchar, descargar y comprar

música. Este centro también es conocido como el MARKET PLACE.

Una de las ventajas de Windows Phone es que Microsoft impone las especificaciones

de hardware en el fabricante del teléfono, lo que le facilita al programador desarrollar

una aplicación sin tener que preocuparse de las especificaciones de los códigos

dispositivos específicos. Para cualquier versión futura del teléfono, se garantiza que la

aplicación que se escribió hoy funcionará mañana independientemente de la marca del

teléfono.

Page 12: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

12

CARRERAS PROFESIONALES CIBERTEC

Para Windows Phone, el lenguaje elegido es C#. Los desarrolladores de Visual Basic

(VB) tendrán que esperar. En cuanto a un marco de desarrollo de aplicaciones, tiene

dos opciones: Silverlight o XNA. Silverlight y XNA utilizan la misma plataforma:

Framework .NET.

1.1.1 PLATAFORMA DEL WINDOWS PHONE

Microsoft no inventó nuevos lenguajes de programación o Frameworks para la

plataforma de aplicaciones de Windows Phone. Simplemente ha adaptado los

Framework existentes. Esto significa que será capaz de programar utilizando C# con el

Framework .NET.

.NET Framework proporciona una base común de biblioteca de clases que todos los

programadores .NET conocen, incluyendo soporte para multithreading, XML, LINQ,

colecciones, eventos, datos, excepciones, IO, modelo de servicio, manejo de redes,

manejo de texto, reflexión, internacionalización, recursos, manejo de hilos o threads, y

seguridad.

La plataforma Windows Phone aplicación consta de dos grandes marcos:

Silverlight

XNA

El uso de Silverlight se hará principalmente para el desarrollo de aplicaciones de

negocios y juegos sencillos en 2D. Silverlight utiliza el XAML: Extensible Application

Markup Language, que es un lenguaje de marcas declarativo, para crear una interfaz

de usuario atractiva. Los diseñadores tienen una gran flexibilidad en la creación de

interfaces de usuario para Windows Phone usando herramientas conocidas como

Adobe Illustrator, Photoshop y Microsoft Expression Design pues pueden crear la

interfaz de usuario basándose en vectores para luego exportarlas a XAML.

Por otro lado, XNA se utiliza principalmente para la creación de juegos ya que viene

con motores especializados que permiten crear tanto juegos basados en bucles como

en 3D.

Page 13: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 3

CIBERTEC CARRERAS PROFESIONALES

1.1.1.1 SILVERLIGHT EN WINDOWS PHONE

Silverlight utiliza la tecnología web que permite ver el contenido de las aplicaciones de

Internet así como la tecnología Flash.

Desde de una aplicación de Silverlight no se puede acceder a cualquier sistema

operativo a menos que sea a través de las funciones API proporcionadas

específicamente. La arquitectura de Silverlight lo provee de una seguridad inteligente

que lo hace muy adecuado para ser utilizado en Windows Phone, ya que Windows

Phone sólo proporciona las funciones API para desarrolladores y limita el acceso al

sistema operativo nativo.

También se utiliza Silverlight XAML, para crear gráficos basados en vectores y crear

animaciones. Cualquier diseñador familiarizado con las aplicaciones basadas en

vectores, como Adobe Illustrator y Microsoft Expression Design, puede crear

fácilmente elementos muy visuales exportarlos a XAML. Esto significa que los

diseñadores tienen un control total sobre el diseño y la apariencia, lo que hace a

Silverlight una opción muy potente para crear aplicaciones orientadas al consumidor.

XAML también proporciona una función de enlace de datos de gran alcance, por lo

que es ideal para crear aplicaciones orientadas a empresas.

1.1.1.2 XNA EN WINDOWS PHONE

XNA no es una tecnología nueva. Se utiliza en la creación de juegos para la consola

XBOX utilizando código administrado. Trabajar con XNA para juegos es una elección

natural, ya que Windows Phone tiene XBOX LIVE integrado.

Los juegos de XBOX son fácilmente instalados en una aplicación Windows Phone. Lo

único en lo que los desarrolladores de juegos de XBOX tienen que preocuparse es en

la resolución de pantalla, la misma que se puede ajustar fácilmente. En tal sentido,

XNA proporciona un marco perfecto para el desarrollo de juegos en formato 2D y 3D.

Asimismo, tiene la capacidad de administrar de manera solvente los objetos del juego

tales como modelos, mallas, sprites, texturas, efectos, terrenos y animaciones.

Page 14: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

14

CARRERAS PROFESIONALES CIBERTEC

1.1.1.3 WINDOWS PHONE EMULATOR

El emulador del Windows Phone se integra a Visual Studio .NET y se asemeja

bastante a un dispositivo verdadero. Sin embargo, hay cosas que no se puede hacer

en el emulador, como probar del acelerómetro, el GPS, el uso del compás, la radio

FM, los SMS, el correo electrónico, las llamadas de teléfono, la lista de contactos, la

cámara, y otras características que requieren un dispositivo físico.

Sin embargo, existe una técnica denominada Extensiones Reactivas, donde el

emulador es capaz de utilizar los recursos del dispositivo para simular la fuente de

datos que puede esperar en un teléfono real. Por ejemplo, con extensiones reactivas,

puede simular el acelerómetro y las lecturas del GPS para que el emulador pueda

trabajar sin la necesidad del dispositivo.

1.1.1.4 DISEÑO METRO

Microsoft dirige Windows Phone hacia los profesionales y para ello proporciona una

interfaz de usuario adecuada. En ese sentido, Microsoft desarrolló un estilo de diseño

denominado METRO. Este estilo de diseño deriva de la industria del transporte, pues

se basa en los carteles informativos de los aeropuertos y, sobre todo, de las

Page 15: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 5

CIBERTEC CARRERAS PROFESIONALES

estaciones de tren. Comprende una tipografía y organización gráfica que facilita el

acceso a los recursos del dispositivo así como la simpleza y claridad de la información.

Diseño Metro sigue estos principios:

Preocupación por limpieza, la luz y la tipografía, ya que los consumidores van a utilizar

el móvil durante sus desplazamientos para leer el correo electrónico, los SMS, revisar

su Facebook y publicaciones en Twitter.

Perfecta integración de hardware y software.

Soporte a gestos para permitir una experiencia de usuario multitáctil de clase mundial.

Centrado en la información de modo que la misma sea fácilmente accesible para el

usuario.

Puede encontrar más información sobre el diseño Metro en la siguiente dirección

electrónica: http://go.microsoft.com/fwlink/?LinkID=183218.

1.1.2 CICLO DE VIDA DE UNA APLICACIÓN WINDOWS PHONE

La siguiente figura ilustra un alto nivel de observación del ciclo de vida de una

aplicación.

Developer

Registration

Download SDK

Guidelines

Content

Publish Windows

Phone

Application

AppHub

http://developer.windowsphone.com

Manage Account

Manage

Application

Cetification

Signing Submission

Reports Analytics

Application Storefront

Deploy Update Reject

Consumer Rating

Comments

Windows Phone Marketplace

Purc

hase

Insta

l

Unin

sta

ll

Fee

dback

Application Category

Page 16: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

16

CARRERAS PROFESIONALES CIBERTEC

Como desarrollador, usted comenzará en el Hub de Aplicaciones con el registro de su

Windows Live ID (puede crearlo si usted no tiene uno). Una vez registrado en el Hub

de Aplicaciones, puede registrar su dispositivo físico. Recuerde que puede agregar

hasta tres dispositivos. El entorno de desarrollo será Visual Studio y/o Expression

Blend, tanto para la construcción como para la depuración, junto con el emulador o el

dispositivo que se registró. Una vez que la aplicación es creada, es necesario

presentar la solicitud para la certificación de la aplicación.

A fin de garantizar que su solicitud pasará el proceso de certificación, sería

conveniente que lea y entienda el documento de certificación de aplicaciones que se

encuentran en la siguiente dirección electrónica:

http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx.

Como parte del proceso de certificación, su aplicación pasa a través de una serie de

validaciones sobre la aplicación misma y las políticas de contenido, tales como:

código, idioma del teléfono y requisitos de las imágenes. También se hacen pruebas

de fiabilidad, rendimiento, gestión de recursos, uso de la funcionalidad de teléfono y la

seguridad. La certificación de la aplicación es importante pues ayuda a promover las

aplicaciones de calidad, proteger a los consumidores de malwares y proteger los

servicios de Microsoft.

Una vez que la aplicación pasa el proceso de certificación, será desplegada en el

MARKET PLACE, de allí el usuario consumidor podrá descargarla y utilizarla.

El usuario de la aplicación deberá proporcionar evaluaciones y comentarios sobre su

apreciación de la aplicación. Los informes pueden ser generados por usted desde el

Hub de Aplicaciones. Basándose en la información que recibe, puede optar por

desplegar una actualización que comprenda las correcciones de los errores de la

aplicación y/o nuevas características. El objetivo final es crear una aplicación

adecuada para que los consumidores la descarguen y utilicen.

La participación en el Marketplace tiene un costo determinado por Microsoft. Dicho

pago otorga una serie de derechos de publicación. Finalmente, a partir de la venta de

sus aplicaciones, usted recibirá el dinero correspondiente a las ganancias respectivas

a través de un depósito en banco bajo ciertas condiciones específicas de Microsoft.

Page 17: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 7

CIBERTEC CARRERAS PROFESIONALES

1.1.3 REQUERIMIENTOS DE WINDOWS PHONE

1.1.3.1 PANTALLA

Para empezar, todos los dispositivos Windows Phone tendrán una pantalla con un

ancho VGA (WVGA) y resolución de 480 píxeles de ancho por 800 píxeles de alto, lo

que simplificará la tarea de asegurar que los juegos y aplicaciones se ajusten

correctamente en la pantalla sin tener que estirar, encoger o dejar grandes áreas de la

pantalla sin utilizar.

1.1.3.2 BOTONES

Este es uno de los detalles en los que Microsoft ha sido muy estricto en los

dispositivos que ejecutan el sistema operativo. Todos los dispositivos deben tener

exactamente tres botones en el frontal del dispositivo: un botón de retroceso, un botón

de Windows y un botón de búsqueda. Tener la certeza de la disponibilidad de estos

botones es particularmente bueno para los desarrolladores, ya que significa que no

tiene que preocuparse por un montón de combinaciones de mecanismos de control.

Sin embargo, al mismo tiempo, esta resulta una limitación pues significa que no habrá

control de dirección disponible, lo cual es muy útil en algunas aplicaciones o juegos.

En su lugar, podemos utilizar la pantalla táctil para la entrada de datos o comandos.

Existen muchas maneras ingeniosas y creativas en las que esto se puede hacer,

desde el diseño de juegos en los que el usuario interactúa al tocar objetos en la

pantalla, hasta la presentación de botones de movimiento en la parte inferior de la

pantalla.

1.1.3.3 PROCESADOR

La especificación de la plataforma Windows afirma que todos los dispositivos deben

estar equipados con, al menos, un procesador de 1GHz. Esto se traduce en un

rendimiento excelente en todos los dispositivos. Es de esperar que la velocidad del

procesador aumente a medida que evoluciona la plataforma, lo que será importante

para soportar a los dispositivos que ejecutan a velocidades más rápidas, pero, como

mínimo, significa que una cantidad significativa de potencia de procesamiento estará

disponible en todos los dispositivos.

1.1.3.4 HARDWARE GRAFICO

La API de gráficos para juegos de alto rendimiento es XNA, una biblioteca de gran

alcance basada en la tecnología DirectX que ha sido la base de los juegos de PC de

escritorio de la última década. La implementación de Windows Phone no es tan

Page 18: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

18

CARRERAS PROFESIONALES CIBERTEC

poderosa como la del escritorio, pero aún así tiene capacidades muy impresionantes

para un dispositivo móvil. Junto a la API está la aceleración de hardware de gráficos

que el teléfono tiene que manejar para dar soporte a movimientos rápidos y escenas

complejas en 2D y 3D.

Page 19: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 9

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 1.1

Creación de un Proyecto Windows Phone

Implementa una aplicación Windows Phone donde al ejecutarse nos muestre un

Saludo

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el

proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Page 20: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

20

CARRERAS PROFESIONALES CIBERTEC

2. Estructura del Proyecto Windows Phone

Creada la nueva solución en forma predeterminada, Visual Studio muestra el archivo

MainPage.xaml en el editor. La pantalla por defecto para Archivos XAML es una vista

dividida, donde se exhibe el panel de marcado XAML (texto XML) y el otro presenta

una vista de diseño que muestra la interfaz de usuario generada como se describe en

el XAML.

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

GUI del Windows Phone

Estructura del Main formato XML

Page 21: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 1

CIBERTEC CARRERAS PROFESIONALES

Observe el archivo MainPage.xaml y verá que incluye algunos objetos predefinidos

como las Grillas y bloques de texto. A continuación, detallamos la estructura del

archivo Main.

Donde:

1. Es el contenedor XAML objeto, es del tipo PhoneApplicationPage, que a su vez es

parte de la librería o NameSpace Microsoft.Phone.Controls.

2. El NameSpace o librería Microsoft.Phone.Controls es mapeado a la librería

PhoneNavigation XAML. Esta librería también se declara en el archivo App.xaml.

Microsoft.Phone.Controls es clave para las aplicaciones Windows Phone en general

y aplicaciones Silverlight en particular.

3. Las aplicaciones Silverlight para Windows Phone, por defecto, generan un objeto

Grid o cuadricula, denominado LayoutRoot (con la x: sintaxis de la propiedad

nombre). El Grid es, quizá, el elemento de diseño más versátil que Silverlight

ofrece y, probablemente, el que va a utilizar más a menudo. Le permite ordenar sus

objetos en varias filas y columnas.

4. El LayoutRoot define dos filas con el Grid.RowDefinition propiedades. Fijamos la

primera fila al tamaño de Auto, que automáticamente cambia la altura de la primera

fila (fila define la altura, mientras que la columna define la anchura). A continuación,

establecemos el segundo fila que básicamente le dice al motor de diseño, todo el

resto de la espacio disponible será utilizada por la segunda fila.

1

2

3

4

5

6

Page 22: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

22

CARRERAS PROFESIONALES CIBERTEC

5. Esta cuadricula (TitleGrid) tiene dos objetos TextBlock que muestran el nombre de

la aplicación y de la página. Tenga en cuenta que la TitleGrid se está asignando a

la primera fila con Grid.Row = "0". El objeto TextBlock sólo muestra la cadena que

se asigna a su propiedad Text.

6. Aquí es donde se colocará el contenido de su aplicación. El XAML predeterminado

que genera SilverLight para Windows Phone, es sólo un punto de partida. Usted

puede modificarlo, actualizarlo o reemplazarlo por completo.

3. Agregando controles al Page

Toda aplicación Windows utiliza una barra de herramientas para agregar controles a la

Página (Page). Agregue los controles al Page, tal como se muestra en la figura.

A continuación, trabajamos con las propiedades del control TextBox:

Arrastre los controles dentro de la Grilla

Declarativas de los controles en XAML

Page 23: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 3

CIBERTEC CARRERAS PROFESIONALES

Luego, asigne las propiedades al control Button, tal como se muestra:

Propiedad Text: “Mensaje”

Propiedad Name: “txtMensaje”

Propiedad Content: “Ok”

Propiedad Name: “btnHello”

Page 24: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

24

CARRERAS PROFESIONALES CIBERTEC

Para programar el control Button del Page, nos ubicaremos en la ventana de

propiedades (presione la tecla F4) y seleccionamos el botón Eventos.

A continuación, programe el evento Clic del botón de la consulta, tal como se muestra

Seleccione la pestaña Events del control btnHello

Para programar el evento Click, seleccione el evento y hacer doble Click.

En el evento Click del button, programe la siguiente sintaxis: toda sintaxis debe terminar en punto y coma

Page 25: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 5

CIBERTEC CARRERAS PROFESIONALES

Antes de ejecutar el proceso debemos cambiar el estado de la ejecución a tipo

Emulator

Para ejecutar el emulador del proyecto, presione la tecla F5. Presione el botón OK, el

cual le dará la bienvenida.

Antes de ejecutar, seleccione el Target del Projecto a tipo Emulator

Page 26: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

26

CARRERAS PROFESIONALES CIBERTEC

Diseñando la Página

Cuando implementamos una aplicación y deseamos brindar ciertas características al

Layout: color de fondo, color de letra, márgenes, etc. Estas ediciones se realizan en

Microsoft Expression.

Al cargar por primera vez el software,

seleccione desde la ventana Customer

Experience, la opción I don’t want to

join… luego presione la opción OK.

Cerrar esta ventana presionando el botón

Close.

Para diseñar una o más páginas de un proyecto, seleccione desde el Menu Inicio, Microsoft Expression Blend 4, tal como se muestra.

Page 27: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 7

CIBERTEC CARRERAS PROFESIONALES

Para trabajar con Microsoft Expression, debemos

abrir el proyecto que estamos trabajando, tal como

se muestra, seleccione la opción Open

Project/Solution.

Selecciona el proyecto, el cual

tiene la extensión .sln. A

continuación presione el botón

Abrir.

1. Seleccione desde objetos: LayoutRoot

2. Seleccione la opción Brush: Background

3. Editar el color, tal como se muestra

Seleccione el archivo appPhone.sln

Page 28: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

28

CARRERAS PROFESIONALES CIBERTEC

Diseñando el control TxtMensaje.

1. Seleccione desde objetos: txtMensaje

2. Seleccione la opción Brush: BorderBrush

3. Editar el color, tal como se muestra

1. Seleccione la opción Brush: BackGround

2. Editar el color, tal como se muestra

Page 29: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 9

CIBERTEC CARRERAS PROFESIONALES

Para guardar el proyecto, seleccione desde la opción

de Menu File, la opción Save All, tal como se muestra.

Al activar la pantalla del

proyecto, debe actualizar el

archivo editado, donde se

visualiza el siguiente

mensaje: seleccione la

opción Yes to All.

Archivo editado actualizado en el proyecto Windows Phone.

Page 30: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

30

CARRERAS PROFESIONALES CIBERTEC

Cambio de Orientación de la pantalla

Al ejecutar el proyecto, el emulador levanta la aplicación, si cambia de orientación,

debería cambiar el sentido de la pantalla, para ello ¿qué debo hacer?

En el constructor de la Página MainPage(), defina el comportamiento de la página

cuando esta realice la rotación a través de la siguiente sentencia de programación:

Cambio de orientación de la pantalla

Sentencia para controlar la rotación de la página

Page 31: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3 1

CIBERTEC CARRERAS PROFESIONALES

Resumen

Microsoft Windows Phone es un gran consumidor de teléfono, porque tiene todas

las características a las que los usuarios se han acostumbrado con los

smartphones.

.NET proporciona es una base común de biblioteca de clases que todos los

programadores .NET conocen, incluyendo soporte para multithreading, XML, LINQ,

colecciones, eventos, datos, excepciones, IO, modelo de servicio,

la creación de redes, el texto, la ubicación, la reflexión, la globalización, recursos,

tiempo de ejecución, la seguridad y el diagnóstico.

Silverlight utiliza la tecnología web y se usa básicamente para aplicaciones

emprsariales y juegos sencillos en 2D.

XNA se utiliza en la creación de juegos de Xbox, utilizando código administrado.

Windows Phone integra Xbox LIVE.

El emulador del Windows Phone se integra a Visual Studio que simula un

verdadero dispositivo. Sin embargo, hay cosas que no se pueden hacer en el

emulador, como prueba el acelerómetro, el GPS, compás, radio FM, SMS, correo

electrónico, llamadas de teléfono, lista de contactos, la cámara y otras

características que requieren un dispositivo físico.

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas:

http://www.lavilladigital.com

Aquí hallará un tutorial de aplicaciones de Windows Phone.

http://libreyextremo.blogspot.com

En esta página, hallará algunos ejercicios sobre aplicaciones en Windows

Phone.

Page 32: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

32

CARRERAS PROFESIONALES CIBERTEC

1.2 TRABAJANDO CON SILVERLIGHT N WINDOWS PHONE

1.2.1 INTRODUCCION A SILVERLIGHT

En MIX 2010, Microsoft anunció que la plataforma de desarrollo para Windows

PHONE 7 se basa en XNA y Silverlight. Windows Phone está basado en Silverlight 3.

Sin embargo, hay algunas optimizaciones en el teléfono, así como nuevos controles.

En este capítulo, usted aprenderá acerca de estas optimizaciones.

1.2.2 CONTROLES EN SILVERLIGHT

Windows Phone incluye la mayoría de los controles básicos de Silverlight 3. La

compatibilidad con Desktop es muy alta, pero la mayoría de los controles de

Windows Phone tienen pequeñas optimizaciones o retoques. Antes de llegar a los

cambios detallados en cada control, debemos entender los motivos y objetivos de

estos cambios:

A. Windows Phone no tiene el concepto del Mouse. El Mouse es un concepto en el

escritorio (y, como tal, en la plataforma Silverlight). Para maximizar la

compatibilidad entre ambas plataformas, Windows Phone escucha los eventos

Touch y traduce estos eventos.

B. Windows Phone es capaz de Multitouch. Algunos controles de Windows Phone

incluyen soporte de gestos individuales y multitouch, los cuales incluyen tocar,

rozar y una pizca de zoom (multitoque).

C. Windows Phone es compatible con “temas” y tiene un nuevo aspecto y estilo.

Todos los controles principales de Windows Phone han sido optimizados para

apoyar la apariencia del diseño METRO.

A continuación, se detallan los controles principales en Windows Phone:

Controles SilverLight 3 Optimizacion en Windows Phone

Button Temas. Gestor de toque Click

CheckBox Temas. Gestor de toque Click

ContentControl

HyperlinkButton Temas

Configurado para iniciar el navegador en el dispositivo.

Page 33: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3 3

CIBERTEC CARRERAS PROFESIONALES

Image JPGs son decodificados en el hardware, PNG es

decodificado

ListBox Toque, gestor Flick. Desplazamiento del pixeles basado

en los puntos fijos de los ítems

MediaElement Hardware de reproducción con el dispositivo Media Stack

MultiScaleImage Hardware de procesamiento acelerado

Password Soporta SIP. Retraso visual del carácter escrito antes de

convertirse en carácter contraseña

ProgressBar Temas

RadioButton Gestor Tap antes del Click, Temas

ScrollViewer Barras de desplazamiento no son recurribles, son

indicadores de posición.

Slider Gestor Tap. Temas

TextBox Soporte SIP

Soporte para Entrada

TextBlock Temas

1.2.2.1 Nuevos Controles en Windows Phone

Windows Phone extiende el núcleo de Silverlight con un conjunto de controles

optimizados para la forma del teléfono, para el soporte del modelo de navegación de

Windows Phone y controles que admiten la apariencia Metro.

A. Control WebBrowser

Las aplicaciones Windows Phone están alojados fuera del explorador en un proceso

de host llamado taskhost.exe. Este proceso de alojamiento es similar a la salida del

explorador modelo disponible en Silverlight 4. Tanto en Windows Phone y Silverlight 4,

cuando se encuentre fuera de navegador que puede albergar y interactuar con el

contenido HTML y Javascript con el control WebBrowser.

El WebBrowser permite cargar el contenido en tres maneras diferentes:

• La propiedad Source apunta un URI donde el HTML que es donde el control

descarga el HTML que será reproducido.

• El método Navegate () permite desplazarse a cualquier Uri.

Page 34: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

34

CARRERAS PROFESIONALES CIBERTEC

• NavigateToString () le permite cargar una cadena de formato HTML directamente en

el control. Dado que el código HTML se pasa como una cadena, puede ser el

contenido dinámico, que proviene de la Internet, pero es leído como un Stream, o

puede ser un archivo local, ya sea en el almacenamiento aislado o su aplicación.

Para controlar la navegación, el control expone los eventos Navigating y Navigated:

• El evento Navigating se desencadena antes que la navegación suceda, donde se

puede asignar la propiedad Cancel en el NavigationEventArgs pasado en el evento

para evitar que el usuario de navegación de distancia.

• El evento Navigated se activa cuando el nuevo objetivo de Uri se abre y se descarga.

B. PhoneApplicationFrame

Dentro de una aplicación, la navegación desde un Page a otro Page es implementada

por la clase PhoneApplicationFrame y la clase NavegationService.

Usando PhoneApplicationFrame no se puede ejecutar el método GoForward(); la

propiedad CanGoForward siempre será falsa.

CacheSize es siempre 0; dicho ajuste produce una excepción.

No hay integración con las aplicaciones Windows Phone que se encuentran fuera

del navegador.

Las plantillas para el control son diferentes. En particular, las plantillas de

Windows Phone fijan los márgenes para el cromo del teléfono - el cromo es un

área reservada para la bandeja del sistema y la barra de aplicaciones-. Usted

debe respetar estas áreas si desea reemplazar la plantilla.

Page 35: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3 5

CIBERTEC CARRERAS PROFESIONALES

C. PhoneApplicationPage

PhoneApplicationPage tiene la funcionalidad de navegación para ir junto con Marco,

pero también incluye tres otras características críticas para cualquier aplicación

Windows Phone: Orientación, De menús (a través de la ApplicationBar) e integración

de tareas (Selectores y Lanzadores).

Por navegación, PhoneApplicationPage tiene métodos virtuales para NavigatedTo,

NavigatingFrom y NavigatingTo.

PhoneApplicationPage tiene una referencia hacia NavigationService que el Frame

utiliza y el NavigationContext pasado hacia la página. El NavigationContext contiene

una cadena de consulta que es utilizada en el URI de la página.

Ejemplo.- Uso NavigationContext para leer un QueryString pasado al

PhoneApplicationPage.

D. Orientation

También desencadenado de manera similar como Navigation, vía método virtual,

puedes sobrescribirse:

OrientationChanging() se dispara antes de los cambios de orientación y puede

cancelar el cambio

OrientationChanged() permite conocer que la orientación ha sido cambiada.

Una PhoneApplicationPage puede controlar la orientación asignándolo en la propiedad

SupportedOrientations. Una página puede elegir ser Portrait o Landscape or

PortraitOrLandscape. Por defecto es Portrait.

private void OnNextClick(object sender, RoutedEventArgs e){

NavigationService.Navigate(new

Uri("/LWP.Navigation;component/GenericPortraitPage.xaml?step=" + NextStep,

UriKind.Relative));

}

void GenericPortraitPage_Loaded(object sender, RoutedEventArgs e){

// Acceso a QueryString desde propiedad NavigationContext en Page

if (this.NavigationContext != null &&

this.NavigationContext.QueryString != null){

var step=this.NavigationContext.QueryString["step"] as string;

}

}

Page 36: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

36

CARRERAS PROFESIONALES CIBERTEC

E. ApplicationBar

El ApplicationBar es una barra de menú para la aplicación. La meta para el

ApplicationBar es proporcionar un menú o barra de herramientas que proporciona fácil

acceso a las tareas comunes en la aplicación. Cada PhoneApplicationPage puede

tener su propia ApplicationBar, aunque se recomienda que no cambie demasiado las

opciones en cada página. También puede ocultar o mostrar la barra de menú. Un

ApplicationBar puede contener un botón de una hilera (instancias de

ApplicationBarIconButton) o cualquier número de ítems de menú (los casos de

ApplicationBarMenuItem). El límite para el número de botones en la ApplicationBar es

de cuatro. No hay límite en el número de elementos de menú, pero cinco es el límite

recomendado para evitar el desplazamiento.

F. Date and Time Pickers

Los controles Date and Time Picker son utilizados para seleccionar fecha y horas del

teléfono. Estos controles son optimizados para touch; se puede usar un simple touch o

roleando en cualquier campo de la pantalla.

Page 37: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3 7

CIBERTEC CARRERAS PROFESIONALES

G. Choosers y Launchers

Choosers y Launchers son diferentes tipos de componentes. Son análogamente los

cuadros de diálogos en Windows o SilverLight, Chooser y Launchers. Son utilizados

para comunicar dentro de una aplicación SilverLight al Shell o a otras aplicaciones

Choosers permite al usuario seleccionar un elemento de un conjunto de elementos. Un

Chooser devuelve algunos contenidos o datos en el retorno. Un ejemplo de un

Chooser es el PhotoChooserTask, que se utiliza para seleccionar una foto de la

biblioteca de fotos del dispositivo. Cuando el API se invoca, el usuario elige una foto y

la información sobre ella es regresada de nuevo a la aplicación de llamada.

Launchers son diferentes de los Choosers, porque no devuelven datos. Ellos más bien

desencadenan la acción. Un ejemplo de un Launcher es la API utilizada para colocar

una llamada telefónica. En este caso, el desarrollador invoca el API y el usuario

vuelve, de nuevo, a la aplicación de llamada una vez que la llamada ha terminado.

Las tareas están bajo el nameSpace o librería Microsoft.Phone.Tasks, donde se

pueden encontrar los siguientes selectores:

CameraCaptureTask

EmailAddressChooserTask

PhoneNumberChooserTask

PhotoChooserTask

SaveEmailAddressTask

SavePhoneNumberTask.

En los launchers, encontraremos un MarketplaceLauncher, y MediaPlayerLauncher.

Page 38: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

38

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 2.1

Creación de un Proyecto Windows Phone

Implementa una aplicación Windows Phone para navegar por la Web

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

2. Diseño

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Page 39: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 3 9

CIBERTEC CARRERAS PROFESIONALES

A continuación vamos a diseñar el Page que permitirá realizar el proceso de

navegación

3. Programación

En este proceso, codificamos el proceso de la navegación, el cual se realiza sin la

debida validación, la idea es ¿Cómo validamos el proceso?

Programando con validación, donde evaluamos varios aspectos del proceso:

textBox, Name=txtDireccion

button, Name= Button1

WebBrowser, Name= webBrowser1

Page 40: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

40

CARRERAS PROFESIONALES CIBERTEC

Si la URL está vacía.

Si la URL contiene about.

Si la URL no inicia con http://

Si está correcto, entonces procedemos a Navegar

Presiona F5, para ejecutar la aplicación.

Si la cadena está vacía o es about:blank

Si la cadena no inicia con http:// o https://, lo agrega

Ejecutar el proceso de navegar, si no existe, ejecuta la excepción

Page 41: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 4 1

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 2.2

Creación de un Reproductor de Sonido

Implementa una aplicación Windows Phone para reproducir un archivo de formato

MP3, es decir, archivo de música.

1. Diseño del Formulario

2. Programación

En el evento Loaded del Page, definimos el origen del control MediaElement, tal como

se muestra:

Control MediaElement, name: mediaElement1

Control Button, name: btnStop

Control Slider, name: slider1

Control Button, name: btnPlay

Definir el Source del control con la ubicación del archivo mp3

Page 42: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

42

CARRERAS PROFESIONALES CIBERTEC

A continuación, programa el botón Stop y Play para ejecutar el control Media Element,

tal como se muestra.

Para controlar el avance del reproductor del Media, programa el evento

ValueChanged del control slider1, el cual medirá el tiempo transcurrido del

reproductor.

Presione F5 para ejecutar la aplicación.

Al presionar el botón Play, iniciar el método Play del control MediaElement1

Al presionar el botón Stop, detiene el proceso del control MediaElement1

Programa el evento ValueChanged del control slider1 para aumentar o disminuir el volumen del mediaElement1

Page 43: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 4 3

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 2.3

Creación de una Calculadora

Implementa una aplicación Windows Phone para crear una calculadora e implementar

sus operaciones básicas: suma, resta, producto y división.

1. Inicio del Proyecto

Seleccione la opción Create New Project

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#.

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK.

2. Diseño

A continuación, vamos a diseñar el Page que permitirá crear la calculadora.

Seleccione el tipo de Page

Asigne el nombre a la Página, presione el botón Add

Control Image

Page 44: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

44

CARRERAS PROFESIONALES CIBERTEC

Agregue un control IMAGE para insertar una imagen.

Para seleccionar una imagen, en el control Image, configure la propiedad Source, seleccione la

imagen a visualizar, tal como se muestra.

Para cambiar el formato al TextBlock, en otros proyectos lo conocemos como Label:

Color de letra: ForeGround. Tamaño, tipo y estilo de letra: Text.

Propiedad Source del control Image

ForeGround permite dar color de letra

Propiedad Text, asigna el tamaño y tipo de letra

Page 45: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 4 5

CIBERTEC CARRERAS PROFESIONALES

Como siguiente paso, diseñamos la página para realizar el proceso de la calculadora,

tal como se muestra.

3. Programación

Declare e inicialice las variables

del proceso a nivel Class

PageCalculator.

Page 46: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

46

CARRERAS PROFESIONALES CIBERTEC

Defina la función Calcula, donde definimos tres parámetros, los cuales realizan el

cálculo aritmético según el signo.

Definir los eventos: numero_Click y el evento signo_Click.

El primer evento trabaja con los button numérico y el segundo evento trabaja con los

button signo (+, - *).

Page 47: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 4 7

CIBERTEC CARRERAS PROFESIONALES

Para enlazar los eventos a cada button, seleccione el control Button, tal como se

muestra. En la ventana de propiedades, seleccione la pestaña Event; en el evento

Click seleccione el evento que va a desencadenar: para el button 1, el evento Click a

seleccionar seria numero_Click, tal como se muestra

El mismo proceso para los button signo, en este caso debe seleccionar en el evento

Click: signo_Click, tal como se muestra

Page 48: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

48

CARRERAS PROFESIONALES CIBERTEC

En el button “=” programe el

evento respectivo, hacer doble

click al evento Click.

Presione la tecla F5 para ejecutar.

Page 49: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 4 9

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 2.4

Creación de una Barra de Aplicaciones

Implemente una aplicación Windows Phone para crear una barra de aplicaciones en

nuestra Página Principal.

1. Inicio del Proyecto

Seleccione la opción Create New Project

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#.

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK.

2. Diseño

Antes de iniciar el proceso, agregue algunos archivos

de imágenes de extensión .png: calculador.png,

internet.png, reproductor.png.

Seleccione el tipo de Page

Asigne el nombre a la Página, presione el botón Add

Page 50: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

50

CARRERAS PROFESIONALES CIBERTEC

Agregue un control Image a la página, tal como se muestra. En la ventana de

propiedades del control, asigne en la propiedad Source el archivo Cibertec.jpg, tal

como se muestra.

3. Programación

Defina el nameSpace Microsoft.Phone.Shell, asi como el objeto ApplicationBar

llamado Bar, tal como se muestra.

Propiedad Source del control Image

NameSpace Microsoft.Phone.Shell

Definir a Bar de tipo ApplicationBar

Page 51: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5 1

CIBERTEC CARRERAS PROFESIONALES

En el constructor, definiremos las propiedades del Bar (ApplicationBar), además

agregamos tres button, definiendo la propiedad image, así como la propiedad text, tal

como se muestra:

Ejecute el proyecto, al cargar la página Principal, se visualiza

la lista de botones de la barra de aplicaciones.

Instanciar el objeto Bar y asignarle algunas propiedades

Agregar los buttons b1, b2 y b3 a Bar

Asignar al Application bar del Page el objeto Bar

Definir 3 buttons de tipo ApplicationBar

Page 52: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

52

CARRERAS PROFESIONALES CIBERTEC

Definiendo el método a los botones llamado botón_Click

Para enlazar el evento de cada botón, este proceso se realiza en el constructor.

Presione F5 para ejecutar y verifique que cada botón muestre su mensaje.

El método botón_Click, ejecuta el proceso de los botones de la barra de aplicaciones

Enlazar el evento de cada botón al método botón_Click tal como se muestra

Page 53: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5 3

CIBERTEC CARRERAS PROFESIONALES

Resumen

Windows Phone incluye la mayoría de los controles básicos de Silverlight 3. La

compatibilidad con DeskTop es muy alto, pero la mayoría de los controles de

Windows Phone tienen pequeñas optimizaciones o retoques.

Windows Phone es capaz de Multitouch. Algunos controles de Windows Phone

incluyen soporte a gestos individuales y multitouch. El soporte para únicos y

multitouch gestos, en la plataforma, incluye tocar, rozar y una pizca de zoom

(multitoque).

Windows Phone extiende el núcleo de Silverlight con un conjunto de controles

optimizados para el factor de forma del Phone, nuevos controles que soportan el

Modelo de Navegacion de Windows Phone y controles que admiten la apariencia

Metro.

El WebBrowser permite cargar el contenido, a través de la propiedad Source,

utilizando el método Navegate () permite desplazarse a cualquier Uri y la propiedad

NavigateToString () le permite cargar una cadena de formato HTML directamente

en el control.

Dentro de la una aplicación, la navegación desde un Page a otro Page son

implementadas por la clase PhoneApplicationFrame y la clase NavegationService

El emulador del Windows Phone se integra a Visual Studio que simula un

PhoneApplicationPage tiene la funcionalidad de navegación para ir junto con

Marco, pero también incluye tres otras características críticas para cualquier

aplicación Windows Phone: Orientación, De menús (a través de la ApplicationBar),

e integración de tareas (Selectores y Lanzadores). Por navegación,

PhoneApplicationPage tiene métodos virtuales para NavigatedTo, NavigatingFrom

y NavigatingTo.

El ApplicationBar es una barra de menú para tu aplicación. La meta para el

ApplicationBar es proporcionar una respuesta coherente, de fácil acceso, menú o

barra de herramientas que proporcione fácil acceso a las tareas comunes en la

aplicación. Cada PhoneApplicationPage puede tener su propia ApplicationBar.

Los controles Date and Time picker son utilizados para seleccionar fecha y horas

donde del Phone. Estos controles son optimizados para touch

Choosers y Launchers son diferentes tipos de componentes; ellos son

análogamente los cuadros de diálogos en Windows o SilverLight, Chooser y

Page 54: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

54

CARRERAS PROFESIONALES CIBERTEC

Launchers. Son utilizados para comunicar dentro de una aplicación SilverLight al

Shell o a otras aplicaciones

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas:

http://www.lavilladigital.com

Aquí hallará un tutorial de aplicaciones de Windows Phone.

http://libreyextremo.blogspot.com

En esta página, hallará ejercicios sobre aplicaciones en Windows Phone.

Page 55: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5 5

CIBERTEC CARRERAS PROFESIONALES

1.3 NAVEGACION ENTRE PÁGINAS, MANEJO DE ESTADOS

1.3.1 NAVEGANDO ENTRE PÁGINAS

En este capítulo, vamos a hablar acerca de cómo navegar entre páginas en Silverlight

para Windows Phone. Hay dos razones por las que ésta es una lección importante.

Primero, porque no se debe crear toda la aplicación en un único archivo XAML.

Segundo, porque al seguir las reglas la aplicación podrá automáticamente tomar

ventaja del botón de retroceso (Back) incorporado en el dispositivo. Esto permitirá a

los usuarios volver desde la aplicación a lo que estaban haciendo anteriormente. Hay

varias formas de navegar entre páginas, pero vamos a enfocarnos en una a la que

vamos a llamar Navegación Simple de Web. Navegaremos entre páginas de igual

manera como si fuesen páginas de HTML.

1.3.1.1 Navegando utilizando control Hyperlink

Tenemos varias páginas y queremos darle al usuario una forma de moverse entre

ellas. Construyamos una interface gráfica simple de navegación que nos permita hacer

eso. Si queremos ir de la primera a la segunda, podemos hacer uso de un control

HyperlinkButton. Este control permite realizar la navegación entre dos páginas.

Para establecer el vínculo entre páginas a través del control HyperlinkButton, se puede

hacer usando sólo XAML:

<HyperlinkButton Content="Pasta"

NavigateUri="/Pasta.xaml"

Height="30"

Name="hyperlinkButton1"

Width="200"

HorizontalAlignment="Left"

HorizontalContentAlignment="Left"/>

<HyperlinkButton Content="Queso"

NavigateUri="/Cheese.xaml"

Height="30"

Name="hyperlinkButton2"

Width="200"

HorizontalAlignment="Left"

HorizontalContentAlignment="Left" />

Page 56: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

56

CARRERAS PROFESIONALES CIBERTEC

<HyperlinkButton Content="Salsa"

NavigateUri="/Sauce.xaml"

Height="30"

Name="hyperlinkButton3"

Width="200"

HorizontalAlignment="Left"

HorizontalContentAlignment="Left" />

Al ejecutar el proyecto, debe ser posible hacer clic en cualquiera de estos botones de

vínculos e ir a la página. Al usar el botón de retroceso () podrán ir a la pantalla

previa. Si se retrocede lo suficiente, se sale de la aplicación al pasar más allá de su

primera pantalla.

1.3.1.2 Navegando utilizando comandos de navegación

Se puede navegar entre páginas utilizando código en vez de usar sólo XAML, pueden

usar cualquier elemento XAML que prefieran. En este ejemplo, vamos a crear tres

botones y cada uno apunta al mismo controlador de eventos. En el código C#

siguiente, verán que se averigua cuál botón ha sido pulsado y luego se va a la página

apropiada. La función original del botón de retroceso todavía está disponible en su

totalidad.

En XAML

<Button Content="Pasta"

Height="72"

Name="BotónPasta"

Width="160"

Click="Botón_Click"/>

<Button Content="Queso"

Height="72"

Name="BotónQueso"

Width="160"

Click="Botón_Click" />

<Button Content="Salsa"

Height="72"

Name="BotónSalsa"

Width="160"

Click="Botón_Click" />

Page 57: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5 7

CIBERTEC CARRERAS PROFESIONALES

En C#

private void Botón_Click(object sender, RoutedEventArgs e){

Button botónPulsado = sender as Button;

switch (botónPulsado.Name) {

case "BotónPasta":

NavigationService.Navigate(new Uri("/Pasta.xaml",

UriKind.Relative));

break;

case "BotónQueso":

NavigationService.Navigate(new

Uri("/Cheese.xaml",UriKind.Relative));

break;

case "BotónSalsa":

NavigationService.Navigate(new Uri("/Sauce.xaml",

UriKind.Relative));

break;

}

}

Como se puede ver, todas las acciones del usuario son registradas, permitiéndole

retroceder por el camino tomado con tan sólo usar el NavigationService

1.3.1.3 Clase NavigationService

Las páginas necesitan a menudo integrarse con la navegación de su host para

proporcionar compatibilidad de navegación en las páginas. Sin embargo, como es

posible que una página no sepa cuál será su host en tiempo de ejecución, no puede

integrarse directamente con los miembros de navegación de su host.

En su lugar, puede intentar utilizar un servicio de navegación, que es un servicio que

admite navegación basada en el explorador y está encapsulado por la clase

NavigationService. No obstante, no puede crear su propia instancia de

NavigationService.

El servicio de navegación, que se devuelve de la propiedad NavigationService, es la

instancia de la clase NavigationService la cual está administrada por el primer

navegador en el árbol visual. Si no se encuentra ninguna, se devuelve null, lo que

indica que el host de una página no admite la navegación.

Page 58: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

58

CARRERAS PROFESIONALES CIBERTEC

Se puede navegar al contenido mediante una instancia de un objeto y llamando a una

sobrecarga del método Navigate que acepte un objeto:

NavigationService.Navigate(Object)

NavigationService.Navigate(Object, Object)

Cuando se navega al contenido mediante el URI, NavigationService devolverá un

objeto que incluye el contenido. Se puede realizar el seguimiento de la duración de

una navegación a través de los eventos siguientes:

Navigating

Navigated

NavigationProgress

NavigationFailed

NavigationStopped

LoadCompleted

FragmentNavigation.

No todos los eventos se provocan cada vez que se produce una navegación; el tipo de

navegación que se produce (contenido o fragmento del contenido) determina el

conjunto de eventos que se provocan y el modo en el que se completa la navegación

(cancelada, detenida o con errores).

La figura siguiente muestra la secuencia en la que se provocan estos eventos:

Page 59: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 5 9

CIBERTEC CARRERAS PROFESIONALES

De forma predeterminada, NavigationService no almacena ninguna instancia de un

objeto de contenido en el historial de navegación. En su lugar, NavigationService crea

una nueva instancia del objeto de contenido cada vez que se navega en él mediante el

historial de navegación. Este comportamiento está diseñado para evitar un consumo

de memoria excesivo cuando se navegue a muchas partes del contenido y a grandes

partes del mismo. Por consiguiente, el estado del contenido no se recuerda de una

navegación a la siguiente.

A. Métodos del NavigationService.

A continuación listaremos algunos de los métodos de navegación:

Método Descripción

GoBack Navega hasta la entrada más reciente del historial de

retroceso de navegación, si lo hay.

GoForward Navegue hasta la entrada más reciente del historial de

avance de navegación, si lo hay.

Navigate(Uri) Navegue asincrónicamente a un contenido especificado por

un uniform resource identifier (URI).

Navigate(Uri,

Object, Boolean)

Navegue asincrónicamente al contenido de origen situado

en un uniform resource identifier (URI), pase un objeto que

contenga el estado de navegación de procesamiento

durante la navegación e incluya el contenido en el recinto.

RemoveBackEntry Quita la entrada más reciente del diario del historial de

retroceso de navegación.

B. 1.3.2 Propiedades del NavigationService.

A continuación, listaremos las propiedades de navegación:

Método Descripción

CanGoBack Obtiene un valor que indica si hay al menos una entrada en el

historial de retroceso de navegación.

CanGoForward Obtiene un valor que indica si hay al menos una entrada en el

historial de avance de navegación.

CurrentSource Obtiene o establece una referencia al objeto que contiene el

Page 60: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

60

CARRERAS PROFESIONALES CIBERTEC

contenido actual.

Source Obtiene o establece el uniform resource identifier (URI) del

contenido actual o el URI del nuevo contenido al que se navega

actualmente.

1.3.2 MANEJO DE ESTADOS

Para pasar datos entre dos páginas, debemos especificar los parámetros y sus valores

en la URI (QueryString). Esta es, probablemente, la forma más fácil de pasar datos de

una página a otra durante la navegación.

Para pasar los parámetros y valores de una página a otra que necesita iniciar debe

añadir el signo de interrogación (?) y luego especificar el parámetro junto con su valor.

Utilice Uri.EscapeUriString para evitar excepciones formato durante la

navegación.

Para especificar múltiples parámetros utilice el carácter “&”.

NavigationService.Navigate(

new Uri("/DestinationPage.xaml?parameter1=v1", UriKind.Relative) );

// O también

NavigationService.Navigate(

new Uri(string.Format("/DestinationPage.xaml?parameter1={0}",

Uri.EscapeUriString(stringParameterValue), UriKind.Relative)));

NavigationService.Navigate(

new Uri("/DestinPage.xaml?param1=v1&param2=v2",UriKind.Relative));

Page 61: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 6 1

CIBERTEC CARRERAS PROFESIONALES

1.3.2.1 Recuperar el paso de valores

Después de pasar los valores a la página de destino, se puede obtener dichos valores

utilizando NavigationContext y la cadena de consulta. Por lo general, puedo

implementar este proceso dentro del método OnNavigatedTo. Se puede obtener sólo

los objetos de cadena de consulta, lo que significa que si ha pasado un número entero

como valor, tiene que convertir el valor, la cual se envía como cadena de caracteres, a

tipo entero.

Tenga en cuenta que la clase Page define una propiedad NavigationContext de

tipo NavigationContext, que contiene una propiedad QueryString de tipo

IDictionary <string, string>. Utilizando la propiedad QueryString podemos

recuperar los datos pasados de la página 1.

En este caso, tan pronto como nos aseguramos que recuperamos los datos

necesarios, le asignamos los valores recuperados a la propiedad Text del control

TexBox. Por último, activar la clase base OnNavigatedTo método para asegurar el

funcionamiento normal de la clase base.

protected override void OnNavigatedTo(NavigationEventArgs e){

string myParameterValue =

NavigationContext.QueryString["parameter1"];

base.OnNavigatedTo(e);

}

protected override void OnNavigatedTo(NavigationEventArgs e) {

string value = string.Empty;

IDictionary<string,string> querySt = NavigationContext.QueryString;

querySt.TryGetValue("InputText", out value);

if (value != null) {

txtPage2.Text = value;

}

base.OnNavigatedTo(e);

}

Page 62: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

62

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 3.1

Proyecto Windows Phone para Navegar entre Páginas

Implemente una aplicación Windows Phone para crear una barra de aplicaciones en

nuestra Página Principal para navegar entre diversas páginas.

1. Inicio del Proyecto

Seleccione la opción Create New Project

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#.

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK.

Seleccione el tipo de Page

Asigne el nombre a la Página, presione el botón Add

Page 63: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 6 3

CIBERTEC CARRERAS PROFESIONALES

2. Diseño

Antes de iniciar el proceso, agregue algunos

archivos de imágenes de extensión .png:

calculador.png, internet.png, reproductor.png.

Agregue un control Image a la página, tal como se muestra, en la ventana de

propiedades del control. Asigne, en la propiedad Source, el archivo Cibertec.jpg, tal

como se muestra.

Propiedad Source del control Image

Page 64: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

64

CARRERAS PROFESIONALES CIBERTEC

3. Programación

Defina el nameSpace Microsoft.Phone.Shell, así como el objeto ApplicationBar

llamado Bar, tal como se muestra.

Definiendo el método a los botones, llamados botón_Click, donde al clickear un botón

de la barra de aplicaciones, navegamos al Page indicado.

NameSpace Microsoft.Phone.Shell

Definir a Bar de tipo ApplicationBar

El método botón_Click, ejecuta el proceso de los botones de la barra de aplicaciones

Page 65: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 6 5

CIBERTEC CARRERAS PROFESIONALES

En el constructor, definiremos las propiedades del Bar (ApplicationBar), además

agregamos tres button, definiendo la propiedad image, así como la propiedad text, tal

como se muestra:

Presione F5 para ejecutar y verifique que cada botón muestre su mensaje.

Enlazar el evento de cada botón al método botón_Click tal como se muestra

Instanciar el objeto Bar y asignarle algunas propiedades

Agregar los buttons b1, b2 y b3 a Bar

Asignar al Application bar del Page el objeto Bar

Definir 3 buttons de tipo ApplicationBar

Page 66: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

66

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 3.2

Pasando valores entre Páginas de una Aplicación Phone

Implementa una aplicación Windows Phone para navegar entre las páginas de una

aplicación Phone

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Page 67: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 6 7

CIBERTEC CARRERAS PROFESIONALES

Diseño.

Diseña la página MainPage para dar la bienvenida al usuario, dibuje la página tal como

se muestra:

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

Control TextBlock, propiedad Text: Bienvenido

Control Image, propiedad Name: imgPrincipal

Control HyperLinkButton, propiedad Content: Continuar

Page 68: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

68

CARRERAS PROFESIONALES CIBERTEC

Programación

Selecciona el evento Click del control HyperlinkButton, tal como se detalla:

Selecciona una imagen en la propiedad Source, la imagen asignada al control

Seleccione el evento Click, hacer doble click sobre el evento

Page 69: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 6 9

CIBERTEC CARRERAS PROFESIONALES

Programe el evento Click del control HyperLinkButton. Seleccione desde la ficha

Eventos, el evento llamado Click, hacer doble click al evento.

Diseño de Acceso.xaml

A continuación, diseñe la página Acceso.xaml que permita el ingreso de un usuario a

la aplicación. Dibuje la página tal como se muestra:

En el constructor definir la orientación de la página.

Definir el servicio de navegación, hacia la pagina Acceso.xaml, definiendo la ruta Relativa

Cambiar la propiedad a PortraitorLandscape

Page 70: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

70

CARRERAS PROFESIONALES CIBERTEC

Añadiendo Controles: A continuación, diseña los controles de la página,

configurando las propiedades de cada control.

En la propiedad Items, agregue los Items del ListBox:

Microsoft

Cibertec

UPC

Luego, presione el botón OK.

Control TextBox: Name=txtUsuario

Control PasswordBox: Name=pbClave

Control ListBox: Name=lbEmpresa

Control HyperLink: Content=Retornar

Control HyperLink: Content=Aceptar

Page 71: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7 1

CIBERTEC CARRERAS PROFESIONALES

Programación: Programe los eventos Click del HyperLinkButton1 e

HyperLinkButton2

Diseño de Seleccion.xaml

A continuación, diseñe la página Seleccion.xaml que permita el ingreso de un usuario

a la aplicación. Dibuje la página tal como se muestra:

Direccionando hacia la página Selección.xaml enviando parámetros nombre y empresa

Direccionando hacia la página anterior

Control TextBlock: name=lblUsuario

Control TextBlock: name=lblEmpresa

Control Image: name=imgEmpresa

Control HyperLink: content=Retornar

Page 72: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

72

CARRERAS PROFESIONALES CIBERTEC

Programando el evento Loaded del PhoneApplication, seleccione desde la lista de

eventos de la ventana de propiedades, el evento Loaded, tal como se muestra.

Programación

Al cargar la página, recuperamos los valores del QueryString, tal como se muestra, y

visualizamos los datos.

Presione la tecla F5 para ejecutar.

Recupero los valores enviados por la cadena de consulta

Page 73: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7 3

CIBERTEC CARRERAS PROFESIONALES

Resumen

Hay varias formas de navegar entre páginas, pero vamos a enfocarnos en una a la

que se va a llamar Navegación Simple de Web. Navegaremos entre páginas de

igual manera como si fuesen páginas de HTML.

Si queremos ir de la primera a la segunda, podemos hacer uso de un control

HyperlinkButton. Este permite realizar la navegación entre dos páginas. Para

establecer el vínculo entre páginas a través del control HyperlinkButton, se puede

hacer usando sólo XAML

Se puede navegar entre páginas utilizando código en vez de usar sólo XAML,

pueden usar cualquier elemento XAML que se prefiera. En este ejemplo, vamos a

crear tres botones y cada uno apunta al mismo controlador de eventos. En el

código C# siguiente, verán que se averigua cuál botón ha sido pulsado y luego se

va a la página apropiada.

El servicio de navegación que se devuelve de la propiedad NavigationService es la

instancia de la clase NavigationService administrada por el primer navegador en el

árbol visual. Si no se encuentra ninguna, se devuelve null, lo que indica que el host

de una página no admite la navegación

De forma predeterminada, NavigationService no almacena ninguna instancia de un

objeto de contenido en el historial de navegación. En su lugar, NavigationService

crea una nueva instancia del objeto de contenido cada vez que se navega a él

mediante el historial de navegación. Este comportamiento está diseñado para

evitar un consumo de memoria excesivo cuando se navegue a muchas partes del

contenido y a grandes partes del mismo.

Para pasar datos entre dos páginas, debemos especificar los parámetros y sus

valores en la URI (QueryString) es probablemente la forma más fácil de pasar

datos de una página a otra durante la navegación.

Para ello añadir ("?") signo de interrogación para el final y luego especifique el

parámetro par = valor (Código de verificación abajo). Utilice Uri.EscapeUriString

para evitar excepciones formato durante la navegación.

Después de pasar los valores a la página de destino que se puede obtener

utilizando NavigationContext y la cadena de consulta. Por lo general, se puede

implementar este proceso dentro del método OnNavigatedTo

Page 74: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

74

CARRERAS PROFESIONALES CIBERTEC

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas:

Navegación entre páginas

http://maromasdigitales.net/2010/12/31-dias-de-windows-phone-dia-2-

avegacion-entre-páginas/

Clase NavigateService

http://msdn.microsoft.com/es-

es/library/system.windows.controls.page.navigationservice.aspx

Page 75: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7 5

CIBERTEC CARRERAS PROFESIONALES

ACCESO A DATOS POR WINDOWS PHONE 7

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, el alumno desarrolla procesos que permitan acceder a los datos desde un servidor remoto consumiendo servicios para consultar los datos y almacenarlos en un equipo del usuario.

TEMARIO

2.1 Tema 3 : Almacenamiento Local: IsolatedStoraged 2.1.1. : Almacenamiento de datos en WP7 2.1.2. : Laboratorio

2.2 Tema 4 : Acceso a datos en Archivos XML 2.2.1. : Acerca de XML 2.2.2. : Manejo de datos en XML en aplicación Phone 2.2.3. : Controles enlazados a los datos

2.2 Tema 5 : Windows Communication Foundation 2.3.1. : WCF, Arquitectura 2.3.2. : Características del WCF 2.3.3. : Windows Phone y WCF

ACTIVIDADES PROPUESTAS

Los alumnos implementarán una aplicación Mobile para el manejo archivos en el equipo local

Los alumnos aprenderán a definir y consumir servicios implementos por WCF y ejecutados en una aplicación mobile.

Los alumnos aprenderán a consultar datos consumiendo servicios, desarrollados en WCF y ejecutados en una aplicación mobile.

UNIDAD DE

APRENDIZAJE

2

Page 76: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

76

CARRERAS PROFESIONALES CIBERTEC

Page 77: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7 7

CIBERTEC CARRERAS PROFESIONALES

2.1 ALMACENAMIENTO DE DATOS EN WP7

La programación de aplicaciones para Windows Phone tiene un defecto importante en

lo que se refiere a almacenamiento de datos. En esta plataforma, no existe una Base

de Datos interna del teléfono donde podamos guardar y acceder a los datos de

nuestra aplicación. No se sabe si en un futuro esto cambiará, pero de momento

Microsoft sigue con la idea de almacenamiento en la nube. Es decir, la filosofía de

Windows Phone es utilizar Internet para guardar todos los datos. No es una mala

teoría, porque los datos estarían a salvo de problemas con el dispositivo y serían

accesibles siempre.

Existen diferentes opciones para almacenar datos. Básicamente son dos: Isolated

Storage o almacenamiento en local y almacenamiento en Base de Datos en la nube.

En este capítulo, nos centraremos en el almacenamiento con Isolated Storage.

2.1.1 ALMACENAMIENTO LOCAL: ISOLATEDSTORAGE

Windows Phone 7 dispone de un almacenamiento, denominado Isolated Storage por

aplicación, que tiene las siguientes características:

“Isolated Storage” es un almacenamiento totalmente aislado de cualquier otra

aplicación. Los programas son ejecutados en una especie de SandBox, en la cual

no disponen de acceso a ningún recurso de cualquier otra aplicación.

Se dispone de un almacenamiento “especial”, el cual si puede ser compartido y

accesible por cualquier aplicativo, es el MediaLibrary.

Cada aplicación dispone de todo el espacio disponible para para almacenamiento

del dispositivo en cada momento. Es decir, no tenemos un espacio reservado. Hay

que tener en cuenta que no sabremos nunca donde se guarda la información,

pues en dispositivos con tarjetas MicroSD de memoria externa, no es posible

determinar si la información está guardada en la memoria interna del propio

teléfono o en la tarjeta MicroSD. Esto se debe a que el sistema junta ambos

espacios formando una especie de Raid 0, sin distinguir, para el usuario, uno de

otro.

Page 78: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

78

CARRERAS PROFESIONALES CIBERTEC

Con todas esas consideraciones iniciales, vamos a explicar cómo funciona, cómo se

almacena y cómo se lee este espacio.

El almacenamiento de datos con Isolated Storage, o almacenamiento local, es una

forma de guardar los datos en archivos locales que se usa desde Silverlight 2. Se

llama almacenamiento aislado porque solo nuestra aplicación tiene acceso a sus

archivos. No es posible compartir datos entre dos aplicaciones con este sistema.

2.1.1.1 Utilizando IsolatedStorageSettings

La clase IsolatedStorageSettings se utiliza principalmente cuando guardamos los

datos de la configuración de nuestra aplicación.

Page 79: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 7 9

CIBERTEC CARRERAS PROFESIONALES

¿Por qué guardar la configuración? Esta clase está preparada y diseñada para

guardar esta información debido a que nos proporciona un IDictionary de tipo clave-

valor, “Dictionary(Of TKey, TValue)“, llamado “Application Settings” el cual

automáticamente busca el espacio de almacenamiento e interacciona con él. Eso nos

facilita mucho la labor de guardar y leer datos simples.

Por ejemplo, vamos a crear una clase con dos métodos para leer y grabar la

configuración de nuestra aplicación.

De esta manera tan sencilla estamos grabando y leyendo cadenas de texto en nuestro

almacén local. Obviamente, esto es ejemplo simple para que se entienda el

funcionamiento. Para realizar algo más eficaz deberíamos de poder guardar cualquier

cosa como un valor dentro de nuestro diccionario, para ello modificamos la clase para

dejarla de la siguiente forma:

public class Configuracion{

public static string Leer(string k){

string rs = "";

if IsolatedStorageSettings.ApplicationSettings.Contains(k))

{

rs=IsolatedStorageSettings.ApplicationSettings[k].ToString();

}

return rs;

}

public static void Grabar(string clave, string valor){

IsolatedStorageSettings.ApplicationSettings[k] = valor;

}

}

public class Configuracion{

public static T Leer<T>(string k){

T rs = default(T);

if (IsolatedStorageSettings.ApplicationSettings.Contains(k)){

rs = (T)IsolatedStorageSettings.ApplicationSettings[k];

}

return rs;

}

public static void Grabar<T>(string k, T valor){

if (IsolatedStorageSettings.ApplicationSettings.Contains(k)){

IsolatedStorageSettings.ApplicationSettings[k] = valor;

}

else{

IsolatedStorageSettings.ApplicationSettings.Add(k, valor);

}

IsolatedStorageSettings.ApplicationSettings.Save();

}

}

Page 80: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

80

CARRERAS PROFESIONALES CIBERTEC

En algunas ocasiones, en el método de grabación se debe de indicar el método “Save”

del IDictionary. Esto puede resultar un tanto extraño ya que la clase

IsolatedStorageSettings implícitamente ya guarda la información del diccionario en el

momento de asignar un valor, pero debemos de remarcar la grabación ya que es el

único momento en donde nos puede sorprender con una excepción de la clase

“IsolatedStorageException“, normalmente por espacio insuficiente.

La clase “IsolatedStorageSettings” no es más que una clase especial que deriva de

“IsolatedStorageFile“. Si nos vamos un poco más allá, podemos decir que la estructura

del almacenamiento de nuestro WP7 es “\Aplications\Data\(ID

Aplicación)\Data\IsolatedStore” en donde “Id Aplicación” es el SandBox de

nuestra propio programa, siendo en este caso “C4EFD08D-D2A8-4595-966F-

435E7722E9DF”.

2.1.1.2 Clase IsolatedStorage

El espacio de nombres System.IO.IsolatedStorage contiene tipos para crear y

utilizar un sistema de archivos virtual. El almacenamiento aislado proporciona un

almacenamiento seguro en el cliente para las aplicaciones de confianza parcial. En

Silverlight, todas las operaciones de E/S están restringidas al almacenamiento aislado

y no usan el sistema de archivos del sistema operativo.

Page 81: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 8 1

CIBERTEC CARRERAS PROFESIONALES

Clase Descripción

IsolatedStorageException Excepción que se produce cuando una operación del

almacenamiento aislado produce un error.

IsolatedStorageFile Representa un área de almacenamiento aislado que

contiene archivos y directorios.

IsolatedStorageFileStream Expone un archivo dentro del almacenamiento

aislado.

IsolatedStorageSettings Proporciona un objeto Dictionary<TKey, TValue>

que almacena los pares clave-valor en

almacenamiento aislado.

2.1.1.3 Clase IsolatedStorageFile

Esta clase abstrae el sistema de archivos virtual para el almacenamiento aislado. Un

objeto IsolatedStorageFile se corresponde con un ámbito de almacenamiento aislado

específico, donde se encuentran los archivos representados por los objetos

IsolatedStorageFileStream. Las aplicaciones pueden utilizar el almacenamiento

aislado para guardar datos en su propia parte aislada del sistema de archivos, sin

tener que especificar una ruta de acceso concreta dentro del sistema de archivos.

La raíz del sistema de archivos virtual se encuentra en una carpeta de usuario en el

sistema de archivos físico. Cada identificador único es proporcionado por el host y se

asigna a una raíz distinta, por lo que cada aplicación dispone de su propio sistema de

archivos virtual. Una aplicación no puede salir de su propio sistema de archivos para

navegar a otro.

A. Métodos del IsolatedStoraged.

A continuación listaremos los métodos de la clase IsolatedStorageFile:

Método Descripción

CopyFile(String, String) Copia un archivo existente en un archivo nuevo.

CreateDirectory Copia un archivo existente en un archivo nuevo y,

opcionalmente, sobrescribe el archivo existente.

Page 82: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

82

CARRERAS PROFESIONALES CIBERTEC

CreateFile Crea un archivo en el almacén aislado.

DeleteDirectory Elimina un directorio del ámbito de

almacenamiento aislado.

DeleteFile Elimina un archivo del almacén aislado.

DirectoryExists Determina si la ruta de acceso especificada hace

referencia a un directorio existente en el almacén

aislado.

FileExists Determina si la ruta de acceso especificada hace

referencia a un archivo existente en el almacén

aislado.

GetDirectoryNames(String) Enumera los directorios de un ámbito de

almacenamiento aislado que coinciden con un

modelo determinado.

GetFileNames(String) Enumera los archivos de un ámbito de

almacenamiento aislado que coinciden con un

modelo especificado.

GetUserStoreForApplication Obtiene el almacenamiento aislado en el ámbito

del usuario para que lo use una aplicación que

llama desde el dominio de host virtual.

MoveDirectory Mueve un directorio especificado y su contenido a

una nueva ubicación.

MoveFile Mueve un archivo especificado a una nueva

ubicación y, opcionalmente, le permite indicar un

nuevo nombre de archivo.

Remove Quita el ámbito de almacenamiento aislado y todo

su contenido.

2.1.1.4 Clase IsolatedStorageFileStream

Utilice esta clase para leer, escribir y crear archivos en el almacenamiento aislado.

Como esta clase extiende FileStream, se puede utilizar una instancia de

IsolatedStorageFileStream en la mayoría de las situaciones en que, de otro modo, se

utilizaría FileStream, como, por ejemplo, para construir StreamReader o StreamWriter.

Page 83: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 8 3

CIBERTEC CARRERAS PROFESIONALES

B. 2.4.1 Métodos del IsolatedStorageFileStream

A continuación listaremos los métodos de la clase IsolatedStoragedFileStream:

Método Descripción

BeginRead Comienza una lectura asincrónica. (Invalida a

FileStream.BeginRead(Byte[], Int32, Int32, AsyncCallback,

Object)).

BeginWrite Comienza una escritura asincrónica. (Invalida a

FileStream.BeginWrite(Byte[], Int32, Int32, AsyncCallback,

Object)).

Close Cierra la secuencia actual y libera todos los recursos (como

sockets e identificadores de archivo) asociados a esta. (Se

hereda de Stream).

CopyTo(Stream,

Int32)

Lee todos los bytes de la secuencia actual y los escribe en una

secuencia de destino. (Se hereda de Stream).

Finalize Garantiza que se liberan los recursos y se realizan otras

operaciones de limpieza cuando el recolector de elementos no

utilizados reclama FileStream. (Se hereda de FileStream).

Flush() Actualiza el archivo con el estado actual del búfer y después

borra dicho búfer. (Invalida a FileStream.Flush()).

Read Copia en una matriz bytes del actual objeto

IsolatedStorageFileStream almacenado en el búfer. (Invalida a

FileStream.Read(Byte[], Int32, Int32)).

Seek Establece la actual posición de este objeto

IsolatedStorageFileStream en el valor especificado. (Invalida a

FileStream.Seek(Int64, SeekOrigin)).

SetLength Establece la longitud de este objeto IsolatedStorageFileStream

en el parámetro value especificado. (Invalida a

FileStream.SetLength(Int64)).

Write Escribe un bloque de bytes en el objeto

IsolatedStorageFileStream utilizando los datos leídos de una

matriz de bytes. (Invalida a FileStream.Write(Byte[], Int32,

Int32)).

Page 84: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

84

CARRERAS PROFESIONALES CIBERTEC

La forma de operar con el archivo es muy similar, obtenemos el espacio de

almacenamiento de la aplicación mediante GetUserStoreForApplication.

Luego tenemos que usar una instancia de IsolatedStorageFileStream para poder

manipular el archivo. Hay que indicar el nombre del archivo, el lugar donde está

almacenado y como manipulamos el archivo, tenemos varias opciones para esto,

Create, Open, Append, Truncate, etc.

Por último hacemos uso de un objeto StreamWriter o StreamReader para escribir o

leer en el archivo.

using (var area = IsolatedStorageFile.GetUserStoreForApplication())

using (var area = IsolatedStorageFile.GetUserStoreForApplication())

using (var StreamEscritura = new IsolatedStorageFileStream(archivo,

FileMode.Create, area))

public void Guardar(string texto, string archivo){

using (var area =

IsolatedStorageFile.GetUserStoreForApplication())

using (var StreamEscritura = new

IsolatedStorageFileStream(archivo, FileMode.Create, area))

using (var escritor = new StreamWriter(StreamEscritura))

{

escritor.Write(texto);

}

}

Page 85: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 8 5

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 3.1

Manejo de Carpetas

Implementa una aplicación para manejar carpetas en el almacenamiento local.

1. Inicio del Proyecto

Seleccione la opción Create New Project

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#.

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK.

2. Diseño del Page

Control TextBox, name: txtCarpeta

Control Button, name: btnAdd

Control ListBox, name: listBox1

Seleccione el tipo de Page

Asigne el nombre a la Página, presione el botón Add

Page 86: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

86

CARRERAS PROFESIONALES CIBERTEC

3. Programación

Agregue las librerías para trabajar con almacenamiento local.

Defina el área de almacenamiento local a nivel Class.

Librería para el manejo de archivos

Define el área de almacenamiento de tipo User para Aplicación

Page 87: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 8 7

CIBERTEC CARRERAS PROFESIONALES

Defina un método para listar los directorios en el control ListBox1

Programa el evento Click del botón Add, el cual permita agregar un directorio al área

de almacenamiento local.

Define la rutina listar() que permite listar todos los directorios del area de almacenamiento Aislado, utilizamos el getDirectoryNames()

Programa el botón Add, donde evalua: si no existe el directorio, crear el directorio, ejecutar el método listar(); sino mostrar un mensaje.

Page 88: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

88

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 3.2

Trabajando con Archivos

Implementa una aplicación Windows Phone que permita almacenar archivo de texto

en el área de almacenamiento local.

1. Diseño del Page

Diseñe el Page a continuación

2. Programación

Agregue las librerías para trabajar con almacenamiento local

Control TextBox, name: txtContenido

Control Button, name: btnSave

Control ListBox, name: listBox1

Page 89: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 8 9

CIBERTEC CARRERAS PROFESIONALES

Defina el área de almacenamiento local a nivel Clase.

Librería para el manejo de archivos

Define el área de almacenamiento de tipo User para Aplicación

Page 90: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

90

CARRERAS PROFESIONALES CIBERTEC

Defina un método para listar los directorios en el control ListBox1.

Programe el evento Click del botón Save, para guardar el archivo de texto en un

directorio seleccionado desde el control ListBox1

Presione F5 para ejecutar la aplicación

Define el método listar() en el control listbox1

Ejecutar el método listar() en el método loaded.

Si no selecciono el directorio

Definir el nombre del archivo

Definir el archivo de almacenamiento local

Definir el escritor de f y escriba su contenido

Cerrar los objetos

Page 91: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9 1

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 3.3

Trabajando con Carpetas y archivos

Implementa una aplicación Windows Phone que permita leer el archivo de texto en el

área de almacenamiento local al seleccionar un directorio almacenado en el área de

almacenamiento local.

1. Diseño del Page

Diseñe el Page a continuación

2. Programación

Agregue las librerías para trabajar con almacenamiento local

Control TextBox, name: txtContenido

Control ListBox, name: listBox2

Control ListBox, name: listBox1

Librería para el manejo de archivos

Page 92: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

92

CARRERAS PROFESIONALES CIBERTEC

Defina el área de almacenamiento local a nivel Clase.

Defina un método para listar los directorios en el control ListBox1

Define el área de almacenamiento de tipo User para Aplicación

Define el método listar() en el control listbox1

Ejecutar el método listar() en el método loaded.

Page 93: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9 3

CIBERTEC CARRERAS PROFESIONALES

Programe el evento SelectionIndexChanged en el control ListBox1, donde al

seleccionar una carpeta, liste sus archivos

Programe el evento SelectionIndexChanged en el control ListBox2, donde al

seleccionar un archivo, visualice el contenido en el control TextBox

En el evento SelectionChanged del listbox1, al seleccionar una carpeta, listar sus archivos

En el evento SelectionChanged del listbox2, al seleccionar el archivo, visualizar el contenido utilizando el StreamReader

Definir el lector del archivo StreamReader y leer todo ReadtoEnd

Page 94: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

94

CARRERAS PROFESIONALES CIBERTEC

Resumen

El almacenamiento de datos con Isolated Storage o almacenamiento local es una

forma de guardar los datos en archivos locales que lleva en uso desde Silverlight 2.

Solo nuestra aplicación tiene acceso a sus archivos, por eso se llama

almacenamiento aislado.

La clase IsolatedStorageSettings se utiliza principalmente cuando guardamos los

datos de la configuración de nuestra aplicación, el nombre de la propia clase nos

da alguna que otra pista.

El espacio de nombres System.IO.IsolatedStorage contiene tipos para crear y

utilizar un sistema de archivos virtual. El almacenamiento aislado proporciona un

almacenamiento seguro en el cliente para las aplicaciones de confianza parcial. En

Silverlight, todas las operaciones de E/S están restringidas al almacenamiento

aislado y no usan el sistema de archivos del sistema operativo.

Esta clase abstrae el sistema de archivos virtual para el almacenamiento aislado.

Un objeto IsolatedStorageFile se corresponde con un ámbito de almacenamiento

aislado específico, donde se encuentran los archivos representados por los objetos

IsolatedStorageFileStream. Las aplicaciones pueden utilizar el almacenamiento

aislado para guardar datos en su propia parte aislada del sistema de archivos, sin

tener que especificar una ruta de acceso concreta dentro del sistema de archivos.

Utilice esta clase para leer, escribir y crear archivos en el almacenamiento aislado.

Como esta clase extiende FileStream, se puede utilizar una instancia de

IsolatedStorageFileStream en la mayoría de las situaciones en que, de otro modo,

se utilizaría FileStream, como, por ejemplo, para construir StreamReader o

StreamWriter.

La forma de operar con el archivo es muy similar, obtenemos el espacio de

almacenamiento de la aplicación mediante GetUserStoreForApplication. Luego

tenemos que usar una instancia de IsolatedStorageFileStream para poder

manipular el archivo. Hay que indicar el nombre del archivo, el lugar donde está

almacenado y como manipulamos el archivo, tenemos varias opciones para esto,

Create, Open, Append, Truncate, etc

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.

Almacenamiento local

Page 95: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9 5

CIBERTEC CARRERAS PROFESIONALES

http://www.lavilladigital.com/2011/03/22/almacenamiento-local-de-datos-en-

windows-phone/

Manejo de carpetas y archivos locales

http://geeks.ms/blogs/creneses/archive/2010/10/07/wp7-almacenamiento-de-

archivos-en-local.aspx

Almacenamiento local

http://tecnologia.rafaserna.es/2011/01/22/almacenamiento-en-windows-phone-7-

isolated-storage/

Page 96: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

96

CARRERAS PROFESIONALES CIBERTEC

2.2 ACCESO A DATOS EN ARCHIVOS XML

2.2.1 ACERCA DE XML

XML es una tecnología, en realidad, muy sencilla que tiene a su alrededor otras

tecnologías que la complementan y la hacen mucho más grande y con unas

posibilidades enormes y básicas para la sociedad de la información.

XML, con todas las tecnologías relacionadas, representa una manera distinta de hacer

las cosas, más avanzada, cuya principal novedad consiste en permitir compartir los

datos con los que se trabaja a todos los niveles, por todas las aplicaciones y soportes.

Así pues, el XML juega un papel importantísimo en este mundo actual, que tiende a la

globalización y la compatibilidad entre los sistemas, ya que es la tecnología que

permitirá compartir la información de una manera segura, fiable, fácil. Además, XML

permite al programador dedicar sus esfuerzos a tareas importantes, cuando trabaja

con los datos, ya que algunas tareas tediosas como la validación de estos o el

recorrido de las estructuras corren a cargo del lenguaje y está especificado por el

estándar, de modo que el programador no tiene que preocuparse por ello.

En XML, se empieza con una etiqueta y termina con otra etiqueta. En el inicio de la

etiqueta, escribir el nombre del elemento XML que quieres colocar dentro de los

soportes <>; en el final de la etiqueta, colocar el mismo nombre del elemento de inicio,

pero colocando un “/” después del primer soporte de la izquierda.

Se puede observar esto en este archivo XML:

<?xml version=”1.0” encoding=”utf-8”?>

<Levels>

<Level>

<Numbers>1</Numbers>

<Enemy>1</Enemy>

</Level>

</Levels>

Nótese, que hay una etiqueta de apertura y una etiqueta de cierre que tiene el valor

de “Levels”. Esta etiqueta de apertura y etiqueta de cierre es para todos los niveles. A

continuación hay un nivel definido, con elementos que son el nivel Number y el nivel

Page 97: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9 7

CIBERTEC CARRERAS PROFESIONALES

Enemy. Enemy tiene un valor de "Enemy1". Ahora, este valor podría ser lo que

quieras: tipo int, string, un enum, o incluso un objeto personalizado. Pero, cuando se

carga el archivo, todos los elementos son cadenas.

El campo Number es llamado elemento. Es un elemento de ese nivel, ya que se

encuentra entre las etiquetas de apertura y del cierre del nivel. Los elementos también

pueden tener atributos, que vienen después de que el nombre del elemento, pero

antes de que el soporte de la flecha. Este es un ejemplo de un atributo:

<Enemy>1</Enemy>

Enemy tiene dos atributos: FrameWidth y FrameHeight.

2.2.2 MANEJO DE DATOS XML EN UNA APLICACIÓN PHONE

Uno de los grandes cambios en el desarrollo entre Windows Mobile 6.X y Windows

Phone 7 es que nuestras aplicaciones no tienen permiso para acceder al

almacenamiento general del terminal sobre el que se almacenan y no podemos usar

bases de datos en el propio terminal.

Para suplir esto la directriz de Microsoft es clara: mueve tus datos a la nube y que la

aplicación acceda a ellos mediante su conexión a internet. Aunque esto es totalmente

válido podemos encontrarnos ocasiones en que deseemos almacenar cierta

información en el terminal, a modo de cache de datos o guardar preferencias de

usuario sobre archivos XML

El proceso para el manejo de un archivo XML requiere de un conjunto de librerías o

nameSpace para la consulta y actualización de sus registros:

System.XML

System.XML.LINQ

System.XML.Serialization

Page 98: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

98

CARRERAS PROFESIONALES CIBERTEC

2.2.2.1 Consulta de Datos: System.XML.LINQ

Contiene las clases para LINQ to XML. LINQ to XML es una interfaz de programación

XML en memoria que permite modificar con eficacia y facilidad documentos XML.

Con LINQ to XML, puede:

Cargar XML a partir de archivos o secuencias.

Serializar XML a archivos o secuencias.

Crear árboles XML desde cero usando la construcción funcional.

Consultar árboles XML mediante consultas LINQ.

Manipular árboles XML en memoria.

Validar árboles XML mediante XSD.

Usar una combinación de estas características para transformar las formas de los

árboles XML.

A. Clases

Nombre Descripción

XDocument Representa un Documento XML

XElement Representa un elemento XML

XNode Representa el concepto abstracto de un nodo (elemento, comentario,

tipo de documento, instrucción de procesamiento o nodo de texto) del

árbol XML.

XObject Representa un nodo o atributo del árbol XML

XAttribute Representa un atributo XML

Una de las clases que permite la carga del archivo XML es XDocument, donde permite

subir a memoria los datos del archivo.

LINQ to XML proporciona una interfaz de programación XML en memoria que

aprovecha las características de .NET Language-Integrated Query (LINQ) Framework.

LINQ to XML utiliza las características más recientes del lenguaje .NET Framework y

XDocument doc = XDocument.Load(“Archivo.xml”);

Page 99: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 9 9

CIBERTEC CARRERAS PROFESIONALES

es comparable a una actualizada y rediseñada interfaz de programación XML para el

Modelo de objetos de documento (DOM).

En una consulta LINQ, el primer paso es especificar el origen de datos. En C#, como

en la mayoría de los lenguajes de programación, se debe declarar una variable antes

de poder utilizarla. En una consulta LINQ, la cláusula FROM aparece en primer lugar

para introducir el origen de datos (customers) y la variable de rango (cust).

Probablemente la operación de consulta más común es aplicar un filtro en forma de

expresión booleana. El filtro hace que la consulta devuelva sólo los elementos para los

que la expresión es verdadera. El resultado se genera mediante la cláusula WHERE.

El filtro aplicado especifica qué elementos se deben excluir de la secuencia de origen.

En el ejemplo siguiente, sólo se devuelven los customers cuya dirección se encuentra

en Londres (London).

Puede utilizar los operadores lógicos AND y OR de C#, con los que ya estará

familiarizado, para aplicar las expresiones de filtro que sean necesarias en la cláusula

where:

A menudo es necesario ordenar los datos devueltos. La cláusula ORDERBY hará que

los elementos de la secuencia devuelta se ordenen según el comparador

predeterminado del tipo que se va a ordenar. Por ejemplo, la consulta siguiente se

puede extender para ordenar los resultados según la propiedad Name. Dado que

Name es una cadena, el comparador predeterminado realiza una ordenación

alfabética de la A hasta la Z.

var queryAllCustomers = from cust in customers

select cust;

var queryLondonCustomers = from cust in customers

where cust.City == "London"

select cust;

where cust.City=="London" && cust.Name == "Devon"

where cust.City == "London" || cust.City == "Paris"

Page 100: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

100

CARRERAS PROFESIONALES CIBERTEC

La cláusula GROUP permite agrupar los resultados según la clave que se especifique.

Por ejemplo, podría especificar que los resultados se agrupen por City para que todos

los clientes de London o París estén en grupos individuales. En este caso, la clave es

cust.City.

Al finalizar una consulta con una cláusula GROUP, los resultados adoptan la forma de

una lista de listas. Cada elemento de la lista es un objeto que tiene un miembro Key y

una lista de elementos agrupados bajo esa clave.

Al procesar una iteración en una consulta que genera una secuencia de grupos, debe

utilizar un bucle FOREACH anidado. El bucle exterior recorre en iteración cada grupo y

el bucle interior recorre en iteración los miembros de cada grupo.

Si debe hacer referencia a los resultados de una operación de grupo, puede utilizar la

palabra clave INTO para crear un identificador con el que se puedan realizar más

consultas. La consulta siguiente devuelve sólo los grupos que contienen más de dos

clientes:

En este ejemplo, vamos a cargar los datos del archivo XML llamado People. Utilizando

sintaxis LINQ vamos a leer el contenido del archivo xml.

var queryLondonCustomers3 = from cust in customers

where cust.City == "London"

orderby cust.Name ascending

select cust;

var queryCustomersByCity = from cust in customers

group cust by cust.City;

var custQuery = from cust in customers

group cust by cust.City into custGroup

where custGroup.Count() > 2

orderby custGroup.Key

select custGroup;

Page 101: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 01

CIBERTEC CARRERAS PROFESIONALES

2.2.2.2 Serialización de datos: System.XML.Serialization

El espacio de nombres System.Xml.Serialization contiene clases que se

utilizan para serializar objetos en secuencias o documentos con formato XML.

La clase central en el espacio de nombres es la clase XmlSerializer. Para utilizar

esta clase, use el constructor XmlSerializer con el fin de crear una instancia de la

clase utilizando el tipo de objeto que se va a serializar. Tras crear XmlSerializer,

cree una instancia del objeto que se va a serializar. También hay que crear un objeto

para escribir el archivo en un documento o una secuencia, como Stream,

TextWriter o XmlWriter. A continuación, hay que llamar al método Serialize

para convertir el objeto en un documento XML.

Para deserializar un objeto de un documento XML, hay que crear un objeto adecuado

con el fin de leer el documento o la secuencia (de nuevo, Stream, TextWriter o

XmlWriter). Invoque al método Deserialize mientras se convierte el objeto

resultante en el tipo del objeto original (serializado).

Para controlar la serialización, el espacio de nombres System.Xml.Serialization

contiene varias clases Attribute que se pueden aplicar a los miembros de una

clase. Por ejemplo, si una clase contiene un miembro que se serializará como un

elemento XML, se puede aplicar el atributo XmlElementAttribute al miembro. Al

aplicar el atributo, se puede especificar información detallada como el nombre de

elemento XML real mediante la propiedad ElementName. Para obtener una lista

completa de todos los atributos, vea la información general de la clase

XmlSerializer.

XDocument loadedData = XDocument.Load("People.xml"); var data = from query in loadedData.Descendants("person")

select new Person { FirstName = (string)query.Element("name"), astName = (string)query.Element("last"), Age = (int)query.Element("age")

};

Page 102: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

102

CARRERAS PROFESIONALES CIBERTEC

2.2.3 CONTROLES ENLAZADOS A LOS DATOS

El proceso de consulta de datos, implica la visualización de los mismos a través de

controles de datos: Listas, Grillas, etc.

Para una aplicación Windows Phone el concepto de mostrar o visualizar un conjunto

de datos, implica el manejo de Controles Items en el proceso del Listado.

2.2.3.1 Controles Items: ListBox

El control ListBox es una lista desplegable vertical de elementos el cual se visualizan

los datos a través de la colección Items.

El ItemsControl es simplemente un objeto que puede contener múltiples ítems,

tales como strings, objects u otros elementos que definen un Item del control

ListBox de forma personalizada. El ItemsControl provee de una implementación

grafica al control, pero no implementa ninguna operación lógica.

Utilice cualquiera de las propiedades Items o ItemsSource para especificar la

colección a utilizar para generar el contenido de su ItemsControl. Puede establecer

la propiedad ItemsSource de cualquier tipo que implemente

IEnumerable.ItemsSource se utiliza normalmente para mostrar una colección de

datos o de obligar a un ItemsControl a un objeto de colección.

Si no desea utilizar un objeto que implemente IEnumerable para rellenar

ItemsControl, puede agregar elementos mediante la propiedad Items. Los

elementos de un ItemsControl pueden tener diferentes tipos. Por ejemplo, un

control ListBox puede contener un elemento que es una cadena y otro elemento que

es una imagen.

Cuando la propiedad ItemsSource está establecida, la colección Items se establece

como de sólo lectura y de tamaño fijo. Esto significa que no se pueden agregar

elementos a la colección directamente. Cuando ItemsSource está en uso,

estableciendo la propiedad en null elimina la colección y restaura el uso a los

elementos, que será un ItemCollection vacío.

Page 103: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 03

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 4.1

Consultando un archivo XML

Implementa una aplicación Windows Phone que permita leer un archivo XML

visualizando su contenido en una página del aplicativo

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Application, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

Page 104: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

104

CARRERAS PROFESIONALES CIBERTEC

2. Archivo XML.

Para realizar este proceso, crea un archivo XML

llamados personas.xml, definiendo la estructura

de la raíz y sus elementos, tal como se muestra.

3. Diseño.

Diseña la página tal como se muestra para realizar el

proceso de la consulta

Defina el control StackPanel y el Template del ListBox

en el archivo XAML, tal como se muestra.

Defina el control StackPanel, el ListBox, y el Template de datos tal como se muestra

Page 105: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 05

CIBERTEC CARRERAS PROFESIONALES

4. Agregando referencias al Proyecto.

Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a

las librerías System.xml.LINQ, System.xml.Serialization, tal como se muestra.

5. Programación

Defina la clase persona, definiendo sus atributos y propiedades

Agregar las referencias al proyecto

Page 106: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

106

CARRERAS PROFESIONALES CIBERTEC

En el class Page1, defina las librerías a utilizar en el proyecto.

Programa el evento Loaded del Page, donde ejecutara la consulta LINQ, visualizando

los datos en el control ListBox1.

Presione la tecla F5 para ejecutar la aplicación, donde se visualiza la lista de las

personas en el Page.

Defina las librerías del proyecto

Page 107: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 07

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 4.2

Filtrando los registros de un archivo XML

Implementa una aplicación Windows Phone que permita leer un archivo XML

visualizando su contenido en una página del aplicativo

1. Diseño.

Diseña la página tal como se muestra para realizar el proceso de la consulta

Defina el control StackPanel y el Template del ListBox en el archivo XAML, tal como se

muestra.

Defina el control StackPanel, el ListBox, y el Template de datos tal como se muestra

Page 108: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

108

CARRERAS PROFESIONALES CIBERTEC

2. Agregando referencias al Proyecto.

Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a

las librerías System.xml.LINQ, System.xml.Serialization, tal como se muestra.

3. Programación

Defina la clase persona, definiendo sus atributos y propiedades

Agregar las referencias al proyecto

Page 109: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 09

CIBERTEC CARRERAS PROFESIONALES

En el class Page1, defina las librerías a utilizar en el proyecto.

Programe el evento Click del botón Consulta, donde al ingresar las iniciales del

nombre de una persona, visualizamos los registros que coincidan con las iniciales.

Defina las librerías del proyecto

Page 110: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

110

CARRERAS PROFESIONALES CIBERTEC

Presione la tecla F5 para ejecutar la aplicación, ingrese las iniciales del nombre, al

presionar el botón Consulta, visualizamos los registros que coincidan con los datos

ingresados

Page 111: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 11

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 4.3

Consultando datos en los registros de un archivo XML

Implementa una aplicación Windows Phone que permita buscar un usuario registrado

desde un archivo XML visualizando el nombre del usuario.

1. Archivo XML.

Para realizar este proceso, crea un

archivo XML llamados usuarios.xml,

definiendo la estructura de la raíz y sus

elementos, tal como se muestra

2. Diseño.

Diseña la página de acceso al sistema, tal como se

muestra. Diseña el control ListBox1 en la página

XAML, tal como se muestra en la grafica de la

parte inferior.

Page 112: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

112

CARRERAS PROFESIONALES CIBERTEC

3. Agregando referencias al Proyecto.

Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a

las librerías System.xml.LINQ, System.xml.Serialization, tal como se muestra.

4. Programación

Defina la clase Usuarios.cs, definiendo

sus atributos y propiedades

Defina el listBox1, en la página XAML

Agregar las referencias al proyecto

Page 113: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 13

CIBERTEC CARRERAS PROFESIONALES

En el class Page1, defina las librerías a utilizar en el proyecto.

Programe el evento Click del botón Consulta, donde ingrese el login y la clave del

usuario, al presionar el botón verifica los datos ingresados, visualizando el nombre del

usuario, si existe.

Defina las librerías del proyecto

Page 114: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

114

CARRERAS PROFESIONALES CIBERTEC

Presione la tela F5, para ejecutar la aplicación, ingresa los datos, para verificar

presione el botón Aceptar.

Page 115: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 15

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 4.4

Almacenando un archivo XML en un área local

Implementa una aplicación Windows Phone que registrar y almacenar registros de

personas en un archivo XML almacenando el archivo en un área de almacenamiento

local

1. Diseño.

Diseña la página para el registro de archivos de personas tal como se muestra. Diseña

el control ListBox1 en la página XAML, tal como se muestra en la grafica de la parte

inferior.

Diseña el Template de datos, tal como se muestra

Page 116: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

116

CARRERAS PROFESIONALES CIBERTEC

2. Agregando referencias al Proyecto.

Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a

las librerías System.xml.LINQ, System.xml.Serialization, tal como se muestra.

3. Programación

Defina la clase Usuarios.cs, definiendo sus atributos y propiedades.

Agregar las referencias al proyecto

Page 117: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 17

CIBERTEC CARRERAS PROFESIONALES

En el class Page1, defina las librerías a utilizar en el proyecto.

Declara a nivel Class Page, el objeto Usuarios que es una lista de Persona de

estructura XMLArray.

Programa el botón Agregar, el cual permite agregar una persona a la colección, y

visualizar los datos en el ListBox

Defina las librerías del proyecto

Page 118: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

118

CARRERAS PROFESIONALES CIBERTEC

Programa el botón Guardar, donde la colección se guardara en un archivo XML.

Para ejecutar el programa presione la tecla F5, para realizar las operaciones.

Page 119: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 19

CIBERTEC CARRERAS PROFESIONALES

Resumen

XML es una tecnología en realidad muy sencilla que tiene a su alrededor otras

tecnologías que la complementan y la hacen mucho más grande y con unas

posibilidades enormes y básicas para la sociedad de la información.

En XML, se empieza con una etiqueta y termina con otra etiqueta. En el inicio de

la etiqueta, escribir el nombre del elemento XML que quieres colocar dentro de los

soportes <>; en el final de la etiqueta, colocar el mismo nombre del elemento de

inicio, pero colocando un “/” después del primer soporte de la izquierda.

El proceso para el manejo de un archivo XML requiere de un conjunto de librerías

o nameSpace para la consulta y actualización de sus registros:

System.XML

System.XML.LINQ

System.XML.Serialization

System.XML.LINQ contiene las clases para LINQ to XML. LINQ to XML es una

interfaz de programación XML en memoria que permite modificar con eficacia y

facilidad documentos XML

LINQ to XML proporciona una interfaz de programación XML en memoria que

aprovecha las características de .NET Language-Integrated Query (LINQ)

Framework. LINQ to XML utiliza las características más recientes del lenguaje

.NET Framework y es comparable a una actualizada y rediseñada interfaz de

programación XML para el Modelo de objetos de documento (DOM).

El espacio de nombres System.Xml.Serialization contiene clases que se utilizan

para serializar objetos en secuencias o documentos con formato XML.

La clase central en el espacio de nombres es la clase XmlSerializer. Tras crear

XmlSerializer, cree una instancia del objeto que se va a serializar. También hay

que crear un objeto para escribir el archivo en un documento o una secuencia,

como Stream, TextWriter o XmlWriter. A continuación, hay que llamar al método

Serialize para convertir el objeto en un documento XML.

Para deserializar un objeto de un documento XML, hay que crear un objeto

adecuado con el fin de leer el documento o la secuencia (de nuevo, Stream,

TextWriter o XmlWriter). Invoque al método Deserialize mientras se convierte el

objeto resultante en el tipo del objeto original (serializado).

El control ListBox es una lista desplegable vertical de elementos el cual se

visualizan los datos a través de la colección Items. El ItemsControl es simplemente

Page 120: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

120

CARRERAS PROFESIONALES CIBERTEC

un objeto que puede contener múltiples ítems, tales como strings, objects u otros

elementos define un Item del control ListBox de forma personalizada.

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.

Linq

http://msdn.microsoft.com/es-es/library/bb397927.aspx

Linq to XML

http://msdn.microsoft.com/en-us/library/bb299195(v=VS.95).aspx

ItemsControl

http://msdn.microsoft.com/en-

us/library/system.windows.controls.itemscontrol.aspx

Page 121: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 21

CIBERTEC CARRERAS PROFESIONALES

2.3 WINDOWS COMMUNICATION FOUNDATION

Windows Communication Foundation o WCF (también conocido como Indigo), es

la nueva plataforma de mensajería que forma parte de la API de la Plataforma .NET

3.0 (antes conocida como WinFX, y que no son más que extensiones para la version

2.0). Se encuentra basada en la Plataforma .NET 2.0 y de forma predeterminada se

incluye en el Sistema Operativo Microsoft Windows Vista.

Fue creado con el fin de permitir una programación rápida de sistemas distribuidos y el

desarrollo de aplicaciones basadas en arquitecturas orientadas a servicios (también

conocido como SOA), con una API simple; y que puede ejecutarse en una máquina

local, una LAN, o sobre la Internet en una forma segura.

2.3.1 Arquitectura del WCF

En el corazón de Windows

Communication Foundation está una

arquitectura de capas que soporta una

gran variedad de estilos para el

desarrollo de aplicaciones distribuidas.

La siguiente imagen ilustra la

arquitectura de capas de Windows

Communication Foundation.

Esta arquitectura en capas, brinda a los

desarrolladores un nuevo modelo de

programación orientado a servicios.

Page 122: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

122

CARRERAS PROFESIONALES CIBERTEC

2.3.1.1 Contratos

Los contratos WCF contienen información relativa a lo que un servicio ofrece al cliente

y el tipo de información que va a poner a disposición. Existen tres tipos de contratos:

de datos, de mensaje y de servicio.

A. Datos

Un contrato de datos estipula de manera explícita los datos que se intercambiarán con

el servicio. El servicio y el cliente no necesitan llegar a un acuerdo sobre los tipos, pero

si necesitan llegar a un acuerdo sobre los datos del contrato. Esto incluye los

parámetros y el tipo de retorno.

B. Mensajes

Un contrato de datos estipula de manera explícita los datos que se intercambiarán con

el servicio. El servicio y el cliente no necesitan llegar a un acuerdo sobre los tipos, pero

si necesitan llegar a un acuerdo sobre los datos del contrato. Esto incluye los

parámetros y el tipo de retorno.

C. Servicio

Un contrato de datos estipula de manera explícita los datos que se intercambiarán con

el servicio. El servicio y el cliente no necesitan llegar a un acuerdo sobre los tipos, pero

si necesitan llegar a un acuerdo sobre los datos del contrato. Esto incluye los

parámetros y el tipo de retorno.

Los contratos son definidos por el CLR por medio de clases o interfaces. Éstas, al ser

utilizadas en los servicios, son convertidas a un formato común para que el servicio

pueda ser usado por distintas plataformas con total compatibilidad.

El Service Contract es convertido en un WSDL que obtiene la descripción de las

operaciones ofrecidas por el servicio (según lo definido en el Service Contract).

El Data Contract es convertido en un XML Schema que contiene la estructura del

objeto enviado o solicitado por el servicio.

Page 123: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 23

CIBERTEC CARRERAS PROFESIONALES

El Message Contract es convertido en un mensaje SOAP.

D. Policy y Binding

Los contratos de política y enlace (Policy y Binding) especifican información importante

como la seguridad, el protocolo y otra información, de manera que esto se verifica

antes de que empiece con la comunicación.

2.3.1.2 Service Runtime

El servicio Runtime es la capa que especifica y administra los comportamientos del

servicio que ocurren durante la transferencia de información con los clientes.

La tabla muestra los diferentes comportamientos que son gestionados por la capa del

servicio Runtime.

2.3.1.3 Mensajes

Page 124: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

124

CARRERAS PROFESIONALES CIBERTEC

La capa de mensajería define qué formatos y pautas de intercambio de datos pueden

ser utilizados por el servicio de comunicación. Las aplicaciones cliente pueden ser

desarrolladas para acceder a esta capa y manejar los detalles de mensajería y trabajar

directamente con los mensajes y canales.

La siguiente tabla muestra los canales y componentes que forman parte de la capa de

mensajería:

Componentes Características

Canal de Seguridad Implementa la especificación de la seguridad,

estableciendo seguridad en el mensaje

Canal Fiable de

mensajería

Garantiza la entrega del mensaje

Codificadores Permiten elegir entre diferentes codificadores, para

después aplicarlos a mensajes

Canal HTTP Establece que el servicio de entrega de mensajes se

llevara a cabo a través del protocolo HTTP

Canal TCP Establece que el servicio de entrega de mensajes se

llevara a cabo a través del protocolo TCP

Canal de flujo de

transacciones

Rige los patrones de los mensajes guiados por

transacciones

Canalizaciones con

nombre

Permite comunicar procesos

Canal MSMQ Canal utilizado por los servicios que interactúan con el

servicio de colas de mensajes MSMQ

2.3.1.4 Activación y Alojamiento

La capa de activación y alojamiento ofrece diferentes opciones en las que un servicio

puede ser iniciado, así como alojado. Los servicios pueden ser alojados en el contexto

de otra aplicación o pueden ser auto alojados.

Page 125: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 25

CIBERTEC CARRERAS PROFESIONALES

La siguiente tabla muestra las opciones de activación y alojamiento proporcionados

por esta capa:

Opciones Características

Servicio de

Activación de

Windows

Permite a las aplicaciones WCF que se inicien automáticamente

cuando se ejecutan en un equipo que tiene activo el servicio de

activación de Windows

.EXE WCF permite a los servicios que se ejecuten como archivos

ejecutables

Servicio de

Windows

WCF permite a los servicios que se ejecuten como servicios de

Windows

COM+ WCF permite a los servicios que se ejecuten como servicio de

Windows

2.3.2 CARACTERISTICAS DE WCF

Windows Communication Foundation es el siguiente paso de Microsoft en la creación

de aplicaciones orientadas a servicios y aplicaciones distribuidas.

Las aplicaciones distribuidas se vuelven cada día más complejas, y es primordial que

nuestros negocios estén conectados.

Esta globalización informática requiere la interacción y la conectividad entre diferentes

plataformas e incontables dispositivos. Windows Communication Foundation fue

concebido con el objetivo de simplificar el desarrollo de aplicaciones distribuidas.

Una de sus principales características es que cuenta con un modelo de programación

unificado. Es la unificación de numerosas capacidades que antes podíamos encontrar

en distintas tecnologías. Esto nos libra de tener que estar utilizando más de una

tecnología para cumplir satisfactoriamente los requerimientos. De este modo, los

desarrolladores harán una tarea de una única manera.

Page 126: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

126

CARRERAS PROFESIONALES CIBERTEC

Las comunicaciones se enriquecen notablemente, ya que Windows Communication

Foundation da la libertad al desarrollador de utilizar múltiples transportes, distintos

tipos de formatos de mensajes y diversos patrones de mensajes.

La interoperabilidad es el plato fuerte deWindowsCommunication Foundation, ya que

la comunicación es totalmente independiente de la plataforma. Los servicios utilizados

son sobres de SOAP, cuyo contenido es nada menos que XML.Windows

Communication Foundation está basado en la arquitectura deWeb Services y utiliza

los estándares establecidos.

El transporte es otra de sus cualidades fuertes, ya que éste se define con un protocolo

neutral, de transporte neutral y formato neutral. Esto quiere decir que los servicios

pueden utilizar tanto HTTP como TCP u otro mecanismo de transporte. Los

desarrolladores tienen la posibilidad de agregar nuevos proveedores de transporte, y

esto es indiferente al servicio.Windows Communication Foundation separa el «código»

del «transporte», y de esta manera soporta distintos métodos de comunicación, sin

representar esto una carga de trabajo extra para el desarrollador.

Page 127: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 27

CIBERTEC CARRERAS PROFESIONALES

2.3.3 WINDOWS PHONE Y WCF

Debido a la gran orientación de Windows Phone 7 hacia la nube y a la falta de soporte

oficial de bases de datos en el teléfono necesitamos encontrar una forma de

almacenar nuestros datos fuera del dispositivo. Para esto, Windows Communication

Foundation nos ofrece una plataforma segura, robusta y completa que cubrirá todas

nuestras necesidades de comunicación con el exterior.

Dada la extensión y potencia de WCF a veces puede ser un poco complicado el hacer

que todo funcione correctamente, con esto en mente creamos este artículo para

guiaros por los pasos necesarios para llevar a buen término el uso de WCF con

Windows Phone 7.

2.3.3.1 Creación del Servicio

A la hora de crear servicios WCF para ser consumidos desde Windows Phone 7 no

debemos tener ninguna consideración especial en cuenta, bastará con crear un

servicio WCF standard, desde el menú Archivo>Nuevo>Proyecto (File>New>Project)

en Visual Studio 2010 y en la pantalla de nuevo proyecto, seleccionar WCF de la lista

de plantillas y WCF Service Application de los proyectos WCF disponibles.

Selecciona un Servicio de Aplicaciones de WCF

Page 128: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

128

CARRERAS PROFESIONALES CIBERTEC

2.3.3.2 Configuración del Servicio

Creado nuestro servicio WCF podremos desarrollarlo de forma normal, atendiendo a

ciertas restricciones de configuración o características no soportadas actualmente por

Windows Phone 7.

Una característica de los binding HTTP que tenemos disponible en WCF para

Windows Phone 7 es la sección ReaderQuotas. Esta sección de los binding HTTP

indica los límites de tamaño bajo los que se tienen que mantener las peticiones al

servicio para ser aceptadas o el tamaño máximo de un array que intentemos enviar.

Por defecto el tamaño máximo de array está establecido en 16384, con lo que, por

ejemplo, si intentamos enviar un array de bytes que contenga más elementos que

16384 el servicio denegará la petición.

Esta característica está pensada para proteger a nuestro servicio de un posible ataque

DOS (Denial of Service) que, basándose en mensajes complejos, intente colapsar los

endpoints del servicio WCF. Debido a esto, debemos recordar siempre intentar ajustar

los valores de esta sección en la medida de lo posible a los datos que vayamos a

recibir, si ajustamos estos parámetros a un valor Max.Int32 estaremos eliminando esta

defensa natural que tiene nuestro servicio.

Para configurar esta característica podemos usar la Herramienta de Configuración de

Servicio WCF que tenemos disponible en Visual Studio 2010 en el menú

Herramientas.

Page 129: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 29

CIBERTEC CARRERAS PROFESIONALES

Simplemente debemos crear un nuevo binding para nuestro EndPoint y podremos ver

la sección ReaderQuotas con los diferentes parámetros que debemos configurar como

máximos bytes por lectura o longitud máxima de un array. Una vez modificados los

valores debemos aplicar la configuración a nuestro Endpoint:

Y ya solo nos queda guardar el trabajo que hemos realizado y veremos los valores

reflejados en el archivo web.config de nuestro servicio:

<system.serviceModel>

<bindings>

<basicHttpBinding>

<binding name="NewBinding0">

<readerQuotas

maxDepth="128"

maxStringContentLength="1024"

maxArrayLength="131072"

maxBytesPerRead="524288"

maxNameTableCharCount="4">

</readerQuotas>

</binding>

</basicHttpBinding>

</bindings>

<services>

<service name="WcfService.Service1">

<endpoint

address="basichttp"

binding="basicHttpBinding"

bindingConfiguration="NewBinding0"

name="basicHTTP"

contract="WcfService.IService1">

</endpoint>

</service>

</services>

<behaviors>

<serviceBehaviors>

<behavior>

<serviceMetadata httpGetEnabled="true"/>

<serviceDebug includeExceptionDetailInFaults="false"/>

</behavior>

</serviceBehaviors>

</behaviors>

<serviceHostingEnvironment multipleSiteBindingsEnabled="true" />

</system.serviceModel>

Page 130: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

130

CARRERAS PROFESIONALES CIBERTEC

2.3.3.3 Conectando desde Windows Phone

El paso necesario para referenciar a un servicio WCF desde nuestra aplicación

Windows Phone 7 es realmente simple.

Simplemente haremos click con el botón derecho del ratón sobre nuestro proyecto

Windows Phone 7 y seleccionaremos la opción Añadir referencia a servicio.

Si el servicio WCF que deseamos referenciar se encuentra en la misma solución de

nuestra aplicación, nos bastará presionar el botón Discover (Descubrir) para que en la

lista de servicios aparezca el mismo. Si no es así, deberemos especificar la URL

donde se encuentre el servicio WCF y presionar el botón Go (Ir).

Una vez hecho esto, solo tenemos que seleccionar el servicio, indicar el nombre de

Namespace que deseamos asignarle y presionar OK para que Visual Studio 2010 se

encargue de generar un proxy automáticamente para que tengamos acceso a todos

los métodos y clases de nuestro servicio.

Solo tendremos que crear una instancia nueva de la clase que deseemos usar, y

podremos acceder a los métodos del servicio.

Page 131: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 31

CIBERTEC CARRERAS PROFESIONALES

private void Button_Click(object sender, RoutedEventArgs e){

ServiceReference1.Service1Client proxy = new

ServiceReference1.Service1Client();

proxy.GetDataCompleted += new

EventHandler<ServiceReference1.GetDataCompletedEventArgs>(proxy_GetDataComp

leted);

proxy.GetDataAsync(25);

}

void proxy_GetDataCompleted(object sender,

ServiceReference1.GetDataCompletedEventArgs e){

if (e.Error == null){

MessageBox.Show(e.Result.ToString());

}

}

Page 132: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

132

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 5.1

Implementando un Servicio en WCF

Implementa una aplicación de Servicios en WCF que permita realizar la consulta de

clientes. Defina un método que permita listar los clientes.

1. Inicio del Proyecto

Para iniciar un proyecto Aplicación de Servicios WCF:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (WCF de Visual C#,

Seleccione WCF Service Application, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

Page 133: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 33

CIBERTEC CARRERAS PROFESIONALES

2. Definiendo el origen de Datos

Para definir un origen de datos, trabajaremos con LINQ to SQL. Agregue un nuevo

Item al proyecto. Seleccione la plantilla Data, a continuación selecciona LINQ to SQL

Clases y asigne el nombre DataVentas, presione el botón Add

Agregue una conexión desde la ventana Server

Explorer, realizando la conexión a la base de datos

Ventas2011, tal como se muestra.

Arrastre las tablas al Contexto DataVentas.dbml

Item LINQ to SQL Clases

Nombre del Item LINQ to SQL: DataVentas

Page 134: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

134

CARRERAS PROFESIONALES CIBERTEC

3. Definiendo el Servicio del Proyecto

Desde la aplicación del Proyecto agregue un Nuevo Item.

Selecciona la plantilla Web

A continuación seleccione el Item WCF Service, tal como se muestra

Asigne un nombre al Item: ServiceVenta

Presione el botón Add

Agregado el WCF Service, aparecen en el proyecto IServiceVenta y ServiceVenta, tal

como se muestran.

Contrato: definiremos la funcionalidad (métodos accesibles) que tendrá nuestro servicio y que datos (clases, estructuras, etc.) que utilizará para comunicarse.

Servicio que "implemente" el contrato definido.

Seleccione la plantilla Web

Seleccione el Item WCF Service

Asigne un nombre al Service

Page 135: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 35

CIBERTEC CARRERAS PROFESIONALES

4. Definiendo el Contrato

Para indicar que se trata de un contrato usamos el atributo ServiceContract al declarar

la Interface. Para definir qué métodos tendrá el contrato usamos el atributo

OperationContract. Este contrato es el que usarán los clientes para saber que

operaciones tiene un servicio y que datos intervienen en la comunicación. Para indicar

que la clase también debe estar en el contrato, usamos los atributos DataContract y

DataMember para la deficinión de la clase y sus propiedades respectivamente.

Definiendo la clase Cliente: DataContract

En la clase se definirán sus

atributos y sus métodos de

la clase DataMember, tal

como se muestra.

Definiendo la interface

IServiceVenta, el cual

se define los métodos

de la interface, tal

como se muestra.

Definiendo el método: OperationContract

Definiendo la Interface: Contrato

DataContract definición de la clase

DataMember definición del método

Page 136: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

136

CARRERAS PROFESIONALES CIBERTEC

5. Definiendo el Servicio

Ahora lo que debemos hacer es implementar esta Interfaz (contrato), y crear la clase

que dará este servicio, para tal efecto implementamos los métodos Listado() y

ListadoxNombre, tal como se muestra.

Ejecutar el ServicioVenta: Hacer click derecho en el

archivo ServiceVenta, seleccione la opción View in

Browser

Implementando el método Listado el cual retorna los registros de tb_clientes

Implementando el método ListadoxNombre retorna los registros de tb_clientes por las iniciales del nombre

Page 137: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 37

CIBERTEC CARRERAS PROFESIONALES

Al ejecutar el servicio, se crea un servicio, donde la ventana nos da la dirección para

ejecutar el servicio, copiar la dirección.

6. Construyendo la aplicación Windows Phone

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Project.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Dirección para ejecutar el servicio.

Seleccione la opción New Project para crear un nuevo proyecto

Page 138: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

138

CARRERAS PROFESIONALES CIBERTEC

7. Diseño del Page

A continuación diseña el Page para visualizar el listado de Clientes, tal como se

muestra.

Diseño del Control de datos

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

Page 139: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 39

CIBERTEC CARRERAS PROFESIONALES

8. Agregando Referencia de Servicio

Para establecer una referencia al Servicio WCF creado, agregue un Service

References en el proyecto appPhone, tal como se muestra

Escriba la dirección del servicio en Address, presione GO, a continuación se

visualizarán los servicios.

Luego, defina un nombre al Namespace: ReferenciaVenta, y presione el botón OK.

9. Programación

A continuación programa las operaciones para sincronizar el servicio desde el

aplicativo Windows Phone.

Page 140: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

140

CARRERAS PROFESIONALES CIBERTEC

Presione la tecla F5, para ejecutar el proceso, el cual se visualiza los datos de los

clientes.

Referencia del servicio: ReferenciaVenta

Instancia del Servicio Venta

Definir el evento para el método Listado y ejecutar el método

Definir el método del Evento llamado listado

Page 141: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 41

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 5.2

Implementando un Servicio en WCF

Implementa una aplicación de Servicios en WCF que permita realizar la consulta de

clientes realizando una búsqueda por su nombre. Defina un método que permita listar

los clientes buscando por la inicial de su nombre.

1. Diseño del Page

2. Programación

Programa el proceso de la consulta, tal como se muestra

Presione la tecla F5, ingrese la inicial del nombre del cliente y ejecute.

Referencia del servicio

Instancia del servicio

Definir el evento del servicio

Definir el método del evento

Ejecutar el método con su parámetro

Page 142: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

142

CARRERAS PROFESIONALES CIBERTEC

Resumen

Windows Communication Foundation o WCF (también conocido como Indigo),

es la nueva plataforma de mensajería que forma parte de la API de la Plataforma

.NET 3.0 (antes conocida como WinFX, y que no son más que extensiones para la

version 2.0).

En el corazón de Windows Communication Foundation está una arquitectura de

capas que soporta una gran variedad de estilos para el desarrollo de aplicaciones

distribuidas.

Los contratos WCF contienen información relativa a lo que un servicio ofrece al

cliente y el tipo de información que va a poner a disposición. Existen tres tipo de

contratos: de datos, de mensaje y de servicio:

Datos: estipula de manera explícita los datos que se intercambiarán con el

servicio. El servicio y el cliente no necesitan llegar a un acuerdo sobre los tipos,

pero si necesitan llegar a un acuerdo sobre los datos del contrato.

Mensajes: Un contrato de datos estipula de manera explícita los datos que se

intercambiarán con el servicio. El servicio y el cliente no necesitan llegar a un

acuerdo sobre los tipos, pero si necesitan llegar a un acuerdo sobre los datos del

contrato.

Servicio: Los contratos son definidos por el CLR por medio de clases o interfaces.

Éstas, al ser utilizadas en los servicios, son convertidas a un formato común para

que el servicio pueda ser usado por distintas plataformas con total compatibilidad.

o El Service Contract es convertido en un WSDL que obtiene la descripción

de las operaciones ofrecidas por el servicio (según lo definido en el Service

Contract).

o El Data Contract es convertido en un XML Schema que contiene la

estructura del objeto enviado o solicitado por el servicio.

o El Message Contract es convertido en un mensaje SOAP

Windows Communication Foundation es el siguiente paso de Microsoft en la

creación de aplicaciones orientadas a servicios y aplicaciones distribuidas. Las

aplicaciones distribuidas se vuelven cada día más complejas, y es primordial que

nuestros negocios estén conectados.

Una de sus principales características es que cuenta con un modelo de

programación unificado. Es la unificación de numerosas capacidades que antes

podíamos encontrar en distintas tecnologías. Esto nos libra de tener que estar

utilizando más de una tecnología para cumplir satisfactoriamente los

Page 143: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 43

CIBERTEC CARRERAS PROFESIONALES

requerimientos. De este modo, los desarrolladores harán una tarea de una única

manera.

Si desea saber más acerca de estos temas, puede consultar las siguientes

páginas.

Tutorial de WCF

http://geeks.ms/blogs/jnunez/archive/2007/08/10/tutorial-wcf-1-de-5.aspx

Implementación de Windows Phone y WCF

http://eliasmarkelis.wordpress.com/2011/02/27/windows-phone-7-with-wcf/

http://www.cesnavarra.net/cesdigitalblog/Lists/Entradas%20de%20blog/Post.asp

x?ID=98

Page 144: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

144

CARRERAS PROFESIONALES CIBERTEC

Page 145: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 45

CIBERTEC CARRERAS PROFESIONALES

DESARROLLANDO UNA APLICACIÓN XNA EN

WINDOWS PHONE

LOGRO DE LA UNIDAD DE APRENDIZAJE

Al término de la unidad, el alumno aprende a construir juegos para Windows Phone donde cargara imágenes y dibujará texto, así como utilizar transformaciones e iluminación.

TEMARIO

3.1 Tema 6 : XNA 3.1.1. : XNA, características y requerimientos 3.1.2. : Plantilla del Proyecto, objetos del proyecto 3.1.3. : Objetos Sprites 3.1.4. : Laboratorio

3.2 Tema 7 : Animación en XNA 3.2.1. : Animación: movimiento de imágenes, rotación, tintes,

acelerómetro

3.2.2. : Animación por dispositivos de entrada, Touch 3.2.3. : Manejo de colisiones 3.2.4. : Laboratorio

3.3 Tema 8 : Creando un Game FrameWork 3.3.1. : Diseño de un Game FrameWork 3.3.2. : Clases de un Game FrameWork 3.3.3. : Laboratorio

ACTIVIDADES PROPUESTAS

Los alumnos aprenderán a construir una aplicación de juegos por Windows Phone utilizando el framework XNA

Los alumnos aprenderán a manejar los códigos básicos para realizar un dibujo en una aplicación por Windows Phone.

UNIDAD DE

APRENDIZAJE

3

Page 146: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

146

CARRERAS PROFESIONALES CIBERTEC

Page 147: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 47

CIBERTEC CARRERAS PROFESIONALES

3.1 XNA

XNA se refiere a 2 cosas en especial: El Framework o marco

de desarrollo y el XNA Game Studio. Hablaremos un poco de

cada uno de ellos a continuación.

3.1.1 XNA, caracteríticas y requerimintos

3.1.1.1 XNA FrameWork

El XNA Framework es un amplio conjunto de bibliotecas de clases específicas para el

desarrollo de juegos, y promueven la reutilización de código al máximo. El Framework

se ejecuta en una versión de Common Language Runtime que se ha optimizado para

que los juegos. Este Framework está presente en Windows, XBOX360 y Windows

Phone 7, por lo tanto programando con el podemos crear juegos para las 3

plataformas.

3.1.1.2 XNA Game Studio

El XNA Game Studio es un entorno de programación que le permite usar Visual Studio

para crear juegos para Windows Phone, la consola Xbox 360 y equipos basados en

Windows. XNA Game Studio incluye XNA Framework.

Como vemos, por un lado tenemos lo que son las clases ya prefabricadas para crear

más rápido nuestros juegos, y por otro lado tenemos la herramienta de desarrollo para

usar dichas librerías y aprovecharlas al máximo.

3.1.1.3 Requerimientos del desarrollo XNA

Para poder empezar a crear videojuegos con el Framework de Microsoft (XNA),

necesitamos primero saber que necesitamos tener en cuestión de requerimientos. En

el siguiente post veremos los requerimientos necesarios para instalar y usar el XNA

GameStudio 4.0:

A. Requisitos de Hardware

3GB de espacio libre

2 GB RAM

Page 148: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

148

CARRERAS PROFESIONALES CIBERTEC

Para ejecutar juegos de XNA Framework en un equipo con un sistema operativo

Windows, se necesita una tarjeta gráfica que admita como mínimo Shader Model 1.1 y

DirectX 9.0c. Se recomienda usar una tarjeta gráfica que admita Shader Model 2.0,

versión necesaria para algunas muestras y kits de iniciación.

Para ejecutar y depurar juegos de XNA Framework para Windows Phone con el

emulador de Windows Phone, se necesita una tarjeta gráfica que admita como mínimo

DirectX 10, con un controlador de WDDM 1.1 auxiliar. Enace para descargar las

herramientas de desarrollo XNA.

Para instalar en XP deben instalar solo el XNA Game Studio, si usa Vista con SP2 o

Windows 7, puedes instalar las herramientas de Windows Phone 7 que te permitirán

también poder programar para el celular.

B. Sistema Operativo

En Windows XP no hay soporte para desarrollo de videojuegos en Windows Phone 7.

Windows Vista necesita mínimo SP2

Windows 7 tiene los requerimientos para trabajar con XNA.

3.1.2 PLANTILLA DEL PROYECTO

Una vez visto qué es XNA y los requerimientos necesitamos para instalar el XNA

Game Studio, empezaremos por crear un nuevo proyecto y explicar un poco de lo que

trata esto de la plantilla básica de un juego en XNA.

El primer paso es abrir Microsoft Visual Studio 2010. Una vez abierto, hacemos como

siempre para crear nuevos proyectos en Visual Studio, si nunca lo has hecho tienes

que ir a File>New>Proyect.

Page 149: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 49

CIBERTEC CARRERAS PROFESIONALES

Selecciona la categoría de proyecto: XNA Game Studio 4.0 bajo Visual C#.

Luego seleccionamos el tipo de proyecto: Windows Phone Game (4.0).

Asigne un nombre y hacemos click en OK.

La solución trae 2 proyectos como podemos ver. El primero se llama igual que el

nombre de proyecto y el segundo tienen ese nombre y junto con la palabra “Content”,

nos indica que ahí es donde guardaremos el contenido que son las texturas, sonidos,

etc.

Page 150: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

150

CARRERAS PROFESIONALES CIBERTEC

Junto con el proyecto principal “11DiasConXNA” miramos que trae 2 clases que son

Game1.cs y Program.cs. El archivo Program.cs es la clase de entrada. Cuando el

juego corra, esto es lo que correrá, y esta clase hace una instancia de la otra clase

“Game1.cs” para empezar el juego. Aquí tenemos el método Main.

3.1.2.1 Archivo Game1

El archivo Game1.cs es la estructura general de un videojuego. Esta clase tiene varios

métodos:

A. Constructor Game1()

Creamos la instancia del manejador de gráficos que se encargará de hacer todo el

trabajo pesado de controlar la tarjeta de video, y además de eso, indicamos que

nuestro contenido será obtenido de la carpeta Content. Si seleccionamos el proyecto

llamado “appProyectoContent” y miramos las propiedades veremos que su

RootDirectory es “Content”.

B. Initialize()

Este método inicializa, como su nombre bien dice, nos permite inicializar todo lo que

necesitemos antes de que empiece a correr el juego. Si necesitamos hacer algo antes

de que el juego empiece a correr, este es el lugar idóneo.

C. LoadContent()

Aquí podemos cargar el contenido. En sesiones más, usaremos el ContentManager

D. Update(GameTime gameTime)

Este método se ejecutara cada cierto tiempo (por defecto 60 veces cada segundo pero

es cambiable, o para los que lo entiendan mejor 60FPS).

Aquí pondremos la lógica del juego, los cambios de posiciones, las validaciones, todo

lo que tenga que ver con actualizar variables del juego y verificar variables va aquí.

E. Draw(GameTime gameTime)

Es el método donde pondremos y discriminaremos qué es lo que se dibuja y que no.

Todos los métodos para dibujar estarán aquí. A diferencia del método anterior, XNA

ejecutará este método cuantas veces pueda sin tener un tiempo fijo como el anterior

de 60FPS.

Page 151: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 51

CIBERTEC CARRERAS PROFESIONALES

F. UnloadContent()

Este método que nos permitirá quitar todos los recursos ocupados y

liberarlos de la memoria de la PC

A continuación presentamos un esquema para visualizar mejor el

recorrido del código en la ejecución de un juego.

Recuerden, el ciclo queda infinito entre actualizar y dibujar, hasta

que el juego termine y por ende el ciclo se para, y se llama al

método UnloadContent() para liberar recursos del sistema.

3.1.2.2 Variable Time Step

Usando una variable Time-Step es una alternancia para llamar a los métodos Update y

Draw, independientemente de cuánto tiempo tardar en ejecutarse. La propiedad

ElapsedGameTime del objeto GameTime puede ser consultada para determinar el

intervalo de tiempo entre las llamadas al

método Update. Si el juego está tomando demasiado tiempo para completar el método

Update, puede provocar un cortocircuito en la lógica para mejorar la respuesta del

juego. Para configurar el bucle del juego utilice un intervalo de tiempo variable, usted

simplemente necesita para establecer la propiedad IsFixedTimeStep de la clase de

juego en falso. Dado que el método se llama a Update tan pronto como el método

Draw ha terminado, no hay necesidad de especificar un TargetElapsedTime.

Page 152: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

152

CARRERAS PROFESIONALES CIBERTEC

3.1.2.3 Manejo del Proyecto Content

Ahora que tenemos nuestro nuevo proyecto creado, veremos en nuestro explorador a

la derecha que tenemos 2 proyectos en nuestra solución. Uno se llama

WindowsGame1 y otro que se llama WindowsGame1Content.

Para agregar una imagen o Sprite sobre el proyecto lWindowsGame1Content le

daremos click derecho: Add->Existing Item

Una vez cargada la imagen al proyecto, terminamos este paso. Para ver sus

propiedades den click sobre ella y vean las propiedades, la propiedad Asset Name

representa el nombre del objeto.

3.1.2.4 Cargar Content en el método apropiado

En el método LoadContent cargaremos nuestra textura para luego poder usarla. Para

cargar la textura, antes crearemos una variable de tipo Texture2D en la parte de

declaración de variables de la clase.

protected override void LoadContent(){ //Create a new SpriteBatch, which can be used to draw textures

spriteBatch = new SpriteBatch(GraphicsDevice);

texturaLogo = Content.Load<Texture2D>("logo");

}

Page 153: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 53

CIBERTEC CARRERAS PROFESIONALES

Lo que le decimos a la variable Content de tipo ContentManager es que cargue la

textura con Asset Name “logo” a la variable de tipo Texture2D que nosotros

llamamos texturaLogo. Si pueden apreciar para cargar un objeto de tipo Texture2D le

tenemos que decir al método LOAD el tipo de esta manera: <Texture2D>.

3.1.3 SPRITES

El término Sprite se suele utilizar para referirse a una imagen que representa una

pequeña parte de una escena.

Por ejemplo, la mayoría de los juegos se componen de cientos, o miles, de los

Sprites, para ser colocados en la pantalla con el fin de construir un escenario más

realista. Spritesheets son un concepto ampliamente utilizado por los desarrolladores

web para mejorar el rendimiento. El Spritesheet es una sola imagen compuesta por un

gran número de imágenes más pequeñas que se utilizan en una página web. La

mayoría de los navegadores descargar el Spritesheet una vez y volver a utilizarlo

para mostrar todas las imágenes más pequeñas, reduciendo significativamente el

tiempo de descarga y el número de transferencias necesarias para el sitio.

En un juego de XNA, un Sprite es esencialmente cualquier imagen que representa la

escena a dibujar. Por ejemplo, el método LoadContent carga un Sprite (una imagen

ball) que se puede dibujar en pantalla como parte de un SpriteBatch:

La imagen de la bola se ubicará en la posición (100,100) con ancho y altura de 100.

Tenga en cuenta que el sistema de coordenadas se basa en un origen en la esquina

superior izquierda de la pantalla, con el polo positivo eje x va a través de la pantalla a

la derecha y va al positivo del eje abajo de la pantalla.

protected override void Draw(GameTime gameTime) {

GraphicsDevice.Clear(Color.CornflowerBlue);

this.spriteBatch.Begin();

this.spriteBatch.Draw(this.balanceBall,

new Rectangle(100, 100, 100, 100), Color.White);

this.spriteBatch.End();

base.Draw(gameTime);

}

Page 154: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

154

CARRERAS PROFESIONALES CIBERTEC

3.1.3.1 Dibujando un Texto en la pantalla

Para dibujar un texto en pantalla necesitamos definir un SpriteFont o Fuente (se

refiere a la tipografía, como Arial, Tahoma, Verdana).

El SpriteFont es la fuente que usaremos para renderizar el texto que vayamos a

escribir. El mecanismo que usa XNA es que usando el SpriteFont, en tiempo de

compilación, crea un SpriteSheet (una imagen que contiene sub-imágenes, en este

caso las letras, números y símbolos de nuestra fuente) para luego poder dibujar,

dependiendo de la letra, el Sprite que corresponda al caracter que vayamos a dibujar.

A. Creando un SpriteFont

Crear un SpriteFont es sencillo pues ya hay una plantilla para ello en VisualStudio,

simplemente damos click derecho al proyecto de Contenido>Add>New Item.

Seleccionamos SpriteFont y le damos un nombre.

Se nos abrirá el archivo XML donde podemos configurar el SpriteFont. El código ya

trae descripciones que explican que significan cada etiqueta para poder modificar el

SpriteFont a nuestra conveniencia. Básicamente podemos cambiar la fuente que se

importará, el tamaño de la letra, el espacio entre letras y el estilo de la letra.

Page 155: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 55

CIBERTEC CARRERAS PROFESIONALES

B. Escribiendo el texto en pantalla

Creado nuestro SpriteFont, podemos escribir en pantalla, para esto simplemente

creamos una variable tipo SpriteFont en nuestra clase, cargamos el spriteFont que

creamos en ella en el método de LoadContent()

Luego en el método Draw() dibujaremos el texto sobre la imagen.

Explicando un poco, creamos un Vector2, que es simplemente una variable con

coordenadas X e Y para poner la posición del texto en (20,20) y luego simplemente

llamamos la función de dibujar texto y le ponemos el SpriteFont que creamos llamado

Segoe, el texto y el color que queremos de la letra .

3.1.3.2 Sonido y Música

XNA nos ayuda muchísimo para reproducir sonidos, para ello usaremos 2 técnicas, la

primera para sonidos y la segunda para música.

A. Crear el archivo de Sonido o Canción

Dependiendo del tipo de archivo necesitaremos usar un tipo de variable diferente, esto

es así. Si queremos cargar un archivo de sonido como el wav usaremos el tipo de

variable Microsoft.Xna.Framework.Audio.SoundEffect y si queremos usar una

canción como archivos de tipo MP3 usaremos la clase

protected override void LoadContent(){ //Create a new SpriteBatch, which can be used to draw textures

spriteBatch = new SpriteBatch(GraphicsDevice);

texturaLogo = Content.Load<Texture2D>("logo");

//el nombre del Asset, en este caso “Segoe”

segoe = Content.Load<SpriteFont>("Segoe");

}

protected override void Draw(GameTime gameTime) {

GraphicsDevice.Clear(Color.CornflowerBlue);

Rectangle cuadradoDibujo = new Rectangle(0,0,800,600); Vector2 pos = new Vector2(20,20);

spriteBatch.Begin();

spriteBatch.Draw(texturaLogo, cuadradoDibujo, Color.White);

spriteBatch.DrawString(segoe, "Hola!", pos, Color.Red);

spriteBatch.End();

base.Draw(gameTime);

}

Page 156: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

156

CARRERAS PROFESIONALES CIBERTEC

Microsoft.Xna.Framework.Media.Song. Esto sucede puesto que XNA trata de

diferente forma estos archivos.

B. Cargar el archivo al Content

Para cargar el contenido en la variable debemos agregar el contenido a nuestro

proyecto. Simplemente le damos click derecho a nuestro proyecto de Contenido y

luego le damos Add –> Existing Item –> Seleccionamos el archivo wav o mp3

según querramos.

Una vez ahí, le pondremos un nombre al Asset seleccionando el archivo que

agregamos ahorita y en la ventana de propiedades donde dice AssetName le

pondremos: musicaFondo. Para cargar ese archivo en la variable usaremos en el

método LoadContent() esto dependiendo del tipo de variable que tengamos:

Para cargar ese archivo en la variable usaremos en el método LoadContent() esto

dependiendo del tipo de variable que tengamos:

cancion = Content.Load<Song>("musicaFondo");

musicaFondo = Content.Load<Song>("musicaFondo");

Song cancion; //Si cargamos un MP3

SoundEffect musicaFondo; //Si cargamos un wav

Song cancion; //Si cargamos un MP3

SoundEffect musicaFondo; //Si cargamos un wav

Page 157: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 57

CIBERTEC CARRERAS PROFESIONALES

Para reproducir solamente necesitamos llamar un método. Si es un SoundEffect

usamos el método Play() que viene con la clase. Si usamos Song deberemos usar un

componente de XNA llamado MediaPlayer y usando el método Play(), pasaremos de

parámetro nuestra variable tipo Song. Estos se definen en el LoadContent()

MediaPlayer.Play(cancion); //si usamos un

MP3musicaFondo.Play(); //Si usamos un WAV

Page 158: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

158

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 6.1

Implementando una aplicación en XNA

Implementa una aplicación en XNA que visualice “Hola Mundo“ en el centro de la

pantalla.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Proyect.

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Seleccione la opción New Project para crear un nuevo proyecto

Page 159: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 59

CIBERTEC CARRERAS PROFESIONALES

Agregue un SpriteFont al proyecto Content, para definir el Font del proyecto

Seleccione la plantilla SpriteFont, y asigne el nombre Segoe14

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Proyecto Content , agregamos el SpriteFont llamado “Segoe14”

Page 160: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

160

CARRERAS PROFESIONALES CIBERTEC

Declaramos los objetos que se utilizaran en la aplicación:

texto: el cual se visualiza en la pantalla

font14: el Font del texto que se visualiza

posiciontexto: indica la posición del texto en la pantalla

.

Definición del SpriteFont Segoe14

Page 161: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 61

CIBERTEC CARRERAS PROFESIONALES

Cuando el juego es ejecutado en el dispositivo, la clase Game1 es instanciada y el

constructor del Game1 es ejecutado. Este código ya está definido

Después que Game1 es instanciado, y se ejecuta Game1, la clase base de Game1

inicializa el proceso de arranque del juego. XNA Game Studio genera un método

“skeleton” el cual es añadido.

El método Initialize no es el método para cargar el “Font” y otros contenidos. Estas

operaciones se implementan en el método LoadContent.

En este proceso, cargamos a font14, el Font definido en Segoe14

A continuación defino las dimensiones de texto como Vector2.

Defino la ubicación de texto, como Vector2, el cual se ubicara en el centro de la

pantalla.

Definir la orientación de la pantalla en el constructor

Inicializa la clase Game1

Page 162: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

162

CARRERAS PROFESIONALES CIBERTEC

Programa el evento Draw para dibujar el texto; el objeto SpriteBatch realiza el dibujo

del texto (DrawString) entre las llamadas al inicio y fin; puede haber varias llamadas a

DrawString para dibujar texto y de dibujo para dibujar mapas de bits

Ejecute el proceso, presione F5

Page 163: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 63

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 6.2

Implementando un Reloj en una aplicación XNA

Implementa una aplicación en XNA que visualice un RELOJ.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Agregue al proyecto Content un spritefont llamado Segoe14, tal como se muestra.

Seleccione la plantilla Windows Phone Game en Visual C#

Asigne nombre al proyecto

Agrega un sprintfont al proyecto Content

Page 164: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

164

CARRERAS PROFESIONALES CIBERTEC

Declarando los objetos

Al iniciar el proceso, primero definimos los objetos del Game, como vamos a utilizar la

clase StringBuilder, referencia el nameSpace System.Text;

Al cargar el Content definimos a font14 con el archivo spritefont Segoe14; además

asignaremos a dimensión la dimensión del dispositivo.

Programa el método Update el cual evalúa las horas durante un intervalo de tiempo, si

son diferentes, la nueva hora se agrega al texto y se configura su dimensión.

Referencia la librería System.Text

Page 165: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 65

CIBERTEC CARRERAS PROFESIONALES

Programa el evento Draw para dibujar el texto; el objeto SpriteBatch realiza el dibujo

del texto (DrawString) entre las llamadas al inicio y fin; puede haber varias llamadas a

DrawString para dibujar texto y de dibujo para dibujar mapas de bits.

Ejecute el proceso, presione F5

Page 166: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

166

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 6.3

Implementando una aplicación XNA para dibujar una imagen

Implementa una aplicación en XNA que visualice una imagen en la pantalla.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto.

Agregue una imagen al Proyecto Content:

Desde el proyecto Content, agregue un Item Existente, tal como se muestra.

Selecciona un archivo bmp.

Seleccione la plantilla Windows Phone Game en Visual C#

Asigne nombre al proyecto

Page 167: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 67

CIBERTEC CARRERAS PROFESIONALES

Seleccionada la imagen, esta se visualiza en el proyecto Content, tal como se

muestra.

Programe en la clase Game1.

Defina al obejto logo de tipo Texture2D.

Objeto logo que almacenara la imagen

Page 168: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

168

CARRERAS PROFESIONALES CIBERTEC

Cargar la imagen en el metod LoadContent(), tal como se muestra

En el metod Draw dibujamos la imagen colocandole un rectangulo.

Presiona la tecla F5 para ejecutar, donde se visualiza la imagen.

Page 169: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 69

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 9.4

Implementando una aplicación XNA para manejo de un arreglo de imágenes.

Implementa una aplicación en XNA que visualice una imagen en la pantalla y por cada

intervalo de tiempo la imagen deberá cambiar.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone:

Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Arrastre las imágenes en el proyecto Content, tal como se

muestra. Recuerde que las imágenes deben almacenarse en

Content.

Seleccione la plantilla Windows Phone Game en Visual C#

Asigne nombre al proyecto

Page 170: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

170

CARRERAS PROFESIONALES CIBERTEC

Inicializando las variables

Declare un array de logo el cual almacenará imágenes (Texture2D) así como una

variable numérica para el manejo del índice del array.

En el constructor del Game1, defina la orientación de la pantalla, así como asigne un

intervalo de tiempo para el cambio de imágenes

método LoadContent() cargar las imágenes en el array Logo, tal como se muestra

En el

Page 171: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 71

CIBERTEC CARRERAS PROFESIONALES

En el método Update() incremento el valor de “i”, y evalúo su valor.

En el método Draw(), defina un rectángulo llamado “marco” el cual se colocara el logo.

Presione F5 para ejecutar el Juego.

Page 172: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

172

CARRERAS PROFESIONALES CIBERTEC

Page 173: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 73

CIBERTEC CARRERAS PROFESIONALES

Resumen

XNA se refiere a 2 cosas en especial: El Framework o marco de desarrollo y el

XNA Game Studio.

XNA Framework es un amplio conjunto de bibliotecas de clases específicas

para el desarrollo de juegos, y promueven la reutilización de código al máximo.

El Framework se ejecuta en una versión de Common Language Runtime que

se ha optimizado para que los juegos.

El XNA Game Studio es un entorno de programación que le permite usar Visual

Studio para crear juegos para Windows Phone, la consola Xbox 360 y equipos

basados en Windows. XNA Game Studio incluye XNA Framework.

El archivo Game1.cs es la estructura general de un videojuego. Esta clase tiene

varios métodos:

Constructor Game1(): se encarga de hacer todo el trabajo pesado de

controlar la tarjeta de video, y además de eso, indicamos que nuestro

contenido será obtenido de la carpeta Content

Initialize():nos permite inicializar todo lo que necesitemos antes de que

empiece a correr el juego.

LoadContent(): cargamos el contenido

Update(GameTime gameTime): Este método se ejecutara cada cierto

tiempo (por defecto 60 veces cada segundo pero es cambiable, o para los

que lo entiendan mejor 60FPS).

Draw(GameTime gameTime): Es el método donde pondremos y

discriminaremos qué es lo que se dibuja y que no. Todos los métodos para

dibujar estarán aquí. A diferencia del método anterior, XNA ejecutará este

método cuantas veces pueda sin tener un tiempo fijo como el anterior de

60FPS.

UnloadContent(): Este método que nos permitirá quitar todos los recursos

ocupados y liberarlos de la memoria de la PC

Para dibujar un texto en pantalla necesitamos definir un SpriteFont o Fuente( se

refiere a la tipografía, como Arial, Tahoma, Verdana). El SpriteFont funciona de esa

manera, es la fuente que usaremos para renderizar el texto que vayamos a

escribir.

XNA nos ayuda a reproducir sonidos, para ello usaremos 2 técnicas, la primera

para sonidos y la segunda para música. Dependiendo del tipo de archivo

Page 174: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

174

CARRERAS PROFESIONALES CIBERTEC

necesitaremos usar un tipo de variable diferente, esto es así. Si queremos cargar

un archivo de sonido como el wav usaremos el tipo de variable

Microsoft.Xna.Framework.Audio.SoundEffect y si queremos usar una canción

como archivos MP3 usaremos la clase Microsoft.Xna.Framework.Media.Song.

Si desea saber más acerca de estos temas, puede consultar a las siguientes

páginas:

Introducción a XNA y Windows Phone

http://lex0712.xnalatam.net/2011/03/02/serie-de-tutoriales-xna/

XNA y Windows Phone

http://www.cesnavarra.net/cesdigitalblog/Lists/Entradas%20de%20blog/Post.as

px?ID=98

Desarrollo de Juegos en XNA

http://foro.elhacker.net/net/desarrollo_de_juegos_en_windows_phone_7_usand

o_xna-t300221.0.html#ixzz1S0Pwq3Xg

Page 175: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 75

CIBERTEC CARRERAS PROFESIONALES

3.2 ANIMACIONES EN XNA

Implementar un dibujo diferentes tipos de imágenes y la profundidad de la capa forma

parte del diseño de un juego, pero en realidad no lo es todo lo que emocionante.

Ahora, vamos a animar las imágenes para que estas se muevan, rebotan, mover

utilizando el teclado o tocando la pantalla. Para mover los objetos, que va a tener que

cambiar las posiciones en la que se dibujan. En un momento inicial, las imágenes son

añadidas en posiciones constantes, nuestro objeto es que las imágenes se muevan a

lo largo de la pantalla.

3.2.1 Animación: movimiento de imágenes, rotación, tintes, acelerómetro

3.2.1.1 Movimiento de Imágenes

Mover el Sprite alrededor de la pantalla sólo requiere la posición de la pelota que se

actualizará de manera que la próxima vez que se extrae será en una ubicación

diferente. En lugar de codificar la posición de la Sprite, la ubicación será determinada

por una variable de estado, posición. Durante el Método de Update de este valor se

incrementará de acuerdo con la dirección vector.

Las imágenes estáticas no son muy interesantes, así que vamos a hacer el

movimiento gráfico, para ello especificamos su posición por el que pasa una estructura

Vector2 inicia con los 100 valores y 100. Estos dos valores son las posiciones x e y en

el que será el gráfico dibujado, y representar a sus la esquina superior izquierda. Esta

posición se conoce como un sistema de coordenadas.

Cuando las coordenadas están escritas, están encerrados entre paréntesis dentro del

cual los dos. Los valores se colocan separados por una coma. El primer valor es la

coordenada x, y el segundo es la ordenada de coordenadas.

El sistema de coordenadas utilizado por parte de XNA sprites (0, 0) en la esquina

superior izquierda de la pantalla. Todas las coordenadas son sprites mide en píxeles.

Para hacer el movimiento de sprites, sólo tenemos que recordar su coordenada de un

sorteo para la siguiente y modificar sus valores de manera que la posición del sprite

cambios. Podemos hacer esto fácilmente.

Page 176: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

176

CARRERAS PROFESIONALES CIBERTEC

Lo siguiente es inicializar una posición inicial para el gráfico. El valor por defecto el

objeto Vector2 no inicializado tiene una coordenada (0, 0), correspondiente a la

esquina superior izquierda de la pantalla. Para ello le asignaremos las coordenadas

(100, 100) como nuestra posición inicial. Puede ser útil para poder restablecer la

posición más tarde, sin embargo, por lo que vamos a crear un nuevo procedimiento

llamado RESETGAME y configurar el sistema de aquí.

Codifique el método Draw para modificar y utilizar la nueva variable posición. Esto se

logra mediante la eliminación de la variable posición Vector2, y en lugar de utilizar la

variable _Position.

Por último, tenemos que cambiar la posición almacenada en la variable _Position para

que el gráfico se mueva realmente. Aunque sería fácil de hacer esto en el código de

dibujo, este no sería el lugar apropiado para realizar este cambio, la función de dibujo

debe ser totalmente centrado en la operación de dibujo, y no solo en la actualización

de las variables de juego. En su lugar, utilice el procedimiento de Update para realizar

los cambios de variables.

//Declaramos un Vector2 de posicion

private Vector2 _Position;

//Declaramos un Vector2 de posición

private override void Initialize(){

base.Initialize();

// colocar la posicion inicial

_Position = new Vector2(100, 100);

}

//Dibujamos el sprite

spriteBatch.Draw(_Texture, _Position, Color.White);

Page 177: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 77

CIBERTEC CARRERAS PROFESIONALES

3.2.1.2 Rotación

Un Sprite también tienen la capacidad rotar fácilmente a cualquier ángulo que desee.

El ángulo se especifica mediante el uso de cualquiera de las llamadas al método

Draw, pasando por el ángulo para el parámetro adecuado. El ángulo se mide en

radianes las agujas del reloj, lo que significa que un ángulo de 0 es la posición

correcta, PI / 2 se gira un cuarto de la vuelta a la derecha, el PI es al revés, y 3 PI / 2

se gira tres cuartas partes de los camino. Parece que trabajar en radianes es muy

poco natural, sería conveniente trabajar en grados. XNA está aquí para ayudarle con

este, ya que ofrece una clase muy útil llamado MathHelper, que está lleno de

funciones estáticas para ayudar con los gráficos relacionados con las funciones

matemáticas. Una de esas funciones es ToRadians, que convierte el ángulo

suministrado grados en radianes. El uso de este parámetro con la rotación de la

función de dibujar hace proporcionando el ángulo mucho más fácil.

3.2.1.3 Tintes

A lo largo de las llamadas al método Draw, podemos pasar como parámetro a Color,

para pasar diferentes colores en lugar del color blanco para pintar el grafico que está

siendo dibujado. Una aplicación muy útil de esta función es permitir que un solo gráfico

se dibuje en diferentes colores, sin tener que añadir todos los gráficos de diferentes

colores por separado en el proyecto de contenido. Si la imagen de origen se presenta

//Dibujamos el sprite

protected override void Update(GameTime gameTime){

//Permite al juego salir

if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==

ButtonState.Pressed)

this.Exit();

//Actualiza el estado del juego

_Position.Y += 5;

if (_Position.Y >= Window.ClientBounds.Bottom)

_Position.Y = 0;

base.Update(gameTime);

}

spriteBatch.Draw(_smileyTexture, new Vector2(100, 100), null,

Color.White,MathHelper.ToRadians(45),

new Vector2(_Texture.Width / 2, _Texture.Height / 2),

1.0f, SpriteEffects.None, 0.0f);

Page 178: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

178

CARRERAS PROFESIONALES CIBERTEC

en escala de grises, el color puede ser utilizado para mostrarla en cualquier color que

desee.

En XNA hay dos formas que podemos especificar un color a utilizar:

1. Usando uno de los nombres de los colores desde Microsoft.XNA.FrameWork.Color

2. Especificando el nivel individual del color rojo, verde y azul que formara el color

3. Para crear un color desde el rojo, verde y azul, crear una estructura de color nuevo

y pasar los niveles de intensidad a su constructor.

En realidad, hay dos maneras en que los niveles de intensidad se puede especificar:

ya sea como valores enteros 0 a 255 como se describe, o como flotar valores de 0 a 1.

Exactamente cuál de estos enfoques que usted prefiere es de usted, sino que son

funcionalmente equivalentes.

3.2.1.4 Accelerometer: Acelerómetro

Las aplicaciones diseñadas para Windows Phone puede aceptar la entrada del usuario

de diferentes maneras. Las aplicaciones tradicionales de escritorio pueden aceptar la

entrada desde el teclado, el mouse y, más recientemente, una pantalla táctil. En un

dispositivo móvil, el usuario ya no es escritorio, y por lo tanto hay otros dispositivos de

entrada que se pueden utilizar para interactuar con la interfaz de aplicación que el

usuario (UI).

El acelerómetro es un sensor de entrada, ó detecta la aceleración del dispositivo que

el usuario se mueve o rota.

El acelerómetro del teléfono de Windows informa en tres dimensiones (3D) de

vectores, en forma de x, y, z y los valores. Estos valores indican la dirección y la

magnitud de la fuerza que se aplican actualmente en el dispositivo.

Color myColor1 = new Color(255, 128, 0);

Color myColor2 = new Color(1.0f, 0.5f, 0.0f);

Page 179: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 79

CIBERTEC CARRERAS PROFESIONALES

Si el dispositivo Windows Phone está en posición vertical u horizontal sobre una

superficie como un escritorio, siente una fuerza que se traduce en una aceleración de

1 g (1 g es la aceleración que resulta de una fuerza mecánica que se aplica a un

objeto fijo en la superficie debido a los efectos de la gravedad de la Tierra,

aproximadamente igual a 9.8ms2) empujando hacia arriba sobre el mismo. Esta es la

fuerza mecánica necesaria para contrarrestar los efectos de la gravedad. El

acelerómetro del teléfono de Windows se informe como un vector de (0, n 1, 0).

Desde que el acelerómetro es especificado en la versión de Windows Phone, la lógica

para crear y trabajar con el acelerómetro tiene que estar supeditada a la

WINDOWS_PHONE símbolo de compilación:

La dirección que la pelota viaja se incrementa en los valores del acelerómetro

pertinentes, cambiando la velocidad que la pelota está viajando. Ahora, los usuarios

inclinar el dispositivo, la pelota acelerar o frenar, lo que les permite mantener la pelota

lejos de las paredes.

3.2.2 ANIMACION POR DISPOSITIVOS DE ENTRADA

Tradicionalmente, los programadores de Windows se utilizan para el registro de

eventos, tales como claves por los acontecimientos o eventos de movimiento del ratón.

Con este modelo de programación, la aplicación realiza algunas acciones y luego,

#if WINDOWS_PHONE

Accelerometer acc = new Accelerometer();

#endif

protected override void LoadContent() {

...

#if WINDOWS_PHONE acc.ReadingChanged += (s, e) => {

if (e.X >= -1 && e.X <= 1){

direction.X += (float)(e.X);

}

if (e.Y >= -1 && e.Y <= 1) {

direction.Y -= (float)(e.Y);

}

};

acc.Start();

#endif

}

Page 180: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

180

CARRERAS PROFESIONALES CIBERTEC

cuando la solicitud haya tiempo de inactividad, el los mensajes se bombea en la

aplicación y los eventos se procesan.

En el desarrollo del juego, no hay tiempo de inactividad, por lo que sería demasiado

caro para que los desarrolladores para registrar eventos. Por el contrario, depende de

cómo el desarrollador implemente el programa para sondear constantemente

dispositivos de entrada: de preguntar si el jugador ha realizado ninguna acción en

estos dispositivos.

Esa es una forma ligeramente diferente de ver mensajes de entrada y otros eventos,

pero una vez que te diste cuenta, el desarrollo del juego se hace mucho más sentido.

3.2.2.1 XNA FrameWork

La entrada de teclado se maneja a través de la clase Keyboard, que está en el espacio

de nombres Microsoft.XNA.Frame.Work.Input. La clase Keyboard tiene un método

estático llamado GetState que recupera el estado actual del teclado en forma de una

estructura KeyboardState. La estructura KeyboardState contiene tres métodos clave

que le dará la mayor parte de la funcionalidad que necesita.

Método Descripción

Keys[]

GetPressedKeys( )

Retorna un arreglo de teclas presionadas en el tiempo que

se invoca al método

bool IsKeyDown(Keys

key)

Retorna true o false dependiendo si o no la tecla

representada por un parámetro es presionada en el tiempo

que se invoca el método

bool IsKeyUp(Keys

key)

Retorna true o false dependiendo si la tecla representada

por el parámetro es presionada en el tiempo que es

invocado el método.

Por ejemplo de la utilización de la clase Keyboard, si usted quiere comprobar si la tecla

"A" se ha pulsado, tendrá que utilizar la siguiente línea de código:

if(Keyboard.GetState( ).IsKeyDown(Keys.A))

// BAM!!! A is pressed!

Page 181: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 81

CIBERTEC CARRERAS PROFESIONALES

Para comprobar la entrada por teclado, hay dos métodos para elegir la hora de

determinar dónde poner una cierta lógica en XNA bucle del juego:

Draw, que tiene por objeto la elaboración y

Update, actualización, que es esencialmente de todo lo demás (mantener el

marcador, los objetos en movimiento, comprobando las colisiones, etc.)

Así que, adelante y agregue el código siguiente al final de su método de actualización,

justo antes de la llamada a base.Update:

Aplicando la estructura condicional if / else sólo le permiten moverse en una dirección

en un momento, mientras que con cuatro independientes si los estados le permite

moverse en diagonal, así (por ejemplo, la combinación de los arriba ya la izquierda

entradas de llave).

3.2.2.2 Touch

En una aplicación de Silverlight, cuando el usuario toca la pantalla, uno o más eventos

de ratón se implementan.

En un juego de XNA, la detección de la entrada del usuario se realiza dentro del

método de actualización. El siguiente código recupera el estado actual del panel táctil

como una matriz de objetos TouchLocation. A partir de este la Propiedad de posición

se puede consultar para determinar la ubicación del punto de contacto. Recuerde que

todos los Dispositivos Windows Phone serán por lo menos cuatro puntos de contacto.

KeyboardState keyboardState = Keyboard.GetState( );

if (keyboardState.IsKeyDown(Keys.Left))

ringsPosition.X −= ringsSpeed;

if (keyboardState.IsKeyDown(Keys.Right))

ringsPosition.X += ringsSpeed;

if (keyboardState.IsKeyDown(Keys.Up))

ringsPosition.Y −= ringsSpeed;

if (keyboardState.IsKeyDown(Keys.Down))

ringsPosition.Y += ringsSpeed;

Page 182: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

182

CARRERAS PROFESIONALES CIBERTEC

El objeto TouchLocation también tiene una propiedad del estado que señala si el punto

de contacto se ha movido, prensado, o en libertad. En el caso de ser movida, puede

intentar recuperar la posición anterior a través del método TryGetPreviousLocation.

3.2.3 MANEJO DE COLISIONES

La detección de colisiones es un componente fundamental de casi todos los juegos. La

detección de colisiones sin duda puede hacer o romper un seguimiento o continuidad

del juego.

Una de las maneras más sencillas y rápidas de implementar la detección de colisiones

es a través del algoritmo cuadro de límite. En esencia, cuando se utiliza un algoritmo

de delimitación de la caja, donde se tiene que "dibujar" una caja alrededor de cada

objeto en la pantalla y luego verificar si las cajas se cruzan. Si lo hacen, usted tiene un

accidente.

Para implementar el algoritmo en el juego, tendrá que crear un rectángulo para cada

Sprite basado en la posición del sprite y la anchura y la altura de los marcos para los

Sprites. La estructura Rectangle tiene un método llamado Intersect que se pueden

utilizar para determinar si dos rectángulos se cruzan:

Random rnDir = new Random((int)DateTime.Now.Ticks);

protected override void Update(GameTime gameTime) {

...

if (wallHit) {

var touchPoints = TouchPanel.GetState();

if (touchPoints.Count > 0) {

var t1 = touchPoints[0];

position = t1.Position;

direction = new Vector2(rnDir.Next(0,

5),rnDir.Next(0, 5));

wallHit = false;

}

}

base.Update(gameTime);

}

Rect1.Intersects(Rect2);

Page 183: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 83

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 7.1

Implementando una aplicación en XNA para realizar un juego de Movimiento

básico.

Implementa una aplicación en XNA que permita mover una pelota alrededor de la

pantalla y cuando de una vuelta, cambiar la imagen de la pelota.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el

proyecto

Agregue al proyecto Content un

conjunto de imágenes, los cuales

serán utilizados para realizar el cambio

de pelotas por cada vuelta.

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Para agregar las imágenes, simplemente arrastrar y soltar

Page 184: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

184

CARRERAS PROFESIONALES CIBERTEC

2. Programación.

Defina los objetos del Juego: arreglo de imágenes, índice y las coordenadas del juego.

Inicializar los valores de las variables e instanciar el rectángulo cuadro, tal como se

muestra.

Programe el método LoadContent para cargar las imágenes en el arreglo pelotas, tal

como se muestra

Page 185: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 85

CIBERTEC CARRERAS PROFESIONALES

Implemente el método Update() donde evalúe la arista (variable vuelta) que está

moviéndose la foto, cuando la imagen esta en el borde de la pantalla, cambia de vuelta

o arista, y cuando completa el circuito, cambia de imagen, tal como se muestra

Implemente el método Draw para realizar el dibujo de la imagen en la pantalla, incluya

la definición del rectángulo antes de dibujar.

Presione la tecla F5, para iniciar el juego, donde se visualiza que el objeto circula

alrededor de la pantalla.

Page 186: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

186

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 7.2

Implementando una aplicación en XNA para realizar un juego de movimiento y

colisión.

Implementa una aplicación en XNA que permita mover una pelota alrededor de la

pantalla donde al colisionar en uno de los extremos de la pantalla, la pelota rebota.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el

proyecto.

Agregar en la aplicación Content, el archivo imagen ball.png tal como se muestra

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Agregar el archivo ball.png al proyecto

Page 187: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 87

CIBERTEC CARRERAS PROFESIONALES

PROGRAMACION

1. Defina los objetos para programar el juego: Texture2D y el marco. Para realizar el

movimiento de la imagen, definir variables para manejar las posiciones del marco así

como aceleraciones de las posiciones x e y.

2. Programa en el método LoadContent() el proceso de cargar la imagen a objeto

“balón” así como definir los valores iniciales de x e y (serán en el centro de la pantalla);

además defina el marco del proceso.

3. Programa el método Update, donde incrementa los valores de x e y. Incrementado

los valores, evalúo la ubicación de estos, si se encuentran en los extremos de la

pantalla, cambiando el valor del acelerador, tal como se muestra

Page 188: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

188

CARRERAS PROFESIONALES CIBERTEC

Programa el método Draw, donde permitirá dibujar la nueva posición del balón,

actualizando los valores de marco.

Presione F5 para ejecutar el proyecto

Incremento los valores de x, y a través de las variables acelerax, aceleray

Evalúo si x o y están en los extremos de la pantalla

El balón ira circulando alrededor de la pantalla

Page 189: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 89

CIBERTEC CARRERAS PROFESIONALES

LABORATORIO 7.3

Implementando una aplicación en XNA para realizar un juego de movimiento y

colisión.

Implementa una aplicación en XNA que permita mover una pelota alrededor de la

pantalla donde al colisionar con un ladrillo en movimiento, la pelota rebota asignándolo

un punto en el proceso

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Agregar en la aplicación Content, los archivos ball.png y

paddle.png, el archivo de sonidos ding.wav y el spriteFont

messageFont, tal como se muestra.

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Page 190: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

190

CARRERAS PROFESIONALES CIBERTEC

PROGRAMACION

Declare el conjunto de objetos para el juego a implementar: Texture2D, Rectangle,

SriteFont, SoundEffects y variables de posición, tal como se muestra.

Programa el método LoadContent para realizar el proceso de la carga de imágenes,

Font y efectos de sonidos a la página, tal como se muestra.

Programa el método Update del Game1, en este proceso, el paddle se moverá hacia

la vertical, de un extremo a otro; el balón ira desplazando de lado a lado, donde, si se

intersecan, se incrementa el score.

Definir objeto Texture2D para el balón, su Rectangle y sus variables de posición

Definir objeto SprintFont para el texto y Vector2, ubicación

Definir objeto Texture2D para el paddle, su Rectangle y sus variables de posición

Definir objeto SoundEffect

Page 191: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 91

CIBERTEC CARRERAS PROFESIONALES

Programa el método Draw, donde permitirá dibujar la nueva posición de los objetos del

juego, actualizando los valores de sus posiciones.

Presione F5 para ejecutar el juego.

Evalúo el desplazamiento del paddle, tal como se muestra.

Evalúo el desplazamiento del balón, tal como se muestra.

Evalúo la intersección del balón con el paddle, donde al realizarse el proceso se incrementa el score

Page 192: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

192

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 10.4

Implementando una aplicación en XNA para realizar un juego de movimiento

utilizando la teclas de dirección.

Implementa una aplicación en XNA que permita mover una paleta hacia lo largo de la

pantalla utilizando las teclas de dirección del teclado, colisionando con la pelota que

cae desde lo alto de la pantalla

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el proyecto

Agregar en la aplicación Content, los archivos ball.png y

paddle.png, el archivo de sonidos ding.wav y el spriteFont

messageFont, tal como se muestra.

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Page 193: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 93

CIBERTEC CARRERAS PROFESIONALES

PROGRAMACION

Declare el conjunto de objetos para el juego a implementar: Texture2D, Rectangle,

SriteFont, SoundEffects

Programa el método LoadContent para realizar el proceso de la carga de imágenes,

Font y efectos de sonidos a la página, tal como se muestra.

Programa el método Update del Game1, en este proceso, el paddle se moverá hacia

la vertical, de un extremo a otro utilizando las teclas de desplazamiento del teclado; el

balón ira desplazando de arriba hacia abajo, donde, si se intersecan, se incrementa el

score

Definir objeto Texture2D para el paddle, su Rectangle y sus variables de posición

Definir objeto SprintFont para el texto y Vector2, ubicación

Definir objeto Texture2D para el balón, su Rectangle y sus variables de posición

Definir objeto SoundEffect

Page 194: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

194

CARRERAS PROFESIONALES CIBERTEC

Programa el método Draw, donde permitirá dibujar la nueva posición de los objetos del

juego, actualizando los valores de sus posiciones

Presione F5 para iniciar el juego.

Evalúo el desplazamiento del paddle, tal como se muestra.

Evalúo el desplazamiento del balón, tal como se muestra.

Evalúo la intersección del balón con el paddle, donde al realizarse el proceso se incrementa el score

Page 195: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 95

CIBERTEC CARRERAS PROFESIONALES

Resumen

Para mover los objetos, que va a tener que cambiar las posiciones en la que se

dibujan. En un momento inicial, las imágenes son añadidas en posiciones

constantes, nuestro objeto es que las imágenes se muevan a lo largo de la pantalla

Las imágenes estáticas no son muy interesantes, así que vamos a hacer el

movimiento gráfico, para ello especificamos su posición por el que pasa una

estructura Vector2 inicia con los 100 valores y 100. Estos dos valores son las

posiciones x e y en el que será el gráfico dibujado, y representar a sus la esquina

superior izquierda. Esta posición se conoce como un sistema de coordenadas.

Un Sprite también tienen la capacidad rotar fácilmente a cualquier ángulo que

desee. El ángulo se especifica mediante el uso de cualquiera de las llamadas al

método Draw, pasando por el ángulo para el parámetro adecuado.

A lo largo de las llamadas al método Draw, podemos pasar como parámetro a

Color, para pasar diferentes colores en lugar del color blanco para pintar el grafico

que está siendo dibujado. Una aplicación muy útil de esta función es permitir que

un solo gráfico que se dibuja en diferentes colores, sin tener que añadir todos los

gráficos de diferentes colores por separado en el proyecto de contenido.

El acelerómetro es un sensor de entrada, ó detecta la aceleración del dispositivo

que el usuario se mueve o rota. El acelerómetro del teléfono de Windows informa

en tres dimensiones (3D) de vectores, en forma de x, y, z y los valores. Estos

valores indican la dirección y la magnitud de la fuerza que se aplican actualmente

en el dispositiv

La entrada de teclado se maneja a través de la clase Keyboard, que está en el

espacio de nombres Microsoft.XNA.Frame.Work.Input. La clase Keyboard tiene un

método estático llamado GetState que recupera el estado actual del teclado en

forma de una estructura KeyboardState. La estructura KeyboardState contiene tres

métodos clave que le dará la mayor parte de la funcionalidad que necesita.

En una aplicación de Silverlight, cuando el usuario toca la pantalla, uno o más

eventos de ratón se plantean. En un juego de XNA, la detección de la entrada del

usuario se realiza dentro del método de actualización. El siguiente código recupera

el estado actual del panel táctil como una matriz de objetos TouchLocation. A partir

de este la Propiedad de posición se puede consultar para determinar la ubicación

del punto de contacto. Recuerde que todos los Dispositivos Windows Phone serán

por lo menos cuatro puntos de contacto

Page 196: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

196

CARRERAS PROFESIONALES CIBERTEC

Si desea saber más acerca de estos temas, puede consultar a las siguientes

páginas:

XNA en Windows Phone: Game

http://gamerloper.com/2011/04/xna-movimiento.html

Sprites en Windows Phone

http://digitalerr0r.wordpress.com/2010/03/22/windows-phone-7-development-

tutorial-2-static-sprites/

Acelerómetro en Windows Phone

http://www.thisisfanzoo.com/Blog/JeffF/archive/2010/07/26/introduction-to-the-

windows-phone-7-accelerometer.aspx

Page 197: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 97

CIBERTEC CARRERAS PROFESIONALES

3.3 CREANDO UN GAME FRAMEWOK

3.3.1 DISEÑO DE UN GAME FRAMEWOK

La Clase Game de XNA ofrece un motor flexible, para iniciar y conducir el juego, lo

que no ofrece algún mecanismo integrado para la gestión de los objetos del juego que

queremos mostrar y manipular dentro del juego.

Los ejemplos que hemos estado viendo han proporcionado los mecanismos para

mover un pequeño número de sprites, pero cualquier juego de las necesidades reales

para el seguimiento de objetos mucho más que esto. En lugar de construir todos los

objetos en el juego sobre una base ad hoc, vamos a construir el marco dentro del cual

los objetos pueden ser manejados.

Estos objetos se utilizan para todos los elementos del juego que tenemos que sacar:

ellos serán los azulejos que caen en un juego de Tetris, los fantasmas, los puntos, y el

jugador de Pac Man, y todas las naves espaciales y las balas de los invasores del

espacio. Los objetos se conocen varias cosas acerca de sí mismos (por ejemplo,

donde están en la pantalla) y nos permitirá gestionar un mecanismo coherente y

simple para el movimiento y la prestación eficiente.

Proporcionando una implementación sencilla y flexible para los objetos del juego es la

principal área que vamos a abordar en el diseño y construcción de la estructura del

juego. Vamos a tomar ventaja de las características de orientación. NET objeto en el

diseño del marco. Vamos a crear una clase base abstracta que soporta un conjunto

básico de funciones que serán de utilidad general en cualquiera de los objetos de

nuestro juego. A continuación, se derivará a otra clase abstracta de este y establecer

esta clase derivada para proporcionar apoyo para los objetos del juego en 2D basados

en sprites.

Todas estas clases se pondrán en juego un proyecto de biblioteca independiente

denominada GameFramework, que nos va a permitir su reutilización entre los

proyectos sin tener que reimplementar ellos o compartir archivos fuente. En su lugar,

nos limitaremos a añadir una referencia a la biblioteca de estructuras, y sus clases

estarán disponibles de inmediato.

Page 198: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

198

CARRERAS PROFESIONALES CIBERTEC

3.3.2 CLASES DE UN GAME FRAMEWOK

3.3.2.1 La Clase GameObjectBase

La primera clase es la clase GameObjectBase, una clase abstracta de la que todas

nuestras clases de objetos del juego en última instancia, se derivan. La funcionalidad

dentro de GameObjectBase es limitada, pero podemos declarar las colecciones de

objetos del juego mediante el uso de esta clase sin un principio la necesidad de saber

más detalles sobre los tipos de objetos que se van a almacenar. La funcionalidad real

dentro de la clase es muy limitada. En el constructor de la clase, tenemos un objeto de

juego como un parámetro. Se puede recordar que los juegos XNA que escribimos

todos tienen su clase principal deriva de la clase del juego, por lo que el

almacenamiento que proporciona un mecanismo que permite que el código dentro de

esta clase y cualquier clase derivada de acceso al objeto principal del juego. El

constructor se muestra a continuación:

Además de definir el constructor, se define un método único, el Update, que se utiliza

para actualizar el estado del objeto. Se acepta un objeto GameTime como un

parámetro para que la información de tiempo pueda extraer, al igual que el método

Update en la clase principal del juego. La función no hace más que incrementar una

variable, UpdateCount, de modo que podemos decir cuántas actualizaciones se han

producido. Nuestras clases derivadas anulará esta función, sin embargo, para que

puedan realizar las actualizaciones reales de sus objetos de juego correspondiente.

3.3.2.2 La Clase Sprite

Derivado de la clase GameObjectBase es la clase SpriteObject. Esta es una clase

concreta (no abstracta) en la que vamos a añadir toda la funcionalidad básica que

puede ser que desee utilizar para colocar y sacar nuestros sprites. En su forma básica,

la clase es capaz de mantener la posición de un sprite, escala, rotación y origen, una

public GameObjectBase(Microsoft.Xna.Framework.Game game){

Game = game;

}

public virtual void Update(GameTime gameTime){

// Incrementar el UpdateCount

UpdateCount += 1;

}

Page 199: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 1 99

CIBERTEC CARRERAS PROFESIONALES

textura para que acabe con él, con un color de tinte con un rectángulo de origen para

el procesamiento de texturas parcial (si es necesario), y un capa de fondo para ayudar

a definir el orden en que los sprites se debe prestados.

No contiene ninguna lógica de los objetos, sin embargo: no sabe nada acerca de cómo

mover o cambiar ninguna de sus propiedades. Esta lógica se añadirá mediante la

derivación de nuevas clases de SpriteObject, como veremos en breve. Como las

clases derivadas son generalmente lo que vamos a utilizar cuando construimos

nuestros juegos, pero si un sprite estático simple es todo lo que se requiere, los casos

de SpriteObject pueden ser creadas y añadidas al juego. El constructor proporciona

diferentes sobrecargas para configurar fácilmente algunas de las propiedades

comunes de la clase.

La clase ofrece un conjunto de propiedades que permite controlar la posición y

apariencia del Sprite:

Propiedad Descripción

SpriteTexture Almacena una referencia a una Texture que puede ser utilizada

para renderizar el Sprite

PositionX,

PositionY

Almacena la posición del Sprite como una variable float, la

propiedad Position representa la misma posición como un

Vector2.

OriginX, OriginY y Almacena las coordenadas de origen del Sprite, utiliza un par de

GameObjectBase Abstract Class

SpriteObject Class GameObjectBase

public SpriteObject(Game game)

public SpriteObject(Game game, Vector2 position)

public SpriteObject(Game game, Vector2 position, Texture2D texture)

Page 200: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

200

CARRERAS PROFESIONALES CIBERTEC

Origin valores float y una estructura Vector2 tal como la propiedad

Position. Por defecto el origen está en la coordenada (0,0).

Angle Almacena el ángulo de rotación en radianes, por defecto es 0.

ScaleX y ScaleY Son valores float que permite uniformizar y no uniformizar la

escala a ser aplicada al Sprite

SourceRect Es una estructura Rectangle el cual es definido como una

subregión de la texture del Sprite que va a ser renderizada.

SpriteColor Permite pintar para ser aplicado al sprite, por defecto es

Color.White, con intensidad completa alpha.

LayerDepth Almacena un valor float que será utilizanda para renderizar el

Sprite .

La creación de una instancia de esta clase (o una clase derivada de ella) permite una

gran flexibilidad para mostrar el sprite sin necesidad de otras variables que se definan.

Simplifica en gran medida el código repetitivo que de otra manera tendría que escribir

para almacenar toda esta información.

Además de almacenar el estado de Sprites, también se suma a una función virtual

llamado Draw. Al igual que el método Draw de la clase de XNA Game principal,

esperamos que un objeto GameTime como un parámetro, pero también requieren un

objeto SpriteBatch para pasar pulg Dado que esta clase está dedicada enteramente a

los sprites de dibujo, es lógico esperar que un SpriteBatch, y que necesita acceder a

uno de manera que podamos llamar a su método de dibujo para mostrar nuestro sprite

en la pantalla.

public virtual void Draw(GameTime gameTime, SpriteBatch spriteBatch){

// tienes una texture? Si no, entonces no hay que dibujar...

if (SpriteTexture != null){

// tienes un rectangle para ser utilizando?

if (SourceRect.IsEmpty){

// No, entonces dibujamos el sprite

spriteBatch.Draw(SpriteTexture, Position, null,

SpriteColor, Angle,

Origin, Scale, SpriteEffects.None, LayerDepth);

}

else{

// Si, dibujamos con el Rectangle SourceRect

spriteBatch.Draw(SpriteTexture, Position, SourceRect,

SpriteColor, Angle,Origin, Scale, SpriteEffects.None,

LayerDepth);

}

}

}

Page 201: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 01

CIBERTEC CARRERAS PROFESIONALES

3.3.2.3 La Clase TextObject

Tenemos una forma simple de representar un Sprite, pero sería muy útil contar con un

mecanismo correspondiente para la representación de texto. Esto lo conseguimos

mediante la creación de la clase TextObject. El objeto Text tiene muchas de las

características que los Sprites (una posición, origen, color, rotación, escalado, y más),

se derivan de TextObject; de los SpriteObject nos permite aprovechar todas las

propiedades SpriteObject acciones.

Los constructores disponibles para esta clase son más orientados a texto y se

muestran:

Adicionalmente definiremos un par de nuevas propiedades de los nuestros:

Fuente almacena una referencia a un objeto SpriteFont que se utiliza para

representar el texto.

Texto almacena un texto que se mostrará.

GameObjectBase Abstract Class

SpriteObject Class GameObjectBase

TextObject Class SpriteObject

public TextObject(Game game)

public TextObject(Game game, Vector2 position)

public TextObject(Game game, Vector2 position, SpriteFont font)

public TextObject(Game game, Vector2 position, SpriteFont font, String

text)

public TextObject(Game game, Vector2 position, SpriteFont font, String

text,TextAlignment horizontal, TextAlignment vertical)

Page 202: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

202

CARRERAS PROFESIONALES CIBERTEC

HorizontalAlignment y VerticalAlignment ofrecen al creador del objeto una

forma simple de alineación automática de texto alrededor de su posición.

Los cuatro de estas propiedades están respaldados por una variable de clase privada

en lugar de ser auto implementada utilizando el {get; set;} sintaxis. Esto nos permite

enlazar en su conjunto de códigos y realizar un procesamiento adicional en relación

con la alineación del texto.

3.3.2.4 La Clase GameHost

Esta clase cuenta con colecciones de diversos objetos que se desea utilizar en

nuestros juegos, especialmente los objetos Dictionary que contiene las texturas y

fuentes, y una lista de los objetos del juego actual.

Los objetos del juego se guardan en una lista que contiene los objetos de

GameObjectBase, que nos permite almacenar en su interior el SpriteObject derivados

y los objetos TextObject juego que hemos discutido hasta ahora, así como a las clases

específicas del juego que se derivan de una de estas.

La clase también contiene algunos métodos sencillos que podemos llamar para salvar

a tener que escribir las funciones en la clase de juego del proyecto principal.

Se deriva de la clase Microsoft.XNA.Framework.Game (de la que todos los proyectos

de juego actual deben derivar una clase única). Esto significa que en los proyectos de

nuestro juego podemos derivar la clase de juego principal de

GameFramework.GameHost en lugar de a partir de Microsoft.XNA.Framework.Game.

Como resultado, tenemos toda la funcionalidad de la clase de XNA Game y toda la

funcionalidad en GameHost.

public String Text{

get { return _text; }

set{

// ha cambiado el texto que tenemos almacenado?

if (_text != value){

// Si, almaceno el nuevo texto y recalculas e origen

_text = value;

CalculateAlignmentOrigin();

}

}

}

Page 203: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 03

CIBERTEC CARRERAS PROFESIONALES

Una vez que el juego se inicia y en funcionamiento, dos métodos adicionales están

disponibles para simplificar el código de la clase principal del juego:

Métodos Descripción

UpdateAll Recorre todos los elementos de la lista GameObjects y llama al

método Update en cada uno de ellos. Esta función puede ser llamada

de la clase principal del juego el método Update para que todo siga

avanzando.

DrawSprites Identifica todos los SpriteObject (y derivados) los objetos de la

GameObjects lista y llama al método Draw de cada uno. Se requiere

un objeto inicializado SpriteBatch que se pasan, y es responsabilidad

del código de llamada para llamar a su inicio y fin

métodos

DrawText Identifica todos los TextObject (y derivados) en la lista de objetos

GameObjects y llama al método Draw para ellos, al igual que hace por

DrawSprites SpriteObject los objetos del juego.

GameObjectBase Abstract Class

SpriteObject Class GameObjectBase

TextObject Class SpriteObject

XNA.Framework.Game Class

GameHost Class

GameObjects

Page 204: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

204

CARRERAS PROFESIONALES CIBERTEC

Un ejemplo de este objeto es implementar un método que inicializa el objeto

objectArray.

3.3.2.5 Añadiendo objetos al GameHost

Vamos a centrarnos ahora en la clase de juego, que se llama MultipleObjectsGame.

En lugar de que se derivan de Microsoft.Xna.Framework.Game, se deriva de

GameFramework.GameHost, así que coge toda la funcionalidad que ofrece la clase

GameHost.

En LoadContent, las texturas y las fuentes se cargan en la misma forma, pero esta vez

se añaden a las colecciones GameHost.

La última línea de código en las llamadas LoadContent en una nueva función llamada

RESETgame, en el que crear los objetos que va a hacer el trabajo cuando el juego se

está ejecutando, y su código se muestra.

public virtual void UpdateAll(GameTime gameTime){

int i;

int objectCount;

// construimos el arreglo de objetos.

// actualizamos el codigo

// primero, tenemos una arreglo

if (_objectArray == null){

_objectArray = new GameObjectBase[

(int)MathHelper.Max(20, GameObjects.Count * 1.2f) ];

}

else if (GameObjects.Count > _objectArray.Length){

_objectArray = new GameObjectBase[(int)(GameObjects.Count *

1.2f)];

}

}

protected override void LoadContent(){

// Crear un SpriteBatch, que sera utilizando para dibujar textures.

_spriteBatch = new SpriteBatch(GraphicsDevice);

// cargar el objeto textures hacia el dictionary

Textures.Add("Ball", this.Content.Load<Texture2D>("Ball"));

Textures.Add("Box", this.Content.Load<Texture2D>("Box"));

// cargar fonts

Fonts.Add("Kootenay", this.Content.Load<SpriteFont>("Kootenay"));

// resetear el juego

ResetGame();

}

Page 205: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 05

CIBERTEC CARRERAS PROFESIONALES

Para llevar a cabo la actualización y funciones de dibujo, estas son absolutamente

triviales, simplemente decirle a la máquina de juego para realizar las actualizaciones

necesarias y el dibujo.

3.3.2.6 Remover objetos al GameHost

Así como los objetos del juego pueden añadir más objetos en el método Update, para

que puedan retirar los objetos también. Si un objeto se determina que ya no es

necesaria, simplemente se puede quitar de la colección y no recibirá más llamadas de

actualizar o Draw. Esto incluye la capacidad para que un objeto se retire si es

necesario.

private void ResetGame(){

TextObject message;

// Remover los objetos

GameObjects.Clear();

// Añadir 10 cajas y 10 llamadas

for (int i = 0; i < 10; i++){

GameObjects.Add(new BoxObject(this, Textures["Box"]));

GameObjects.Add(new BallObject(this, Textures["Ball"]));

}

// Añadir texto

message = new TextObject(this, Fonts["Kootenay"], new Vector2(240,

400),"Windows Phone 7 Game

Development",TextObject.TextAlignment.Center,

TextObject.TextAlignment.Center);

message.SpriteColor = Color.DarkBlue;

message.Scale = new Vector2(1.0f, 1.5f);

GameObjects.Add(message);

}

protected override void Update(GameTime gameTime){

// permite al juego salir

if (GamePad.GetState(PlayerIndex.One).Buttons.Back ==

ButtonState.Pressed)

this.Exit();

// actualize todos los objetos del juego

UpdateAll(gameTime);

base.Update(gameTime);

}

protected override void Draw(GameTime gameTime){

GraphicsDevice.Clear(Color.Wheat);

// inicia el spritebatch

_spriteBatch.Begin();

// dibuja el sprites

DrawSprites(gameTime, _spriteBatch);

// dibuja el text

DrawText(gameTime, _spriteBatch);

// Final del spritebatch

_spriteBatch.End();

base.Draw(gameTime);

}

Page 206: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

206

CARRERAS PROFESIONALES CIBERTEC

LABORATORIO 11.1

Implementando una aplicación en XNA para crear un Game Framework.

Implementa una aplicación en XNA que permita define una clase Balon de tipo

Texture2D, definiendo las características de la clase, implementando la instancia de la

clase en el Game.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el

proyecto

Agregue al proyecto Content una imagen

llamado pelota, y agregue al proyecto la clase

Balon.cs.

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Page 207: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 07

CIBERTEC CARRERAS PROFESIONALES

En la clase Balon,

defina los objetos de

la clase: pelota

Texture2D y una

estructura Vector2.

Page 208: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

208

CARRERAS PROFESIONALES CIBERTEC

Defina las propiedades Width y Height que retorne las dimensiones de la pelota.

Defina el método

Initialize para

inicializar la clase

Balon, y el método

Draw que permita

dibujar la pelota.

En la clase Game1, defina la clase Balon llamada pelota, en el método Initialize()

instanciar el objeto pelota.

Page 209: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 09

CIBERTEC CARRERAS PROFESIONALES

En el método LoadContent() inicializar el objeto pelota, enviando la imagen y su

posición como parámetros.

Page 210: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

210

CARRERAS PROFESIONALES CIBERTEC

En el método Draw de la clase Game1, dibuje el objeto pelota. Presione, luego F5 para

ejecutar el juego.

LABORATORIO 11.2

Implementando una aplicación en XNA para crear un Game Framework animado.

Implementa una aplicación en XNA que permita define una clase Balon de tipo

Texture2D, definiendo las características de la clase, implementando la animación del

balón dentro de la clase.

1. Inicio del Proyecto

Para iniciar un proyecto Windows Phone: Seleccione la opción Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual

listara un conjunto de proyectos

Seleccione la aplicación Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botón OK para grabar el

proyecto

Asigne nombre al proyecto

Seleccione la plantilla Windows Phone Game en Visual C#

Page 211: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 11

CIBERTEC CARRERAS PROFESIONALES

Agregue al proyecto Content una imagen

llamado pelota, y agregue al proyecto la clase

Balon.cs.

En la clase Balon defina los objetos que se implementaran dentro de la clase

Page 212: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

212

CARRERAS PROFESIONALES CIBERTEC

Defina los métodos en la clase balón que permita inicializar el objeto pelota, así como

los métodos que retornen el ancho y alto de la pelota.

Implementa el método Update, definiendo los parámetros para realizar la animación de

la pelota; defina el método Draw para dibujar la pelota utilizando una estructura

Rectangle llamada marco.

Page 213: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 13

CIBERTEC CARRERAS PROFESIONALES

En la clase Game1, defina e instancia la clase Balon en el objeto llamado pelota, tal

como se muestra en la ventana de código.

Programa el método LoadContent para inicializar el objeto pelota, tal como se muestra.

Page 214: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

214

CARRERAS PROFESIONALES CIBERTEC

Programa el método Update, ejecutando el método Update de la clase Balon,

enviando las dimensiones de la pantalla, y programa el método Draw del Game1,

ejecutando el método Draw de la clase Balon

Presione la tecla F5, para ejecutar el Juego.

Page 215: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

DE S ARR O L L O DE AP L IC AC I ONE S M ÓV I LE S I I 2 15

CIBERTEC CARRERAS PROFESIONALES

Resumen

La Clase Game de XNA ofrece un motor flexible, para iniciar y conducir el juego, lo

que no ofrece algún mecanismo integrado para la gestión de los objetos del juego

que queremos mostrar y manipular dentro del juego

La primera clase es la clase GameObjectBase, una clase abstracta de la que

todas nuestras clases de objetos del juego en última instancia, se derivan. La

funcionalidad dentro de GameObjectBase es limitada, pero podemos declarar las

colecciones de objetos del juego mediante el uso de esta clase sin un principio la

necesidad de saber más detalles sobre los tipos de objetos que se van a

almacenar.

Derivado de la clase GameObjectBase es la clase SpriteObject. Esta es una clase

concreta (no abstracta) en la que vamos a añadir toda la funcionalidad básica que

puede ser que desee utilizar para colocar y sacar nuestros sprites. Un Sprite

también tienen la capacidad rotar fácilmente a cualquier ángulo que desee. El

ángulo se especifica mediante el uso de cualquiera de las llamadas al método

Draw, pasando por el ángulo para el parámetro adecuado.

Tenemos una forma simple de representar un Sprite, pero sería muy útil contar

con un mecanismo correspondiente para la representación de texto. Esto lo

conseguimos mediante la creación de la clase TextObject. El objeto Text tiene

muchas de las características que los Sprites (una posición, origen, color, rotación,

escalado, y más), se derivan de TextObject; de los SpriteObject nos permite

aprovechar todas las propiedades SpriteObject acciones.

Los objetos del juego se guardan en una lista que contiene los objetos de

GameObjectBase, que nos permite almacenar en su interior el SpriteObject

derivados y los objetos TextObject juego que hemos discutido hasta ahora, así

como a las clases específicas del juego que se derivan de una de estas.La clase

también contiene algunos métodos sencillos que podemos llamar para salvar a

tener que escribir las funciones en la clase de juego del proyecto principal.

Para llevar a cabo la actualización y funciones de dibujo, en un arreglo de objetos,

estas son absolutamente triviales, simplemente decirle a la máquina de juego para

realizar las actualizaciones necesarias y el dibujo.

Así como los objetos del juego pueden añadir más objetos en el método Update,

para que puedan retirar los objetos también. Si un objeto se determina que ya no

es necesaria, simplemente se puede quitar de la colección y no recibirá más

llamadas de actualizar o Draw. Esto incluye la capacidad para que un objeto se

retire si es necesario.

Page 216: Manual 2011-II 06 Desarrollo de Aplicaciones Moviles II (0558)

216

CARRERAS PROFESIONALES CIBERTEC

Si desea saber más acerca de estos temas, puede consultar a las siguientes

páginas:

XNA en Windows Phone: Game

http://gamerloper.com/2011/04/xna-movimiento.html

Sprites en Windows Phone

http://digitalerr0r.wordpress.com/2010/03/22/windows-phone-7-development-

tutorial-2-static-sprites/

Acelerómetro en Windows Phone

http://www.thisisfanzoo.com/Blog/JeffF/archive/2010/07/26/introduction-to-the-

windows-phone-7-accelerometer.aspx