Presentación 10 - Escuela Politécnica Nacional
Transcripción
Presentación 10 - Escuela Politécnica Nacional
Programación con Herramientas Visuales Clase 10: Barras de estado Lunes, 20 de Enero de 2003 Iván Bernal, Ph.D. [email protected] http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito – Ecuador Copyright @2003, I. Bernal Agenda • Aspectos adicionales de barras de herramientas. • Barras de estado. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 2 Barras de Herramientas (1) • Las barras de herramientas son objetos de la clase CToolBar, y las barras de estado son objetos de la clase CStatusBar. – Ambas clases se derivan de CControlBar, la que es derivada de CWnd. • Las barras de herramientas se construyen en base al “control común toolbar”. • Tienen la característica de “adosamiento” (docking) o flotantes. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 3 Barras de Herramientas (2) • En Visual C++ 6.0, se introdujo un nuevo tipo de barra de herramientas llamada una “rebar”. – Las rebar están basadas en los controles que vienen con Microsoft Internet Explorer. • Las imágenes de los botones de una barra de herramientas se almacenan en un solo bitmap. bitmap – Cada imagen de un botón tiene un tamaño de 15 pixels x 16 pixels. – El bitmap se almacena en un archivo Toolbar.bmp, en el subdirectorio de la aplicación \res. • Cuando se presiona un botón se envía un mensaje de comando, de igual forma que lo hacen los menús, y aceleradores del teclado. – La mayoría de las veces, un botón en una barra de herramientas tiene un par en un ítem de un menú. • También se tiene asociados mensajes de comando para actualizar el interfaz de usuario, para modificar la apariencia de los botones. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 4 Barras de Herramientas (3) • Abriendo como un archivo de texto el archivo con extensión “.rc”, se puede observar la descripción de la estructura de una barra de herramientas. – Este archivo contiene la descripción de lo que se puede manipular con el editor de recursos. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 5 Acceso a la ventan principal • Las barras de herramienta y de estado están asociadas a la ventana principal de la aplicación no a la vista. • Para aplicaciones SDI y MDI, se puede usar la función AfxGetApp (función global), para acceder al objeto de la aplicación, y de este se accede al puntero a la ventana principal. – CMainFrame es una nueva clase definida para el usuario. – Se realiza “casting” de la ventana principal. – Se debe incluir el archivo “MainFrm.h” para hacer uso de funciones o datos de la clase CMainFrame. – Se debe hacer públicos los miembros que se deben acceder, o proveer funciones de acceso. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 6 Actividades Relacionadas • Revisar el ejemplo del libro de Kruglinski. • Revisar los comentarios asociados expuestos en el libro. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 7 Barras de Estado (1) • No responde a acciones del usuario ni genera mensajes de comando. – Solo presenta texto considerado complementario a la aplicación. – Existen paneles que pueden presentar: • Líneas de mensaje. • Indicadores de estado. – Para usar la barra de estado para algo particular, el comportamiento por predefinición se debe cambiar: • Mensajes asociados a menús y barras de herramienta. • Estado del teclado. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 8 Barras de Estado (2) • Existe un arreglo de indicadores generado y almacenado en MainFrm.cpp. • Las barras de herramienta y de estado se crean bajo el control de la ventana principal. • Para cambiar los indicadores se usa la función SetIndicators. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 9 Barras de Estado (3) Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 10 Barras de Estado (4) • Línea de mensaje: – Presenta un mensaje que puede cambiar dinámicamente. – Se debe tener acceso a la barra de estado antes de cambiar su contenido, y luego definir el texto a presentarse. • Se requiere un índice, que inicia en 0, desde el extremo izquierdo. – El código que se presenta correspondería a lo que se haría desde una clase vista. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 11 Barras de Estado (5) • Indicadores de Estado: – Un panel de estado está relacionado a un mensaje definido entre los recursos de la aplicación. – Los mensajes en los paneles pueden ser escondidos o presentados, de acuerdo a la lógica del programa. – El ID es utilizado para enrutar el comando para actualizar el interfaz de usuario. – El código anterior está relacionado al “Caps Lock” (letras mayúscula o minúsculas). Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 12 Barras de Estado (6) • La función de creación de la barra de estado, acepta por default el valor como ID AFX_IDW_STATUS_BAR . – En el código generado y presentado en una transparencia anterior, no se especificó este ID. – MFC utiliza este ID para saber que presentar como línea de mensaje, indicando los mensajes asociados a menús y botones. – Para cambiar el comportamiento de la línea de mensaje se debe cambiar este ID. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 13 Barras de Estado (7) • Se debe definir la constante ID_MY_STATUS_BAR, en el archivo “resource.h”, utilizando el editor de símbolos de Visual C++. • El editor elegirá el número asociado al símbolo. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 14 Barras de Estado (8) • Finalmente, si se debe cambiar el ID de la barra de estados, también se debe corregir la lógica asociada a esconder y presentar la barra de estados. – ID_VIEW_STATUS_BAR representa la barra de estados y para ella se debe generar las funciones asociadas a los mensajes de comandos, en la clase CMainFrame. – Revisar el ejemplo B del capítulo de Kruglinski para mas detalles. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 15 Barras de Estado (9) • En este ejemplo se modificará la información presentada por la barra de estados, de acuerdo a lo que se indica en la figura. • Para este ejemplo se debe cambiar el ID de la ventana, como se explicó anteriormente y cambiar el código asociado a la creación de la barra de estados. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 16 Barras de Estado (10) • Para asignar un mensaje a un símbolo se debe usar el editor de recursos. • Esto es necesario para definir los nuevos elementos del arreglo que acepta la barra de estados. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 17 Barras de Estado (11) • Para generar los handlers asociados a la barra de estados en CMainFrame, se ubica el símbolo ID_VIEW_STATUS_BAR y se generan los dos mensajes asociados. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 18 Barras de Estado (12) • Los handlers asociados a los nuevos indicadores de la barra de estados en CMainFrame, deben ser agregados manualmente. – Se debe añadir el código necesario en “.h” y “.cpp”. • Se debe cambiar el arreglo de indicadores. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 19 Barras de Estado (13) • Para el ejemplo, se debe presentar información relacionada a si los botones del mouse están o no presionados. – Los botones del mouse derecho e izquierdo tienen asociados códigos de teclas virtuales. – No se depende de mensajes del mouse para esta tarea. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 20 Barras de Estado (14) • El código presenta las acciones a tomarse dentro de la vista para cambiar la línea de mensaje de la barra de estado. • En este caso cada vez que se mueva el mouse debe actualizarse el contenido de la barra de estado. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 21 Actividades Relacionadas • Revisar el ejemplo del libro de Kruglinski. • Revisar los comentarios asociados expuestos en el libro, para mas detalles sobre los pasos asociados. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 22 Proyecto (1) • Agregar código para cambiar la barra de estados. – Un mensaje deberá presentar cuantos números del total a generarse se tiene en un momento dado. – Un indicador presentará la información si se trabaja en modo de número o no. – La información asociada con los botones de la barra de herramientas sigue siendo la misma. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 23 Proyecto (2) • Tres nuevos botones se deben añadir para definir el color de los rectángulos vacíos, los que tienen números y el texto. – Se debe incluir también un ítem en los menús por cada caso. • Frente a un click en los botones se debe presentar la ventana de selección de color que permite al usuario escoger el color. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 24 Proyecto (3) • El último botón a añadirse es el “T”, que permite definir el tamaño de la cuadrícula. – Se debe incluir también un ítem en el menú. • Al presionar este botón se debe presentar una ventana de diálogo, como en la figura. – La ventana permite definir el número de filas y columnas. – El botón “Cancel” cancela la operación. – El botón “OK” actualiza el tamaño pero desecha tdos los números generados. – Debe haber siempre consistencia con la información de la barra de estados. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 25 Proyecto (4) • Proyecto: – Para el 27 de Enero de 2003, hasta las 9am. – Detalladamente revisar la funcionalidad del programa entregado. – Pueden utilizar mi solución al Proyecto 2. • Deber: – Para el Viernes 24 de Enero de 2003, hasta las 9am (enviar por email). – Estudiar las secciones: • The Internet Explorer Rebar Toolbar. • The EX14C Rebar Example . – Crear un proyecto y reproducir la funcionalidad sugerida en el ejemplo. – Incluir comentarios sobre los pasos seguidos. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 26 Ventanas de Diálogo (1) Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 27 Ventanas de Diálogo (2) • La clase CColorDialog representa la ventana para escoger los colores. – Esta clase tiene como miembro la estructura “m_cc”, del tipo CHOOSECOLOR . – En el código de ejemplo se usa el miembro “rgbResult ”, para presentar el color actualmente seleccionado en la ventana. • Esto funciona si la bandera (flag) CC_RGBINIT está seleccionada, como es el caso del ejemplo. • CC_FULLOPEN permite presentar la sección extra de la ventana para definir colores del usuario. – La función DoModal presenta finalmente la ventana. • La palabra Modal significa que solo esa ventan está activa; la vista o ventana principal no pueden interactuar con el usaurio. – Cuando el usuario concluye su tarea con la ventana presionando “OK” se ejecuta la función GetColor( ) para recuperar la selección hecha. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 28 Ventanas de Diálogo (3) • Agregar una nueva ventana de diálogo. – Incluye dos botones que se usan si son necesarios y su texto puede ser cambiado. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 29 Ventanas de Diálogo (4) • En la ventana se pueden agregar elementos de la barra de controles. • Los que se requieren por ahora son: – El “static” para poner mensajes. – El de “Edición” para obtener el valor del usuario. • Para definir propiedades de cada elemento, se selecciona y se utiliza el botón derecho del mouse y seleccionar “Propiedades”. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 30 Ventanas de Diálogo (5) • En la ventana de “Propiedades”: – Se puede cambiar el ID del control en la pestaña “General”. – Para el ejemplo conviene que se ingresen solamente números para las filas y columnas. • Esto se define en la pestaña de “Styles”. • La validación se hace sin que el usuario agregue una sola línea de código. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 31 Ventanas de Diálogo (6) • Con doble click del mouse se puede asociar una nueva clase con la ventana de diálogo. • Se debe asignar un nombre para esta nueva clase. • La base de la nueva clase es CDialog y se indica el ID asignado en el editor para nuestra nueva ventana. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 32 Ventanas de Diálogo (7) • Luego de presionar “OK” se selecciona la pestaña “Member variables de la ventana del ClassWizard.” – Se añadirá una variable miembro de la nueva clase que represente a los diferentes controles agregados en la ventana. – Para el ejemplo es de importancia el control que permite al usuario especificar un valor. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 33 Ventanas de Diálogo (8) • Con doble click sobre el nombre seleccionado se define las propiedades de la variable. – Se asigna un nombre. – La categoría es un valor (la alternativa es usar una variable que represente un control). – El tipo de valor a usarse en este caso es un entero. • Podría ser claramente para este control de texto un mensaje. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 34 Ventanas de Diálogo (9) • Debido a las características seleccionadas (el usuario solo puede ingresar un número entero), el wizard nos ayuda a definir el rango del entero. – En este caso los valores deben fluctuar entre 1 y 10. • Se puede observar que se ha añadido una nueva clase en el “ClassView”. • Para este caso sencillo no es necesario agregar código en la clase del diálogo. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 35 Ventanas de Diálogo (10) • Para usar la nueva clase, se debe incluir siempre: #include "MiDialogo.h" • El código de ejemplo selecciona un valor inicial, presenta la ventana de diálogo y luego recupera el nuevo valor ingresado por el usuario. • Revisar el código del ejemplo B que incluye esta ventana de diálogo. Dic. 02 – Abril 03 PHV Iván Bernal, Ph.D. Ph.D. http:// wwwfie.epn.edu.ec//ibernal http://wwwfie.epn.edu.ec Escuela Politécnica Nacional Quito - Ecuador 36