Manual 2016-II 06 - Desarrollo de Aplicaciones Móviles II

Desarrollo de Aplicaciones Móviles II

2

CARRERAS PROFESIONALES

CIBERTEC

DESARROLLO DE APLICACIONES MÓVILES II

ÍNDICE

3

Página

Presentación

5

Red de contenidos

7

Unidad de aprendizaje 1 CONSTRUYENDO UNA APLICACIÓN WINDOWS PHONE 1.1 Tema 1

: Introducción a Windows Phone

11

1.1.1. : Plataforma del Windows Phone

11

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

15

1.1.3. : Requerimientos de Windows Phone

17

1.1.4. : Laboratorio

19

1.2 Tema 2

: Trabajando con SilverLight en Windows Phone

32

1.2.1. : Introducción a Silverlight

32

1.2.2. : Controles en SilverLight

32


38

1.3 Tema 3

: Navegando entre páginas, manejo de estados

55

1.3.1. : Navegando entre páginas

55

1.3.2. : Manejo de estados

60


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


85

2.2 Tema 4

96

2.2.1. : Acerca de XML

96

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

97

2.2.3. : Controles enlazados a los datos

102


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. : Características del WCF

125

2.3.3. : Windows Phone y WCF

127


132


4

Unidad de aprendizaje 3 DESARROLLANDO UNA APLICACIÓN XNA EN WINDOWS PHONE 3.1 Tema 6

: XNA

147

3.1.1. : XNA, características y requerimientos

147

3.1.2. : Plantilla del Proyecto

148

3.1.3. : Objetos Sprites

153


158

3.2 Tema 7

: Animación en XNA

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

175 175

acelerómetro 3.2.2. : Animación por dispositivos de entrada

179

3.2.3. : Manejo de colisiones

182


183

3.3 Tema 8

: Creando un Game FrameWork

197

3.3.1. : Diseño de un Game FrameWork

197

3.3.2. : Clases de un Game FrameWork

198


206


CIBERTEC


5

PRESENTACIÓN Desarrollo de Aplicaciones Moviles II pertenece a la línea formativa y se dicta en las carreras de tecnologías de la institución. El curso brinda un conjunto de herramientas de programación para trabajar con una aplicación móvil que permita al alumno desarrollar aplicaciones para el manejo de datos y consulta de datos remotas, así como el desarrollo de juegos para una aplicación móvil en forma eficiente. El manual para el curso ha sido diseñado bajo la modalidad de unidades de aprendizaje, las que se desarrollan durante semanas determinadas. En cada una de ellas, hallará los logros, que debe alcanzar al final de la unidad; el tema tratado, el cual será ampliamente desarrollado; y los contenidos, que debe desarrollar, es decir, los subtemas. Por último, encontrará las actividades y trabajos prácticos que deberá desarrollar en cada sesión, que le permitirán reforzar lo aprendido en la clase. El curso es eminentemente práctico: consiste en programación C# implementado en una aplicación Windows Phone. La primera parte del manual nos enseña a implementar las herramientas de SilverLight en una aplicación Windows Phone para el manejo de datos locales y remotos. En primer lugar, se inicia con el reconocimiento de las características de SilverLight. Continúa con el manejo de las herramientas de SilverLight. Luego, vamos a realizar operaciones para el manejo de datos locales y consulta de datos remotos utilizando Windows Communication Foundation. La segunda parte del curso es la implementación de juegos utilizando XNA. En primer lugar, reconoceremos los objetos que trabajan en una aplicación de juegos; luego implementamos una aplicación de juegos con animación. Se concluye con la realización de una aplicación de juegos con animación con los formatos efectuados en el curso.

CIBERTEC


6


CIBERTEC


7

RED DE CONTENIDOS

Desarrollo de Aplicaciones Móviles II

Construyend o una aplicación 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

Animación


8


CIBERTEC


9

UNIDAD DE APRENDIZAJE

1

CONSTRUYENDO UNA APLICACIÓN WINDOWS PHONE LOGRO DE LA UNIDAD DE APRENDIZAJE Al término de la unidad, el alumno desarrolla procesos de diseño en una aplicación Windows Phone utilizando los controles estándares de la aplicación SilverLight, navegando entre las páginas, definiendo la textura y diseño del layout de una página.

TEMARIO Unidad de aprendizaje 1: Construyendo una Aplicación Windows Phone 1.1 Tema 1 : Introducción a Windows Phone 1.1.1. : Plataforma del Windows Phone 1.1.2. : Ciclo de vida de una Aplicación Windows Phone 1.1.3. : Requerimientos de Windows Phone 1.2 Tema 2 : Trabajando con SilverLight en Windows Phone 1.2.1. : Introducción a Silverlight 1.2.2. : Controles en SilverLight 1.2.3. : Laboratorio 1.3 Tema 3 : Navegando entre páginas, manejo de estados 1.3.1. : Navegando entre páginas 1.3.2. : Manejo de estados 1.3.3. : Laboratorio ACTIVIDADES PROPUESTAS  Los alumnos implementarán una aplicación Mobile para el manejo de imágenes, videos y archivos de audio.  Los alumnos aprenderán a navegar entre páginas, enviando datos entre ellas.

CIBERTEC


10


CIBERTEC


1.1

11

INTRODUCCION A WINDOWS PHONE

Microsoft Windows Phone es un gran consumidor de aplicaciones móviles, porque tiene todas las características a las que los usuarios se han acostumbrado con el iPhone de Apple y los teléfonos inteligentes que utilizan tecnología Android, tales como el Motorola Droid y HTC.

Estas características incluyen multi-touch. Una interfaz que implementa un nuevo diseño moderno llamado METRO, los servicios de redes sociales como Facebook, y soporta cuentas de correo electrónico tales como Yahoo, Hotmail, Google y AOL. Incluso, si usted es un usuario corporativo, brinda soporte para Microsoft Exchange.

Excepcionalmente, el teléfono cuenta con una versión de Microsoft Office que puede utilizar para leer, editar, guardar y sincronizar los archivos de Word, hojas de cálculo Excel y otros formatos de Office, por lo que es un gran sistema operativo para el teléfono de aquellos que utilizan Office en casa o en la oficina. Windows Phone también se puede integrar con Xbox Live, lo que lo convierte en una gran opción para los jugadores. Microsoft Windows Phone utiliza el software de Zune para sincronizar las aplicaciones instaladas, imágenes, música, las copias de seguridad y actualizaciones flash del sistema operativo.

Microsoft también introduce el concepto de CENTRO: un centro de personas donde los usuarios puede almacenar todos sus contactos y conexiones de redes sociales. Un centro musical donde los consumidores pueden escuchar, descargar y comprar música. Este centro también es conocido como el MARKET PLACE. Una de las ventajas de Windows Phone es que Microsoft impone las especificaciones de hardware en el fabricante del teléfono, lo que le facilita al programador desarrollar una aplicación sin tener que preocuparse de las especificaciones de los códigos dispositivos específicos. Para cualquier versión futura del teléfono, se garantiza que la aplicación que se escribió hoy funcionará mañana independientemente de la marca del teléfono.

CIBERTEC


12

Para Windows Phone, el lenguaje elegido es C#. Los desarrolladores de Visual Basic (VB) tendrán que esperar. En cuanto a un marco de desarrollo de aplicaciones, tiene dos opciones: Silverlight o XNA. Silverlight y XNA utilizan la misma plataforma: Framework .NET.

1.1.1 PLATAFORMA DEL WINDOWS PHONE Microsoft no inventó nuevos lenguajes de programación o Frameworks para la plataforma de aplicaciones de Windows Phone. Simplemente ha adaptado los Framework existentes. Esto significa que será capaz de programar utilizando C# con el Framework .NET.

.NET Framework proporciona una base común de biblioteca de clases que todos los programadores .NET conocen, incluyendo soporte para multithreading, XML, LINQ, colecciones, eventos, datos, excepciones, IO, modelo de servicio, manejo de redes, manejo de texto, reflexión, internacionalización, recursos, manejo de hilos o threads, y seguridad.

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

Silverlight



XNA

El uso de Silverlight se hará principalmente para el desarrollo de aplicaciones de negocios y juegos sencillos en 2D. Silverlight utiliza el XAML: Extensible Application Markup Language, que es un lenguaje de marcas declarativo, para crear una interfaz de usuario atractiva. Los diseñadores tienen una gran flexibilidad en la creación de interfaces de usuario para Windows Phone usando herramientas conocidas como Adobe Illustrator, Photoshop y Microsoft Expression Design pues pueden crear la interfaz de usuario basándose en vectores para luego exportarlas a XAML.

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


CIBERTEC


13

1.1.1.1 SILVERLIGHT EN WINDOWS PHONE

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

Desde de una aplicación de Silverlight no se puede acceder a cualquier sistema operativo a menos que sea a través de las funciones API proporcionadas específicamente. La arquitectura de Silverlight lo provee de una seguridad inteligente que lo hace muy adecuado para ser utilizado en Windows Phone, ya que Windows Phone sólo proporciona las funciones API para desarrolladores y limita el acceso al sistema operativo nativo.

También se utiliza Silverlight XAML, para crear gráficos basados en vectores y crear animaciones. Cualquier diseñador familiarizado con las aplicaciones basadas en vectores, como Adobe Illustrator y Microsoft Expression Design, puede crear fácilmente elementos muy visuales exportarlos a XAML. Esto significa que los diseñadores tienen un control total sobre el diseño y la apariencia, lo que hace a Silverlight una opción muy potente para crear aplicaciones orientadas al consumidor. XAML también proporciona una función de enlace de datos de gran alcance, por lo que es ideal para crear aplicaciones orientadas a empresas.

1.1.1.2 XNA EN WINDOWS PHONE

XNA no es una tecnología nueva. Se utiliza en la creación de juegos para la consola XBOX utilizando código administrado. Trabajar con XNA para juegos es una elección natural, ya que Windows Phone tiene XBOX LIVE integrado.

Los juegos de XBOX son fácilmente instalados en una aplicación Windows Phone. Lo único en lo que los desarrolladores de juegos de XBOX tienen que preocuparse es en la resolución de pantalla, la misma que se puede ajustar fácilmente. En tal sentido, XNA proporciona un marco perfecto para el desarrollo de juegos en formato 2D y 3D. Asimismo, tiene la capacidad de administrar de manera solvente los objetos del juego tales como modelos, mallas, sprites, texturas, efectos, terrenos y animaciones.

CIBERTEC


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 acelerómetro, el GPS, el uso del compás, la radio FM, los SMS, el correo electrónico, las llamadas de teléfono, la lista de contactos, la cámara, y otras características que requieren un dispositivo físico.

Sin embargo, existe una técnica denominada Extensiones Reactivas, donde el emulador es capaz de utilizar los recursos del dispositivo para simular la fuente de datos que puede esperar en un teléfono real. Por ejemplo, con extensiones reactivas, puede simular el acelerómetro y las lecturas del GPS para que el emulador pueda trabajar sin la necesidad del dispositivo.

1.1.1.4 DISEÑO METRO

Microsoft dirige Windows Phone hacia los profesionales y para ello proporciona una interfaz de usuario adecuada. En ese sentido, Microsoft desarrolló un estilo de diseño denominado METRO. Este estilo de diseño deriva de la industria del transporte, pues se basa en los carteles informativos de los aeropuertos y, sobre todo, de las


CIBERTEC


15

estaciones de tren. Comprende una tipografía y organización gráfica que facilita el acceso a los recursos del dispositivo así como la simpleza y claridad de la información.

Diseño Metro sigue estos principios:  Preocupación por limpieza, la luz y la tipografía, ya que los consumidores van a utilizar el móvil durante sus desplazamientos para leer el correo electrónico, los SMS, revisar su Facebook y publicaciones en Twitter.  Perfecta integración de hardware y software.  Soporte a gestos para permitir una experiencia de usuario multitáctil de clase mundial.  Centrado en la información de modo que la misma sea fácilmente accesible para el usuario.

Puede encontrar más información sobre el diseño Metro en la siguiente dirección electrónica: http://go.microsoft.com/fwlink/?LinkID=183218.

1.1.2 CICLO DE VIDA DE UNA APLICACIÓN WINDOWS PHONE La siguiente figura ilustra un alto nivel de observación del ciclo de vida de una aplicación.

Developer

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


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 físico. Recuerde que puede agregar hasta tres dispositivos. El entorno de desarrollo será Visual Studio y/o Expression Blend, tanto para la construcción como para la depuración, junto con el emulador o el dispositivo que se registró. Una vez que la aplicación es creada, es necesario presentar la solicitud para la certificación de la aplicación.

A fin de garantizar que su solicitud pasará el proceso de certificación, sería conveniente que lea y entienda el documento de certificación de aplicaciones que se encuentran en la siguiente dirección electrónica: http://msdn.microsoft.com/en-us/library/hh184843(v=VS.92).aspx.

Como parte del proceso de certificación, su aplicación pasa a través de una serie de validaciones sobre la aplicación misma y las políticas de contenido, tales como: código, idioma del teléfono y requisitos de las imágenes. También se hacen pruebas de fiabilidad, rendimiento, gestión de recursos, uso de la funcionalidad de teléfono y la seguridad. La certificación de la aplicación es importante pues ayuda a promover las aplicaciones de calidad, proteger a los consumidores de malwares y proteger los servicios de Microsoft.

Una vez que la aplicación pasa el proceso de certificación, será desplegada en el MARKET PLACE, de allí el usuario consumidor podrá descargarla y utilizarla.

El usuario de la aplicación deberá proporcionar evaluaciones y comentarios sobre su apreciación de la aplicación. Los informes pueden ser generados por usted desde el Hub de Aplicaciones. Basándose en la información que recibe, puede optar por desplegar una actualización que comprenda las correcciones de los errores de la aplicación y/o nuevas características. El objetivo final es crear una aplicación adecuada para que los consumidores la descarguen y utilicen.

La participación en el Marketplace tiene un costo determinado por Microsoft. Dicho pago otorga una serie de derechos de publicación. Finalmente, a partir de la venta de sus aplicaciones, usted recibirá el dinero correspondiente a las ganancias respectivas a través de un depósito en banco bajo ciertas condiciones específicas de Microsoft.


CIBERTEC


17

1.1.3 REQUERIMIENTOS DE WINDOWS PHONE 1.1.3.1 PANTALLA Para empezar, todos los dispositivos Windows Phone tendrán una pantalla con un ancho VGA (WVGA) y resolución de 480 píxeles de ancho por 800 píxeles de alto, lo que simplificará la tarea de asegurar que los juegos y aplicaciones se ajusten correctamente en la pantalla sin tener que estirar, encoger o dejar grandes áreas de la pantalla sin utilizar. 1.1.3.2 BOTONES Este es uno de los detalles en los que Microsoft ha sido muy estricto en los dispositivos que ejecutan el sistema operativo. Todos los dispositivos deben tener exactamente tres botones en el frontal del dispositivo: un botón de retroceso, un botón de Windows y un botón de búsqueda. Tener la certeza de la disponibilidad de estos botones es particularmente bueno para los desarrolladores, ya que significa que no tiene que preocuparse por un montón de combinaciones de mecanismos de control. Sin embargo, al mismo tiempo, esta resulta una limitación pues significa que no habrá control de dirección disponible, lo cual es muy útil en algunas aplicaciones o juegos. En su lugar, podemos utilizar la pantalla táctil para la entrada de datos o comandos. Existen muchas maneras ingeniosas y creativas en las que esto se puede hacer, desde el diseño de juegos en los que el usuario interactúa al tocar objetos en la pantalla, hasta la presentación de botones de movimiento en la parte inferior de la pantalla. 1.1.3.3 PROCESADOR La especificación de la plataforma Windows afirma que todos los dispositivos deben estar equipados con, al menos, un procesador de 1GHz. Esto se traduce en un rendimiento excelente en todos los dispositivos. Es de esperar que la velocidad del procesador aumente a medida que evoluciona la plataforma, lo que será importante para soportar a los dispositivos que ejecutan a velocidades más rápidas, pero, como mínimo, significa que una cantidad significativa de potencia de procesamiento estará disponible en todos los dispositivos. 1.1.3.4 HARDWARE GRAFICO La API de gráficos para juegos de alto rendimiento es XNA, una biblioteca de gran alcance basada en la tecnología DirectX que ha sido la base de los juegos de PC de escritorio de la última década. La implementación de Windows Phone no es tan

CIBERTEC


18

poderosa como la del escritorio, pero aún así tiene capacidades muy impresionantes para un dispositivo móvil. Junto a la API está la aceleración de hardware de gráficos que el teléfono tiene que manejar para dar soporte a movimientos rápidos y escenas complejas en 2D y 3D.


CIBERTEC


19

LABORATORIO 1.1

Creación de un Proyecto Windows Phone Implementa una aplicación Windows Phone donde al ejecutarse nos muestre un Saludo

1. Inicio del Proyecto Para iniciar un proyecto Windows Phone: 

Seleccione la opción Create New Project.

Seleccione la opción 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 aplicación Windows Phone Applicatioin, tal como se muestra.



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

CIBERTEC


20

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

2. Estructura del Proyecto Windows Phone Creada la nueva solución en forma predeterminada, Visual Studio muestra el archivo MainPage.xaml en el editor. La pantalla por defecto para Archivos XAML es una vista dividida, donde se exhibe el panel de marcado XAML (texto XML) y el otro presenta una vista de diseño que muestra la interfaz de usuario generada como se describe en el XAML.

GUI del Windows Phone

Estructura del Main formato XML


CIBERTEC


21

Observe el archivo MainPage.xaml y verá que incluye algunos objetos predefinidos como las Grillas y bloques de texto. A continuación, detallamos la estructura del archivo Main.

1

2

3 4

5

6

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

es mapeado a la librería

PhoneNavigation XAML. Esta librería también se declara en el archivo App.xaml. Microsoft.Phone.Controls es clave para las aplicaciones Windows Phone en general y aplicaciones Silverlight en particular. 3. Las aplicaciones Silverlight para Windows Phone, por defecto, generan un objeto Grid o cuadricula, denominado LayoutRoot (con la x: sintaxis de la propiedad nombre).

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

ofrece y, probablemente, el que va a utilizar más a menudo. Le permite ordenar sus objetos en varias filas y columnas. 4. El LayoutRoot define dos filas con el Grid.RowDefinition propiedades. Fijamos la primera fila al tamaño de Auto, que automáticamente cambia la altura de la primera fila (fila define la altura, mientras que la columna define la anchura). A continuación, establecemos el segundo fila que básicamente le dice al motor de diseño, todo el resto de la espacio disponible será utilizada por la segunda fila.

CIBERTEC


22

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

3. Agregando controles al Page Toda aplicación Windows utiliza una barra de herramientas para agregar controles a la Página (Page). Agregue los controles al Page, tal como se muestra en la figura.

Arrastre los controles dentro de la Grilla

Declarativas de los controles en XAML

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


CIBERTEC


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


24

Para programar el control Button del Page, nos ubicaremos en la ventana de propiedades (presione la tecla F4) y seleccionamos el botón Eventos.

Seleccione la pestaña Events del control btnHello

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

A continuación, programe el evento Clic del botón 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


CIBERTEC


25

Antes de ejecutar el proceso debemos cambiar el estado de la ejecución 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 botón OK, el cual le dará la bienvenida.

CIBERTEC


26

Diseñando la Página Cuando implementamos una aplicación y deseamos brindar ciertas características al Layout: color de fondo, color de letra, márgenes, etc. Estas ediciones se realizan en Microsoft Expression.

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

Al cargar por primera vez el software, seleccione desde la ventana Customer Experience, la opción I don’t want to join… luego presione la opción OK.

Cerrar esta ventana presionando el botón Close.


CIBERTEC


27

Para trabajar con Microsoft Expression, debemos abrir el proyecto que estamos trabajando, tal como se muestra, seleccione la opción Open Project/Solution.

Seleccione el archivo appPhone.sln

Selecciona el proyecto, el cual tiene la extensión .sln. A continuación presione el botón Abrir.

2. Seleccione la opción Brush: Background

1. Seleccione desde objetos: LayoutRoot

CIBERTEC

3. Editar el color, tal como se muestra


28

Diseñando el control TxtMensaje.

2. Seleccione la opción Brush: BorderBrush

1. Seleccione desde objetos: txtMensaje


1. Seleccione la opción Brush: BackGround



CIBERTEC


29

Para guardar el proyecto, seleccione desde la opción de Menu File, la opción Save All, tal como se muestra.

Al activar la pantalla del proyecto, debe actualizar el archivo editado, donde se visualiza el siguiente mensaje: seleccione la opción Yes to All.

Archivo editado actualizado en el proyecto Windows Phone.

CIBERTEC


30

Cambio de Orientación de la pantalla Al ejecutar el proyecto, el emulador levanta la aplicación, si cambia de orientación, debería cambiar el sentido de la pantalla, para ello ¿qué debo hacer?

Cambio de orientación de la pantalla

En el constructor de la Página MainPage(), defina el comportamiento de la página cuando esta realice la rotación a través de la siguiente sentencia de programación:

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


CIBERTEC


31

Resumen  Microsoft Windows Phone es un gran consumidor de teléfono, porque tiene todas las características a las que los usuarios se han acostumbrado con los smartphones.  .NET proporciona es una base común de biblioteca de clases que todos los programadores .NET conocen, incluyendo soporte para multithreading, XML, LINQ, colecciones,

eventos,

datos,

excepciones,

IO,

modelo

de

servicio,

la creación de redes, el texto, la ubicación, la reflexión, la globalización, recursos, tiempo de ejecución, la seguridad y el diagnóstico.  Silverlight utiliza la tecnología web y se usa básicamente para aplicaciones emprsariales y juegos sencillos en 2D.  XNA se utiliza en la creación de juegos de Xbox, utilizando código administrado. Windows Phone integra Xbox LIVE.  El emulador del Windows Phone se integra a Visual Studio que simula un verdadero dispositivo. Sin embargo, hay cosas que no se pueden hacer en el emulador, como prueba el acelerómetro, el GPS, compás, radio FM, SMS, correo electrónico, llamadas de teléfono, lista de contactos, la cámara y otras características que requieren un dispositivo físico.  Si desea saber más acerca de estos temas, puede consultar las siguientes páginas:  http://www.lavilladigital.com Aquí hallará un tutorial de aplicaciones de Windows Phone.  http://libreyextremo.blogspot.com En esta página, hallará algunos ejercicios sobre aplicaciones en Windows Phone.

CIBERTEC


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 teléfono, así como nuevos controles. En este capítulo, usted aprenderá acerca de estas optimizaciones.

1.2.2 CONTROLES EN SILVERLIGHT Windows Phone incluye la mayoría de los controles básicos de Silverlight 3. La compatibilidad con Desktop es muy alta, pero la mayoría de los

controles de

Windows Phone tienen pequeñas optimizaciones o retoques. Antes de llegar a los cambios detallados en cada control, debemos entender los motivos y objetivos de estos cambios: A. Windows Phone no tiene el concepto del Mouse. El Mouse es un concepto en el escritorio (y, como tal, en la plataforma Silverlight). Para maximizar la compatibilidad entre ambas plataformas, Windows Phone escucha los eventos Touch y traduce estos eventos. B. Windows Phone es capaz de Multitouch. Algunos controles de Windows Phone incluyen soporte de gestos individuales y multitouch, los cuales incluyen tocar, rozar y una pizca de zoom (multitoque). C. Windows Phone es compatible con “temas” y tiene un nuevo aspecto y estilo. Todos los controles principales de Windows Phone han sido optimizados para apoyar la apariencia del diseño METRO.

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

Controles SilverLight 3

Optimizacion en Windows Phone

Button

Temas. Gestor de toque Click

CheckBox

Temas. Gestor de toque Click

ContentControl HyperlinkButton

Temas Configurado para iniciar el navegador en el dispositivo.


CIBERTEC


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 reproducción con el dispositivo Media Stack

MultiScaleImage

Hardware de procesamiento acelerado

Password

Soporta SIP. Retraso visual del carácter escrito antes de convertirse en carácter contraseña

ProgressBar

Temas

RadioButton

Gestor Tap antes del Click, Temas

ScrollViewer

Barras de desplazamiento no son recurribles, son indicadores de posición.

Slider

Gestor Tap. Temas

TextBox

Soporte SIP Soporte para Entrada

TextBlock

Temas

1.2.2.1 Nuevos Controles en Windows Phone

Windows Phone extiende el núcleo de Silverlight con un conjunto de controles optimizados para la forma del teléfono, para el soporte del modelo de navegación de Windows Phone y controles que admiten la apariencia Metro.

A. Control WebBrowser Las aplicaciones Windows Phone están alojados fuera del explorador en un proceso de host llamado taskhost.exe. Este proceso de alojamiento es similar a la salida del explorador modelo disponible en Silverlight 4. Tanto en Windows Phone y Silverlight 4, cuando se encuentre fuera de navegador que puede albergar y interactuar con el contenido HTML y Javascript con el control WebBrowser.

El WebBrowser permite cargar el contenido en tres maneras diferentes: • La propiedad Source apunta un URI donde el HTML que es donde el control descarga el HTML que será reproducido. • El método Navegate () permite desplazarse a cualquier Uri.

CIBERTEC


34

• NavigateToString () le permite cargar una cadena de formato HTML directamente en el control. Dado que el código HTML se pasa como una cadena, puede ser el contenido dinámico, que proviene de la Internet, pero es leído como un Stream, o puede ser un archivo local, ya sea en el almacenamiento aislado o su aplicación.

Para controlar la navegación, el control expone los eventos Navigating y Navigated: • El evento Navigating se desencadena antes que la navegación suceda, donde se puede asignar la propiedad Cancel en el NavigationEventArgs pasado en el evento para evitar que el usuario de navegación de distancia. • El evento Navigated se activa cuando el nuevo objetivo de Uri se abre y se descarga.

B. PhoneApplicationFrame Dentro de una aplicación, la navegación desde un Page a otro Page es implementada por la clase PhoneApplicationFrame y la clase NavegationService. 

Usando PhoneApplicationFrame no se puede ejecutar el método GoForward(); la propiedad CanGoForward siempre será falsa.



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



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



Las plantillas para el control son diferentes. En particular, las plantillas de Windows Phone fijan los márgenes para el cromo del teléfono - el cromo es un área reservada para la bandeja del sistema y la barra de aplicaciones-. Usted debe respetar estas áreas si desea reemplazar la plantilla.


CIBERTEC


35

C. PhoneApplicationPage PhoneApplicationPage tiene la funcionalidad de navegación para ir junto con Marco, pero también incluye tres otras características críticas para cualquier aplicación Windows Phone: Orientación, De menús (a través de la ApplicationBar) e integración de tareas (Selectores y Lanzadores).

Por navegación, PhoneApplicationPage tiene métodos virtuales para NavigatedTo, NavigatingFrom y NavigatingTo.

PhoneApplicationPage tiene una referencia hacia NavigationService que el Frame utiliza y el NavigationContext pasado hacia la página. El NavigationContext contiene una cadena de consulta que es utilizada en el URI de la página. Ejemplo.-

Uso

NavigationContext

para

leer

un

QueryString

pasado

al

PhoneApplicationPage.

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 También desencadenado de manera similar como Navigation, vía método virtual, puedes sobrescribirse: 

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



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

Una PhoneApplicationPage puede controlar la orientación asignándolo en la propiedad SupportedOrientations. Una página puede elegir

ser Portrait o Landscape or

PortraitOrLandscape. Por defecto es Portrait.

CIBERTEC


36

E. ApplicationBar El ApplicationBar es una barra de menú para la aplicación. La meta para el ApplicationBar es proporcionar un menú o barra de herramientas que proporciona fácil acceso a las tareas comunes en la aplicación. Cada PhoneApplicationPage puede tener su propia ApplicationBar, aunque se recomienda que no cambie demasiado las opciones en cada página. También puede ocultar o mostrar la barra de menú. Un ApplicationBar

puede

contener

un

botón

de

una

hilera

(instancias

de

ApplicationBarIconButton) o cualquier número de ítems de menú (los casos de ApplicationBarMenuItem). El límite para el número de botones en la ApplicationBar es de cuatro. No hay límite en el número de elementos de menú, pero cinco es el límite recomendado para evitar el desplazamiento.

F.

Date and Time Pickers

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


CIBERTEC


37

G. Choosers y Launchers Choosers y Launchers son diferentes tipos de componentes. Son análogamente los cuadros de diálogos en Windows o SilverLight, Chooser y Launchers. Son utilizados para comunicar dentro de una aplicación SilverLight al Shell o a otras aplicaciones

Choosers permite al usuario seleccionar un elemento de un conjunto de elementos. Un Chooser devuelve algunos contenidos o datos en el retorno. Un ejemplo de un Chooser es el PhotoChooserTask, que se utiliza para seleccionar una foto de la biblioteca de fotos del dispositivo. Cuando el API se invoca, el usuario elige una foto y la información sobre ella es regresada de nuevo a la aplicación de llamada.

Launchers son diferentes de los Choosers, porque no devuelven datos. Ellos más bien desencadenan la acción. Un ejemplo de un Launcher es la API utilizada para colocar una llamada telefónica. En este caso, el desarrollador invoca el API y el usuario vuelve, de nuevo, a la aplicación de llamada una vez que la llamada ha terminado.

Las tareas están bajo el nameSpace o librería Microsoft.Phone.Tasks, donde se pueden encontrar los siguientes selectores: 

CameraCaptureTask



EmailAddressChooserTask



PhoneNumberChooserTask



PhotoChooserTask



SaveEmailAddressTask



SavePhoneNumberTask.

En los launchers, encontraremos un MarketplaceLauncher, y MediaPlayerLauncher.

CIBERTEC


38

LABORATORIO 2.1 Creación de un Proyecto Windows Phone Implementa una aplicación Windows Phone para navegar por la Web

1. Inicio del Proyecto Para iniciar un proyecto Windows Phone: 

Seleccione la opción Create New Project.

Seleccione la opción 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






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

Seleccione la plantilla Windows Phone en Visual C#

Asigne nombre al proyecto

2. Diseño


CIBERTEC


39

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

textBox, Name=txtDireccion button, Name= Button1

WebBrowser, Name= webBrowser1

3. Programación En este proceso, codificamos el proceso de la navegación, el cual se realiza sin la debida validación, la idea es ¿Cómo validamos el proceso?

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

CIBERTEC


40



Si la URL está vacía.



Si la URL contiene about.



Si la URL no inicia con http://

Si está correcto, entonces procedemos a Navegar

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

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

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

Presiona F5, para ejecutar la aplicación.


CIBERTEC


41

LABORATORIO 2.2

Creación de un Reproductor de Sonido Implementa una aplicación Windows Phone para reproducir un archivo de formato MP3, es decir, archivo de música.

1. Diseño del Formulario

Control MediaElement, name: mediaElement1

Control Button, name: btnPlay

Control Button, name: btnStop

Control Slider, name: slider1

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

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

CIBERTEC


42

A continuación, programa el botón Stop y Play para ejecutar el control Media Element, tal como se muestra.

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

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 aplicación.


CIBERTEC


43

LABORATORIO 2.3

Creación de una Calculadora Implementa una aplicación Windows Phone para crear una calculadora e implementar sus operaciones básicas: suma, resta, producto y división.

1. Inicio del Proyecto Seleccione la opción Create New Project 

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






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

Seleccione el tipo de Page

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

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

Control Image

CIBERTEC


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. Tamaño, tipo y estilo de letra: Text.

ForeGround permite dar color de letra

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


CIBERTEC


45

Como siguiente paso, diseñamos la página para realizar el proceso de la calculadora, tal como se muestra.

3. Programación

Declare e inicialice las variables del proceso a nivel Class PageCalculator.

CIBERTEC


46

Defina la función Calcula, donde definimos tres parámetros, los cuales realizan el cálculo aritmético según el signo.

Definir los eventos: numero_Click y el evento signo_Click. El primer evento trabaja con los button numérico y el segundo evento trabaja con los button signo (+, - *).


CIBERTEC


47

Para enlazar los eventos a cada button, seleccione el control Button, tal como se muestra. En la ventana de propiedades, seleccione la pestaña Event; en el evento Click seleccione el evento que va a desencadenar: para el button 1, el evento Click a seleccionar seria numero_Click, tal como se muestra

El mismo proceso para los button signo, en este caso debe seleccionar en el evento Click: signo_Click, tal como se muestra

CIBERTEC


48

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

Presione la tecla F5 para ejecutar.


CIBERTEC


49

LABORATORIO 2.4 Creación de una Barra de Aplicaciones Implemente una aplicación Windows Phone para crear una barra de aplicaciones en nuestra Página Principal.

1. Inicio del Proyecto Seleccione la opción Create New Project 

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






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

Seleccione el tipo de Page

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

2. Diseño Antes de iniciar el proceso, agregue algunos archivos de imágenes de extensión .png: calculador.png, internet.png, reproductor.png.

CIBERTEC


50

Agregue un control Image a la página, tal como se muestra. En la ventana de propiedades del control, asigne en la propiedad Source el archivo Cibertec.jpg, tal como se muestra.

Propiedad Source del control Image

3. Programación 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


CIBERTEC


51

En el constructor, definiremos las propiedades del Bar (ApplicationBar), además agregamos tres button, definiendo la propiedad image, así como la propiedad text, tal como se muestra:

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 página Principal, se visualiza la lista de botones de la barra de aplicaciones.

CIBERTEC


52

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

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

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

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


CIBERTEC


53

Resumen  Windows Phone incluye la mayoría de los controles básicos de Silverlight 3. La compatibilidad con DeskTop es muy alto, pero la mayoría de los controles de Windows Phone tienen pequeñas optimizaciones o retoques.  Windows Phone es capaz de Multitouch. Algunos controles de Windows Phone incluyen soporte

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

multitouch gestos, en la plataforma, incluye tocar, rozar y una pizca de zoom (multitoque).  Windows Phone extiende el núcleo de Silverlight con un conjunto de controles optimizados para el factor de forma del Phone, nuevos controles que soportan el Modelo de Navegacion de Windows Phone y controles que admiten la apariencia Metro.  El WebBrowser permite cargar el contenido, a través de la propiedad Source, utilizando el método Navegate () permite desplazarse a cualquier Uri y la propiedad NavigateToString () le permite cargar una cadena de formato HTML directamente en el control.  Dentro de la una aplicación, la navegación desde un Page a otro Page son implementadas por la clase PhoneApplicationFrame y la clase NavegationService El emulador del Windows Phone se integra a Visual Studio que simula un PhoneApplicationPage tiene la funcionalidad de navegación para ir junto con Marco, pero también incluye tres otras características críticas para cualquier aplicación Windows Phone: Orientación, De menús (a través de la ApplicationBar), e

integración

de

tareas

(Selectores

y

Lanzadores).

Por

navegación,

PhoneApplicationPage tiene métodos virtuales para NavigatedTo, NavigatingFrom y NavigatingTo.  El ApplicationBar es una barra de menú para tu aplicación. La meta para el ApplicationBar es proporcionar una respuesta coherente, de fácil acceso, menú o barra de herramientas que proporcione fácil acceso a las tareas comunes en la aplicación. Cada PhoneApplicationPage puede tener su propia ApplicationBar.  Los controles Date and Time picker son utilizados para seleccionar fecha y horas donde del Phone. Estos controles son optimizados para touch  Choosers y Launchers son diferentes tipos de componentes; ellos son análogamente los cuadros de diálogos en Windows o SilverLight, Chooser y

CIBERTEC


54

Launchers. Son utilizados para comunicar dentro de una aplicación SilverLight al Shell o a otras aplicaciones  Si desea saber más acerca de estos temas, puede consultar las siguientes páginas:  http://www.lavilladigital.com Aquí hallará un tutorial de aplicaciones de Windows Phone.  http://libreyextremo.blogspot.com En esta página, hallará ejercicios sobre aplicaciones en Windows Phone.


CIBERTEC


1.3

55

NAVEGACION ENTRE PÁGINAS, MANEJO DE ESTADOS

1.3.1 NAVEGANDO ENTRE PÁGINAS En este capítulo, vamos a hablar acerca de cómo navegar entre páginas en Silverlight para Windows Phone. Hay dos razones por las que ésta es una lección importante. Primero, porque no se debe crear toda la aplicación en un único archivo XAML. Segundo, porque al seguir las reglas la aplicación podrá automáticamente tomar ventaja del botón de retroceso (Back) incorporado en el dispositivo. Esto permitirá a los usuarios volver desde la aplicación a lo que estaban haciendo anteriormente. Hay varias formas de navegar entre páginas, pero vamos a enfocarnos en una a la que vamos a llamar Navegación Simple de Web. Navegaremos entre páginas de igual manera como si fuesen páginas de HTML. 1.3.1.1 Navegando utilizando control Hyperlink Tenemos varias páginas y queremos darle al usuario una forma de moverse entre ellas. Construyamos una interface gráfica simple de navegación que nos permita hacer eso. Si queremos ir de la primera a la segunda, podemos hacer uso de un control HyperlinkButton. Este control permite realizar la navegación entre dos páginas.

Para establecer el vínculo entre páginas a través del control HyperlinkButton, se puede hacer usando sólo XAML:

CIBERTEC


56

Al ejecutar el proyecto, debe ser posible hacer clic en cualquiera de estos botones de vínculos e ir a la página. Al usar el botón de retroceso () podrán ir a la pantalla previa. Si se retrocede lo suficiente, se sale de la aplicación al pasar más allá de su primera pantalla.

1.3.1.2 Navegando utilizando comandos de navegación Se puede navegar entre páginas utilizando código en vez de usar sólo XAML, pueden usar cualquier elemento XAML que prefieran. En este ejemplo, vamos a crear tres botones y cada uno apunta al mismo controlador de eventos. En el código C# siguiente, verán que se averigua cuál botón ha sido pulsado y luego se va a la página apropiada. La función original del botón de retroceso todavía está disponible en su totalidad.

En XAML

Manual 2016-II 06 - Desarrollo de Aplicaciones Móviles II

Recommend Documents