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

Artículo
06/16/2023

La parte 1 de este tutorial mostró cómo agregar una cinta de Office Fluent a la aplicación Scribble clásica. Esta parte muestra cómo agregar paneles y controles de cinta de opciones que los usuarios pueden usar en lugar de menús y comandos.

Requisitos previos

Ejemplos de Visual C++

Secciones

Esta parte del tutorial tiene las secciones siguientes:

Agregar nuevos paneles a la cinta
Agregar un panel de ayuda a la cinta
Agregar un panel de Lápiz a la cinta
Agregar un botón de colores a la cinta
Agregar un miembro de color a la clase Documento
Inicialización de lápices y preferencias de guardado

Agregar nuevos paneles a la cinta

Estos pasos muestran cómo agregar un panel Vista que contiene dos casillas que controlan la visibilidad de la barra de herramientas y la barra de estado, y también un panel Ventana que contiene un botón de expansión orientado verticalmente que controla la creación y organización de ventanas de la interfaz de varios documentos (MDI).

Para agregar un panel Vista y un panel Ventana a la barra de cinta

Cree un panel denominado View, que tenga dos casillas para alternar la barra de estado y la barra de herramientas.
1. En el Cuadro de herramientas, arrastre un panel a la categoría Inicio. A continuación, arrastre dos casillas al panel.
2. Haga clic en el panel para modificar sus propiedades. Cambie Título a View.
3. Haga clic en la primera casilla para modificar sus propiedades. Cambie id. a ID_VIEW_TOOLBAR y Título a Toolbar.
4. Haga clic en la segunda casilla para modificar sus propiedades. Cambie id. a ID_VIEW_STATUS_BAR y Título a Status Bar.
Cree un panel denominado Window que tenga un botón de expansión. Cuando un usuario hace clic en el botón de expansión, un menú contextual muestra tres comandos que ya están definidos en la aplicación Scribble.
1. En el Cuadro de herramientas, arrastre un panel a la categoría Inicio. A continuación, arrastre un botón al panel.
2. Haga clic en el panel para modificar sus propiedades. Cambie Título a Window.
3. Haga clic en el botón . Cambie Título a Windows, Claves a w, Índice de imagen grande a 1 y Modo de división a False. A continuación, haga clic en los puntos suspensivos (...) junto a Elementos de menú para abrir el cuadro de diálogo Editor de elementos.
4. Haga clic en Agregar tres veces para agregar tres botones.
5. Haga clic en el primer botón y, a continuación, cambie Título a New Windowe Id. a ID_WINDOW_NEW.
6. Haga clic en el segundo botón y, a continuación, cambie Título a Cascade e Id. a ID_WINDOW_CASCADE.
7. Haga clic en el tercer botón y, a continuación, cambie Título a Tilee Id. a ID_WINDOW_TILE_HORZ.
Guarde los cambios y, a continuación, compile y ejecute la aplicación. Se deben mostrar los paneles Vista y Ventana. Haga clic en los botones para confirmar que funcionan correctamente.

Agregar un panel de ayuda a la cinta

Ahora, puede asignar dos elementos de menú definidos en la aplicación Scribble a botones de la cinta denominados Temas de ayuda y Acerca de Scribble. Los botones se agregan a un nuevo panel denominado Ayuda.

Para agregar un panel Ayuda

En el Cuadro de herramientas, arrastre un panel a la categoría Inicio. A continuación, arrastre dos botones al panel.
Haga clic en el panel para modificar sus propiedades. Cambie Título a Help.
Haga clic en el primer botón. Cambie Título a Help Topics e Id. a ID_HELP_FINDER.
Haga clic en el segundo botón. Cambie Título a About Scribble... e Id. a ID_APP_ABOUT.
Guarde los cambios y, a continuación, compile y ejecute la aplicación. Se debe mostrar un panel Ayuda que contenga dos botones de la cinta.

Importante

Al hacer clic en el botón Temas de ayuda, la aplicación Scribble abre un archivo de ayuda HTML comprimido (.chm) denominado su_nombre_de_proyecto.chm. Por lo tanto, si su proyecto no se denomina Scribble, debe cambiar el nombre del archivo de ayuda al nombre del proyecto.

Agregar un panel de Lápiz a la cinta

Ahora, agregue un panel para mostrar botones que controlan el grosor y el color del lápiz. Este panel contiene una casilla que alterna entre lápices gruesos y finos. Su funcionalidad es similar a la del elemento de menú Línea gruesa de la aplicación Scribble.

La aplicación Scribble original permite al usuario seleccionar los anchos de lápiz de un cuadro de diálogo que aparece cuando el usuario hace clic en Anchos de lápiz en el menú. Dado que la barra de la cinta tiene amplio espacio para nuevos controles, puede reemplazar el cuadro de diálogo mediante dos cuadros combinados en la cinta. Un cuadro combinado ajusta el ancho del lápiz fino y el otro cuadro combinado ajusta el ancho del lápiz grueso.

Para agregar un panel Lápiz y cuadros combinados a la cinta

En el Cuadro de herramientas, arrastre un panel a la categoría Inicio. A continuación, arrastre una casilla y dos cuadros combinados al panel.
Haga clic en el panel para modificar sus propiedades. Cambie Título a Pen.
Haga clic en la casilla. Cambie Título a Use Thick e Id. a ID_PEN_THICK_OR_THIN.
Haga clic en el primer cuadro combinado. Cambie Título a Thin Pen, Id. a ID_PEN_THIN_WIDTH, Tipo a Drop List, Datos a 1;2;3;4;5;6;7;8;9; y Texto a 2.
Haga clic en el segundo cuadro combinado. Cambie Título a Thick Pen, Id. a ID_PEN_THICK_WIDTH, Tipo a Drop List, Datos a 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20; y Texto a 5.
Los nuevos cuadros combinados no corresponden a ningún elemento de menú existente, por lo que debe crear un elemento de menú para cada opción de lápiz.
1. En la ventana Vista de recursos, abra el recurso de menú IDR_SCRIBBTYPE.
2. Haga clic en Lápiz para abrir el menú de lápiz. A continuación, haga clic en Escribir aquí y escriba Thi&n Pen.
3. Haga clic con el botón derecho en el texto que ha escrito para abrir la ventana Propiedades y, a continuación, cambie la propiedad Id. a ID_PEN_THIN_WIDTH.
4. Cree un controlador de eventos para cada elemento de menú de lápiz. Haga clic con el botón derecho en el elemento de menú Thi&n Pen que creó y, a continuación, haga clic en Agregar controlador de eventos. Se muestra el Asistente para controlador de eventos.
5. En el cuadro Lista de clases del asistente, seleccione CScribbleDoc y, a continuación, haga clic en Agregar y editar. El comando crea un controlador de eventos denominado CScribbleDoc::OnPenThinWidth.
6. Agregue el siguiente código a CScribbleDoc::OnPenThinWidth.
```
// Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

// Get a pointer to the Thin Width combo box
CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THIN_WIDTH));

//Get the selected value
int nCurSel = pThinComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThinWidth = atoi(CStringA(pThinComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();
```
A continuación, cree un elemento de menú y controladores de eventos para el lápiz grueso.
1. En la ventana Vista de recursos, abra el recurso de menú IDR_SCRIBBTYPE.
2. Haga clic en Lápiz para abrir el menú de lápiz. A continuación, haga clic en Escribir aquí y escriba Thic&k Pen.
3. Haga clic con el botón derecho en el texto que escribió para mostrar la ventana Propiedades. Cambie la propiedad de id. a ID_PEN_THICK_WIDTH.
4. Haga clic con el botón derecho en el elemento de menú Lápiz grueso que creó y, a continuación, haga clic en Agregar controlador de eventos. Se muestra el Asistente para controlador de eventos.
5. En el cuadro Lista de clases del asistente, seleccione CScribbleDoc y, a continuación, haga clic en Agregar y editar. El comando crea un controlador de eventos denominado CScribbleDoc::OnPenThickWidth.
6. Agregue el siguiente código a CScribbleDoc::OnPenThickWidth.
```
// Get a pointer to the ribbon bar
CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx *) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox, pRibbon->FindByID(ID_PEN_THICK_WIDTH));
// Get the selected value
int nCurSel = pThickComboBox->GetCurSel();
if (nCurSel>= 0)
{
    m_nThickWidth = atoi(CStringA(pThickComboBox->GetItem(nCurSel)));
}

// Create a new pen using the selected width
ReplacePen();
```
Guarde los cambios y, a continuación, compile y ejecute la aplicación. Se deben mostrar los nuevos botones y cuadros combinados. Intente usar diferentes anchos de lápiz para garabatear.

Agregar un botón de colores al panel del lápiz

A continuación, agregue un objeto CMFCRibbonColorButton que permita al usuario garabatear en color.

Para agregar un botón de colores al panel del lápiz

Antes de agregar el botón de color, cree un elemento de menú para él. En la ventana Vista de recursos, abra el recurso de menú IDR_SCRIBBTYPE. Haga clic en el elemento de menú Lápiz para abrir el menú. A continuación, haga clic en Escribir aquí y escriba &Color. Haga clic con el botón derecho en el texto que escribió para mostrar la ventana Propiedades. Cambie el identificador a ID_PEN_COLOR.
Ahora agregue el botón de color. En el Cuadro de herramientas, arrastre un botón de color al panel Lápiz.
Haga clic en el botón de calor. Cambie Título a Color, ID a ID_PEN_COLOR, Aspecto simple a True, Índice de imagen grande a 1 y Modo dividido a False.
Guarde los cambios y, a continuación, compile y ejecute la aplicación. El nuevo botón de color debe mostrarse en el panel Lápiz. Sin embargo, no se puede usar porque aún no tiene un controlador de eventos. Los pasos siguientes muestran cómo agregar un controlador de eventos para el botón de color.

Agregar un miembro de color a la clase Documento

Dado que la aplicación Scribble original no tiene lápices de color, debe escribir una implementación para ellos. Para almacenar el color del lápiz del documento, agregue un nuevo miembro a la clase de documento CscribbleDoc.

Para agregar un miembro de color a la clase de documento

En scribdoc.h, en la clase CScribbleDoc, busque la sección // Attributes. Agregue las siguientes líneas de código después de la definición del miembro de datos m_nThickWidth.
```
// Current pen color
COLORREF m_penColor;
```
Cada documento contiene una lista de trazos que el usuario ya ha dibujado. Cada trazo se define mediante un objeto CStroke. La clase CStroke no incluye información sobre el color de lápiz, por lo que debe modificar la clase. En scribdoc.h, en la clase CStroke, agregue las siguientes líneas de código después de la definición del miembro de datos m_nPenWidth.
```
// Pen color for the stroke
COLORREF m_penColor;
```
En scribdoc.h, agregue un nuevo constructor CStroke cuyos parámetros especifiquen un ancho y un color. Agregue la siguiente línea de código después de la instrucción CStroke(UINT nPenWidth);.
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

En scribdoc.cpp, agregue la implementación del nuevo constructor CStroke. Agregue el código siguiente después de la implementación del constructor CStroke::CStroke(UINT nPenWidth).

// Constructor that uses the document's current width and color
CStroke::CStroke(UINT nPenWidth, COLORREF penColor)
{
    m_nPenWidth = nPenWidth;
    m_penColor = penColor;
    m_rectBounding.SetRectEmpty();
}

Cambie la segunda línea del método CStroke::DrawStroke de la siguiente manera.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Establezca el color de lápiz predeterminado para la clase de documento. En scribdoc.cpp, agregue las líneas siguientes a CScribbleDoc::InitDocument, después de la instrucción m_nThickWidth = 5;.
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
En scribdoc.cpp, cambie la primera línea del método CScribbleDoc::NewStroke a la siguiente.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Cambie la última línea del método CScribbleDoc::ReplacePen a la siguiente.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Agregó el miembro m_penColor en un paso anterior. Ahora, cree un controlador de eventos para el botón de color que establece el miembro.
1. En la ventana Vista de recursos, abra el recurso de menú IDR_SCRIBBTYPE.
2. Haga clic con el botón derecho en el elemento de menú Color y haga clic en Agregar controlador de eventos. Aparece el Asistente para controladores de eventos.
3. En el cuadro Lista de clases del asistente, seleccione CScribbleDoc y, a continuación, haga clic en Agregar y editar. El comando crea el código auxiliar del controlador de eventos CScribbleDoc::OnPenColor.

Reemplace el código auxiliar del controlador de eventos CScribbleDoc::OnPenColor con el código siguiente.

void CScribbleDoc::OnPenColor()
{
    // Change pen color to reflect color button's current selection
    CMFCRibbonBar* pRibbon = ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
    ASSERT_VALID(pRibbon);

    CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
        CMFCRibbonColorButton, pRibbon->FindByID(ID_PEN_COLOR));

    m_penColor = pColorBtn->GetColor();
    // Create new pen using the selected color
    ReplacePen();
}

Guarde los cambios y, a continuación, compile y ejecute la aplicación. Ahora puede presionar el botón de color y cambiar el color del lápiz.

Inicialización de lápices y preferencias de guardado

A continuación, inicialice el color y el ancho de los lápices. Por último, guarde y cargue un dibujo de color de un archivo.

Para inicializar controles en la barra de la cinta

Inicialice los lápices en la barra de la cinta.

Agregue el código siguiente a scribdoc.cpp, en el método CScribbleDoc::InitDocument, después de la instrucción m_sizeDoc = CSize(200,200).

// Reset the ribbon UI to its initial values
CMFCRibbonBar* pRibbon =
    ((CMDIFrameWndEx*) AfxGetMainWnd())->GetRibbonBar();
ASSERT_VALID(pRibbon);

CMFCRibbonColorButton* pColorBtn = DYNAMIC_DOWNCAST(
    CMFCRibbonColorButton,
    pRibbon->FindByID(ID_PEN_COLOR));

// Set ColorButton to black
pColorBtn->SetColor(RGB(0, 0, 0));

CMFCRibbonComboBox* pThinComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THIN_WIDTH));

// Set Thin pen combobox to 2
pThinComboBox->SelectItem(1);

CMFCRibbonComboBox* pThickComboBox = DYNAMIC_DOWNCAST(
    CMFCRibbonComboBox,
    pRibbon->FindByID(ID_PEN_THICK_WIDTH));

// Set Thick pen combobox to 5
pThickComboBox->SelectItem(0);

Guarde un dibujo a color en un archivo. Agregue el código siguiente a scribdoc.cpp, en el método CStroke::Serialize, después de la instrucción ar << (WORD)m_nPenWidth;.
```
ar << (COLORREF)m_penColor;
```
Por último, cargue un dibujo de color de un archivo. Agregue la siguiente línea de código, en el método CStroke::Serialize, después de la instrucción m_nPenWidth = w;.
```
ar >> m_penColor;
```
Ahora se puede garabatear en color y guardar el dibujo en un archivo.

Conclusión

Ha actualizado la aplicación Scribble de MFC. Use este tutorial como guía al modificar las aplicaciones existentes.

Consulte también

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

Compartir a través de