Prctica 2: Entorno Grfico.

TRABAJO PREVIO: El alumno debe manejar los conceptos estudiados en la prctica anterior. Adems debe traer algn medio de almacenamiento para poder guardar el trabajo realizado, ya que en las siguientes prcticas puede necesitarlo. Antes de asistir al laboratorio el alumno debe repasar los conceptos de programacin en C, especialmente el uso de punteros, funciones y paso de parmetros por valor y por referencia. Adems debe entregar resueltos los siguientes problemas. 1. Escriba la funcin:
void maxmin (int x1, int x2, int *max, int *min);

que reciba como parmetros de entrada dos nmeros enteros x1 y x2 y devuelva a travs de los parmetros de salida max y min el mximo y el mnimo, respectivamente, de ambos nmeros. 2. Desarrolle una funcin que reciba como parmetros las dos coordenadas cartesianas en doble precisin (x, y) de un punto del plano y devuelva como resultado un nmero del 1 al 4 que indique el cuadrante al cual pertenece al punto (o un 0 si el punto est en uno de los ejes de coordenadas). 3. La funcin intercambia pretende intercambiar los valores de sus dos parmetros.
#include <stdio.h> void intercambia (int, int); void main () { int a=3, b=5; printf ("\na vale %d y b vale %d\n", a, b); intercambia (a, b); printf ("\na vale %d y b vale %d\n", a, b); } void intercambia (int x, int y) { int temp; temp = x; x = y; y = temp; }

Realiza la funcin su cometido? En caso contrario, modifquela adecuadamente para que lo haga. TRABAJO EN EL LABORATORIO: El tiempo estimado para la realizacin de esta prctica es de 1 horas y 45 minutos. En esta prctica vamos a crear una aplicacin con entorno grfico. Para ello utilizaremos la herramienta visual del EVC++ 4.0. 1. Creando un proyecto basado en dilogos. En primer lugar vamos a crear un proyecto basado en dilogos, para ello en la ventana principal del EVC elegiremos File New, y en la ventana elegiremos WCE MFC AppWizard(exe) pondremos un nombre al proyecto y pulsamos OK.

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 1

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

En la siguiente ventana elegiremos Dialog based. Y pulsamos Finish.

A partir de este momento ya tenemos una aplicacin base, en la que aadir los controles que deseemos. Si compilamos y ejecutamos esta aplicacin, el resultado ser una ventana de dialogo vaca. 2. Modificando el dilogo base. Para modificar la ventana de nuestro proyecto, elegiremos la pestaa Resources en el explorador de proyecto en la ventana principal. En esta pestaa se nos muestran todos los recursos grficos que tiene nuestra aplicacin. Desplegamos la carpeta Dialog y nos aparece el dialogo sobre el cual vamos a trabajar y una ventana flotante donde se encuentran los posibles controles que podemos aadir a nuestra aplicacin. (si la ventana flotante no apareciera, puede ser abierta picando con el botn derecho sobre la barra de herramientas y seleccionando controls.)

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 2

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

Explorador de proyecto

Posibles controles que se pueden aadir a nuestra aplicacin

Previsualizacin Dialogo de aplicacin

Entre todos los posibles controles que se pueden aadir, en esta prctica slo vamos a usar 3: Button, Edit box y Static text. Para informacin sobre el resto de controles consulte las referencias que se muestran al final de este manual. Button: es un control de Windows que puede ser pulsado por el usuario, y que provoca la ejecucin de una funcin asociada al mismo. Edit box: es un control de Windows donde el usuario y la aplicacin pueden escribir valores. Static Text: Permite mostrar un texto fijo en un dialogo, este texto no se puede cambiar durante la ejecucin de la aplicacin. Para aadir un control a nuestra aplicacin solo es necesario picar sobre el control deseado y luego sobre la ventana de dialogo de la aplicacin en el lugar donde queramos que este aparezca. Una vez aadido el control podemos modificar su tamao, para ello solo hay que picar y arrastrar de las esquina. Para eliminar un control slo tenemos que seleccionarlo y pulsar la tecla Supr (o Del). Modifiquemos el dialogo base de nuestra aplicacion. Aadamos dos Edit box, un button y un Static Box de manera que quede como el de la figura.

Cada uno de los controles tiene una serie de propiedades que podemos modificar, y que nos sern tiles para adaptar la aplicacin a nuestras necesidades. Veamos las ms importantes para cada uno de los controles que vamos a usar. Para abrir las propiedades del control solo hay que picar en el control con el botn derecho y elegir properties. La ventana que se abre depender del control en cuestin.

Propiedades de Button: En la ventana de propiedades hay tres pestaas en la primera de ellas podemos elegir en nombre con el que se identifica el control en el cdigo de la aplicacin (ID) y el texto que aparecer sobre el botn en nuestra aplicacin (Caption), podemos modificar este ltimo para que aparezca el texto que
Escuela Universitaria Politcnica Dpto. Arquitectura y Tecnologa de Computadores 3 - Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

deseemos. En las otras pestaas hay una serie de propiedades que modifican en aspecto de botn. Modifquelas para comprobar los efectos.

Propiedades de Edit box: En la ventana de propiedades podemos elegir el identificador del control en el cdigo (ID), el resto de propiedades modifican el aspecto del control. Modifquelas para comprobar los efectos.

Propiedades de Static text: La propiedad ms interesante para este control es Caption ya que es la que modifica el texto que se dibuja en la pantalla; el resto de propiedades modifican el aspecto del control. Modifquelas para comprobar los efectos.

Modifique las propiedades para que el dialogo tenga el siguiente aspecto:

Para comprobar como quedar el dialogo, cuando la aplicacin se ejecute, puede previsualizarlo pulsando un botn con forma de interruptor que hay en el esquina inferior izquierda de la ventana principal del entorno de programacin (Embedded Visual C++ 4.0). 3. Aadiendo funcionalidad al dilogo. Un vez creado el dialogo y modificado su aspecto visual, hay que aadir funcionalidad al mismo, de manera que cuando, por ejemplo, se pulse el botn la aplicacin realice alguna accin. Vemos como aadir funcionalidad a cada uno de los controles que hemos creado. Edit box: como se ha dicho antes el edit box se usa tanto para introducir datos por el usuario, como para que la aplicacin ofrezca datos al usuario. Para poder llevar a cabo esta funcin es necesario asociarle al control una variable; esta variable contendr el valor del control. Para asociar una variable al control picaremos con el botn derecho y elegiremos la opcin ClassWizard, se abrir una ventana en la que elegiremos la pestaa Member Variables. Nos aparece una lista con todos los identificadores que tenemos en nuestro dialogo.

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 4

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

Para asociar una variable al edit box solo hay que hacer doble click en el identificador del control que queremos modificar. En la ventana que se abre se puede modificar los atributos de la variable que queremos asociar al control.

Member variable name: ser el nombre de la variable que vamos a asociar al control; siempre debe empezar por m_. Category: este atributo siempre deber ser Value. Variable type: nos permite elegir el tipo de la variable asociada (Cstring, int, long, BYTE, etc.)

Una vez elegidos los atributos pulsamos OK, y en la ventana del ClassWizard, aparecer la informacin que acabamos de completar.

Adems en esa ventana podemos imponer ciertas restricciones a las variables, por ejemplo el mnimo y mximo valor que pueden tomar, de manera que la aplicacin comprobar automticamente que el valor es correcto. Utilice el ClassWizard para asociar las variables que se muestran en la figura anterior.
Escuela Universitaria Politcnica Dpto. Arquitectura y Tecnologa de Computadores 5 - Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

La funcionalidad del control es doble, es decir puede ser usado para introducir datos a la aplicacin o para que la aplicacin ofrezca datos al usuario. Esta funcionalidad se realizar a travs de la variable asociada. En el caso de que el edit box se use para introducir datos a la aplicacin, la variable asociada contendr el valor que el usuario haya tecleado; en el caso contrario, la variable contendr el dato que a mostrar en la pantalla. Para leer el dato del control no basta con que el usuario teclee el valor, adems la aplicacin debe actualizar la variable asociada antes de usarla, para que sta tome el valor que el usuario ha tecleado. Para realizar esta actualizacin utilizaremos la funcin: BOOL UpdateData(BOOL bSaveAndValidate = TRUE ); El parmetro de esta funcin, nos es de utilidad, as que no lo usaremos. La forma de usar esta funcin ser la siguiente: UpdateData(); Justo despus de ejecutar esta funcin, todas la variables asociadas a controles, tendrn lo valores correctos, es decir, lo tecleados por el usuario. Para escribir un valor en un control usaremos las siguientes funciones: Cuando el dato a escribir es un texto: void SetDlgItemText(int nID, LPCTSTR lpszString ); nID: es el identificador del control en el que queremos escribir lpszString: es una variable CString, que contiene el texto a escribir Cuando el dato a escribir es un int: BOOL SetDlgItemInt(int nID, UINT nValue, BOOL bSigned = TRUE); nID: es el identificador del control en el que queremos escribir nValue: es una variable entera que contiene el valor a escribir. bSigned: es una parmetro que no usaremos. Para nuestros propsitos necesitaremos algunas funciones de conversin de tipos: Convertir un entero en una cadena: char *_itoa( int value, char *string, int radix ); value: variable que contiene el valor para se convertido. string: puntero a char que apunta a la cadena que contendr el valor convertido. radix: base de la conversin, en nuestro caso base 10. Convertir una cadena en un entero: int atoi( const char *string ); string: puntero a char que apunta a la cadena que hay que convertir. La funcin devuelve un valor entero con la conversin. Convertir un *char en un CString: CString cadcstring; char cadchar[100]; cadsctring = cadchar; // esta asignacin realiza la conversin de tipos Convertir un CString en un *char: char cadchar[100]; CString cadcstring = "Test"; cadchar = cadcstring.GetBuffer(sizeof(cadchar));

Button: cuando se pulsa un botn, la aplicacin intentar ejecutar una funcin, para asociar una funcin a un botn, solo hay que hacer doble click sobre el mismo, y en la ventana que aparece asignarle un nombre a la funcin asociada; el nombre debe empezar siempre por On.

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 6

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

Una vez asignado el nombre pulsaremos OK. Se abrir automticamente el archivo de cdigo justo por esa funcin. Justo en la zona marcada es donde debemos escribir el cdigo que deseemos que se ejecute cuando el usuario pulse el botn.

Introduzca como cdigo en la funcin del botn lo siguiente:

CString cadena; // variable para almecenar la cadena que se va escribir en el control char cadchar[5]; // cadena para realizar la conversion de entero a cadena UpdateData(); // actualiza los datos de los controles en la variables asociadas _itoa(m_entrada, cadchar, 10);// convierte de entero a cadena cadena = cadchar; // convierte de *char a CString SetDlgItemText(IDC_EDIT2,cadena);// escribe en el control

Ahora nuestro programa ya esta listo para compilar y ejecutar. Ejecute el cdigo en el emulador y en la plataforma. Para ms informacin En la seccin Standard SDK for Windows CE. NET User Interface ServicesUsingResourcesCreating Dialog Boxes de la ayuda del Embedded Visual C++ se puede encontrar ms informacin sobre dilogos. La informacin de referencia de las funciones y mensajes para el manejo de dilogos est en Standard SDK for Windows CE. NET User Interface ServicesProgrammers ReferenteDialog Boxes. Hay que tener cuidado de no confundir los dilogos tal como lo hemos visto aqu (Application Dialog Box), con lo que se denomina en la ayuda Common Dialogs. Los Common Dialogs son dilogos prediseados por el sistema operativo que se utilizan para algunas tareas muy concretas, como, por ejemplo, abrir ficheros o imprimir. En esta asignatura no los vamos a usar.

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 7

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

Ejercicio: Se pide realizar una calculadora simple de enteros. La aplicacin debe tener el siguiente interfaz grfico:

La funcionalidad es obvia, cuando se pulse un botn, la aplicacin debe hacer la operacin, matemtica correspondiente entre los dos operandos; y mostrar el resultado en el edit box correspondiente.

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 8

- Universidad de Sevilla

Prcticas 2: Entorno Grafico.

Informtica Industrial

Miembros del grupo (Apellidos, Nombre)

Fecha

Hora

1. Indique que efectos tiene las siguientes propiedades de los controles Disable

Visible

2. Abra los distintos del proyecto, y copie las lneas de cdigo en las que usted cree que se le da un valor inicial a las variables asociadas a un control

3. Escriba el cdigo para la funcin asociada a la operacin de multiplicacin.

4. Intente hacer la operacin de divisin. Qu dificultades presenta?

Escuela Universitaria Politcnica

Dpto. Arquitectura y Tecnologa de Computadores 9

- Universidad de Sevilla