Clase 4: Manejo de eventos - Ivan Bernalclusterfie.epn.edu.ec/.../PHVisuales/CLASES_PDF/Clase_PHV4_una.pdf · – Con el mapa se conecta a MFC con las funciones escritas por el usuario

Iván Bernal, [email protected]

httphttp://://wwwfie.epn.edu.ecwwwfie.epn.edu.ec//ibernalibernal

Escuela Politécnica NacionalEscuela Politécnica NacionalQuito – Ecuador

Copyright @2002, I. Bernal

Programación con Herramientas VisualesProgramación con Herramientas Visuales

Clase 4: Manejo de eventosLunes, 16 de Diciembre de 2002

Iván Bernal, Iván Bernal, Ph.DPh.D..httphttp://://wwwfie.epn.edu.ecwwwfie.epn.edu.ec//ibernalibernal

Dic. 02 Dic. 02 –– Abril 03Abril 03PHVPHV

Escuela Politécnica NacionalEscuela Politécnica NacionalQuito Quito -- EcuadorEcuador

22

• Manejo de eventos básicos.

Agenda




33

Manejo de eventos (1)• La clase CView, derivada de CWnd incluye

cientos de funciones miembro.– Las funciones que empiezan con On..... 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: messagemessage mapmap.

– Esto se hace con ayuda del ClassWizard.– Con el mapa se conecta a MFC con las funciones escritas

por el usuario para los mensajes.




44

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.




55

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.




66

Ejemplo de Aplicación

• 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.




77

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 ahoraPor 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.




88

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.




99

• 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 mensajeWM_PAINT , el cual está asociado a a OnDraw de la vista.

• Esta función indica el rectángulo invalidado que debe volver a pintarse.

Manipulación de la Vista (3)




1010

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.




1111

Manejo de eventos (5)• Para nuestro ejemplo, se invalida un

rectángulo en la función OnLButtonDownpero 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.




1212

Á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.




1313

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.




1414

Clases auxiliares (2)

• 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.

• 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.




1515

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.




1616

Clases auxiliares (4)Observación: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.




1717

Código (1)




1818

Código (2)




1919

Código (3)




2020

Código (4)




2121

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.




2222

Código (6)




2323

Deber (1)




2424

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 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.




2525

Deber (3)

• Para el Viernes 3pm., antes de la clase.

– El programa debe compilar.– Enviar los archivos del

proyecto comprimidos.–– NO ENVIARNO ENVIAR el directorio

DEBUG.– El nombre del archivo .zip

debe ser el apellido de un de los miembros del grupo.

– Enviar solamente a [email protected]

– 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.




2626

Actividades

• Revisar el depurador.• Incluir el código para regiones.• Macros TRACE:

– Tratar de depurar código en OnDraw (breakpoint).– En OnDraw.

• Prueba sorpresa.




2727

Ventana Diálogo (1)• 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.




2828

Ventana Diálogo (2)

• 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.




2929

Ventana Diálogo (3)• 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”




3030


• 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.




3131

Ventana Diálogo (5)• 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.




3232


• 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.




3333


• Con el control seleccionado hacer click con el botón derecho del mouse.

• Seleccionar la opción Properties.




3434

Ventana Diálogo (8)• 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.

Documents

Clase 4: Manejo de eventos - Ivan Bernalclusterfie.epn.edu.ec/.../PHVisuales/CLASES_PDF/Clase_PHV4_una.pdf · – Con el mapa se conecta a MFC con las funciones escritas por el usuario