PDF de programación - Programación básica sobre smart phones Windows Phone

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS



PROGRAMACION PARA DISPOSITIVOS MOVILES

PDM115



Ciclo I-2016

GUIA DE LABORATORIO N° 1c



PROGRAMACION BASICA SOBRE SMART PHONES

WINDOWS PHONE


Objetivos:

* Conocer el entorno del IDE Visual Studio 2015 para programación bajo el sistema windows
10.

*Hacer una nueva aplicación en windows phone 8.1 que utilice los controles TextBlock, y
Button. Interactuando con la interfaz gráfica mediante eventos.

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



Indicaciones Previas al desarrollo de la Guía


Entre a Windows 10 en la Sesion PDM115 con clave: pdm



Al entrar aparecerá el menú de inicio, presione clic en el, luego Todas las Aplicaciones y
Visual Studio 2015



Al entrar a Visual Studio, aparecerá una imagen como la siguiente



Luego siga las indicaciones para desarrollar la 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 ................................................................................................................ 7

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




Para poder desarrollar y ejecutar aplicaciones para dispositivos que tengan instalado el sistema
operativo Windows 10 es necesario cumplir con determinados requerimientos:

Requerimientos.

Con dispositivo:

• Windows 8.1+

• Visual Studio for Windows Phone 2015

Sin dispositivo:

• Windows 10

• Visual Studio for Windows Phone Express 2015


Creación de nuestra Primera Aplicación

Creación de proyectos.
Accedemos a Visual Studio, luego:

Presione clic en Nuevo proyecto

O en Archivo, Nuevo, Proyecto



1







Aparecerá en nuestra pantalla estas opciones:



De estas opciones que se muestran en pantalla ,2 son las que utilizaremos:

Aplicación Vacia: 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.

Aplicación Dinamica: Similar a la vacia. Su objetivo principal es permitir la navegación a través de
pivotes en múltiples pantallas. Típicamente la más utilizada por los programadores.



Vamos a seleccionar: Aplicación Vacia



2







Asígnele un nombre al proyecto: AppCarnet01y Aceptar



Si no aparecen las ventanas de controles, deberá activar modo de programador.

Presione doble clic en MainPage.xaml(interfaz grafica)



3



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.



Árbol de objetos de aplicación en Windows Phone

Descripción



4



Se trabajara en esta guía con dos
elementos, Programa (MainPage.xaml.cs),
Intefaz grafica (MainPage.xaml).



Configuración de los controles.
Arrastre un Textblock(etiqueta hacia la interfaz)



5



Modifique la propiedad Text y escriba “Hola mundo”

Ejecute la aplicacion



Si no se ejecuta de inmediato deberá de activarse el hipervisor de Windows…



6



Para cambiar propiedades a los controles seguiremos el siguiente proceso:

Primeramente debemos detener la depuración(ejecución) presionando clic en el botón de cuadro
rojo.

Luego, seleccionar el control que deseemos en la vista diseño.



Luego en la parte inferior izquierda en las propiedades de los controles vamos a cambiar la
propiedad Negrita y Tamaño de la Fuente


Creación de Interfaz Grafica



Indicaciones: hacer una interfaz que contenga un textblock y un button(adicional)

El objetivo de esta parte es que al presionar un botón se genere un mensaje en el TextBlock que diga
“Texto Modificado”.

Arrastramos un botón de la caja de controles hacia la vista de diseño. Como se muestra a
continuación:



7



Con los controles posicionados en la vista diseño procedemos a cambiar algunas de sus propiedades.
Para el botón le vamos a cambiar la propiedad Content por “OK” y Name por btnOk

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.

Escribimos dentro de la función:

textBlock.Text = "Texto Modificado";

Finalmente el código debe de quedar así.

Crear Dispositivo y ejecutar el proyecto.



8



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 8.1 WVGA 4 inch

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


Resultado Final:

Antes

Después



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



9