Sie sind auf Seite 1von 216

Desarrollo de

Aplicaciones
Mviles II

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

NDICE

Pgina

Presentacin

Red de contenidos

Unidad de aprendizaje 1
CONSTRUYENDO UNA APLICACIN WINDOWS PHONE
1.1 Tema 1

: Introduccin a Windows Phone

11

1.1.1. : Plataforma del Windows Phone

11

1.1.2. : Ciclo de vida de una Aplicacin 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. : Introduccin a Silverlight

32

1.2.2. : Controles en SilverLight

32

1.2.3. : Laboratorio

38

1.3 Tema 3

: Navegando entre pginas, manejo de estados

55

1.3.1. : Navegando entre pginas

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

96

2.2.1. : Acerca de XML

96

2.2.2. : Manejo de datos en XML en aplicacin Phone

97

2.2.3. : Controles enlazados a los datos

102

2.2.4. : Laboratorio

103

2.2 Tema 5

CIBERTEC

: Acceso a datos en Archivos XML

: Windows Communication Foundation

121

2.3.1. : WCF, Arquitectura

121

2.3.2. : Caractersticas del WCF

125

2.3.3. : Windows Phone y WCF

127

2.3.4. : Laboratorio

132

CARRERAS PROFESIONALES

Unidad de aprendizaje 3
DESARROLLANDO UNA APLICACIN XNA EN WINDOWS PHONE
3.1 Tema 6

: XNA

147

3.1.1. : XNA, caractersticas 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

: Animacin en XNA

3.2.1. : Animacin: movimiento de imgenes, rotacin, tintes,

175
175

acelermetro
3.2.2. : Animacin 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. : Diseo de un Game FrameWork

197

3.3.2. : Clases de un Game FrameWork

198

3.3.3. : Laboratorio

206

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

PRESENTACIN
Desarrollo de Aplicaciones Moviles II pertenece a la lnea formativa y se dicta
en las carreras de tecnologas de la institucin. El curso brinda un conjunto de
herramientas de programacin para trabajar con una aplicacin mvil que
permita al alumno desarrollar aplicaciones para el manejo de datos y consulta de
datos remotas, as como el desarrollo de juegos para una aplicacin mvil en
forma eficiente.
El manual para el curso ha sido diseado 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 prcticos que deber desarrollar en cada sesin, que le permitirn
reforzar lo aprendido en la clase.
El curso es eminentemente prctico: consiste en programacin C# implementado
en una aplicacin Windows Phone. La primera parte del manual nos ensea a
implementar las herramientas de SilverLight en una aplicacin Windows Phone
para el manejo de datos locales y remotos. En primer lugar, se inicia con el
reconocimiento de las caractersticas de SilverLight. Contina 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 implementacin de
juegos utilizando XNA. En primer lugar, reconoceremos los objetos que trabajan
en una aplicacin de juegos; luego implementamos una aplicacin de juegos con
animacin. Se concluye con la realizacin de una aplicacin de juegos con
animacin con los formatos efectuados en el curso.

CIBERTEC

CARRERAS PROFESIONALES

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

RED DE CONTENIDOS

Desarrollo de Aplicaciones Mviles II

Construyend
o una
aplicacin
Windows
Phone

Introduccion
WP7

CIBERTEC

Controles
SilverLight

Acceso a
datos por
Windows
Phone

Datos
locales

Datos
remoto y
WCF

Desarrolland
o
aplicaciones
XNA en
Windows
Phone

Objetos
Sprites

Animacin

CARRERAS PROFESIONALES

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

UNIDAD DE
APRENDIZAJE

CONSTRUYENDO UNA APLICACIN WINDOWS PHONE


LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno desarrolla procesos de diseo en una aplicacin
Windows Phone utilizando los controles estndares de la aplicacin SilverLight,
navegando entre las pginas, definiendo la textura y diseo del layout de una pgina.

TEMARIO
Unidad de aprendizaje 1: Construyendo una Aplicacin Windows Phone
1.1 Tema 1 : Introduccin a Windows Phone
1.1.1. : Plataforma del Windows Phone
1.1.2. : Ciclo de vida de una Aplicacin Windows Phone
1.1.3. : Requerimientos de Windows Phone
1.2 Tema 2 : Trabajando con SilverLight en Windows Phone
1.2.1. : Introduccin a Silverlight
1.2.2. : Controles en SilverLight
1.2.3. : Laboratorio
1.3 Tema 3 : Navegando entre pginas, manejo de estados
1.3.1. : Navegando entre pginas
1.3.2. : Manejo de estados
1.3.3. : Laboratorio
ACTIVIDADES PROPUESTAS
Los alumnos implementarn una aplicacin Mobile para el manejo de imgenes,
videos y archivos de audio.
Los alumnos aprendern a navegar entre pginas, enviando datos entre ellas.

CIBERTEC

CARRERAS PROFESIONALES

10

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

1.1

11

INTRODUCCION A WINDOWS PHONE

Microsoft Windows Phone es un gran consumidor de aplicaciones mviles, porque


tiene todas las caractersticas a las que los usuarios se han acostumbrado con el
iPhone de Apple y los telfonos inteligentes que utilizan tecnologa Android, tales
como el Motorola Droid y HTC.

Estas caractersticas incluyen multi-touch. Una interfaz que implementa un nuevo


diseo moderno llamado METRO, los servicios de redes sociales como Facebook, y
soporta cuentas de correo electrnico tales como Yahoo, Hotmail, Google y AOL.
Incluso, si usted es un usuario corporativo, brinda soporte para Microsoft Exchange.

Excepcionalmente, el telfono cuenta con una versin de Microsoft Office que puede
utilizar para leer, editar, guardar y sincronizar los archivos de Word, hojas de clculo
Excel y otros formatos de Office, por lo que es un gran sistema operativo para el
telfono de aquellos que utilizan Office en casa o en la oficina. Windows Phone
tambin se puede integrar con Xbox Live, lo que lo convierte en una gran opcin para
los jugadores.
Microsoft Windows Phone utiliza el software de Zune para sincronizar las
aplicaciones instaladas, imgenes, msica, las copias de seguridad y actualizaciones
flash del sistema operativo.

Microsoft tambin 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
msica. Este centro tambin 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 telfono, lo que le facilita al programador desarrollar
una aplicacin sin tener que preocuparse de las especificaciones de los cdigos
dispositivos especficos. Para cualquier versin futura del telfono, se garantiza que la
aplicacin que se escribi hoy funcionar maana independientemente de la marca del
telfono.

CIBERTEC

CARRERAS PROFESIONALES

12

Para Windows Phone, el lenguaje elegido es C#. Los desarrolladores de Visual Basic
(VB) tendrn 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 programacin 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 comn 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, reflexin, internacionalizacin, recursos, manejo de hilos o threads, y
seguridad.

La plataforma Windows Phone aplicacin 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 diseadores tienen una gran flexibilidad en la creacin 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 basndose en vectores para luego exportarlas a XAML.

Por otro lado, XNA se utiliza principalmente para la creacin de juegos ya que viene
con motores especializados que permiten crear tanto juegos basados en bucles como
en 3D.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

13

1.1.1.1 SILVERLIGHT EN WINDOWS PHONE

Silverlight utiliza la tecnologa web que permite ver el contenido de las aplicaciones de
Internet as como la tecnologa Flash.

Desde de una aplicacin de Silverlight no se puede acceder a cualquier sistema


operativo a menos que sea a travs de las funciones API proporcionadas
especficamente. 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 slo proporciona las funciones API para desarrolladores y limita el acceso al
sistema operativo nativo.

Tambin se utiliza Silverlight XAML, para crear grficos basados en vectores y crear
animaciones. Cualquier diseador familiarizado con las aplicaciones basadas en
vectores, como Adobe Illustrator y Microsoft Expression Design, puede crear
fcilmente elementos muy visuales exportarlos a XAML. Esto significa que los
diseadores tienen un control total sobre el diseo y la apariencia, lo que hace a
Silverlight una opcin muy potente para crear aplicaciones orientadas al consumidor.
XAML tambin proporciona una funcin 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 tecnologa nueva. Se utiliza en la creacin de juegos para la consola


XBOX utilizando cdigo administrado. Trabajar con XNA para juegos es una eleccin
natural, ya que Windows Phone tiene XBOX LIVE integrado.

Los juegos de XBOX son fcilmente instalados en una aplicacin Windows Phone. Lo
nico en lo que los desarrolladores de juegos de XBOX tienen que preocuparse es en
la resolucin de pantalla, la misma que se puede ajustar fcilmente. 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.

CIBERTEC

CARRERAS PROFESIONALES

14

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 acelermetro, el GPS, el uso del comps, la radio
FM, los SMS, el correo electrnico, las llamadas de telfono, la lista de contactos, la
cmara, y otras caractersticas que requieren un dispositivo fsico.

Sin embargo, existe una tcnica 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 telfono real. Por ejemplo, con extensiones reactivas,
puede simular el acelermetro y las lecturas del GPS para que el emulador pueda
trabajar sin la necesidad del dispositivo.

1.1.1.4 DISEO 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 diseo
denominado METRO. Este estilo de diseo deriva de la industria del transporte, pues
se basa en los carteles informativos de los aeropuertos y, sobre todo, de las

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

15

estaciones de tren. Comprende una tipografa y organizacin grfica que facilita el


acceso a los recursos del dispositivo as como la simpleza y claridad de la informacin.

Diseo Metro sigue estos principios:


Preocupacin por limpieza, la luz y la tipografa, ya que los consumidores van a utilizar
el mvil durante sus desplazamientos para leer el correo electrnico, los SMS, revisar
su Facebook y publicaciones en Twitter.
Perfecta integracin de hardware y software.
Soporte a gestos para permitir una experiencia de usuario multitctil de clase mundial.
Centrado en la informacin de modo que la misma sea fcilmente accesible para el
usuario.

Puede encontrar ms informacin sobre el diseo Metro en la siguiente direccin


electrnica: http://go.microsoft.com/fwlink/?LinkID=183218.

1.1.2 CICLO DE VIDA DE UNA APLICACIN WINDOWS PHONE


La siguiente figura ilustra un alto nivel de observacin del ciclo de vida de una
aplicacin.

Developer

Application
Storefront

Deploy
Update
Reject

Feedback

Instal
Uninstall

Publish
Windows
Phone
Application

Purchase

Registration

Download
SDK
Guidelines
Content

Consumer
Rating
Comments

Windows Phone Marketplace


AppHub
http://developer.windowsphone.com
Manage
Account

CIBERTEC

Manage
Application

Cetification
Signing
Submission

Reports
Analytics

Application
Category

CARRERAS PROFESIONALES

16

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 fsico. Recuerde que puede agregar
hasta tres dispositivos. El entorno de desarrollo ser Visual Studio y/o Expression
Blend, tanto para la construccin como para la depuracin, junto con el emulador o el
dispositivo que se registr. Una vez que la aplicacin es creada, es necesario
presentar la solicitud para la certificacin de la aplicacin.

A fin de garantizar que su solicitud pasar el proceso de certificacin, sera


conveniente que lea y entienda el documento de certificacin de aplicaciones que se
encuentran en la siguiente direccin electrnica:
http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx.

Como parte del proceso de certificacin, su aplicacin pasa a travs de una serie de
validaciones sobre la aplicacin misma y las polticas de contenido, tales como:
cdigo, idioma del telfono y requisitos de las imgenes. Tambin se hacen pruebas
de fiabilidad, rendimiento, gestin de recursos, uso de la funcionalidad de telfono y la
seguridad. La certificacin de la aplicacin 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 aplicacin pasa el proceso de certificacin, ser desplegada en el


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

El usuario de la aplicacin deber proporcionar evaluaciones y comentarios sobre su


apreciacin de la aplicacin. Los informes pueden ser generados por usted desde el
Hub de Aplicaciones. Basndose en la informacin que recibe, puede optar por
desplegar una actualizacin que comprenda las correcciones de los errores de la
aplicacin y/o nuevas caractersticas. El objetivo final es crear una aplicacin
adecuada para que los consumidores la descarguen y utilicen.

La participacin en el Marketplace tiene un costo determinado por Microsoft. Dicho


pago otorga una serie de derechos de publicacin. Finalmente, a partir de la venta de
sus aplicaciones, usted recibir el dinero correspondiente a las ganancias respectivas
a travs de un depsito en banco bajo ciertas condiciones especficas de Microsoft.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

17

1.1.3 REQUERIMIENTOS DE WINDOWS PHONE


1.1.3.1 PANTALLA
Para empezar, todos los dispositivos Windows Phone tendrn una pantalla con un
ancho VGA (WVGA) y resolucin de 480 pxeles de ancho por 800 pxeles 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 botn de retroceso, un botn
de Windows y un botn de bsqueda. 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 montn de combinaciones de mecanismos de control.
Sin embargo, al mismo tiempo, esta resulta una limitacin pues significa que no habr
control de direccin disponible, lo cual es muy til en algunas aplicaciones o juegos.
En su lugar, podemos utilizar la pantalla tctil para la entrada de datos o comandos.
Existen muchas maneras ingeniosas y creativas en las que esto se puede hacer,
desde el diseo de juegos en los que el usuario interacta al tocar objetos en la
pantalla, hasta la presentacin de botones de movimiento en la parte inferior de la
pantalla.
1.1.3.3 PROCESADOR
La especificacin 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 ms rpidas, pero, como
mnimo, significa que una cantidad significativa de potencia de procesamiento estar
disponible en todos los dispositivos.
1.1.3.4 HARDWARE GRAFICO
La API de grficos para juegos de alto rendimiento es XNA, una biblioteca de gran
alcance basada en la tecnologa DirectX que ha sido la base de los juegos de PC de
escritorio de la ltima dcada. La implementacin de Windows Phone no es tan

CIBERTEC

CARRERAS PROFESIONALES

18

poderosa como la del escritorio, pero an as tiene capacidades muy impresionantes


para un dispositivo mvil. Junto a la API est la aceleracin de hardware de grficos
que el telfono tiene que manejar para dar soporte a movimientos rpidos y escenas
complejas en 2D y 3D.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

19

LABORATORIO 1.1

Creacin de un Proyecto Windows Phone


Implementa una aplicacin Windows Phone donde al ejecutarse nos muestre un
Saludo

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone:

Seleccione la opcin Create New Project.

Seleccione la
opcin New Project
para crear un nuevo
proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el


proyecto

CIBERTEC

CARRERAS PROFESIONALES

20

Seleccione la plantilla
Windows Phone en
Visual C#

Asigne nombre al
proyecto

2. Estructura del Proyecto Windows Phone


Creada la nueva solucin 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 diseo que muestra la interfaz de usuario generada como se describe en
el XAML.

GUI del Windows


Phone

Estructura del Main


formato XML

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

21

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


como las Grillas y bloques de texto. A continuacin, detallamos la estructura del
archivo Main.

3
4

Donde:
1. Es el contenedor XAML objeto, es del tipo PhoneApplicationPage, que a su vez es
parte de la librera o NameSpace Microsoft.Phone.Controls.
2. El NameSpace o librera Microsoft.Phone.Controls

es mapeado a la librera

PhoneNavigation XAML. Esta librera tambin 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 diseo ms verstil que Silverlight

ofrece y, probablemente, el que va a utilizar ms 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 tamao de Auto, que automticamente cambia la altura de la primera
fila (fila define la altura, mientras que la columna define la anchura). A continuacin,
establecemos el segundo fila que bsicamente le dice al motor de diseo, todo el
resto de la espacio disponible ser utilizada por la segunda fila.

CIBERTEC

CARRERAS PROFESIONALES

22

5. Esta cuadricula (TitleGrid) tiene dos objetos TextBlock que muestran el nombre de
la aplicacin y de la pgina. Tenga en cuenta que la TitleGrid se est asignando a
la primera fila con Grid.Row = "0". El objeto TextBlock slo muestra la cadena que
se asigna a su propiedad Text.
6. Aqu es donde se colocar el contenido de su aplicacin. El XAML predeterminado
que genera SilverLight para Windows Phone, es slo un punto de partida. Usted
puede modificarlo, actualizarlo o reemplazarlo por completo.

3. Agregando controles al Page


Toda aplicacin Windows utiliza una barra de herramientas para agregar controles a la
Pgina (Page). Agregue los controles al Page, tal como se muestra en la figura.

Arrastre los
controles dentro
de la Grilla

Declarativas de
los controles en
XAML

A continuacin, trabajamos con las propiedades del control TextBox:

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

23

Propiedad
Text:
Mensaje

Propiedad
Name:
txtMensaje

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

Propiedad
Content: Ok

Propiedad
Name:
btnHello

CIBERTEC

CARRERAS PROFESIONALES

24

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


propiedades (presione la tecla F4) y seleccionamos el botn Eventos.

Seleccione la pestaa
Events del control
btnHello

Para programar el evento


Click, seleccione el evento
y hacer doble Click.

A continuacin, programe el evento Clic del botn de la consulta, tal como se muestra

En el evento Click del


button, programe la
siguiente sintaxis: toda
sintaxis debe terminar en
punto y coma

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

25

Antes de ejecutar el proceso debemos cambiar el estado de la ejecucin a tipo


Emulator

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

Para ejecutar el emulador del proyecto, presione la tecla F5. Presione el botn OK, el
cual le dar la bienvenida.

CIBERTEC

CARRERAS PROFESIONALES

26

Diseando la Pgina
Cuando implementamos una aplicacin y deseamos brindar ciertas caractersticas al
Layout: color de fondo, color de letra, mrgenes, etc. Estas ediciones se realizan en
Microsoft Expression.

Para disear una o ms pginas de un


proyecto, seleccione desde el Menu Inicio,
Microsoft Expression Blend 4, tal como se
muestra.

Al cargar por primera vez el software,


seleccione desde la ventana Customer
Experience, la opcin I dont want to
join luego presione la opcin OK.

Cerrar esta ventana presionando el botn


Close.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

27

Para trabajar con Microsoft Expression, debemos


abrir el proyecto que estamos trabajando, tal como
se muestra, seleccione la opcin Open
Project/Solution.

Seleccione el
archivo
appPhone.sln

Selecciona el proyecto, el cual


tiene la extensin .sln. A
continuacin presione el botn
Abrir.

2. Seleccione la
opcin Brush:
Background

1. Seleccione desde
objetos: LayoutRoot

CIBERTEC

3. Editar el color, tal


como se muestra

CARRERAS PROFESIONALES

28

Diseando el control TxtMensaje.

2. Seleccione la
opcin Brush:
BorderBrush

1. Seleccione desde
objetos: txtMensaje

3. Editar el color, tal


como se muestra

1. Seleccione la
opcin Brush:
BackGround

2. Editar el color, tal


como se muestra

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

29

Para guardar el proyecto, seleccione desde la opcin


de Menu File, la opcin 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
opcin Yes to All.

Archivo editado actualizado en el proyecto Windows Phone.

CIBERTEC

CARRERAS PROFESIONALES

30

Cambio de Orientacin de la pantalla


Al ejecutar el proyecto, el emulador levanta la aplicacin, si cambia de orientacin,
debera cambiar el sentido de la pantalla, para ello qu debo hacer?

Cambio de orientacin
de la pantalla

En el constructor de la Pgina MainPage(), defina el comportamiento de la pgina


cuando esta realice la rotacin a travs de la siguiente sentencia de programacin:

Sentencia para controlar


la rotacin de la pgina

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

31

Resumen
Microsoft Windows Phone es un gran consumidor de telfono, porque tiene todas
las caractersticas a las que los usuarios se han acostumbrado con los
smartphones.
.NET proporciona es una base comn 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 creacin de redes, el texto, la ubicacin, la reflexin, la globalizacin, recursos,


tiempo de ejecucin, la seguridad y el diagnstico.
Silverlight utiliza la tecnologa web y se usa bsicamente para aplicaciones
emprsariales y juegos sencillos en 2D.
XNA se utiliza en la creacin de juegos de Xbox, utilizando cdigo 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 acelermetro, el GPS, comps, radio FM, SMS, correo
electrnico, llamadas de telfono, lista de contactos, la cmara y otras
caractersticas que requieren un dispositivo fsico.
Si desea saber ms acerca de estos temas, puede consultar las siguientes
pginas:
http://www.lavilladigital.com
Aqu hallar un tutorial de aplicaciones de Windows Phone.
http://libreyextremo.blogspot.com
En esta pgina, hallar algunos ejercicios sobre aplicaciones en Windows
Phone.

CIBERTEC

CARRERAS PROFESIONALES

32

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 telfono, as como nuevos controles.
En este captulo, usted aprender acerca de estas optimizaciones.

1.2.2 CONTROLES EN SILVERLIGHT


Windows Phone incluye la mayora de los controles bsicos de Silverlight 3. La
compatibilidad con Desktop es muy alta, pero la mayora de los

controles de

Windows Phone tienen pequeas 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 diseo METRO.

A continuacin, 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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

Image

33

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 reproduccin con el dispositivo Media Stack

MultiScaleImage

Hardware de procesamiento acelerado

Password

Soporta SIP. Retraso visual del carcter escrito antes de


convertirse en carcter contrasea

ProgressBar

Temas

RadioButton

Gestor Tap antes del Click, Temas

ScrollViewer

Barras de desplazamiento no son recurribles, son


indicadores de posicin.

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 ncleo de Silverlight con un conjunto de controles


optimizados para la forma del telfono, para el soporte del modelo de navegacin de
Windows Phone y controles que admiten la apariencia Metro.

A. Control WebBrowser
Las aplicaciones Windows Phone estn 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 mtodo Navegate () permite desplazarse a cualquier Uri.

CIBERTEC

CARRERAS PROFESIONALES

34

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


el control. Dado que el cdigo HTML se pasa como una cadena, puede ser el
contenido dinmico, que proviene de la Internet, pero es ledo como un Stream, o
puede ser un archivo local, ya sea en el almacenamiento aislado o su aplicacin.

Para controlar la navegacin, el control expone los eventos Navigating y Navigated:


El evento Navigating se desencadena antes que la navegacin suceda, donde se
puede asignar la propiedad Cancel en el NavigationEventArgs pasado en el evento
para evitar que el usuario de navegacin de distancia.
El evento Navigated se activa cuando el nuevo objetivo de Uri se abre y se descarga.

B. PhoneApplicationFrame
Dentro de una aplicacin, la navegacin desde un Page a otro Page es implementada
por la clase PhoneApplicationFrame y la clase NavegationService.

Usando PhoneApplicationFrame no se puede ejecutar el mtodo GoForward(); la


propiedad CanGoForward siempre ser falsa.

CacheSize es siempre 0; dicho ajuste produce una excepcin.

No hay integracin 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 mrgenes para el cromo del telfono - 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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

35

C. PhoneApplicationPage
PhoneApplicationPage tiene la funcionalidad de navegacin para ir junto con Marco,
pero tambin incluye tres otras caractersticas crticas para cualquier aplicacin
Windows Phone: Orientacin, De mens (a travs de la ApplicationBar) e integracin
de tareas (Selectores y Lanzadores).

Por navegacin, PhoneApplicationPage tiene mtodos virtuales para NavigatedTo,


NavigatingFrom y NavigatingTo.

PhoneApplicationPage tiene una referencia hacia NavigationService que el Frame


utiliza y el NavigationContext pasado hacia la pgina. El NavigationContext contiene
una cadena de consulta que es utilizada en el URI de la pgina.
Ejemplo.-

Uso

NavigationContext

para

leer

un

QueryString

pasado

al

PhoneApplicationPage.

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;
}
}

D. Orientation
Tambin desencadenado de manera similar como Navigation, va mtodo virtual,
puedes sobrescribirse:

OrientationChanging() se dispara antes de los cambios de orientacin y puede


cancelar el cambio

OrientationChanged() permite conocer que la orientacin ha sido cambiada.

Una PhoneApplicationPage puede controlar la orientacin asignndolo en la propiedad


SupportedOrientations. Una pgina puede elegir

ser Portrait o Landscape or

PortraitOrLandscape. Por defecto es Portrait.

CIBERTEC

CARRERAS PROFESIONALES

36

E. ApplicationBar
El ApplicationBar es una barra de men para la aplicacin. La meta para el
ApplicationBar es proporcionar un men o barra de herramientas que proporciona fcil
acceso a las tareas comunes en la aplicacin. Cada PhoneApplicationPage puede
tener su propia ApplicationBar, aunque se recomienda que no cambie demasiado las
opciones en cada pgina. Tambin puede ocultar o mostrar la barra de men. Un
ApplicationBar

puede

contener

un

botn

de

una

hilera

(instancias

de

ApplicationBarIconButton) o cualquier nmero de tems de men (los casos de


ApplicationBarMenuItem). El lmite para el nmero de botones en la ApplicationBar es
de cuatro. No hay lmite en el nmero de elementos de men, pero cinco es el lmite
recomendado para evitar el desplazamiento.

F.

Date and Time Pickers

Los controles Date and Time Picker son utilizados para seleccionar fecha y horas del
telfono. Estos controles son optimizados para touch; se puede usar un simple touch o
roleando en cualquier campo de la pantalla.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

37

G. Choosers y Launchers
Choosers y Launchers son diferentes tipos de componentes. Son anlogamente los
cuadros de dilogos en Windows o SilverLight, Chooser y Launchers. Son utilizados
para comunicar dentro de una aplicacin 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 informacin sobre ella es regresada de nuevo a la aplicacin de llamada.

Launchers son diferentes de los Choosers, porque no devuelven datos. Ellos ms bien
desencadenan la accin. Un ejemplo de un Launcher es la API utilizada para colocar
una llamada telefnica. En este caso, el desarrollador invoca el API y el usuario
vuelve, de nuevo, a la aplicacin de llamada una vez que la llamada ha terminado.

Las tareas estn bajo el nameSpace o librera Microsoft.Phone.Tasks, donde se


pueden encontrar los siguientes selectores:

CameraCaptureTask

EmailAddressChooserTask

PhoneNumberChooserTask

PhotoChooserTask

SaveEmailAddressTask

SavePhoneNumberTask.

En los launchers, encontraremos un MarketplaceLauncher, y MediaPlayerLauncher.

CIBERTEC

CARRERAS PROFESIONALES

38

LABORATORIO 2.1
Creacin de un Proyecto Windows Phone
Implementa una aplicacin Windows Phone para navegar por la Web

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone:

Seleccione la opcin Create New Project.

Seleccione la opcin
New Project para
crear un nuevo
proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la
plantilla Windows
Phone en Visual C#

Asigne nombre al
proyecto

2. Diseo

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

39

A continuacin vamos a disear el Page que permitir realizar el proceso de


navegacin

textBox, Name=txtDireccion
button, Name= Button1

WebBrowser, Name= webBrowser1

3. Programacin
En este proceso, codificamos el proceso de la navegacin, el cual se realiza sin la
debida validacin, la idea es Cmo validamos el proceso?

Programando con validacin, donde evaluamos varios aspectos del proceso:

CIBERTEC

CARRERAS PROFESIONALES

40

Si la URL est vaca.

Si la URL contiene about.

Si la URL no inicia con http://

Si est correcto, entonces procedemos a Navegar

Si la cadena est vaca 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 excepcin

Presiona F5, para ejecutar la aplicacin.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

41

LABORATORIO 2.2

Creacin de un Reproductor de Sonido


Implementa una aplicacin Windows Phone para reproducir un archivo de formato
MP3, es decir, archivo de msica.

1. Diseo del Formulario

Control MediaElement,
name: mediaElement1

Control Button, name:


btnPlay

Control Button, name:


btnStop

Control Slider, name:


slider1

2. Programacin
En el evento Loaded del Page, definimos el origen del control MediaElement, tal como
se muestra:

Definir el Source del


control con la ubicacin
del archivo mp3

CIBERTEC

CARRERAS PROFESIONALES

42

A continuacin, programa el botn Stop y Play para ejecutar el control Media Element,
tal como se muestra.

Al presionar el botn Play,


iniciar el mtodo Play del
control MediaElement1
Al presionar el botn Stop,
detiene el proceso del
control MediaElement1

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


ValueChanged del control slider1, el cual medir el tiempo transcurrido del
reproductor.

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

Presione F5 para ejecutar la aplicacin.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

43

LABORATORIO 2.3

Creacin de una Calculadora


Implementa una aplicacin Windows Phone para crear una calculadora e implementar
sus operaciones bsicas: suma, resta, producto y divisin.

1. Inicio del Proyecto


Seleccione la opcin Create New Project

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

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK.

Seleccione el
tipo de Page

Asigne el nombre a la Pgina,


presione el botn Add

2. Diseo
A continuacin, vamos a disear el Page que permitir crear la calculadora.

Control Image

CIBERTEC

CARRERAS PROFESIONALES

44

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.

Propiedad Source del


control Image

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


Color de letra: ForeGround. Tamao, tipo y estilo de letra: Text.

ForeGround permite dar color


de letra

Propiedad Text, asigna el


tamao y tipo de letra

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

45

Como siguiente paso, diseamos la pgina para realizar el proceso de la calculadora,


tal como se muestra.

3. Programacin

Declare e inicialice las variables


del proceso a nivel Class
PageCalculator.

CIBERTEC

CARRERAS PROFESIONALES

46

Defina la funcin Calcula, donde definimos tres parmetros, los cuales realizan el
clculo aritmtico segn el signo.

Definir los eventos: numero_Click y el evento signo_Click.


El primer evento trabaja con los button numrico y el segundo evento trabaja con los
button signo (+, - *).

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

47

Para enlazar los eventos a cada button, seleccione el control Button, tal como se
muestra. En la ventana de propiedades, seleccione la pestaa 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

CIBERTEC

CARRERAS PROFESIONALES

48

En el button = programe el
evento respectivo, hacer doble
click al evento Click.

Presione la tecla F5 para ejecutar.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

49

LABORATORIO 2.4
Creacin de una Barra de Aplicaciones
Implemente una aplicacin Windows Phone para crear una barra de aplicaciones en
nuestra Pgina Principal.

1. Inicio del Proyecto


Seleccione la opcin Create New Project

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

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK.

Seleccione el tipo
de Page

Asigne el nombre a la Pgina,


presione el botn Add

2. Diseo
Antes de iniciar el proceso, agregue algunos archivos
de imgenes de extensin .png: calculador.png,
internet.png, reproductor.png.

CIBERTEC

CARRERAS PROFESIONALES

50

Agregue un control Image a la pgina, 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

3. Programacin
Defina el nameSpace Microsoft.Phone.Shell, asi como el objeto ApplicationBar
llamado Bar, tal como se muestra.

NameSpace
Microsoft.Phone.Shell

Definir a Bar de tipo


ApplicationBar

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

51

En el constructor, definiremos las propiedades del Bar (ApplicationBar), adems


agregamos tres button, definiendo la propiedad image, as como la propiedad text, tal
como se muestra:

Instanciar el objeto Bar y


asignarle algunas propiedades
Asignar al Application bar del
Page el objeto Bar
Definir 3 buttons de tipo
ApplicationBar

Agregar los buttons b1,


b2 y b3 a Bar

Ejecute el proyecto, al cargar la pgina Principal, se visualiza


la lista de botones de la barra de aplicaciones.

CIBERTEC

CARRERAS PROFESIONALES

52

Definiendo el mtodo a los botones llamado botn_Click


El mtodo botn_Click,
ejecuta el proceso de los
botones de la barra de
aplicaciones

Para enlazar el evento de cada botn, este proceso se realiza en el constructor.

Enlazar el evento de cada


botn al mtodo
botn_Click tal como se
muestra

Presione F5 para ejecutar y verifique que cada botn muestre su mensaje.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

53

Resumen
Windows Phone incluye la mayora de los controles bsicos de Silverlight 3. La
compatibilidad con DeskTop es muy alto, pero la mayora de los controles de
Windows Phone tienen pequeas 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 ncleo 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 travs de la propiedad Source,
utilizando el mtodo 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 aplicacin, la navegacin 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 navegacin para ir junto con
Marco, pero tambin incluye tres otras caractersticas crticas para cualquier
aplicacin Windows Phone: Orientacin, De mens (a travs de la ApplicationBar),
e

integracin

de

tareas

(Selectores

Lanzadores).

Por

navegacin,

PhoneApplicationPage tiene mtodos virtuales para NavigatedTo, NavigatingFrom


y NavigatingTo.
El ApplicationBar es una barra de men para tu aplicacin. La meta para el
ApplicationBar es proporcionar una respuesta coherente, de fcil acceso, men o
barra de herramientas que proporcione fcil acceso a las tareas comunes en la
aplicacin. 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
anlogamente los cuadros de dilogos en Windows o SilverLight, Chooser y

CIBERTEC

CARRERAS PROFESIONALES

54

Launchers. Son utilizados para comunicar dentro de una aplicacin SilverLight al


Shell o a otras aplicaciones
Si desea saber ms acerca de estos temas, puede consultar las siguientes
pginas:
http://www.lavilladigital.com
Aqu hallar un tutorial de aplicaciones de Windows Phone.
http://libreyextremo.blogspot.com
En esta pgina, hallar ejercicios sobre aplicaciones en Windows Phone.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

1.3

55

NAVEGACION ENTRE PGINAS, MANEJO DE ESTADOS

1.3.1 NAVEGANDO ENTRE PGINAS


En este captulo, vamos a hablar acerca de cmo navegar entre pginas en Silverlight
para Windows Phone. Hay dos razones por las que sta es una leccin importante.
Primero, porque no se debe crear toda la aplicacin en un nico archivo XAML.
Segundo, porque al seguir las reglas la aplicacin podr automticamente tomar
ventaja del botn de retroceso (Back) incorporado en el dispositivo. Esto permitir a
los usuarios volver desde la aplicacin a lo que estaban haciendo anteriormente. Hay
varias formas de navegar entre pginas, pero vamos a enfocarnos en una a la que
vamos a llamar Navegacin Simple de Web. Navegaremos entre pginas de igual
manera como si fuesen pginas de HTML.
1.3.1.1 Navegando utilizando control Hyperlink
Tenemos varias pginas y queremos darle al usuario una forma de moverse entre
ellas. Construyamos una interface grfica simple de navegacin 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 navegacin entre dos pginas.

Para establecer el vnculo entre pginas a travs del control HyperlinkButton, se puede
hacer usando slo 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" />

CIBERTEC

CARRERAS PROFESIONALES

56

<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
vnculos e ir a la pgina. Al usar el botn de retroceso () podrn ir a la pantalla
previa. Si se retrocede lo suficiente, se sale de la aplicacin al pasar ms all de su
primera pantalla.

1.3.1.2 Navegando utilizando comandos de navegacin


Se puede navegar entre pginas utilizando cdigo en vez de usar slo 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 cdigo C#
siguiente, vern que se averigua cul botn ha sido pulsado y luego se va a la pgina
apropiada. La funcin original del botn de retroceso todava est disponible en su
totalidad.

En XAML
<Button Content="Pasta"
Height="72"
Name="BotnPasta"
Width="160"
Click="Botn_Click"/>
<Button Content="Queso"
Height="72"
Name="BotnQueso"
Width="160"
Click="Botn_Click" />
<Button Content="Salsa"
Height="72"
Name="BotnSalsa"
Width="160"
Click="Botn_Click" />

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

57

En C#
private void Botn_Click(object sender, RoutedEventArgs e){
Button botnPulsado = sender as Button;
switch (botnPulsado.Name) {
case "BotnPasta":
NavigationService.Navigate(new Uri("/Pasta.xaml",
UriKind.Relative));
break;
case "BotnQueso":
NavigationService.Navigate(new
Uri("/Cheese.xaml",UriKind.Relative));
break;
case "BotnSalsa":
NavigationService.Navigate(new Uri("/Sauce.xaml",
UriKind.Relative));
break;
}
}

Como se puede ver, todas las acciones del usuario son registradas, permitindole
retroceder por el camino tomado con tan slo usar el NavigationService

1.3.1.3 Clase NavigationService


Las pginas necesitan a menudo integrarse con la navegacin de su host para
proporcionar compatibilidad de navegacin en las pginas. Sin embargo, como es
posible que una pgina no sepa cul ser su host en tiempo de ejecucin, no puede
integrarse directamente con los miembros de navegacin de su host.

En su lugar, puede intentar utilizar un servicio de navegacin, que es un servicio que


admite navegacin basada en el explorador y est encapsulado por la clase
NavigationService.

No

obstante,

no

puede

crear

su

propia

instancia

de

NavigationService.

El servicio de navegacin, 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 pgina no admite la navegacin.

CIBERTEC

CARRERAS PROFESIONALES

58

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


sobrecarga del mtodo 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 duracin de
una navegacin a travs de los eventos siguientes:

Navigating

Navigated

NavigationProgress

NavigationFailed

NavigationStopped

LoadCompleted

FragmentNavigation.

No todos los eventos se provocan cada vez que se produce una navegacin; el tipo de
navegacin 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 navegacin
(cancelada, detenida o con errores).

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

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

59

De forma predeterminada, NavigationService no almacena ninguna instancia de un


objeto de contenido en el historial de navegacin. En su lugar, NavigationService crea
una nueva instancia del objeto de contenido cada vez que se navega en l mediante el
historial de navegacin. Este comportamiento est diseado 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
navegacin a la siguiente.
A. Mtodos del NavigationService.

A continuacin listaremos algunos de los mtodos de navegacin:

Mtodo

Descripcin

GoBack

Navega hasta la entrada ms reciente del historial de


retroceso de navegacin, si lo hay.

GoForward

Navegue hasta la entrada ms reciente del historial de


avance de navegacin, si lo hay.

Navigate(Uri)

Navegue asincrnicamente a un contenido especificado por


un uniform resource identifier (URI).

Navigate(Uri,

Navegue asincrnicamente al contenido de origen situado

Object, Boolean)

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


contenga el estado de navegacin de procesamiento
durante la navegacin e incluya el contenido en el recinto.

RemoveBackEntry

Quita la entrada ms reciente del diario del historial de


retroceso de navegacin.

B. 1.3.2 Propiedades del NavigationService.

A continuacin, listaremos las propiedades de navegacin:

Mtodo

Descripcin

CanGoBack

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


historial de retroceso de navegacin.

CanGoForward

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


historial de avance de navegacin.

CurrentSource

CIBERTEC

Obtiene o establece una referencia al objeto que contiene el

CARRERAS PROFESIONALES

60

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 pginas, debemos especificar los parmetros y sus valores
en la URI (QueryString). Esta es, probablemente, la forma ms fcil de pasar datos de
una pgina a otra durante la navegacin.

Para pasar los parmetros y valores de una pgina a otra que necesita iniciar debe
aadir el signo de interrogacin (?) y luego especificar el parmetro junto con su valor.
Utilice Uri.EscapeUriString para evitar excepciones formato durante la
navegacin.

NavigationService.Navigate(
new Uri("/DestinationPage.xaml?parameter1=v1", UriKind.Relative) );
// O tambin
NavigationService.Navigate(
new Uri(string.Format("/DestinationPage.xaml?parameter1={0}",
Uri.EscapeUriString(stringParameterValue), UriKind.Relative)));

Para especificar mltiples parmetros utilice el carcter &.

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

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

61

1.3.2.1 Recuperar el paso de valores

Despus de pasar los valores a la pgina de destino, se puede obtener dichos valores
utilizando NavigationContext y la cadena de consulta. Por lo general, puedo
implementar este proceso dentro del mtodo OnNavigatedTo. Se puede obtener slo
los objetos de cadena de consulta, lo que significa que si ha pasado un nmero entero
como valor, tiene que convertir el valor, la cual se enva como cadena de caracteres, a
tipo entero.

protected override void OnNavigatedTo(NavigationEventArgs e){


string myParameterValue =
NavigationContext.QueryString["parameter1"];
base.OnNavigatedTo(e);
}

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 pgina 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 mtodo para asegurar el
funcionamiento normal de la clase base.

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);
}

CIBERTEC

CARRERAS PROFESIONALES

62

LABORATORIO 3.1

Proyecto Windows Phone para Navegar entre Pginas


Implemente una aplicacin Windows Phone para crear una barra de aplicaciones en
nuestra Pgina Principal para navegar entre diversas pginas.

1. Inicio del Proyecto


Seleccione la opcin Create New Project

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

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK.

Seleccione el tipo de
Page

Asigne el nombre a la Pgina,


presione el botn Add

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

63

2. Diseo

Antes de iniciar el proceso, agregue algunos


archivos de imgenes de extensin .png:
calculador.png, internet.png, reproductor.png.

Agregue un control Image a la pgina, 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

CIBERTEC

CARRERAS PROFESIONALES

64

3. Programacin
Defina el nameSpace Microsoft.Phone.Shell, as como el objeto ApplicationBar
llamado Bar, tal como se muestra.

NameSpace
Microsoft.Phone.Shell

Definir a Bar de tipo


ApplicationBar

Definiendo el mtodo a los botones, llamados botn_Click, donde al clickear un botn


de la barra de aplicaciones, navegamos al Page indicado.

El mtodo botn_Click,
ejecuta el proceso de los
botones de la barra de
aplicaciones

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

65

En el constructor, definiremos las propiedades del Bar (ApplicationBar), adems


agregamos tres button, definiendo la propiedad image, as como la propiedad text, tal
como se muestra:
Instanciar el objeto Bar y
asignarle algunas propiedades
Asignar al Application bar del
Page el objeto Bar
Definir 3 buttons de tipo
ApplicationBar

Enlazar el evento de cada


botn al mtodo
botn_Click tal como se
muestra

Agregar los buttons b1, b2 y


b3 a Bar

Presione F5 para ejecutar y verifique que cada botn muestre su mensaje.

CIBERTEC

CARRERAS PROFESIONALES

66

LABORATORIO 3.2

Pasando valores entre Pginas de una Aplicacin Phone


Implementa una aplicacin Windows Phone para navegar entre las pginas de una
aplicacin Phone

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone:

Seleccione la opcin Create New Project.

Seleccione la opcin
New Project para
crear un nuevo
proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

67

Seleccione la plantilla
Windows Phone en
Visual C#

Asigne nombre al
proyecto

Diseo.
Disea la pgina MainPage para dar la bienvenida al usuario, dibuje la pgina tal como
se muestra:

Control TextBlock, propiedad


Text: Bienvenido

Control Image, propiedad


Name: imgPrincipal

Control HyperLinkButton,
propiedad Content: Continuar

CIBERTEC

CARRERAS PROFESIONALES

68

Selecciona una imagen en


la propiedad Source, la
imagen asignada al control

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

Seleccione el evento
Click, hacer doble click
sobre el evento

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

69

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


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

En el constructor definir
la orientacin de la
pgina.
Definir el servicio de
navegacin, hacia la
pagina Acceso.xaml,
definiendo la ruta
Relativa

Diseo de Acceso.xaml
A continuacin, disee la pgina Acceso.xaml que permita el ingreso de un usuario a
la aplicacin. Dibuje la pgina tal como se muestra:

Cambiar la propiedad
a PortraitorLandscape

CIBERTEC

CARRERAS PROFESIONALES

70

Aadiendo Controles: A continuacin, disea los controles de la pgina,


configurando las propiedades de cada control.

Control TextBox: Name=txtUsuario


Control PasswordBox:
Name=pbClave
Control ListBox: Name=lbEmpresa

Control HyperLink: Content=Aceptar


Control HyperLink: Content=Retornar

En la propiedad Items, agregue los Items del ListBox:


Microsoft
Cibertec
UPC
Luego, presione el botn OK.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

71

Programacin: Programe los eventos Click del HyperLinkButton1 e


HyperLinkButton2

Direccionando hacia la
pgina Seleccin.xaml
enviando parmetros
nombre y empresa

Direccionando hacia
la pgina anterior

Diseo de Seleccion.xaml
A continuacin, disee la pgina Seleccion.xaml que permita el ingreso de un usuario
a la aplicacin. Dibuje la pgina tal como se muestra:

Control TextBlock: name=lblUsuario


Control TextBlock: name=lblEmpresa
Control Image: name=imgEmpresa

Control HyperLink: content=Retornar

CIBERTEC

CARRERAS PROFESIONALES

72

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


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

Programacin
Al cargar la pgina, recuperamos los valores del QueryString, tal como se muestra, y
visualizamos los datos.

Recupero los valores


enviados por la cadena de
consulta

Presione la tecla F5 para ejecutar.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

73

Resumen

Hay varias formas de navegar entre pginas, pero vamos a enfocarnos en una a la
que se va a llamar Navegacin Simple de Web. Navegaremos entre pginas de
igual manera como si fuesen pginas de HTML.
Si queremos ir de la primera a la segunda, podemos hacer uso de un control
HyperlinkButton. Este permite realizar la navegacin entre dos pginas. Para
establecer el vnculo entre pginas a travs del control HyperlinkButton, se puede
hacer usando slo XAML
Se puede navegar entre pginas utilizando cdigo en vez de usar slo 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
cdigo C# siguiente, vern que se averigua cul botn ha sido pulsado y luego se
va a la pgina apropiada.
El servicio de navegacin 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 pgina no admite la navegacin
De forma predeterminada, NavigationService no almacena ninguna instancia de un
objeto de contenido en el historial de navegacin. En su lugar, NavigationService
crea una nueva instancia del objeto de contenido cada vez que se navega a l
mediante el historial de navegacin. Este comportamiento est diseado 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 pginas, debemos especificar los parmetros y sus
valores en la URI (QueryString) es probablemente la forma ms fcil de pasar
datos de una pgina a otra durante la navegacin.
Para ello aadir ("?") signo de interrogacin para el final y luego especifique el
parmetro par = valor (Cdigo de verificacin abajo). Utilice Uri.EscapeUriString
para evitar excepciones formato durante la navegacin.
Despus de pasar los valores a la pgina de destino que se puede obtener
utilizando NavigationContext y la cadena de consulta. Por lo general, se puede
implementar este proceso dentro del mtodo OnNavigatedTo

CIBERTEC

CARRERAS PROFESIONALES

74

Si desea saber ms acerca de estos temas, puede consultar las siguientes


pginas:

Navegacin entre pginas


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

Clase NavigateService
http://msdn.microsoft.com/eses/library/system.windows.controls.page.navigationservice.aspx

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

75

UNIDAD DE
APRENDIZAJE

ACCESO A DATOS POR WINDOWS PHONE 7


LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino 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
2.1.1.
2.1.2.
2.2 Tema 4
2.2.1.
2.2.2.
2.2.3.
2.2 Tema 5
2.3.1.
2.3.2.
2.3.3.

:
:
:
:
:
:
:
:
:
:
:

Almacenamiento Local: IsolatedStoraged


Almacenamiento de datos en WP7
Laboratorio
Acceso a datos en Archivos XML
Acerca de XML
Manejo de datos en XML en aplicacin Phone
Controles enlazados a los datos
Windows Communication Foundation
WCF, Arquitectura
Caractersticas del WCF
Windows Phone y WCF

ACTIVIDADES PROPUESTAS
Los alumnos implementarn una aplicacin Mobile para el manejo archivos en el
equipo local

Los alumnos aprendern a definir y consumir servicios implementos por WCF y


ejecutados en una aplicacin mobile.

Los alumnos aprendern a consultar datos consumiendo servicios, desarrollados


en WCF y ejecutados en una aplicacin mobile.

CIBERTEC

CARRERAS PROFESIONALES

76

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

2.1

77

ALMACENAMIENTO DE DATOS EN WP7

La programacin 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 telfono donde podamos guardar y acceder a los datos de
nuestra aplicacin. 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 filosofa de
Windows Phone es utilizar Internet para guardar todos los datos. No es una mala
teora, porque los datos estaran a salvo de problemas con el dispositivo y seran
accesibles siempre.

Existen diferentes opciones para almacenar datos. Bsicamente son dos: Isolated
Storage o almacenamiento en local y almacenamiento en Base de Datos en la nube.
En este captulo, 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
aplicacin, que tiene las siguientes caractersticas:

Isolated Storage es un almacenamiento totalmente aislado de cualquier otra


aplicacin. Los programas son ejecutados en una especie de SandBox, en la cual
no disponen de acceso a ningn recurso de cualquier otra aplicacin.

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


accesible por cualquier aplicativo, es el MediaLibrary.

Cada aplicacin 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 informacin,
pues en dispositivos con tarjetas MicroSD de memoria externa, no es posible
determinar si la informacin est guardada en la memoria interna del propio
telfono 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.

CIBERTEC

CARRERAS PROFESIONALES

78

Con todas esas consideraciones iniciales, vamos a explicar cmo funciona, cmo se
almacena y cmo 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 aplicacin 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 configuracin de nuestra aplicacin.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

79

Por qu guardar la configuracin? Esta clase est preparada y diseada para


guardar esta informacin debido a que nos proporciona un IDictionary de tipo claveDictionary(Of

valor,

TKey,

TValue),

llamado Application

Settings

el cual

automticamente 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 mtodos para leer y grabar la
configuracin de nuestra aplicacin.

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;

}
}

De esta manera tan sencilla estamos grabando y leyendo cadenas de texto en nuestro
almacn local. Obviamente, esto es ejemplo simple para que se entienda el
funcionamiento. Para realizar algo ms eficaz deberamos 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 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();
}
}

CIBERTEC

CARRERAS PROFESIONALES

80

En algunas ocasiones, en el mtodo de grabacin se debe de indicar el mtodo Save


del

IDictionary.

Esto

puede

resultar

un

tanto

extrao

ya

que

la

clase

IsolatedStorageSettings implcitamente ya guarda la informacin del diccionario en el


momento de asignar un valor, pero debemos de remarcar la grabacin ya que es el
nico momento en donde nos puede sorprender con una excepcin de la clase
IsolatedStorageException, normalmente por espacio insuficiente.
La clase IsolatedStorageSettings no es ms que una clase especial que deriva de
IsolatedStorageFile. Si nos vamos un poco ms all, podemos decir que la estructura
del

almacenamiento

de

nuestro

WP7

es

\Aplications\Data\(ID

Aplicacin)\Data\IsolatedStore en donde Id Aplicacin es el SandBox de


nuestra propio programa, siendo en este caso C4EFD08D-D2A8-4595-966F435E7722E9DF.

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 estn restringidas al almacenamiento aislado
y no usan el sistema de archivos del sistema operativo.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

81

Clase

Descripcin

IsolatedStorageException

Excepcin que se produce cuando una operacin 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
especfico, 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 raz del sistema de archivos virtual se encuentra en una carpeta de usuario en el


sistema de archivos fsico. Cada identificador nico es proporcionado por el host y se
asigna a una raz distinta, por lo que cada aplicacin dispone de su propio sistema de
archivos virtual. Una aplicacin no puede salir de su propio sistema de archivos para
navegar a otro.

A.

Mtodos del IsolatedStoraged.

A continuacin listaremos los mtodos de la clase IsolatedStorageFile:

Mtodo

Descripcin

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.

CIBERTEC

CARRERAS PROFESIONALES

82

CreateFile

Crea un archivo en el almacn aislado.

DeleteDirectory

Elimina

un

directorio

del

mbito

de

almacenamiento aislado.
DeleteFile

Elimina un archivo del almacn aislado.

DirectoryExists

Determina si la ruta de acceso especificada hace


referencia a un directorio existente en el almacn
aislado.

FileExists

Determina si la ruta de acceso especificada hace


referencia a un archivo existente en el almacn
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 aplicacin que
llama desde el dominio de host virtual.

MoveDirectory

Mueve un directorio especificado y su contenido a


una nueva ubicacin.

MoveFile

Mueve un archivo especificado a una nueva


ubicacin 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 mayora de las situaciones en que, de otro modo, se
utilizara FileStream, como, por ejemplo, para construir StreamReader o StreamWriter.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

B.

83

2.4.1 Mtodos del IsolatedStorageFileStream

A continuacin listaremos los mtodos de la clase IsolatedStoragedFileStream:

Mtodo

Descripcin

BeginRead

Comienza

una

lectura

asincrnica.

FileStream.BeginRead(Byte[],

Int32,

Int32,

(Invalida

AsyncCallback,

Object)).
BeginWrite

Comienza

una

escritura

FileStream.BeginWrite(Byte[],

asincrnica.
Int32,

Int32,

(Invalida

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,

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

Int32)

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 bfer y despus


borra dicho bfer. (Invalida a FileStream.Flush()).

Read

Copia

en

una

matriz

bytes

del

actual

objeto

IsolatedStorageFileStream almacenado en el bfer. (Invalida a


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

Establece

la

actual

posicin

de

este

objeto

IsolatedStorageFileStream en el valor especificado. (Invalida a


FileStream.Seek(Int64, SeekOrigin)).
SetLength

Establece la longitud de este objeto IsolatedStorageFileStream


en

el

parmetro

value

especificado.

(Invalida

FileStream.SetLength(Int64)).
Write

Escribe

un

bloque

de

bytes

en

el

objeto

IsolatedStorageFileStream utilizando los datos ledos de una


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

CIBERTEC

CARRERAS PROFESIONALES

84

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


almacenamiento de la aplicacin mediante GetUserStoreForApplication.

using (var area = IsolatedStorageFile.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.

using (var area = IsolatedStorageFile.GetUserStoreForApplication())


using (var StreamEscritura = new IsolatedStorageFileStream(archivo,
FileMode.Create, area))

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


leer en el archivo.

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);
}
}

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

85

LABORATORIO 3.1

Manejo de Carpetas
Implementa una aplicacin para manejar carpetas en el almacenamiento local.

1. Inicio del Proyecto

Seleccione la opcin Create New Project

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

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK.

Seleccione el tipo de
Page

Asigne el nombre a la Pgina,


presione el botn Add

2. Diseo del Page

Control TextBox,
name: txtCarpeta
Control Button,
name: btnAdd
Control ListBox,
name: listBox1

CIBERTEC

CARRERAS PROFESIONALES

86

3. Programacin
Agregue las libreras para trabajar con almacenamiento local.

Librera para el manejo de


archivos

Defina el rea de almacenamiento local a nivel Class.

Define el rea de
almacenamiento de tipo User
para Aplicacin

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

87

Defina un mtodo para listar los directorios en el control ListBox1

Define la rutina listar()


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

Programa el evento Click del botn Add, el cual permita agregar un directorio al rea
de almacenamiento local.

Programa el botn Add,


donde evalua: si no existe
el directorio, crear el
directorio, ejecutar el
mtodo listar(); sino
mostrar un mensaje.

CIBERTEC

CARRERAS PROFESIONALES

88

LABORATORIO 3.2

Trabajando con Archivos


Implementa una aplicacin Windows Phone que permita almacenar archivo de texto
en el rea de almacenamiento local.

1. Diseo del Page


Disee el Page a continuacin

Control ListBox, name:


listBox1

Control TextBox, name:


txtContenido

Control Button, name:


btnSave

2. Programacin
Agregue las libreras para trabajar con almacenamiento local

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

89

Librera para el manejo de


archivos

Defina el rea de almacenamiento local a nivel Clase.

Define el rea de
almacenamiento de tipo User
para Aplicacin

CIBERTEC

CARRERAS PROFESIONALES

90

Defina un mtodo para listar los directorios en el control ListBox1.

Ejecutar el mtodo listar()


en el mtodo loaded.

Define el mtodo listar()


en el control listbox1

Programe el evento Click del botn Save, para guardar el archivo de texto en un
directorio seleccionado desde el control ListBox1

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

Presione F5 para ejecutar la aplicacin

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

91

LABORATORIO 3.3

Trabajando con Carpetas y archivos


Implementa una aplicacin 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. Diseo del Page


Disee el Page a continuacin

Control ListBox,
name: listBox1
Control ListBox,
name: listBox2
Control TextBox,
name: txtContenido

2. Programacin
Agregue las libreras para trabajar con almacenamiento local

Librera para el manejo de


archivos

CIBERTEC

CARRERAS PROFESIONALES

92

Defina el rea de almacenamiento local a nivel Clase.

Define el rea de
almacenamiento de tipo User
para Aplicacin

Defina un mtodo para listar los directorios en el control ListBox1

Ejecutar el mtodo listar()


en el mtodo loaded.

Define el mtodo listar() en


el control listbox1

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

93

Programe el evento SelectionIndexChanged en el control ListBox1, donde al


seleccionar una carpeta, liste sus archivos

En el evento
SelectionChanged del
listbox1, al seleccionar una
carpeta, listar 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
listbox2, al seleccionar el
archivo, visualizar el
contenido utilizando el
StreamReader

Definir el lector del archivo


StreamReader y leer todo
ReadtoEnd

CIBERTEC

CARRERAS PROFESIONALES

94

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 aplicacin tiene acceso a sus archivos, por eso se llama
almacenamiento aislado.
La clase IsolatedStorageSettings se utiliza principalmente cuando guardamos los
datos de la configuracin de nuestra aplicacin, 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 estn 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 especfico, 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 mayora de las situaciones en que, de otro modo,
se utilizara 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 aplicacin 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 ms acerca de estos temas, puede consultar las siguientes
pginas.
Almacenamiento local

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

95

http://www.lavilladigital.com/2011/03/22/almacenamiento-local-de-datos-enwindows-phone/
Manejo de carpetas y archivos locales
http://geeks.ms/blogs/creneses/archive/2010/10/07/wp7-almacenamiento-dearchivos-en-local.aspx
Almacenamiento local
http://tecnologia.rafaserna.es/2011/01/22/almacenamiento-en-windows-phone-7isolated-storage/

CIBERTEC

CARRERAS PROFESIONALES

96

2.2

ACCESO A DATOS EN ARCHIVOS XML

2.2.1 ACERCA DE XML


XML es una tecnologa, en realidad, muy sencilla que tiene a su alrededor otras
tecnologas que la complementan y la hacen mucho ms grande y con unas
posibilidades enormes y bsicas para la sociedad de la informacin.

XML, con todas las tecnologas relacionadas, representa una manera distinta de hacer
las cosas, ms 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 importantsimo en este mundo actual, que tiende a la
globalizacin y la compatibilidad entre los sistemas, ya que es la tecnologa que
permitir compartir la informacin de una manera segura, fiable, fcil. Adems, XML
permite al programador dedicar sus esfuerzos a tareas importantes, cuando trabaja
con los datos, ya que algunas tareas tediosas como la validacin de estos o el
recorrido de las estructuras corren a cargo del lenguaje y est especificado por el
estndar, 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 / despus 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>

Ntese, 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
continuacin hay un nivel definido, con elementos que son el nivel Number y el nivel

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

97

Enemy. Enemy tiene un valor de "Enemy1". Ahora, este valor podra 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 tambin
pueden tener atributos, que vienen despus 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 APLICACIN 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
aplicacin acceda a ellos mediante su conexin a internet. Aunque esto es totalmente
vlido podemos encontrarnos ocasiones en que deseemos almacenar cierta
informacin 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 libreras o


nameSpace para la consulta y actualizacin de sus registros:

System.XML

System.XML.LINQ

System.XML.Serialization

CIBERTEC

CARRERAS PROFESIONALES

98

2.2.2.1 Consulta de Datos: System.XML.LINQ

Contiene las clases para LINQ to XML. LINQ to XML es una interfaz de programacin
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 construccin funcional.

Consultar rboles XML mediante consultas LINQ.

Manipular rboles XML en memoria.

Validar rboles XML mediante XSD.

Usar una combinacin de estas caractersticas para transformar las formas de los
rboles XML.

A.

Clases

Nombre

Descripcin

XDocument

Representa un Documento XML

XElement

Representa un elemento XML

XNode

Representa el concepto abstracto de un nodo (elemento, comentario,


tipo de documento, instruccin 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.

XDocument doc = XDocument.Load(Archivo.xml);

LINQ to XML proporciona una interfaz de programacin XML en memoria que


aprovecha las caractersticas de .NET Language-Integrated Query (LINQ) Framework.
LINQ to XML utiliza las caractersticas ms recientes del lenguaje .NET Framework y

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

99

es comparable a una actualizada y rediseada interfaz de programacin 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 mayora de los lenguajes de programacin, se debe declarar una variable antes
de poder utilizarla. En una consulta LINQ, la clusula FROM aparece en primer lugar
para introducir el origen de datos (customers) y la variable de rango (cust).

var queryAllCustomers = from cust in customers


select cust;

Probablemente la operacin de consulta ms comn es aplicar un filtro en forma de


expresin booleana. El filtro hace que la consulta devuelva slo los elementos para los
que la expresin es verdadera. El resultado se genera mediante la clusula WHERE.
El filtro aplicado especifica qu elementos se deben excluir de la secuencia de origen.
En el ejemplo siguiente, slo se devuelven los customers cuya direccin se encuentra
en Londres (London).

var queryLondonCustomers = from cust in customers


where cust.City == "London"
select cust;

Puede utilizar los operadores lgicos AND y OR de C#, con los que ya estar
familiarizado, para aplicar las expresiones de filtro que sean necesarias en la clusula
where:

where cust.City=="London" && cust.Name == "Devon"


where cust.City == "London" || cust.City == "Paris"

A menudo es necesario ordenar los datos devueltos. La clusula ORDERBY har que
los elementos de la secuencia devuelta se ordenen segn el comparador
predeterminado del tipo que se va a ordenar. Por ejemplo, la consulta siguiente se
puede extender para ordenar los resultados segn la propiedad Name. Dado que
Name es una cadena, el comparador predeterminado realiza una ordenacin
alfabtica de la A hasta la Z.

CIBERTEC

CARRERAS PROFESIONALES

100

var queryLondonCustomers3 = from cust in customers


where cust.City == "London"
orderby cust.Name ascending
select cust;

La clusula GROUP permite agrupar los resultados segn la clave que se especifique.
Por ejemplo, podra especificar que los resultados se agrupen por City para que todos
los clientes de London o Pars estn en grupos individuales. En este caso, la clave es
cust.City.

var queryCustomersByCity = from cust in customers


group cust by cust.City;

Al finalizar una consulta con una clusula 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 iteracin en una consulta que genera una secuencia de grupos, debe
utilizar un bucle FOREACH anidado. El bucle exterior recorre en iteracin cada grupo y
el bucle interior recorre en iteracin los miembros de cada grupo.

Si debe hacer referencia a los resultados de una operacin de grupo, puede utilizar la
palabra clave INTO para crear un identificador con el que se puedan realizar ms
consultas. La consulta siguiente devuelve slo los grupos que contienen ms de dos
clientes:

var custQuery = from cust in customers


group cust by cust.City into custGroup
where custGroup.Count() > 2
orderby custGroup.Key
select custGroup;

En este ejemplo, vamos a cargar los datos del archivo XML llamado People. Utilizando
sintaxis LINQ vamos a leer el contenido del archivo xml.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

101

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")
};

2.2.2.2 Serializacin 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. Tambin hay que crear un objeto
para escribir el archivo en un documento o una secuencia, como Stream,
TextWriter o XmlWriter. A continuacin, hay que llamar al mtodo 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 mtodo Deserialize mientras se convierte el objeto
resultante en el tipo del objeto original (serializado).
Para controlar la serializacin, 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 informacin detallada como el nombre de
elemento XML real mediante la propiedad ElementName. Para obtener una lista
completa de todos los atributos, vea la informacin general de la clase
XmlSerializer.

CIBERTEC

CARRERAS PROFESIONALES

102

2.2.3 CONTROLES ENLAZADOS A LOS DATOS


El proceso de consulta de datos, implica la visualizacin de los mismos a travs de
controles de datos: Listas, Grillas, etc.

Para una aplicacin 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 travs de la coleccin Items.
El ItemsControl es simplemente un objeto que puede contener mltiples tems,
tales como strings, objects u otros elementos que definen un Item del control
ListBox de forma personalizada. El ItemsControl provee de una implementacin
grafica al control, pero no implementa ninguna operacin lgica.
Utilice cualquiera de las propiedades Items o ItemsSource para especificar la
coleccin 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 coleccin de


datos o de obligar a un ItemsControl a un objeto de coleccin.
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 coleccin Items se establece
como de slo lectura y de tamao fijo. Esto significa que no se pueden agregar
elementos a la coleccin directamente. Cuando ItemsSource est en uso,
estableciendo la propiedad en null elimina la coleccin y restaura el uso a los
elementos, que ser un ItemCollection vaco.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

103

LABORATORIO 4.1

Consultando un archivo XML


Implementa una aplicacin

Windows Phone que permita leer un archivo XML

visualizando su contenido en una pgina del aplicativo

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone:

Seleccione la opcin Create New Project.

Seleccione la opcin
New Project para crear
un nuevo proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Application, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la plantilla
Windows Phone en
Visual C#

Asigne nombre al
proyecto

CIBERTEC

CARRERAS PROFESIONALES

104

2. Archivo XML.
Para realizar este proceso, crea un archivo XML
llamados personas.xml, definiendo la estructura
de la raz y sus elementos, tal como se muestra.

3. Diseo.
Disea la pgina 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

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

105

4. Agregando referencias al Proyecto.


Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a
las libreras System.xml.LINQ, System.xml.Serialization, tal como se muestra.

Agregar las referencias


al proyecto

5. Programacin
Defina la clase persona, definiendo sus atributos y propiedades

CIBERTEC

CARRERAS PROFESIONALES

106

En el class Page1, defina las libreras a utilizar en el proyecto.

Defina las libreras del


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 aplicacin, donde se visualiza la lista de las


personas en el Page.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

107

LABORATORIO 4.2

Filtrando los registros de un archivo XML


Implementa una aplicacin

Windows Phone que permita leer un archivo XML

visualizando su contenido en una pgina del aplicativo

1. Diseo.
Disea la pgina 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

CIBERTEC

CARRERAS PROFESIONALES

108

2. Agregando referencias al Proyecto.


Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a
las libreras System.xml.LINQ, System.xml.Serialization, tal como se muestra.

Agregar las referencias


al proyecto

3. Programacin
Defina la clase persona, definiendo sus atributos y propiedades

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

109

En el class Page1, defina las libreras a utilizar en el proyecto.

Defina las libreras del


proyecto

Programe el evento Click del botn Consulta, donde al ingresar las iniciales del
nombre de una persona, visualizamos los registros que coincidan con las iniciales.

CIBERTEC

CARRERAS PROFESIONALES

110

Presione la tecla F5 para ejecutar la aplicacin, ingrese las iniciales del nombre, al
presionar el botn Consulta, visualizamos los registros que coincidan con los datos
ingresados

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

111

LABORATORIO 4.3

Consultando datos en los registros de un archivo XML


Implementa una aplicacin 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 raz y sus


elementos, tal como se muestra

2. Diseo.
Disea la pgina de acceso al sistema, tal como se
muestra. Disea el control ListBox1 en la pgina
XAML, tal como se muestra en la grafica de la
parte inferior.

CIBERTEC

CARRERAS PROFESIONALES

112

Defina el listBox1,
en la pgina
XAML

3. Agregando referencias al Proyecto.


Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a
las libreras System.xml.LINQ, System.xml.Serialization, tal como se muestra.

Agregar las referencias


al proyecto

4. Programacin
Defina la clase Usuarios.cs, definiendo
sus atributos y propiedades

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

113

En el class Page1, defina las libreras a utilizar en el proyecto.

Defina las libreras del


proyecto

Programe el evento Click del botn Consulta, donde ingrese el login y la clave del
usuario, al presionar el botn verifica los datos ingresados, visualizando el nombre del
usuario, si existe.

CIBERTEC

CARRERAS PROFESIONALES

114

Presione la tela F5, para ejecutar la aplicacin, ingresa los datos, para verificar
presione el botn Aceptar.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

115

LABORATORIO 4.4

Almacenando un archivo XML en un rea local


Implementa una aplicacin Windows Phone que registrar y almacenar registros de
personas en un archivo XML almacenando el archivo en un rea de almacenamiento
local

1. Diseo.
Disea la pgina para el registro de archivos de personas tal como se muestra. Disea
el control ListBox1 en la pgina XAML, tal como se muestra en la grafica de la parte
inferior.

Disea el
Template de
datos, tal como
se muestra

CIBERTEC

CARRERAS PROFESIONALES

116

2. Agregando referencias al Proyecto.


Para trabajar con un archivo XML y realizar su consulta, debemos hacer referencia a
las libreras System.xml.LINQ, System.xml.Serialization, tal como se muestra.

Agregar las referencias


al proyecto

3. Programacin
Defina la clase Usuarios.cs, definiendo sus atributos y propiedades.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

117

En el class Page1, defina las libreras a utilizar en el proyecto.

Defina las libreras del


proyecto

Declara a nivel Class Page, el objeto Usuarios que es una lista de Persona de
estructura XMLArray.

Programa el botn Agregar, el cual permite agregar una persona a la coleccin, y


visualizar los datos en el ListBox

CIBERTEC

CARRERAS PROFESIONALES

118

Programa el botn Guardar, donde la coleccin se guardara en un archivo XML.

Para ejecutar el programa presione la tecla F5, para realizar las operaciones.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

119

Resumen
XML es una tecnologa en realidad muy sencilla que tiene a su alrededor otras
tecnologas que la complementan y la hacen mucho ms grande y con unas
posibilidades enormes y bsicas para la sociedad de la informacin.
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 / despus del primer soporte de la izquierda.
El proceso para el manejo de un archivo XML requiere de un conjunto de libreras
o nameSpace para la consulta y actualizacin 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 programacin XML en memoria que permite modificar con eficacia y
facilidad documentos XML
LINQ to XML proporciona una interfaz de programacin XML en memoria que
aprovecha las caractersticas de .NET Language-Integrated Query (LINQ)
Framework. LINQ to XML utiliza las caractersticas ms recientes del lenguaje
.NET Framework y es comparable a una actualizada y rediseada interfaz de
programacin 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. Tambin hay
que crear un objeto para escribir el archivo en un documento o una secuencia,
como Stream, TextWriter o XmlWriter. A continuacin, hay que llamar al mtodo
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 mtodo 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 travs de la coleccin Items. El ItemsControl es simplemente

CIBERTEC

CARRERAS PROFESIONALES

120

un objeto que puede contener mltiples tems, tales como strings, objects u otros
elementos define un Item del control ListBox de forma personalizada.
Si desea saber ms acerca de estos temas, puede consultar las siguientes
pginas.
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/enus/library/system.windows.controls.itemscontrol.aspx

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

2.3

121

WINDOWS COMMUNICATION FOUNDATION

Windows Communication Foundation o WCF (tambin conocido como Indigo), es


la nueva plataforma de mensajera que forma parte de la API de la Plataforma .NET
3.0 (antes conocida como WinFX, y que no son ms 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 programacin rpida de sistemas distribuidos y el
desarrollo de aplicaciones basadas en arquitecturas orientadas a servicios (tambin
conocido como SOA), con una API simple; y que puede ejecutarse en una mquina
local, una LAN, o sobre la Internet en una forma segura.

2.3.1 Arquitectura del WCF


En

el

corazn

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
programacin orientado a servicios.

CIBERTEC

CARRERAS PROFESIONALES

122

2.3.1.1 Contratos

Los contratos WCF contienen informacin relativa a lo que un servicio ofrece al cliente
y el tipo de informacin que va a poner a disposicin. Existen tres tipos de contratos:
de datos, de mensaje y de servicio.
A. Datos
Un contrato de datos estipula de manera explcita los datos que se intercambiarn 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
parmetros y el tipo de retorno.

B. Mensajes
Un contrato de datos estipula de manera explcita los datos que se intercambiarn 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
parmetros y el tipo de retorno.

C. Servicio
Un contrato de datos estipula de manera explcita los datos que se intercambiarn 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
parmetros 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 comn para que el servicio
pueda ser usado por distintas plataformas con total compatibilidad.
El Service Contract es convertido en un WSDL que obtiene la descripcin de las
operaciones ofrecidas por el servicio (segn 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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

123

El Message Contract es convertido en un mensaje SOAP.

D. Policy y Binding
Los contratos de poltica y enlace (Policy y Binding) especifican informacin importante
como la seguridad, el protocolo y otra informacin, de manera que esto se verifica
antes de que empiece con la comunicacin.

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 informacin con los clientes.

La tabla muestra los diferentes comportamientos que son gestionados por la capa del
servicio Runtime.

2.3.1.3 Mensajes

CIBERTEC

CARRERAS PROFESIONALES

124

La capa de mensajera define qu formatos y pautas de intercambio de datos pueden


ser utilizados por el servicio de comunicacin. Las aplicaciones cliente pueden ser
desarrolladas para acceder a esta capa y manejar los detalles de mensajera y trabajar
directamente con los mensajes y canales.

La siguiente tabla muestra los canales y componentes que forman parte de la capa de
mensajera:

Componentes

Caractersticas

Canal de Seguridad

Implementa

la

especificacin

de

la

seguridad,

estableciendo seguridad en el mensaje


Canal

Fiable

de Garantiza la entrega del mensaje

mensajera
Codificadores

Permiten elegir entre diferentes codificadores, para


despus aplicarlos a mensajes

Canal HTTP

Establece que el servicio de entrega de mensajes se


llevara a cabo a travs del protocolo HTTP

Canal TCP

Establece que el servicio de entrega de mensajes se


llevara a cabo a travs del protocolo TCP

Canal

de

flujo

transacciones
Canalizaciones

de Rige

los

patrones

de

los

mensajes

guiados

por

transacciones
con Permite comunicar procesos

nombre
Canal MSMQ

Canal utilizado por los servicios que interactan con el


servicio de colas de mensajes MSMQ

2.3.1.4 Activacin y Alojamiento

La capa de activacin 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 aplicacin o pueden ser auto alojados.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

125

La siguiente tabla muestra las opciones de activacin y alojamiento proporcionados


por esta capa:

Opciones

Caractersticas

Servicio

de Permite a las aplicaciones WCF que se inicien automticamente

Activacin

de cuando se ejecutan en un equipo que tiene activo el servicio de

Windows

activacin de Windows

.EXE

WCF permite a los servicios que se ejecuten como archivos


ejecutables

Servicio

de WCF permite a los servicios que se ejecuten como servicios de

Windows

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 creacin
de aplicaciones orientadas a servicios y aplicaciones distribuidas.

Las aplicaciones distribuidas se vuelven cada da ms complejas, y es primordial que


nuestros negocios estn conectados.

Esta globalizacin informtica requiere la interaccin 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 caractersticas es que cuenta con un modelo de programacin


unificado. Es la unificacin de numerosas capacidades que antes podamos encontrar
en distintas tecnologas. Esto nos libra de tener que estar utilizando ms de una
tecnologa para cumplir satisfactoriamente los requerimientos. De este modo, los
desarrolladores harn una tarea de una nica manera.

CIBERTEC

CARRERAS PROFESIONALES

126

Las comunicaciones se enriquecen notablemente, ya que Windows Communication


Foundation da la libertad al desarrollador de utilizar mltiples transportes, distintos
tipos de formatos de mensajes y diversos patrones de mensajes.

La interoperabilidad es el plato fuerte deWindowsCommunication Foundation, ya que


la comunicacin 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 estndares 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 cdigo
del transporte, y de esta manera soporta distintos mtodos de comunicacin, sin
representar esto una carga de trabajo extra para el desarrollador.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

127

2.3.3 WINDOWS PHONE Y WCF


Debido a la gran orientacin de Windows Phone 7 hacia la nube y a la falta de soporte
oficial de bases de datos en el telfono 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 comunicacin con el exterior.

Dada la extensin y potencia de WCF a veces puede ser un poco complicado el hacer
que todo funcione correctamente, con esto en mente creamos este artculo para
guiaros por los pasos necesarios para llevar a buen trmino el uso de WCF con
Windows Phone 7.

2.3.3.1 Creacin del Servicio

A la hora de crear servicios WCF para ser consumidos desde Windows Phone 7 no
debemos tener ninguna consideracin 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

CIBERTEC

CARRERAS PROFESIONALES

128

2.3.3.2 Configuracin del Servicio

Creado nuestro servicio WCF podremos desarrollarlo de forma normal, atendiendo a


ciertas restricciones de configuracin o caractersticas no soportadas actualmente por
Windows Phone 7.

Una caracterstica de los binding HTTP que tenemos disponible en WCF para
Windows Phone 7 es la seccin ReaderQuotas. Esta seccin de los binding HTTP
indica los lmites de tamao bajo los que se tienen que mantener las peticiones al
servicio para ser aceptadas o el tamao mximo de un array que intentemos enviar.
Por defecto el tamao mximo de array est establecido en 16384, con lo que, por
ejemplo, si intentamos enviar un array de bytes que contenga ms elementos que
16384 el servicio denegar la peticin.

Esta caracterstica est pensada para proteger a nuestro servicio de un posible ataque
DOS (Denial of Service) que, basndose en mensajes complejos, intente colapsar los
endpoints del servicio WCF. Debido a esto, debemos recordar siempre intentar ajustar
los valores de esta seccin en la medida de lo posible a los datos que vayamos a
recibir, si ajustamos estos parmetros a un valor Max.Int32 estaremos eliminando esta
defensa natural que tiene nuestro servicio.

Para configurar esta caracterstica podemos usar la Herramienta de Configuracin de


Servicio WCF que tenemos disponible en Visual Studio 2010 en el men
Herramientas.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

129

Simplemente debemos crear un nuevo binding para nuestro EndPoint y podremos ver
la seccin ReaderQuotas con los diferentes parmetros que debemos configurar como
mximos bytes por lectura o longitud mxima de un array. Una vez modificados los
valores debemos aplicar la configuracin 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>

CIBERTEC

CARRERAS PROFESIONALES

130

2.3.3.3 Conectando desde Windows Phone

El paso necesario para referenciar a un servicio WCF desde nuestra aplicacin


Windows Phone 7 es realmente simple.

Simplemente haremos click con el botn derecho del ratn sobre nuestro proyecto
Windows Phone 7 y seleccionaremos la opcin Aadir referencia a servicio.

Si el servicio WCF que deseamos referenciar se encuentra en la misma solucin de


nuestra aplicacin, nos bastar presionar el botn 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 botn 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 automticamente para que tengamos acceso a todos
los mtodos y clases de nuestro servicio.

Solo tendremos que crear una instancia nueva de la clase que deseemos usar, y
podremos acceder a los mtodos del servicio.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

131

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());
}
}

CIBERTEC

CARRERAS PROFESIONALES

132

LABORATORIO 5.1

Implementando un Servicio en WCF


Implementa una aplicacin de Servicios en WCF que permita realizar la consulta de
clientes. Defina un mtodo que permita listar los clientes.

1. Inicio del Proyecto


Para iniciar un proyecto Aplicacin de Servicios WCF:

Seleccione la opcin Create New Project.

Seleccione la opcin
New Project para crear
un nuevo proyecto

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 botn OK para grabar el proyecto


Seleccione la plantilla
Windows Phone en
Visual C#

Asigne nombre al
proyecto

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

133

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 continuacin selecciona LINQ to SQL
Clases y asigne el nombre DataVentas, presione el botn Add

Item LINQ to SQL Clases

Nombre del Item LINQ to SQL:


DataVentas

Agregue una conexin desde la ventana Server


Explorer, realizando la conexin a la base de datos
Ventas2011, tal como se muestra.
Arrastre las tablas al Contexto DataVentas.dbml

CIBERTEC

CARRERAS PROFESIONALES

134

3. Definiendo el Servicio del Proyecto


Desde la aplicacin del Proyecto agregue un Nuevo Item.

Selecciona la plantilla Web

A continuacin seleccione el Item WCF Service, tal como se muestra

Asigne un nombre al Item: ServiceVenta

Presione el botn Add

Seleccione la
plantilla Web

Seleccione el
Item WCF
Service

Asigne un
nombre al
Service

Agregado el WCF Service, aparecen en el proyecto IServiceVenta y ServiceVenta, tal


como se muestran.

Contrato: definiremos la funcionalidad


(mtodos accesibles) que tendr nuestro
servicio y que datos (clases, estructuras,
etc.) que utilizar para comunicarse.

Servicio que "implemente" el contrato


definido.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

135

4. Definiendo el Contrato
Para indicar que se trata de un contrato usamos el atributo ServiceContract al declarar
la Interface. Para definir qu mtodos tendr el contrato usamos el atributo
OperationContract. Este contrato es el que usarn los clientes para saber que
operaciones tiene un servicio y que datos intervienen en la comunicacin. Para indicar
que la clase tambin debe estar en el contrato, usamos los atributos DataContract y
DataMember para la deficinin de la clase y sus propiedades respectivamente.

Definiendo la clase Cliente: DataContract

En la clase se definirn sus


atributos y sus mtodos de
la clase DataMember, tal
como se muestra.

DataContract
definicin de la clase
DataMember
definicin del mtodo

Definiendo la interface
IServiceVenta, el cual
se define los mtodos
de

la

interface,

tal

como se muestra.
Definiendo la Interface:
Contrato
Definiendo el mtodo:
OperationContract

CIBERTEC

CARRERAS PROFESIONALES

136

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 mtodos Listado() y
ListadoxNombre, tal como se muestra.

Implementando el mtodo
Listado el cual retorna los
registros de tb_clientes

Implementando el mtodo
ListadoxNombre retorna los
registros de tb_clientes por las
iniciales del nombre

Ejecutar el ServicioVenta: Hacer click derecho en el


archivo ServiceVenta, seleccione la opcin View in
Browser

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

137

Al ejecutar el servicio, se crea un servicio, donde la ventana nos da la direccin para


ejecutar el servicio, copiar la direccin.

Direccin para ejecutar


el servicio.

6. Construyendo la aplicacin Windows Phone


Para iniciar un proyecto Windows Phone:

Seleccione la opcin Create New Project.

Seleccione la opcin
New Project para
crear un nuevo
proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Applicatioin, tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

CIBERTEC

CARRERAS PROFESIONALES

138

Seleccione la plantilla
Windows Phone en
Visual C#

Asigne nombre al
proyecto

7. Diseo del Page


A continuacin disea el Page para visualizar el listado de Clientes, tal como se
muestra.

Diseo del
Control de
datos

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

139

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 direccin del servicio en Address, presione GO, a continuacin se


visualizarn los servicios.
Luego, defina un nombre al Namespace: ReferenciaVenta, y presione el botn OK.

9. Programacin
A continuacin programa las operaciones para sincronizar el servicio desde el
aplicativo Windows Phone.

CIBERTEC

CARRERAS PROFESIONALES

140

Referencia del servicio:


ReferenciaVenta

Instancia del Servicio


Venta

Definir el evento para


el mtodo Listado y
ejecutar el mtodo

Definir el mtodo del


Evento llamado listado

Presione la tecla F5, para ejecutar el proceso, el cual se visualiza los datos de los
clientes.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

141

LABORATORIO 5.2

Implementando un Servicio en WCF


Implementa una aplicacin de Servicios en WCF que permita realizar la consulta de
clientes realizando una bsqueda por su nombre. Defina un mtodo que permita listar
los clientes buscando por la inicial de su nombre.

1. Diseo del Page

2. Programacin
Programa el proceso de la consulta, tal como se muestra
Referencia del
servicio
Instancia del
servicio
Definir el evento
del servicio

Definir el mtodo
del evento
Ejecutar el
mtodo con su
parmetro

Presione la tecla F5, ingrese la inicial del nombre del cliente y ejecute.

CIBERTEC

CARRERAS PROFESIONALES

142

Resumen
Windows Communication Foundation o WCF (tambin conocido como Indigo),
es la nueva plataforma de mensajera que forma parte de la API de la Plataforma
.NET 3.0 (antes conocida como WinFX, y que no son ms que extensiones para la
version 2.0).
En el corazn 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 informacin relativa a lo que un servicio ofrece al
cliente y el tipo de informacin que va a poner a disposicin. Existen tres tipo de
contratos: de datos, de mensaje y de servicio:

Datos: estipula de manera explcita los datos que se intercambiarn 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 explcita los datos que se


intercambiarn 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 comn 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 descripcin


de las operaciones ofrecidas por el servicio (segn 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.

El Message Contract es convertido en un mensaje SOAP

Windows Communication Foundation es el siguiente paso de Microsoft en la


creacin de aplicaciones orientadas a servicios y aplicaciones distribuidas. Las
aplicaciones distribuidas se vuelven cada da ms complejas, y es primordial que
nuestros negocios estn conectados.
Una de sus principales caractersticas es que cuenta con un modelo de
programacin unificado. Es la unificacin de numerosas capacidades que antes
podamos encontrar en distintas tecnologas. Esto nos libra de tener que estar
utilizando

ms

CARRERAS PROFESIONALES

de

una

tecnologa

para

cumplir

satisfactoriamente

los

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

143

requerimientos. De este modo, los desarrolladores harn una tarea de una nica
manera.
Si desea saber ms acerca de estos temas, puede consultar las siguientes
pginas.
Tutorial de WCF
http://geeks.ms/blogs/jnunez/archive/2007/08/10/tutorial-wcf-1-de-5.aspx
Implementacin 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

CIBERTEC

CARRERAS PROFESIONALES

144

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

145

UNIDAD DE
APRENDIZAJE

DESARROLLANDO

UNA

APLICACIN

XNA

EN

WINDOWS PHONE
LOGRO DE LA UNIDAD DE APRENDIZAJE
Al trmino de la unidad, el alumno aprende a construir juegos para Windows Phone
donde cargara imgenes y dibujar texto, as como utilizar transformaciones e
iluminacin.

TEMARIO
3.1 Tema 6
3.1.1.
3.1.2.
3.1.3.
3.1.4.
3.2 Tema 7
3.2.1.

:
:
:
:
:
:
:

3.2.2.
3.2.3.
3.2.4.
3.3 Tema 8
3.3.1.
3.3.2.
3.3.3.

:
:
:
:
:
:
:

XNA
XNA, caractersticas y requerimientos
Plantilla del Proyecto, objetos del proyecto
Objetos Sprites
Laboratorio
Animacin en XNA
Animacin: movimiento de imgenes, rotacin, tintes,
acelermetro
Animacin por dispositivos de entrada, Touch
Manejo de colisiones
Laboratorio
Creando un Game FrameWork
Diseo de un Game FrameWork
Clases de un Game FrameWork
Laboratorio

ACTIVIDADES PROPUESTAS
Los alumnos aprendern a construir una aplicacin de juegos por Windows
Phone utilizando el framework XNA

Los alumnos aprendern a manejar los cdigos bsicos para realizar un dibujo
en una aplicacin por Windows Phone.

CIBERTEC

CARRERAS PROFESIONALES

146

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

3.1

147

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 continuacin.

3.1.1 XNA, caracterticas y requerimintos


3.1.1.1 XNA FrameWork

El XNA Framework es un amplio conjunto de bibliotecas de clases especficas para el


desarrollo de juegos, y promueven la reutilizacin de cdigo al mximo. El Framework
se ejecuta en una versin 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 programacin 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
ms rpido nuestros juegos, y por otro lado tenemos la herramienta de desarrollo para
usar dichas libreras y aprovecharlas al mximo.
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 cuestin 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

CIBERTEC

CARRERAS PROFESIONALES

148

Para ejecutar juegos de XNA Framework en un equipo con un sistema operativo


Windows, se necesita una tarjeta grfica que admita como mnimo Shader Model 1.1 y
DirectX 9.0c. Se recomienda usar una tarjeta grfica que admita Shader Model 2.0,
versin necesaria para algunas muestras y kits de iniciacin.

Para ejecutar y depurar juegos de XNA Framework para Windows Phone con el
emulador de Windows Phone, se necesita una tarjeta grfica que admita como mnimo
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 permitirn
tambin 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 mnimo 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 bsica 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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

149

Selecciona la categora 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 solucin 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.

CIBERTEC

CARRERAS PROFESIONALES

150

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 mtodo Main.

3.1.2.1 Archivo Game1


El archivo Game1.cs es la estructura general de un videojuego. Esta clase tiene varios
mtodos:
A. Constructor Game1()
Creamos la instancia del manejador de grficos que se encargar de hacer todo el
trabajo pesado de controlar la tarjeta de video, y adems 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 mtodo 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 idneo.

C. LoadContent()
Aqu podemos cargar el contenido. En sesiones ms, usaremos el ContentManager
D. Update(GameTime gameTime)
Este mtodo 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 lgica 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 mtodo donde pondremos y discriminaremos qu es lo que se dibuja y que no.
Todos los mtodos para dibujar estarn aqu. A diferencia del mtodo anterior, XNA
ejecutar este mtodo cuantas veces pueda sin tener un tiempo fijo como el anterior
de 60FPS.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

F.

151

UnloadContent()

Este mtodo que nos permitir quitar todos los recursos ocupados y
liberarlos de la memoria de la PC

A continuacin presentamos un esquema para visualizar mejor el


recorrido del cdigo en la ejecucin 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
mtodo 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 mtodos Update y
Draw, independientemente de cunto tiempo tardar en ejecutarse. La propiedad
ElapsedGameTime del objeto GameTime puede ser consultada para determinar el
intervalo

de

tiempo

entre

las

llamadas

al

mtodo Update. Si el juego est tomando demasiado tiempo para completar el mtodo
Update, puede provocar un cortocircuito en la lgica 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 mtodo se llama a Update tan pronto como el mtodo
Draw ha terminado, no hay necesidad de especificar un TargetElapsedTime.

CIBERTEC

CARRERAS PROFESIONALES

152

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 solucin. 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 mtodo apropiado


En el mtodo LoadContent cargaremos nuestra textura para luego poder usarla. Para
cargar la textura, antes crearemos una variable de tipo Texture2D en la parte de
declaracin 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");
}

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

153

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 mtodo LOAD el tipo de esta manera: <Texture2D>.

3.1.3 SPRITES
El trmino Sprite se suele utilizar para referirse a una imagen que representa una
pequea parte de una escena.

Por ejemplo, la mayora 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 ms
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 nmero de imgenes ms pequeas que se utilizan en una pgina web. La
mayora de los navegadores descargar el Spritesheet una vez y volver a utilizarlo
para mostrar todas las imgenes ms pequeas, reduciendo significativamente el
tiempo de descarga y el nmero 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 mtodo LoadContent carga un Sprite (una imagen
ball) que se puede dibujar en pantalla como parte de un SpriteBatch:

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);
}

La imagen de la bola se ubicar en la posicin (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 travs de la pantalla a
la derecha y va al positivo del eje abajo de la pantalla.

CIBERTEC

CARRERAS PROFESIONALES

154

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 tipografa, 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
compilacin, crea un SpriteSheet (una imagen que contiene sub-imgenes, en este
caso las letras, nmeros y smbolos 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 cdigo ya


trae descripciones que explican que significan cada etiqueta para poder modificar el
SpriteFont a nuestra conveniencia. Bsicamente podemos cambiar la fuente que se
importar, el tamao de la letra, el espacio entre letras y el estilo de la letra.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

155

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 mtodo de LoadContent()

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");
}

Luego en el mtodo Draw() dibujaremos el texto sobre la imagen.

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);
}

Explicando un poco, creamos un Vector2, que es simplemente una variable con


coordenadas X e Y para poner la posicin del texto en (20,20) y luego simplemente
llamamos la funcin 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 Msica
XNA nos ayuda muchsimo para reproducir sonidos, para ello usaremos 2 tcnicas, la
primera para sonidos y la segunda para msica.

A. Crear el archivo de Sonido o Cancin


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
cancin

CIBERTEC

como

archivos

de

tipo

MP3

usaremos

la

clase

CARRERAS PROFESIONALES

156

Microsoft.Xna.Framework.Media.Song. Esto sucede puesto que XNA trata de


diferente forma estos archivos.

Song cancion; //Si cargamos un MP3


SoundEffect musicaFondo; //Si cargamos un wav

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
segn 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
mtodo LoadContent() esto dependiendo del tipo de variable que tengamos:

Song cancion; //Si cargamos un MP3


SoundEffect musicaFondo; //Si cargamos un wav

Para cargar ese archivo en la variable usaremos en el mtodo LoadContent() esto


dependiendo del tipo de variable que tengamos:

cancion = Content.Load<Song>("musicaFondo");
musicaFondo = Content.Load<Song>("musicaFondo");

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

157

Para reproducir solamente necesitamos llamar un mtodo. Si es un SoundEffect


usamos el mtodo Play() que viene con la clase. Si usamos Song deberemos usar un
componente de XNA llamado MediaPlayer y usando el mtodo Play(), pasaremos de
parmetro nuestra variable tipo Song. Estos se definen en el LoadContent()

MediaPlayer.Play(cancion); //si usamos un


MP3musicaFondo.Play(); //Si usamos un WAV

CIBERTEC

CARRERAS PROFESIONALES

158

LABORATORIO 6.1

Implementando una aplicacin en XNA


Implementa una aplicacin en XNA que visualice Hola Mundo en el centro de la
pantalla.

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone:
Seleccione la opcin Create New Proyect.

Seleccione la opcin
New Project para crear
un nuevo proyecto

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

159

Seleccione la plantilla
Windows Phone Game
en Visual C#

Asigne nombre al
proyecto

Agregue un SpriteFont al proyecto Content, para definir el Font del proyecto

Proyecto Content ,
agregamos el SpriteFont
llamado Segoe14

Seleccione la plantilla SpriteFont, y asigne el nombre Segoe14

CIBERTEC

CARRERAS PROFESIONALES

160

Definicin del SpriteFont


Segoe14

Declaramos los objetos que se utilizaran en la aplicacin:

texto: el cual se visualiza en la pantalla

font14: el Font del texto que se visualiza

posiciontexto: indica la posicin del texto en la pantalla

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

161

Cuando el juego es ejecutado en el dispositivo, la clase Game1 es instanciada y el


constructor del Game1 es ejecutado. Este cdigo ya est definido

Definir la orientacin
de la pantalla en el
constructor

Despus 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 mtodo
skeleton el cual es aadido.

Inicializa la clase
Game1

El mtodo Initialize no es el mtodo para cargar el Font y otros contenidos. Estas


operaciones se implementan en el mtodo LoadContent.

En este proceso, cargamos a font14, el Font definido en Segoe14

A continuacin defino las dimensiones de texto como Vector2.

Defino la ubicacin de texto, como Vector2, el cual se ubicara en el centro de la


pantalla.

CIBERTEC

CARRERAS PROFESIONALES

162

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

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

163

LABORATORIO 6.2

Implementando un Reloj en una aplicacin XNA


Implementa una aplicacin en XNA que visualice un RELOJ.
1. Inicio del Proyecto
Para iniciar un proyecto Windows Phone:
Seleccione la opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la plantilla
Windows Phone
Game en Visual C#
Asigne nombre al
proyecto

Agregue al proyecto Content un spritefont llamado Segoe14, tal como se muestra.

Agrega un
sprintfont al
proyecto Content

CIBERTEC

CARRERAS PROFESIONALES

164

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;

Referencia la librera
System.Text

Al cargar el Content definimos a font14 con el archivo spritefont Segoe14; adems


asignaremos a dimensin la dimensin del dispositivo.

Programa el mtodo Update el cual evala las horas durante un intervalo de tiempo, si
son diferentes, la nueva hora se agrega al texto y se configura su dimensin.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

165

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

CIBERTEC

CARRERAS PROFESIONALES

166

LABORATORIO 6.3

Implementando una aplicacin XNA para dibujar una imagen


Implementa una aplicacin en XNA que visualice una imagen en la pantalla.
1. Inicio del Proyecto
Para iniciar un proyecto Windows Phone:
Seleccione la opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto.

Seleccione la plantilla
Windows Phone
Game en Visual C#

Asigne nombre al
proyecto

Agregue una imagen al Proyecto Content:

Desde el proyecto Content, agregue un Item Existente, tal como se muestra.


Selecciona un archivo bmp.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

167

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

CIBERTEC

CARRERAS PROFESIONALES

168

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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

169

LABORATORIO 9.4

Implementando una aplicacin XNA para manejo de un arreglo de imgenes.


Implementa una aplicacin 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 opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la
plantilla Windows
Phone Game en
Visual C#
Asigne nombre al
proyecto

Arrastre las imgenes en el proyecto Content, tal como se


muestra. Recuerde que las imgenes deben almacenarse en
Content.

CIBERTEC

CARRERAS PROFESIONALES

170

Inicializando las variables


Declare un array de logo el cual almacenar imgenes (Texture2D) as como una
variable numrica para el manejo del ndice del array.

En el constructor del Game1, defina la orientacin de la pantalla, as como asigne un


intervalo de tiempo para el cambio de imgenes

mtodo LoadContent() cargar las imgenes en el array Logo, tal como se muestra

En el

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

171

En el mtodo Update() incremento el valor de i, y evalo su valor.

En el mtodo Draw(), defina un rectngulo llamado marco el cual se colocara el logo.

Presione F5 para ejecutar el Juego.

CIBERTEC

CARRERAS PROFESIONALES

172

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

173

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 especficas


para el desarrollo de juegos, y promueven la reutilizacin de cdigo al mximo.
El Framework se ejecuta en una versin de Common Language Runtime que
se ha optimizado para que los juegos.

El XNA Game Studio es un entorno de programacin 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 mtodos:

Constructor Game1(): se encarga de hacer todo el trabajo pesado de


controlar la tarjeta de video, y adems 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 mtodo 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

mtodo

donde

pondremos

discriminaremos qu es lo que se dibuja y que no. Todos los mtodos para


dibujar estarn aqu. A diferencia del mtodo anterior, XNA ejecutar este
mtodo cuantas veces pueda sin tener un tiempo fijo como el anterior de
60FPS.

UnloadContent(): Este mtodo 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 tipografa, 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 tcnicas, la primera
para sonidos y la segunda para msica. Dependiendo del tipo de archivo

CIBERTEC

CARRERAS PROFESIONALES

174

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 cancin


como archivos MP3 usaremos la clase Microsoft.Xna.Framework.Media.Song.
Si desea saber ms acerca de estos temas, puede consultar a las siguientes
pginas:
Introduccin 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

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

3.2

175

ANIMACIONES EN XNA

Implementar un dibujo diferentes tipos de imgenes y la profundidad de la capa forma


parte del diseo de un juego, pero en realidad no lo es todo lo que emocionante.
Ahora, vamos a animar las imgenes 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 imgenes son
aadidas en posiciones constantes, nuestro objeto es que las imgenes se muevan a
lo largo de la pantalla.

3.2.1 Animacin: movimiento de imgenes, rotacin, tintes, acelermetro


3.2.1.1 Movimiento de Imgenes

Mover el Sprite alrededor de la pantalla slo requiere la posicin de la pelota que se


actualizar de manera que la prxima vez que se extrae ser en una ubicacin
diferente. En lugar de codificar la posicin de la Sprite, la ubicacin ser determinada
por una variable de estado, posicin. Durante el Mtodo de Update de este valor se
incrementar de acuerdo con la direccin vector.

Las imgenes estticas no son muy interesantes, as que vamos a hacer el


movimiento grfico, para ello especificamos su posicin 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 grfico dibujado, y representar a sus la esquina superior izquierda. Esta
posicin se conoce como un sistema de coordenadas.

Cuando las coordenadas estn escritas, estn encerrados entre parntesis 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 pxeles.
Para hacer el movimiento de sprites, slo tenemos que recordar su coordenada de un
sorteo para la siguiente y modificar sus valores de manera que la posicin del sprite
cambios. Podemos hacer esto fcilmente.

CIBERTEC

CARRERAS PROFESIONALES

176

//Declaramos un Vector2 de posicion


private Vector2 _Position;

Lo siguiente es inicializar una posicin inicial para el grfico. 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 posicin inicial. Puede ser til para poder restablecer la
posicin ms tarde, sin embargo, por lo que vamos a crear un nuevo procedimiento
llamado RESETGAME y configurar el sistema de aqu.

//Declaramos un Vector2 de posicin


private override void Initialize(){
base.Initialize();
// colocar la posicion inicial
_Position = new Vector2(100, 100);
}

Codifique el mtodo Draw para modificar y utilizar la nueva variable posicin. Esto se
logra mediante la eliminacin de la variable posicin Vector2, y en lugar de utilizar la
variable _Position.

//Dibujamos el sprite
spriteBatch.Draw(_Texture, _Position, Color.White);

Por ltimo, tenemos que cambiar la posicin almacenada en la variable _Position para
que el grfico se mueva realmente. Aunque sera fcil de hacer esto en el cdigo de
dibujo, este no sera el lugar apropiado para realizar este cambio, la funcin de dibujo
debe ser totalmente centrado en la operacin de dibujo, y no solo en la actualizacin
de las variables de juego. En su lugar, utilice el procedimiento de Update para realizar
los cambios de variables.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

177

//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);
}

3.2.1.2 Rotacin

Un Sprite tambin tienen la capacidad rotar fcilmente a cualquier ngulo que desee.
El ngulo se especifica mediante el uso de cualquiera de las llamadas al mtodo
Draw, pasando por el ngulo para el parmetro adecuado. El ngulo se mide en
radianes las agujas del reloj, lo que significa que un ngulo de 0 es la posicin
correcta, PI / 2 se gira un cuarto de la vuelta a la derecha, el PI es al revs, y 3 PI / 2
se gira tres cuartas partes de los camino. Parece que trabajar en radianes es muy
poco natural, sera 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 estticas para ayudar con los grficos relacionados con las funciones
matemticas. Una de esas funciones es ToRadians, que convierte el ngulo
suministrado grados en radianes. El uso de este parmetro con la rotacin de la
funcin de dibujar hace proporcionando el ngulo mucho ms fcil.

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);

3.2.1.3 Tintes
A lo largo de las llamadas al mtodo Draw, podemos pasar como parmetro a Color,
para pasar diferentes colores en lugar del color blanco para pintar el grafico que est
siendo dibujado. Una aplicacin muy til de esta funcin es permitir que un solo grfico
se dibuje en diferentes colores, sin tener que aadir todos los grficos de diferentes
colores por separado en el proyecto de contenido. Si la imagen de origen se presenta

CIBERTEC

CARRERAS PROFESIONALES

178

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 cul de estos enfoques que usted prefiere es de usted, sino que son
funcionalmente equivalentes.

Color myColor1 = new Color(255, 128, 0);


Color myColor2 = new Color(1.0f, 0.5f, 0.0f);

3.2.1.4 Accelerometer: Acelermetro


Las aplicaciones diseadas 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, ms recientemente, una pantalla tctil. En un
dispositivo mvil, 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 aplicacin que el
usuario (UI).

El acelermetro es un sensor de entrada, detecta la aceleracin del dispositivo que


el usuario se mueve o rota.

El acelermetro del telfono de Windows informa en tres dimensiones (3D) de


vectores, en forma de x, y, z y los valores. Estos valores indican la direccin y la
magnitud de la fuerza que se aplican actualmente en el dispositivo.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

179

Si el dispositivo Windows Phone est en posicin vertical u horizontal sobre una


superficie como un escritorio, siente una fuerza que se traduce en una aceleracin de
1 g (1 g es la aceleracin que resulta de una fuerza mecnica 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 mecnica necesaria para contrarrestar los efectos de la gravedad. El
acelermetro del telfono de Windows se informe como un vector de (0, n 1, 0).

Desde que el acelermetro es especificado en la versin de Windows Phone, la lgica


para crear y trabajar con el acelermetro tiene que estar supeditada a la
WINDOWS_PHONE smbolo de compilacin:

#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
}

La direccin que la pelota viaja se incrementa en los valores del

acelermetro

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 ratn.
Con este modelo de programacin, la aplicacin realiza algunas acciones y luego,

CIBERTEC

CARRERAS PROFESIONALES

180

cuando la solicitud haya tiempo de inactividad, el los mensajes se bombea en la


aplicacin y los eventos se procesan.

En el desarrollo del juego, no hay tiempo de inactividad, por lo que sera demasiado
caro para que los desarrolladores para registrar eventos. Por el contrario, depende de
cmo el desarrollador implemente el programa para sondear constantemente
dispositivos de entrada: de preguntar si el jugador ha realizado ninguna accin 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 ms sentido.

3.2.2.1 XNA FrameWork


La entrada de teclado se maneja a travs de la clase Keyboard, que est en el espacio
de nombres Microsoft.XNA.Frame.Work.Input. La clase Keyboard tiene un mtodo
esttico llamado GetState que recupera el estado actual del teclado en forma de una
estructura KeyboardState. La estructura KeyboardState contiene tres mtodos clave
que le dar la mayor parte de la funcionalidad que necesita.

Mtodo

Descripcin

Keys[]

Retorna un arreglo de teclas presionadas en el tiempo que

GetPressedKeys( )

se invoca al mtodo

bool

IsKeyDown(Keys Retorna true o false dependiendo si o no la tecla

key)

representada por un parmetro es presionada en el tiempo


que se invoca el mtodo

bool

IsKeyUp(Keys Retorna true o false dependiendo si la tecla representada

key)

por el parmetro es presionada en el tiempo que es


invocado el mtodo.

Por ejemplo de la utilizacin de la clase Keyboard, si usted quiere comprobar si la tecla


"A" se ha pulsado, tendr que utilizar la siguiente lnea de cdigo:

if(Keyboard.GetState( ).IsKeyDown(Keys.A))
// BAM!!! A is pressed!

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

181

Para comprobar la entrada por teclado, hay dos mtodos para elegir la hora de
determinar dnde poner una cierta lgica en XNA bucle del juego:

Draw, que tiene por objeto la elaboracin y

Update, actualizacin, que es esencialmente de todo lo dems (mantener el


marcador, los objetos en movimiento, comprobando las colisiones, etc.)

As que, adelante y agregue el cdigo siguiente al final de su mtodo de actualizacin,


justo antes de la llamada a base.Update:

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;

Aplicando la estructura condicional if / else slo le permiten moverse en una direccin


en un momento, mientras que con cuatro independientes si los estados le permite
moverse en diagonal, as (por ejemplo, la combinacin de los arriba ya la izquierda
entradas de llave).
3.2.2.2 Touch
En una aplicacin de Silverlight, cuando el usuario toca la pantalla, uno o ms eventos
de ratn se implementan.
En un juego de XNA, la deteccin de la entrada del usuario se realiza dentro del
mtodo de actualizacin. El siguiente cdigo recupera el estado actual del panel tctil
como una matriz de objetos TouchLocation. A partir de este la Propiedad de posicin
se puede consultar para determinar la ubicacin del punto de contacto. Recuerde que
todos los Dispositivos Windows Phone sern por lo menos cuatro puntos de contacto.

CIBERTEC

CARRERAS PROFESIONALES

182

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);
}

El objeto TouchLocation tambin tiene una propiedad del estado que seala si el punto
de contacto se ha movido, prensado, o en libertad. En el caso de ser movida, puede
intentar recuperar la posicin anterior a travs del mtodo TryGetPreviousLocation.

3.2.3 MANEJO DE COLISIONES

La deteccin de colisiones es un componente fundamental de casi todos los juegos. La


deteccin de colisiones sin duda puede hacer o romper un seguimiento o continuidad
del juego.

Una de las maneras ms sencillas y rpidas de implementar la deteccin de colisiones


es a travs del algoritmo cuadro de lmite. En esencia, cuando se utiliza un algoritmo
de delimitacin 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 rectngulo para cada
Sprite basado en la posicin del sprite y la anchura y la altura de los marcos para los
Sprites. La estructura Rectangle tiene un mtodo llamado Intersect que se pueden
utilizar para determinar si dos rectngulos se cruzan:

Rect1.Intersects(Rect2);

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

183

LABORATORIO 7.1

Implementando una aplicacin en XNA para realizar un juego de Movimiento


bsico.

Implementa una aplicacin 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 opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el


proyecto

Seleccione la plantilla
Windows Phone Game
en Visual C#

Asigne nombre al
proyecto

Agregue al proyecto Content un


conjunto de imgenes, los cuales
sern utilizados para realizar el cambio
de pelotas por cada vuelta.
Para agregar las
imgenes,
simplemente arrastrar
y soltar

CIBERTEC

CARRERAS PROFESIONALES

184

2. Programacin.

Defina los objetos del Juego: arreglo de imgenes, ndice y las coordenadas del juego.

Inicializar los valores de las variables e instanciar el rectngulo cuadro, tal como se
muestra.

Programe el mtodo LoadContent para cargar las imgenes en el arreglo pelotas, tal
como se muestra

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

185

Implemente el mtodo Update() donde evale la arista (variable vuelta) que est
movindose 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 mtodo Draw para realizar el dibujo de la imagen en la pantalla, incluya


la definicin del rectngulo antes de dibujar.

Presione la tecla F5, para iniciar el juego, donde se visualiza que el objeto circula
alrededor de la pantalla.

CIBERTEC

CARRERAS PROFESIONALES

186

LABORATORIO 7.2
Implementando una aplicacin en XNA para realizar un juego de movimiento y
colisin.
Implementa una aplicacin 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 opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el


proyecto.

Seleccione la plantilla
Windows Phone
Game en Visual C#

Asigne nombre al
proyecto

Agregar en la aplicacin Content, el archivo imagen ball.png tal como se muestra

Agregar el archivo
ball.png al proyecto

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

187

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 mtodo LoadContent() el proceso de cargar la imagen a objeto


baln as como definir los valores iniciales de x e y (sern en el centro de la pantalla);
adems defina el marco del proceso.

3. Programa el mtodo Update, donde incrementa los valores de x e y. Incrementado


los valores, evalo la ubicacin de estos, si se encuentran en los extremos de la
pantalla, cambiando el valor del acelerador, tal como se muestra

CIBERTEC

CARRERAS PROFESIONALES

188

Incremento los valores de x,


y a travs de las variables
acelerax, aceleray

Evalo si x o y estn en los


extremos de la pantalla

Programa el mtodo Draw, donde permitir dibujar la nueva posicin del baln,
actualizando los valores de marco.

Presione F5 para ejecutar el proyecto

El baln ira circulando


alrededor de la
pantalla

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

189

LABORATORIO 7.3

Implementando una aplicacin en XNA para realizar un juego de movimiento y


colisin.
Implementa una aplicacin en XNA que permita mover una pelota alrededor de la
pantalla donde al colisionar con un ladrillo en movimiento, la pelota rebota asignndolo
un punto en el proceso
1. Inicio del Proyecto
Para iniciar un proyecto Windows Phone: Seleccione la opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la plantilla
Windows Phone
Game en Visual C#

Asigne nombre al
proyecto

Agregar en la aplicacin Content, los archivos ball.png y


paddle.png, el archivo de sonidos ding.wav y el spriteFont
messageFont, tal como se muestra.

CIBERTEC

CARRERAS PROFESIONALES

190

PROGRAMACION
Declare el conjunto de objetos para el juego a implementar: Texture2D, Rectangle,
SriteFont, SoundEffects y variables de posicin, tal como se muestra.

Definir objeto Texture2D para el


baln, su Rectangle y sus
variables de posicin

Definir objeto SprintFont para el


texto y Vector2, ubicacin
Definir objeto Texture2D para el
paddle, su Rectangle y sus
variables de posicin
Definir objeto SoundEffect

Programa el mtodo LoadContent para realizar el proceso de la carga de imgenes,


Font y efectos de sonidos a la pgina, tal como se muestra.

Programa el mtodo Update del Game1, en este proceso, el paddle se mover hacia
la vertical, de un extremo a otro; el baln ira desplazando de lado a lado, donde, si se
intersecan, se incrementa el score.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

191

Evalo el desplazamiento del


paddle, tal como se muestra.
Evalo el desplazamiento del
baln, tal como se muestra.

Evalo la interseccin del baln


con el paddle, donde al
realizarse el proceso se
incrementa el score

Programa el mtodo Draw, donde permitir dibujar la nueva posicin de los objetos del
juego, actualizando los valores de sus posiciones.

Presione F5 para ejecutar el juego.

CIBERTEC

CARRERAS PROFESIONALES

192

LABORATORIO 10.4

Implementando una aplicacin en XNA para realizar un juego de movimiento


utilizando la teclas de direccin.

Implementa una aplicacin en XNA que permita mover una paleta hacia lo largo de la
pantalla utilizando las teclas de direccin 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 opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el proyecto

Seleccione la plantilla
Windows Phone
Game en Visual C#
Asigne nombre al
proyecto

Agregar en la aplicacin Content, los archivos ball.png y


paddle.png, el archivo de sonidos ding.wav y el spriteFont
messageFont, tal como se muestra.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

193

PROGRAMACION
Declare el conjunto de objetos para el juego a implementar: Texture2D, Rectangle,
SriteFont, SoundEffects

Definir objeto Texture2D para el


paddle, su Rectangle y sus variables
de posicin

Definir objeto SoundEffect


Definir objeto Texture2D para el
baln, su Rectangle y sus variables
de posicin

Definir objeto SprintFont para el


texto y Vector2, ubicacin

Programa el mtodo LoadContent para realizar el proceso de la carga de imgenes,


Font y efectos de sonidos a la pgina, tal como se muestra.

Programa el mtodo 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
baln ira desplazando de arriba hacia abajo, donde, si se intersecan, se incrementa el
score

CIBERTEC

CARRERAS PROFESIONALES

194

Evalo el desplazamiento del


paddle, tal como se muestra.

Evalo el desplazamiento del


baln, tal como se muestra.

Evalo la interseccin del baln


con el paddle, donde al
realizarse el proceso se
incrementa el score

Programa el mtodo Draw, donde permitir dibujar la nueva posicin de los objetos del
juego, actualizando los valores de sus posiciones

Presione F5 para iniciar el juego.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

195

Resumen
Para mover los objetos, que va a tener que cambiar las posiciones en la que se
dibujan. En un momento inicial, las imgenes son aadidas en posiciones
constantes, nuestro objeto es que las imgenes se muevan a lo largo de la pantalla
Las imgenes estticas no son muy interesantes, as que vamos a hacer el
movimiento grfico, para ello especificamos su posicin 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 grfico dibujado, y representar a sus la esquina
superior izquierda. Esta posicin se conoce como un sistema de coordenadas.
Un Sprite tambin tienen la capacidad rotar fcilmente a cualquier ngulo que
desee. El ngulo se especifica mediante el uso de cualquiera de las llamadas al
mtodo Draw, pasando por el ngulo para el parmetro adecuado.
A lo largo de las llamadas al mtodo Draw, podemos pasar como parmetro a
Color, para pasar diferentes colores en lugar del color blanco para pintar el grafico
que est siendo dibujado. Una aplicacin muy til de esta funcin es permitir que
un solo grfico que se dibuja en diferentes colores, sin tener que aadir todos los
grficos de diferentes colores por separado en el proyecto de contenido.
El acelermetro es un sensor de entrada, detecta la aceleracin del dispositivo
que el usuario se mueve o rota. El acelermetro del telfono de Windows informa
en tres dimensiones (3D) de vectores, en forma de x, y, z y los valores. Estos
valores indican la direccin y la magnitud de la fuerza que se aplican actualmente
en el dispositiv
La entrada de teclado se maneja a travs de la clase Keyboard, que est en el
espacio de nombres Microsoft.XNA.Frame.Work.Input. La clase Keyboard tiene un
mtodo esttico llamado GetState que recupera el estado actual del teclado en
forma de una estructura KeyboardState. La estructura KeyboardState contiene tres
mtodos clave que le dar la mayor parte de la funcionalidad que necesita.
En una aplicacin de Silverlight, cuando el usuario toca la pantalla, uno o ms
eventos de ratn se plantean. En un juego de XNA, la deteccin de la entrada del
usuario se realiza dentro del mtodo de actualizacin. El siguiente cdigo recupera
el estado actual del panel tctil como una matriz de objetos TouchLocation. A partir
de este la Propiedad de posicin se puede consultar para determinar la ubicacin
del punto de contacto. Recuerde que todos los Dispositivos Windows Phone sern
por lo menos cuatro puntos de contacto

CIBERTEC

CARRERAS PROFESIONALES

196

Si desea saber ms acerca de estos temas, puede consultar a las siguientes


pginas:
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-developmenttutorial-2-static-sprites/
Acelermetro en Windows Phone
http://www.thisisfanzoo.com/Blog/JeffF/archive/2010/07/26/introduction-to-thewindows-phone-7-accelerometer.aspx

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

3.3

197

CREANDO UN GAME FRAMEWOK

3.3.1 DISEO DE UN GAME FRAMEWOK


La Clase Game de XNA ofrece un motor flexible, para iniciar y conducir el juego, lo
que no ofrece algn mecanismo integrado para la gestin 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 pequeo nmero de sprites, pero cualquier juego de las necesidades reales
para el seguimiento de objetos mucho ms 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 sern 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 estn en la pantalla) y nos permitir gestionar un mecanismo coherente y
simple para el movimiento y la prestacin eficiente.

Proporcionando una implementacin sencilla y flexible para los objetos del juego es la
principal rea que vamos a abordar en el diseo y construccin de la estructura del
juego. Vamos a tomar ventaja de las caractersticas de orientacin. NET objeto en el
diseo del marco. Vamos a crear una clase base abstracta que soporta un conjunto
bsico de funciones que sern de utilidad general en cualquiera de los objetos de
nuestro juego. A continuacin, 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 pondrn en juego un proyecto de biblioteca independiente


denominada GameFramework, que nos va a permitir su reutilizacin entre los
proyectos sin tener que reimplementar ellos o compartir archivos fuente. En su lugar,
nos limitaremos a aadir una referencia a la biblioteca de estructuras, y sus clases
estarn disponibles de inmediato.

CIBERTEC

CARRERAS PROFESIONALES

198

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
ms 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 parmetro. 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 cdigo dentro de
esta clase y cualquier clase derivada de acceso al objeto principal del juego. El
constructor se muestra a continuacin:

public GameObjectBase(Microsoft.Xna.Framework.Game game){


Game = game;
}

Adems de definir el constructor, se define un mtodo nico, el Update, que se utiliza


para actualizar el estado del objeto. Se acepta un objeto GameTime como un
parmetro para que la informacin de tiempo pueda extraer, al igual que el mtodo
Update en la clase principal del juego. La funcin no hace ms que incrementar una
variable, UpdateCount, de modo que podemos decir cuntas actualizaciones se han
producido. Nuestras clases derivadas anular esta funcin, sin embargo, para que
puedan realizar las actualizaciones reales de sus objetos de juego correspondiente.

public virtual void Update(GameTime gameTime){


// Incrementar el UpdateCount
UpdateCount += 1;
}

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 aadir toda la funcionalidad bsica que
puede ser que desee utilizar para colocar y sacar nuestros sprites. En su forma bsica,
la clase es capaz de mantener la posicin de un sprite, escala, rotacin y origen, una

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

199

textura para que acabe con l, con un color de tinte con un rectngulo 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.

GameObjectBase
Abstract Class

SpriteObject
Class
GameObjectBase

No contiene ninguna lgica de los objetos, sin embargo: no sabe nada acerca de cmo
mover o cambiar ninguna de sus propiedades. Esta lgica se aadir mediante la
derivacin 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 esttico simple es todo lo que se requiere, los casos
de SpriteObject pueden ser creadas y aadidas al juego. El constructor proporciona
diferentes sobrecargas para configurar fcilmente algunas de las propiedades
comunes de la clase.

public SpriteObject(Game game)


public SpriteObject(Game game, Vector2 position)
public SpriteObject(Game game, Vector2 position, Texture2D texture)

La clase ofrece un conjunto de propiedades que permite controlar la posicin y


apariencia del Sprite:

Propiedad

Descripcin

SpriteTexture

Almacena una referencia a una Texture que puede ser utilizada


para renderizar el Sprite

PositionX,

Almacena la posicin del Sprite como una variable float, la

PositionY

propiedad Position representa la misma posicin como un


Vector2.

OriginX, OriginY y Almacena las coordenadas de origen del Sprite, utiliza un par de

CIBERTEC

CARRERAS PROFESIONALES

200

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 rotacin 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


subregin 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 creacin 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 cdigo repetitivo que de otra manera tendra que escribir
para almacenar toda esta informacin.

Adems de almacenar el estado de Sprites, tambin se suma a una funcin virtual


llamado Draw. Al igual que el mtodo Draw de la clase de XNA Game principal,
esperamos que un objeto GameTime como un parmetro, pero tambin requieren un
objeto SpriteBatch para pasar pulg Dado que esta clase est dedicada enteramente a
los sprites de dibujo, es lgico esperar que un SpriteBatch, y que necesita acceder a
uno de manera que podamos llamar a su mtodo 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);
}
}
}

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

201

3.3.2.3 La Clase TextObject


Tenemos una forma simple de representar un Sprite, pero sera muy til contar con un
mecanismo correspondiente para la representacin de texto. Esto lo conseguimos
mediante la creacin de la clase TextObject. El objeto Text tiene muchas de las
caractersticas que los Sprites (una posicin, origen, color, rotacin, escalado, y ms),
se derivan de TextObject; de los SpriteObject nos permite aprovechar todas las
propiedades SpriteObject acciones.

GameObjectBase
Abstract Class

SpriteObject
Class
GameObjectBase

TextObject
Class
SpriteObject

Los constructores disponibles para esta clase son ms orientados a texto y se


muestran:

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)

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.

CIBERTEC

CARRERAS PROFESIONALES

202

HorizontalAlignment y VerticalAlignment ofrecen al creador del objeto una


forma simple de alineacin automtica de texto alrededor de su posicin.

Los cuatro de estas propiedades estn 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 cdigos y realizar un procesamiento adicional en relacin
con la alineacin del texto.

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();
}
}
}

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
especficas del juego que se derivan de una de estas.

La clase tambin contiene algunos mtodos 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.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

203

XNA.Framework.Game
Class

GameHost
Class

GameObjects

GameObjectBase
Abstract Class

SpriteObject
Class
GameObjectBase

TextObject
Class
SpriteObject

Una vez que el juego se inicia y en funcionamiento, dos mtodos adicionales estn
disponibles para simplificar el cdigo de la clase principal del juego:

Mtodos

Descripcin

UpdateAll

Recorre todos los elementos de la lista GameObjects y llama al


mtodo Update en cada uno de ellos. Esta funcin puede ser llamada
de la clase principal del juego el mtodo Update para que todo siga
avanzando.

DrawSprites

Identifica todos los SpriteObject (y derivados) los objetos de la


GameObjects lista y llama al mtodo Draw de cada uno. Se requiere
un objeto inicializado SpriteBatch que se pasan, y es responsabilidad
del cdigo de llamada para llamar a su inicio y fin
mtodos

DrawText

Identifica todos los TextObject (y derivados) en la lista de objetos


GameObjects y llama al mtodo Draw para ellos, al igual que hace por
DrawSprites SpriteObject los objetos del juego.

CIBERTEC

CARRERAS PROFESIONALES

204

Un ejemplo de este objeto es implementar un mtodo que inicializa el objeto


objectArray.

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)];
}
}

3.3.2.5 Aadiendo 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 aaden a las colecciones GameHost.

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();
}

La ltima lnea de cdigo en las llamadas LoadContent en una nueva funcin llamada
RESETgame, en el que crear los objetos que va a hacer el trabajo cuando el juego se
est ejecutando, y su cdigo se muestra.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

205

private void ResetGame(){


TextObject message;
// Remover los objetos
GameObjects.Clear();
// Aadir 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"]));
}
// Aadir 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);
}

Para llevar a cabo la actualizacin y funciones de dibujo, estas son absolutamente


triviales, simplemente decirle a la mquina de juego para realizar las actualizaciones
necesarias y el dibujo.

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);
}

3.3.2.6 Remover objetos al GameHost


As como los objetos del juego pueden aadir ms objetos en el mtodo Update, para
que puedan retirar los objetos tambin. Si un objeto se determina que ya no es
necesaria, simplemente se puede quitar de la coleccin y no recibir ms llamadas de
actualizar o Draw. Esto incluye la capacidad para que un objeto se retire si es
necesario.

CIBERTEC

CARRERAS PROFESIONALES

206

LABORATORIO 11.1
Implementando una aplicacin en XNA para crear un Game Framework.
Implementa una aplicacin en XNA que permita define una clase Balon de tipo
Texture2D, definiendo las caractersticas de la clase, implementando la instancia de la
clase en el Game.

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone: Seleccione la opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el


proyecto

Seleccione la plantilla
Windows Phone Game
en Visual C#

Asigne nombre al
proyecto

Agregue al proyecto Content una imagen


llamado pelota, y agregue al proyecto la clase
Balon.cs.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

207

En la clase Balon,
defina los objetos de
la

clase:

Texture2D

pelota
y

una

estructura Vector2.

CIBERTEC

CARRERAS PROFESIONALES

208

Defina las propiedades Width y Height que retorne las dimensiones de la pelota.

Defina

el

mtodo

Initialize
inicializar

para
la

clase

Balon, y el mtodo
Draw que permita
dibujar la pelota.

En la clase Game1, defina la clase Balon llamada pelota, en el mtodo Initialize()


instanciar el objeto pelota.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

209

En el mtodo LoadContent() inicializar el objeto pelota, enviando la imagen y su


posicin como parmetros.

CIBERTEC

CARRERAS PROFESIONALES

210

En el mtodo Draw de la clase Game1, dibuje el objeto pelota. Presione, luego F5 para
ejecutar el juego.

LABORATORIO 11.2
Implementando una aplicacin en XNA para crear un Game Framework animado.
Implementa una aplicacin en XNA que permita define una clase Balon de tipo
Texture2D, definiendo las caractersticas de la clase, implementando la animacin del
baln dentro de la clase.

1. Inicio del Proyecto


Para iniciar un proyecto Windows Phone: Seleccione la opcin Create New Proyect

Desde el IDE New Project, seleccione la plantilla (Template) Visual C#, el cual
listara un conjunto de proyectos

Seleccione la aplicacin Windows Phone Game (4.0), tal como se muestra.

Asigne un nombre al proyecto, luego presione el botn OK para grabar el


proyecto

Seleccione la plantilla
Windows Phone Game
en Visual C#

Asigne nombre al
proyecto

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

211

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

CIBERTEC

CARRERAS PROFESIONALES

212

Defina los mtodos en la clase baln que permita inicializar el objeto pelota, as como
los mtodos que retornen el ancho y alto de la pelota.

Implementa el mtodo Update, definiendo los parmetros para realizar la animacin de


la pelota; defina el mtodo Draw para dibujar la pelota utilizando una estructura
Rectangle llamada marco.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

213

En la clase Game1, defina e instancia la clase Balon en el objeto llamado pelota, tal
como se muestra en la ventana de cdigo.

Programa el mtodo LoadContent para inicializar el objeto pelota, tal como se muestra.

CIBERTEC

CARRERAS PROFESIONALES

214

Programa el mtodo Update, ejecutando el mtodo Update de la clase Balon,


enviando las dimensiones de la pantalla, y programa el mtodo Draw del Game1,
ejecutando el mtodo Draw de la clase Balon

Presione la tecla F5, para ejecutar el Juego.

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MVILES II

215

Resumen
La Clase Game de XNA ofrece un motor flexible, para iniciar y conducir el juego, lo
que no ofrece algn mecanismo integrado para la gestin 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 ms 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 aadir toda la funcionalidad bsica que
puede ser que desee utilizar para colocar y sacar nuestros sprites. Un Sprite
tambin tienen la capacidad rotar fcilmente a cualquier ngulo que desee. El
ngulo se especifica mediante el uso de cualquiera de las llamadas al mtodo
Draw, pasando por el ngulo para el parmetro adecuado.
Tenemos una forma simple de representar un Sprite, pero sera muy til contar
con un mecanismo correspondiente para la representacin de texto. Esto lo
conseguimos mediante la creacin de la clase TextObject. El objeto Text tiene
muchas de las caractersticas que los Sprites (una posicin, origen, color, rotacin,
escalado, y ms), 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 especficas del juego que se derivan de una de estas.La clase
tambin contiene algunos mtodos 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 actualizacin y funciones de dibujo, en un arreglo de objetos,
estas son absolutamente triviales, simplemente decirle a la mquina de juego para
realizar las actualizaciones necesarias y el dibujo.
As como los objetos del juego pueden aadir ms objetos en el mtodo Update,
para que puedan retirar los objetos tambin. Si un objeto se determina que ya no
es necesaria, simplemente se puede quitar de la coleccin y no recibir ms
llamadas de actualizar o Draw. Esto incluye la capacidad para que un objeto se
retire si es necesario.

CIBERTEC

CARRERAS PROFESIONALES

216

Si desea saber ms acerca de estos temas, puede consultar a las siguientes


pginas:
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-developmenttutorial-2-static-sprites/
Acelermetro en Windows Phone
http://www.thisisfanzoo.com/Blog/JeffF/archive/2010/07/26/introduction-to-thewindows-phone-7-accelerometer.aspx

CARRERAS PROFESIONALES

CIBERTEC

Das könnte Ihnen auch gefallen