Compartir a través de

Tutorial: Actualizar la aplicación Scribble de MFC (Parte 1)

  • Artículo

Este tutorial muestra cómo modificar una aplicación MFC existente para utilizar la interfaz de usuario de la cinta de opciones. Visual Studio admite la cinta de Office 2007 y la cinta de Windows 7 Scenic. Para obtener más información sobre la interfaz de usuario de la cinta, vea Cintas.

En este tutorial se ha modificado el ejemplo clásico de MFC Scribble 1.0 que permite utilizar el mouse para crear dibujos lineales. En esta parte del tutorial se muestra cómo modificar el ejemplo Scribble de modo que muestre una barra de cinta. En la Parte 2 se agregan más botones a la barra de cinta.

Requisitos previos

El ejemplo de MFC Scribble 1.0. Para obtener ayuda para convertir a Visual Studio 2017 o una versión posterior, vea Guía de migración: Scribble de MFC.

Secciones

Esta parte del tutorial tiene las secciones siguientes:

Reemplazar las clases base

Para convertir una aplicación que admite un menú en una aplicación que admite una cinta, la aplicación, la ventana marco y las clases de barra de herramientas deben derivarse de clases base actualizadas. (Sugerimos no modificar el ejemplo original Scribble. En su lugar, limpie el proyecto Scribble, cópielo a otro directorio y, a continuación, modifique la copia).

Para reemplazar las clases base de la aplicación Scribble

  1. En scribble.cpp, confirme que CScribbleApp::InitInstance incluye una llamada a AfxOleInit.

  2. Agregue el código siguiente al archivo pch.h (stdafx.h en Visual Studio 2017 y versiones anteriores):

    #include <afxcontrolbars.h>

  3. En scribble.h, modifique la definición de la clase CScribbleApp para derivarla de la clase CWinAppEx.

    class CScribbleApp: public CWinAppEx

  4. Scribble 1.0 se escribió cuando las aplicaciones Windows utilizaban un archivo de inicialización (.ini) para guardar los datos de preferencias del usuario. En lugar de usar un archivo de inicialización, modifique Scribble para almacenar las preferencias del usuario en el Registro. Para establecer la clave del Registro y la base, escriba el código siguiente en CScribbleApp::InitInstance después de la instrucción LoadStdProfileSettings().

    SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));

  5. El marco principal de una aplicación de interfaz de múltiples documentos (MDI) ya no se deriva de la clase CMDIFrameWnd. En su lugar, se deriva de la clase CMDIFrameWndEx.

    En los archivos mainfrm.h y mainfrm.cpp, reemplace todas las referencias a CMDIFrameWnd por CMDIFrameWndEx.

  6. En los archivos childfrm.h y childfrm.cpp, reemplace CMDIChildWnd por CMDIChildWndEx.

    En el archivo childfrm.h, reemplace CSplitterWnd por CSplitterWndEx.

  7. Modifique las barras de herramientas y las barras de estado para utilizar las nuevas clases MFC.

    En el archivo mainfrm.h:

    1. Reemplace CToolBar por CMFCToolBar.

    2. Reemplace CStatusBar por CMFCStatusBar.

  8. En el archivo mainfrm.cpp:

    1. Reemplazar m_wndToolBar.SetBarStyle con m_wndToolBar.SetPaneStyle

    2. Reemplazar m_wndToolBar.GetBarStyle con m_wndToolBar.GetPaneStyle

    3. Reemplazar DockControlBar(&m_wndToolBar) con DockPane(&m_wndToolBar)

  9. En el archivo ipframe.cpp, marque como comentario las tres líneas de código siguientes.

    m_wndToolBar.EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->EnableDocking(CBRS_ALIGN_ANY);
pWndFrame->DockPane(&m_wndToolBar);

  10. Guarde los cambios y, a continuación, compile y ejecute la aplicación.

Agregar mapas de bits al proyecto

Los siguientes cuatro pasos de este tutorial requieren recursos de mapa de bits. Puede obtener los mapas de bits adecuados de varias maneras:

  • Use los editores de recursos para inventar sus propios mapas de bits. Los editores de recursos también se pueden usar para ensamblar mapas de bits a partir de las imágenes de gráficos de red portátiles (.png) que se incluyen en Visual Studio y que se pueden descargar desde la biblioteca de imágenes de Visual Studio.

    Sin embargo, la interfaz de usuario de cinta requiere que ciertos mapas de bits admitan imágenes transparentes. Los mapas de bits transparentes utilizan píxeles de 32 bits, donde 24 bits especifican los componentes rojo, verde y azul del color, y 8 bits definen un canal alfa que especifica la transparencia del color. Los editores de recursos actuales pueden ver, pero no modificar los mapas de bits con píxeles de 32 bits. Por consiguiente, utilice un editor de imágenes externo en lugar de los editores de recursos para manipular los mapas de bits transparentes.

  • Copie un archivo de recursos adecuado de otra aplicación al proyecto y, a continuación, importe los mapas de bits de ese archivo.

En este tutorial, los archivos de recursos se copian del ejemplo creado en Tutorial: Crear una aplicación de cinta mediante MFC.

Para agregar mapas de bits al proyecto

  1. Use el Explorador de archivos para copiar los siguientes archivos .bmp del directorio de recursos (res) del ejemplo de cinta en el directorio de recursos (res) del proyecto Scribble:

    1. Copie main.bmp al proyecto Scribble.

    2. Copie filesmall.bmp y filelarge.bmp al proyecto Scribble.

    3. Haga copias de los archivos filelarge.bmp y filesmall.bmp, pero guarde las copias en el ejemplo de la cinta. Cambie los nombres de las copias a homesmall.bmp y homelarge.bmp, y después mueva las copias al proyecto Scribble.

    4. Haga una copia del archivo toolbar.bmp, pero guarde la copia en el ejemplo de la cinta. Cambie el nombre de la copia a panelicons.bmp y después mueva la copia al proyecto Scribble.

  2. Importe el mapa de bits para una aplicación MFC. En la Vista de recursos, haga doble clic en el nodo scribble.rc y en el nodo Mapa de bits y, luego, haga clic en Agregar recurso. En el cuadro de diálogo que se abre, haga clic en Importar. Vaya al directorio res seleccione el archivo main.bmp y haga clic en Abrir.

    El mapa de bits main.bmp contiene una imagen de 26x26. Cambie el identificador del mapa de bits a IDB_RIBBON_MAIN.

  3. Importe los mapas de bits del menú Archivo asociado al botón Aplicación.

    1. Importe el archivo filesmall.bmp, que contiene once imágenes de 16x16 (16x176). Cambie el identificador del mapa de bits a IDB_RIBBON_FILESMALL.

    Nota:

    Dado que solo necesitamos las ocho primeras imágenes de 16x16 (16x128), puede recortar si lo desea el ancho por el lado derecho de este mapa de bits, de 176 a 128.

    1. Importe filelarge.bmp, que contiene nueve imágenes de 32x32 (32x288). Cambie el identificador del mapa de bits a IDB_RIBBON_FILELARGE.

  4. Importe los mapas de bits de las categorías y los paneles de la cinta. Cada pestaña de la barra de cinta es una categoría y consta de una etiqueta de texto y una imagen opcional.

    1. Importe el mapa de bits homesmall.bmp, que contiene once imágenes de 16x16 para los mapas de bits de botón pequeño. Cambie el identificador del mapa de bits a IDB_RIBBON_HOMESMALL.

    2. Importe el mapa de bits homelarge.bmp, que contiene nueve imágenes de 32x32 para los mapas de bits de botón grande. Cambie el identificador del mapa de bits a IDB_RIBBON_HOMELARGE.

  5. Importe los mapas de bits de los paneles de cinta con el cambio de tamaño. Estos mapas de bits, o iconos de panel, se utilizan después de una operación de cambio de tamaño si la cinta es demasiado pequeña para mostrar todo el panel.

    1. Importe el mapa de bits panelicons.bmp, que contiene ocho imágenes de 16x16. En la ventana Propiedades del Editor de mapas de bits, ajuste el ancho del mapa de bits a 64 (16x64). Cambie el identificador del mapa de bits a IDB_PANEL_ICONS.

    Nota:

    Dado que solo necesitamos las cuatro primeras imágenes de 16x16 (16x64), puede recortar si lo desea el ancho por el lado derecho de este mapa de bits, de 128 a 64.

Agregar un recurso de cinta de opciones al proyecto

Al convertir una aplicación que utiliza los menús de una aplicación que tiene una cinta, no es necesario quitar o deshabilitar los menús existentes. Basta con que cree un recurso de cinta, agregue los botones de la cinta y, a continuación, asocie los nuevos botones con los elementos de menú existentes. Aunque los menús no estén visibles, los mensajes de la barra de cinta se enrutan a través de los menús, y los métodos abreviados de teclado de los menús siguen funcionando.

Una cinta consta del botón Aplicación, que es el botón grande del lado superior izquierdo de la cinta, y una o varias pestañas de categoría. Cada pestaña de categoría contiene uno o varios paneles que actúan como contenedores para los botones y los controles de la cinta. En el procedimiento siguiente se muestra cómo crear un recurso de cinta y, después, personalizar el botón Aplicación.

Para agregar un recurso de cinta al proyecto

  1. Con el proyecto Scribble seleccionado en el Explorador de soluciones, en el menú Proyecto, haga clic en Agregar recurso.

  2. En el cuadro de diálogo Agregar recurso, seleccione Cinta y, a continuación, haga clic en Nueva.

    Visual Studio crea un recurso de cinta y lo abre en la vista Diseño. El identificador de recurso de cinta de opciones es IDR_RIBBON1, que se muestra en la Vista de recursos. La cinta contiene una categoría y un panel.

  3. Puede personalizar el botón Aplicación si modifica sus propiedades. Los identificadores de mensaje que se utilizan en este código ya están definidos en el menú para Scribble 1.0.

  4. En la vista Diseño, haga clic en el botón Aplicación para mostrar sus propiedades. Cambie los valores de propiedad de la siguiente manera: Image a IDB_RIBBON_MAIN, Prompt a File, Keys a f, Large Images a IDB_RIBBON_FILELARGE y Small Images a IDB_RIBBON_FILESMALL.

  5. Las modificaciones siguientes crean el menú que aparece cuando el usuario hace clic en el botón Aplicación. Haga clic en los puntos suspensivos (...) que se encuentran junto a Main Items para abrir el Editor de elementos.

    1. Con el tipo Elemento Button seleccionado, haga clic en Agregar para agregar un botón. Cambie Caption a &New, ID a ID_FILE_NEW, Image a 0 e Image Large a 0.

    2. Haga clic en Agregar para agregar un botón. Cambie Caption a &Save, ID a ID_FILE_SAVE, Image a 2 e Image Large a 2.

    3. Haga clic en Agregar para agregar un botón. Cambie Caption a Save &As, ID a ID_FILE_SAVE_AS, Image a 3 e Image Large a 3.

    4. Haga clic en Agregar para agregar un botón. Cambie Caption a &Print, ID a ID_FILE_PRINT, Image a 4 e Image Large a 4.

    5. Cambie el tipo Elemento a Separator y haga clic en Agregar.

    6. Cambie el tipo Elemento a Button. Haga clic en Agregar para agregar un quinto botón. Cambie Caption a &Close, ID a ID_FILE_CLOSE, Image a 5 e Image Large a 5.

  6. Las modificaciones siguientes crean un submenú del botón Imprimir que creó en el paso anterior.

    1. Haga clic en el botón Imprimir, cambie el tipo Elemento a Label y, a continuación, haga clic en Insertar. Cambie Título a Preview and print the document.

    2. Haga clic en el botón Imprimir, cambie el tipo Elemento a Label y, a continuación, haga clic en Insertar. Cambie Caption a &Print, ID a ID_FILE_PRINT, Image a 4 e Image Large a 4.

    3. Haga clic en el botón Imprimir y haga clic en Insertar para agregar un botón. Cambie Caption a &Quick Print, ID a ID_FILE_PRINT_DIRECT, Image a 7 e Image Large a 7.

    4. Haga clic en el botón Imprimir y luego haga clic en Insertar para agregar otro botón. Cambie Caption a Print Pre&view, ID a ID_FILE_PRINT_PREVIEW, Image a 6 e Image Large a 6.

    5. Ha modificado los elementos primarios (Main Items). Haga clic en Cerrar para salir del Editor de elementos.

  7. La modificación siguiente crea un botón Salir que aparece en la parte inferior del menú del botón Aplicación.

    1. Seleccione la pestaña Vista de recursos del Explorador de soluciones.

    2. En la ventana Propiedades, haga clic en el botón de puntos suspensivos (...) que se encuentra junto a Button para abrir el Editor de elementos.

    3. Con el tipo Elemento Button seleccionado, haga clic en Agregar para agregar un botón. Cambie Caption a E&xit, ID a ID_APP_EXIT e Image a 8.

    4. Ha modificado los botones (Buttons). Haga clic en Cerrar para salir del Editor de elementos.

Creación de una instancia de la barra de cinta

En los pasos siguientes se muestra cómo crear una instancia de la barra de cinta cuando se inicia la aplicación. Para agregar una barra de cinta a una aplicación, declare la barra de cinta en el archivo mainfrm.h. A continuación, en el archivo mainfrm.cpp, escriba código para cargar el recurso de cinta.

Para crear una instancia de la barra de cinta

  1. En el archivo mainfrm.h, agregue un miembro de datos a la sección protegida de CMainFrame, la definición de clase del marco principal. Este miembro corresponde a la barra de cinta.

    // Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;

  2. En el archivo mainfrm.cpp, agregue el código siguiente antes de la última instrucción return al final de la función CMainFrame::OnCreate. De esta forma, se crea una instancia de la barra de cinta.

    // Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);

Personalización del recurso de la cinta

Ahora que ha creado el botón Aplicación, puede agregar elementos a la cinta.

Nota:

En este tutorial se utiliza el mismo icono de panel para todos los paneles. Sin embargo, puede utilizar otros índices de la lista de imágenes para mostrar otros iconos.

Para agregar una categoría Inicio y un panel Edición

  1. El programa Scribble solo requiere una categoría. En la vista de diseño, en el cuadro de herramientas, haga doble clic en Categoría para agregar una y mostrar sus propiedades. Cambie los valores de propiedad de la siguiente manera: Caption a &Home, Large Images a IDB_RIBBON_HOMELARGE y Small Images a IDB_RIBBON_HOMESMALL.

  2. Cada categoría de la cinta está organizada en paneles con nombre. Cada panel contiene un conjunto de controles que realizan operaciones relacionadas. Esta categoría tiene un panel. Haga clic en Panel y, a continuación, cambie Caption a Edit.

  3. En el panel Edición, agregue un botón, que será el responsable de borrar el contenido del documento. El identificador de mensaje de este botón se ha definido en el recurso de menú IDR_SCRIBBTYPE. Especifique Clear All como el texto del botón y el índice del mapa de bits que decora el botón. Abra el cuadro de herramientas y luego arrastre Button al panel Edición. Haga clic en el botón y, a continuación, cambie Caption a Clear All, ID a ID_EDIT_CLEAR_ALL, Image Index a 0 y Large Image Index a 0.

  4. Guarde los cambios y, a continuación, compile y ejecute la aplicación. La aplicación Scribble debería mostrarse y debe tener una barra de cinta en la parte superior de la ventana en lugar de una barra de menús. La barra de cinta debe tener una categoría, Inicio, e Inicio debe tener un panel, Edición. Los botones de la cinta que agregó deben estar asociados a los controladores de eventos existentes, y los botones Abrir, Cerrar, Guardar, Imprimir y Borrar todo deben funcionar según lo previsto.

Establecer el aspecto de la aplicación

Un administrador visual es un objeto global que controla todos los dibujos de una aplicación. Dado que la aplicación original Scribble utiliza el estilo de la interfaz de usuario de Office 2000, la aplicación puede parecer antigua. Puede restablecer la aplicación para utilizar el administrador visual de Office 2007 de modo sea similar a una aplicación de Office 2007.

Para establecer la apariencia de la aplicación

  1. En la función CMainFrame::OnCreate, escriba el siguiente código antes de la instrucción return 0; para cambiar el administrador visual y el estilo predeterminados.

    // Set the default manager to Office 2007
CMFCVisualManager::SetDefaultManager(RUNTIME_CLASS(CMFCVisualManagerOffice2007));
CMFCVisualManagerOffice2007::SetStyle(CMFCVisualManagerOffice2007::Office2007_LunaBlue);

  2. Guarde los cambios y, a continuación, compile y ejecute la aplicación. La interfaz de usuario de la aplicación debe ser similar a la de Office 2007.

Pasos siguientes

Ha modificado el ejemplo clásico Scribble de MFC 1.0 para utilizar el diseñador de la cinta de opciones. Ahora, avance a la Parte 2.

Consulte también

Tutoriales
Tutorial: Actualizar la aplicación Scribble de MFC (parte 2)