Clase 4: Manejo de eventos

Transcripción

1 Programación con Herramientas Visuales Clase 4: Manejo de eventos Lunes, 16 de Diciembre de 2002 Quito Ecuador I. Bernal

2 Agenda Manejo de eventos básicos. 2

3 Manejo de eventos (1) La clase CView, derivada de CWnd incluye cientos de funciones miembro. Las funciones que empiezan conon... son llamadas por la infraestructura de MFC en respuesta a eventos de Windows. OnKeyDown (teclas presionadas). OnLButtonUp (clicks del mouse). Muchas de las funciones On... llamadas por MFC no son virtuales. Para usarlas se debe usar un mecanismo especial que ofrece MFC llamado: message map. Esto se hace con ayuda del ClassWizard. Con el mapa se conecta a MFC con las funciones escritas por el usuario para los mensajes. 3

4 Manejo de eventos (2) Mapa de mensajes. Si el usuario presiona el botón derecho del mouse sobre una ventana de vista, Windows envía un mensaje WM_LBUTTONDOWN, a esa vista. La vista debe entonces tener en su implementación una función: El prototipo de la función debe estar también presente en el archivo.h : La notación afx_msg es una no operación (NOP), que alerta al programador que el prototipo corresponde a una función del mapa de mensajes. 4

5 Manejo de eventos (3) Se necesita incluir un macro en el archivo.cpp para conectar la función OnLButtonDown a MFC. El archivo.h requiere contener: No es necesario agregar el código manualmente, el ClassWizard presta su ayuda. Para ciertos mensajes es necesario hacer esta tarea manualmente. 5

6 Se desea que al presionar el botón izquierdo del mouse, una elipse dibujada en la vista, cambie de color entre gris y blanco. El cambio se realiza solo cuando el mouse es presionado sobre el rectángulo que contiene a la elipse. Ejemplo de Aplicación 6

7 Manipulación de la Vista (1) Para presentar información al usuario se debe dibujar en Ondraw. La vista debe proveer variables para almacenar el estado en variables. El usuario puede interactuar con la vista y provocar actualizaciones de la misma, cambiando el estado. Por ahora no se utilizará el documento y cualquier dato lo almacenaremos en la vista. Para el ejemplo a estudiarse se emplean dos datos miembro: m_rectellipse (CRect): rectángulo que limita una elipse. m_ncolor (integer ): el color de la elipse. 7

8 Manipulación de la Vista (2) El valor inicial de m_rectellipse y m_ncolor se define en el constructor de la vista. m_ncolor podría inicializarse de igual forma. Como es de tipo int (tipo predefinido en el lenguaje), no habrá diferencia si se inicializa en el cuerpo del constructor. El color de la elipse se cambiará en la función miembro OnLButtonDown. 8

9 Manipulación de la Vista (3) Invalidación de áreas de la vista. Al presionar el botón del mouse se invocará OnLButtonDown, y se cambiará el valor de m_ncolor. Cómo se consigue que el usuario observe el cambio de color en la elipse? Se puede cambiar el tamaño de la ventana, pero el cambio debe ser visible al usuario automáticamente. OnLButtonDown debe invocar InvalidateRect (de Cwnd). InvalidateRect: permite la emisión de un mensaje WM_PAINT, el cual está asociado a a OnDraw de la vista. Esta función indica el rectángulo invalidado que debe volver a pintarse. 9

10 Manejo de eventos (4) Invalidación de áreas de la vista. Se debe optimizar el proceso de pintado en OnDraw. Se debe actualizar sólo los pixels dentro del rectángulo invalidado. Se debe siempre especificar el mínimo rectángulo que contenga a la parte que ha sufrido cambios y debe actualizarse. Mientras más pequeño es el rectángulo invalidado más rápido se repinta. Es una pérdida de tiempo ejecutar instrucciones para dibujar en un área fuera del rectángulo invalidado. Puede que se pinte regiones no visibles. Puede que se pinte regiones que no han cambiado su contenido. 10

11 Manejo de eventos (5) Para nuestro ejemplo, se invalida un rectángulo en la función OnLButtonDown pero la función OnDraw debe conocer que rectángulo debe procesar. Utilizando la clase CDC que utiliza OnDraw para pintar, se puede invocar a la función pdc- >GetClipBox para obtener el área a repintar. El rectángulo obtenido en OnDraw será la acumulación de todos los rectángulos invalidados debido a diferentes razones: Otras llamadas a InvalidateRect. Acciones como scrolling y cambio de dimensiones, etc. 11

12 Área de cliente en una ventana Es La región rectangular que excluye el borde, el título, el menú, la barra de estado y todas las barras de herramientas. Para obtener este rectángulo se utiliza la función GetClientRect de la clase CWnd. Por lo regular no está permitido dibujar fuera del área de cliente y la mayoría de los mensajes del mouse se reciben en la vista solo cuando el cursor del mouse está en el área de cliente. 12

13 Clases auxiliares (1) Las clases están derivadas de estructuras definidas en Windows y tienen datos miembro públicos. CRect (RECT): left, top, right bottom. CPoint (POINT): x, y. CSize (SIZE): cx, cy. Estas clases interactúan e incluso tienen operadores que combinan dichas clases. Se puede: Añadir un objeto CSize a un objeto CPoint. Substraer un objeto CSize de un objeto CPoint. Substraer un objeto CPoint de otro y entregar un objeto CSize. Añadir un objeto CPoint a un CSize y obtener un objeto CRect. Substraer un objeto CPoint ó un CSize de un CRect. 13

14 Clases auxiliares (2) La función TopLeft de CRect retorna un objeto CPoint. La función Size de CRect retorna un objeto CSize. La función PtInRect de CRect chequea si un punto está dentro de un rectángulo. La función para procesar el mensaje del mouse asociado al botón izquierdo, recibe las coordenadas en un objeto CPoint que indica la posición del mouse en coordenadas del área de cliente. Para el ejemplo de la elipse, limitada por un rectángulo, se puede chequear si el usuario presionó el mouse dentro de dicho rectángulo. 14

15 Clases auxiliares (3) Para saber si un punto está dentro de la elipse, no solo dentro del rectángulo que le contiene, primero se debe construir un objeto que representa una región irregular (CRgn). Para el ejemplo se podría crear una región elíptica basados en el rectángulo que la contiene. 15

16 Clases auxiliares (4) Observación: La función InvalidateRect tiene como prototipo: LPRECT es un puntero a una estructura RECT. Este puntero no es a un objeto CRect. Sin embargo, se puede escribir código como: Lo anterior es posible porque CRect define el operador LPRECT() que retorna la dirección de un objeto CRect. CRect está derivada de RECT. El compilador convierte argumentos CRect a LPRECT cuando sea necesario y se puede escribir el código anterior como si la función aceptase referencias. 16

17 Código (1) 17

18 Código (2) 18

19 Código (3) 19

20 Código (4) 20

21 Código (5) Las líneas de comentario añadidas son para el uso del ClassWizard (AFX_MSG.., no retirarlas ). Al añadir el handler de un mensaje, el ClassWizard añade código entre estas líneas de comentario. ClassWizard añade también un definición en el archivo.h y un cuerpo en.cpp para OnLButtonDown. 21

22 Código (6) 22

23 Deber (1) 23

24 Deber (2) Generar un conjunto de 10 números aleatorios diferentes entre 1 y 100. Dibujar una cuadrícula de 4x5 e incluir los números como se indica en la figura. La cuadrícula siempre debe cubrir toda la pantalla. Los números estarán aproximadamente en el centro de un rectángulo de menor tamaño que la cuadrícula. Su tamaño puede ser fijo, por ahora. Cuando se presione el botón DERECHO del mouse se presentará un nuevo conjunto de valores. Solo usar lo que se ha aprendido en clase. Para la lista de 10 números usar la clase vect<int>. Revisar las funciones disponibles en la clase CDC. Revisar las funciones disponibles en la clase CRect. 24

25 Deber (3) Para el Viernes 3pm., antes de la clase. El programa debe compilar. Enviar los archivos del proyecto comprimidos. NO ENVIAR el directorio DEBUG. El nombre del archivo.zip debe ser el apellido de un de los miembros del grupo. Enviar solamente a imbernal@mailfie.epn.edu.ec Si no se respeta lo indicado en cuanto al envío habrá una drástica sanción. No olvidar la documentación del programa. Todo proyecto debe incluir la ventana de diálogo de información del proyecto de acuerdo a lo que se indica a continuación. No olvidar que un número puede aparecer solo una vez. 25

26 Revisar el depurador. Actividades Incluir el código para regiones. Macros TRACE: Tratar de depurar código en OnDraw (breakpoint). En OnDraw. Prueba sorpresa. 26

27 La ventana de diálogo para todos los deberes y proyectos debe presentar: La fotografía de cada miembro del grupo. Rostro claramente identificable. Nombre. Identificación del deber. Fecha de entrega. La distribución geométrica de las fotografías y texto queda a criterio de cada grupo. Ventana Diálogo (1) 27

28 Abrir una fotografía en el programa PAINT. Redimensionar a un tamaño adecuado con Expandir y Contraer Guardar relación original de aspecto. Salvar imagen como.bmp de al menos 256 colores. Ventana Diálogo (2) 28

29 Abrir el editor de recursos Seleccionar con el mouse el nombre del proyecto. Click con el botón derecho del mouse. Seleccionar importar. Seleccionar el.bmp Ventana Diálogo (3) 29

30 Se obtiene un mensaje que la imagen no podrá ser editada por el número de colores utilizado. Se importó el archivo.bmp. Se guarda una copia local al proyecto. Se asigna un nombre a la imagen importada. Ventana Diálogo (4) 30

31 Abrir la ventana de diálogo en el editor de recursos. Cambiar el tamaño de la ventana para que acepte dos fotografías. Hacer visible la barra de controles. En la región de barras de herramientas hacer click con el boton derecho. Seleccionar Controls para hacer la barra de controles. Ventana Diálogo (5) 31

32 Seleccionar con un click el control para imágenes (Picture). Con el mouse definir sobre la ventana de diálogo el tamaño de la imagen. Ventana Diálogo (6) 32

33 Con el control seleccionado hacer click con el botón derecho del mouse. Seleccionar la opción Properties. Ventana Diálogo (7) 33

34 ID corresponde al identificador del control seleccionado. En type escoger la opción bitmap. En Image escoger el identificador del bitmap que se importó. Presionar enter Se visualiza la imagen. Repetir el proceso para la otra fotografía. No se puede cambiar el tamaño de la imagen en el editor. Modificar tamaño en PAINT. Ventana Diálogo (8) 34