UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS

PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115

Ciclo I-2014

GUIA DE LABORATORIO N° 3

PROGRAMACION BASICA SOBRE SMART PHONES

WINDOWS PHONE

Objetivos:

* Conocer el entorno del IDE Visual Studio 2012 para programación bajo el sistema windows

phone 8.

*Hacer una nueva aplicación en windows phone 8 que utilice los controles TextBlock, TexBox y

Button. Interactuando con la interfaz gráfica mediante eventos.

*Ejecutar la aplicación mediante un dispositivo virtualizado a través de Hyper-v.

.Datos de Sesión en la Asignatura:

Indicaciones Previas al desarrollo de la Guía

Entre a la Sesion de PDM115 con clave Android

En el icono EclipseX64

Busque el icono de VMWARE

Seleccione la opción Clone de Windows 8x64

Al entrar aparecerá el menú principal, busque la flecha hacia abajo y presione clic en ella

Luego en la siguiente parte del menú(apps) presionar clic en buscar(lupa)

Digitar VS en la ventana y presionar clic en icono de VSExpress for Windows Phone

Luego si es primera vez que se ejecuta la aplicación, pedirá un registro en

Microsoft para activación (con cuenta de Hotmail, o msn), sino, proceda a desarrollar

su guía.

Contenido

Requerimientos. .................................................................................................................................... 1

Creación de nuestra Primera Aplicación .............................................................................................. 1

Creación de proyectos. ..................................................................................................................... 1

Reconocimiento del entorno. ............................................................................................................ 4

Configuración de los controles. ........................................................................................................ 5

Creación de Interfaz Grafica ............................................................................................................ 6

Crear Dispositivo y ejecutar el proyecto. ......................................................................................... 8

Resultado Final: ................................................................................................................................ 9

1

Requerimientos.

Para poder desarrollar y ejecutar aplicaciones para dispositivos que tengan instalado el sistema

operativo Windows Phone 8 es necesario cumplir con determinados requerimientos:

Con dispositivo:

• Windows 8.0+

• Visual Studio for Windows Phone Express 2012

Sin dispositivo:

• Windows 8.0+ Pro

• Visual Studio for Windows Phone Express 2012

Creación de nuestra Primera Aplicación

Creación de proyectos.

Accedemos a Visual Studio, luego: File/New Project.

2

Aparecerá en nuestra pantalla estas opciones:

De estas opciones que se muestran en pantalla ,3 son las más utilizadas:

Windows phone app: Es una aplicación sencilla generalmente de una sola pantalla. Puede ser

combinada con las demás clases de aplicaciones. No permite la navegación por gestos a menos que

se le agreguen los controles.

Windows phone panaroma app: Permite el desplazamiento entre pantallas a través de gestos.

Principalmente orientada a aplicaciones como ventas. Los controles pueden distribuirse en 1 o más

en pantallas.

Windows phone pivot app: Similar a la panorama. Su objetivo principal es permitir la navegación

a través de gestos en múltiples pantallas. Típicamente la más utilizada por los programadores.

Vamos a seleccionar: Windows phone app.

3

Asignele un nombre al proyecto: PhoneAppCarnet03

Name y Solution Por recomendación deben ser el mismo nombre. En Location se selecciona la

ubicación del directorio en el cual se guardara el proyecto(1), presionando browse..

Finalmente seleccionamos el sistema operativo objetivo para nuestro caso será Windows Phone 8.0

4

Reconocimiento del entorno.

Vamos a dividir el entorno de desarrollo en 5 partes principales:

1. Controles: Nos permite adicionar los controles disponibles a nuestra aplicación. Este

proceso se realiza seleccionando el control deseado y luego arrastrándolo a la vista

diseño de la pantalla que se esté desarrollando.

2. Vista de Diseño: Nos permite ver los cambios en vivo que se están realizando dentro del

código XAML o la adición de controles que mencionamos en el punto anterior.

3. Vista XAML (Nombre No oficial): XAML es el lenguaje de marcado de Microsoft

basado en XML y Silverlight para el desarrollo de Interfaces gráficas. La vista XAML

nos presenta el código que está representando la interfaz gráfica que se presenta en la

vista diseño.

4. Explorador de soluciones: Contiene todos los archivos necesarios para ejecutar el

proyecto. Generalmente los archivos que nos interesan modificar son los archivo .cs y los

.xaml. Uno sirve para controlador y otro es la vista respectivamente.

5. Propiedades de los controles: Nos permite explorar las diferentes propiedades de cada

uno de los controles asi como también asignar eventos a cada uno de ellos.

5

Árbol de objetos de aplicación en Windows Phone Descripción

Se trabajara en esta guía con dos

elementos, Programa (MainPage.xaml.cs),

Intefaz grafica (MainPage.xaml).

Configuración de los controles.

Para cambiar propiedades a los controles seguiremos el siguiente proceso:

El primer paso es seleccionar el control que deseemos en la vista diseño.

6

Luego en la parte inferior izquierda en las propiedades de los controles vamos a cambiar la

propiedad Text. La propiedad Text es la cadena de caracteres que aparecerá en el control deseado

adicionalmente la propiedad Name es el identificador del control. Para este ejemplo se ha puesto un

valor en Text de “Hola mundo”.

Creación de Interfaz Grafica

Indicaciones: hacer una interfaz que contenga un textblock y un button

El objetivo de esta parte es que al presionar un botón se genere un mensaje en un TextBlock que

diga “Hola Mundo”.

Arrastramos un botón de la caja de controles hacia la vista de diseño. Repetimos el mismo

procedimiento pero esta vez con un TextBlock. Como se muestra a continuación:

Con los controles posicionados en la vista diseño procedemos a cambiar algunas de sus propiedades.

Para el TextBlock vamos a cambiar la propiedad Name por “txtMsg” y vamos a dejar la propiedad

Text en blanco. Al botón le vamos a cambiar la propiedad Content por “OK” y Name por btnOk

7

El siguiente paso es asignar el evento click al botón que acabamos de crear. Para ello presionaremos

doble click sobre el botón. Se mostrara el siguiente editor de código:

Deberemos de escribir el código deseado dentro de la función creada para el evento. Como podemos

ver como al presionar doble click se ha creado una función para el evento del btnOk la función es

llamada btnOk_Click.

8

Escribimos dentro de la función:

txtMsg.Text = "Hola Mundo";

Finalmente el código debe de quedar asi.

private void btnOk_Click(object sender, RoutedEventArgs e)

{

txtMsg.Text = "Hola Mundo";

}

Crear Dispositivo y ejecutar el proyecto.

Creación

A diferencia de android no es necesario crear ninguna máquina virtual Visual Studio nos provee ya

de algunas máquinas virtuales. Por eficiencia nosotros recomendamos utilizar la máquina virtual

Emulator WVGA 512 MB.

Correrlo

La opción de ejecutar el emulador solamente aparecerá después de crear un proyecto. Para ejecutar

el emulador debemos presionar el botón que se encuentra en la parte superior de la barra de

herramientas con el nombre de Emulator WVGA 512 MB.

9

Resultado Final:

Antes Después

Comprima su carpeta de proyecto y súbalo en el link respectivo (Guía de Laboratorio 3(WP))