Passo a passo: atualizando o aplicativo de rabisco MFC (Parte 2)

2025-06-21

A parte 1 deste passo a passo mostrou como adicionar uma Faixa de Opções fluente do Office ao aplicativo scribble clássico. Esta parte mostra como adicionar painéis de faixa de opções e controles que os usuários podem usar em vez de menus e comandos.

Pré-requisitos

Exemplos do Visual C++

Seções

Esta parte do passo a passo tem as seguintes seções:

Adicionando novos painéis à faixa de opções
Adicionando um Painel de Ajuda à Faixa de Opções
Adicionando um painel de caneta à faixa de opções
Adicionando um botão de cor à faixa de opções
Adicionando um membro de cor à classe de documento
Inicializando canetas e salvando preferências

Adicionando novos painéis à faixa de opções

Essas etapas mostram como adicionar um painel Modo de Exibição que contém duas caixas de seleção que controlam a visibilidade da barra de ferramentas e da barra de status e também um painel janela que contém um botão de divisão orientado verticalmente que controla a criação e a disposição das janelas da MDI (interface de vários documentos).

Para adicionar um painel exibição e um painel janela à barra de faixa de opções

Crie um painel chamado View, que tem duas caixas de seleção que alternam a barra de status e a barra de ferramentas.
1. Na Caixa de Ferramentas, arraste um Painel para a categoria Página Inicial . Em seguida, arraste duas Caixas de Seleção para o painel.
2. Clique no painel para modificar suas propriedades. Altere a legenda para View.
3. Clique na primeira caixa de seleção para modificar suas propriedades. Altere a ID e a ID_VIEW_TOOLBARlegenda para Toolbar.
4. Clique na segunda caixa de seleção para modificar suas propriedades. Altere a ID e a ID_VIEW_STATUS_BARlegenda para Status Bar.
Crie um painel chamado Window que tenha um botão de divisão. Quando um usuário clica no botão de divisão, um menu de atalho exibe três comandos que já estão definidos no aplicativo Scribble.
1. Na Caixa de Ferramentas, arraste um Painel para a categoria Página Inicial . Em seguida, arraste um botão para o painel.
2. Clique no painel para modificar suas propriedades. Altere a legenda para Window.
3. Clique no botão. Altere a legenda para Windows, teclas para w, índice1de imagem grande e modo de divisão para False. Em seguida, clique nas reticências (...) ao lado de Itens de Menu para abrir a caixa de diálogo Editor de Itens .
4. Clique em Adicionar três vezes para adicionar três botões.
5. Clique no primeiro botão e, em seguida, altere a Legenda para New Windowe a ID para ID_WINDOW_NEW.
6. Clique no segundo botão e, em seguida, altere a Legenda para Cascade, e a ID para ID_WINDOW_CASCADE.
7. Clique no terceiro botão e, em seguida, altere a Legenda para Tile, e a ID para ID_WINDOW_TILE_HORZ.
Salve as alterações e, em seguida, compile e execute o aplicativo. Os painéis Exibir e Janela devem ser exibidos. Clique nos botões para confirmar se eles funcionam corretamente.

Adicionando um Painel de Ajuda à Faixa de Opções

Agora, você pode atribuir dois itens de menu definidos no aplicativo Scribble aos botões da faixa de opções chamados Tópicos de Ajuda e Sobre Rabisco. Os botões são adicionados a um novo painel chamado Ajuda.

Para adicionar um painel de Ajuda

Na Caixa de Ferramentas, arraste um Painel para a categoria Página Inicial . Em seguida, arraste dois botões para o painel.
Clique no painel para modificar suas propriedades. Altere a legenda para Help.
Clique no primeiro botão. Altere a legenda para Help Topics, e a ID para ID_HELP_FINDER.
Clique no segundo botão. Altere a legenda para About Scribble..., e a ID para ID_APP_ABOUT.
Salve as alterações e, em seguida, compile e execute o aplicativo. Um painel de Ajuda que contém dois botões de faixa de opções deve ser exibido.

Importante

Quando você clica no botão Tópicos da Ajuda , o aplicativo Scribble abre um arquivo de ajuda HTML compactado (.chm) chamado your_project_name.chm. Consequentemente, se o projeto não se chamar Rabisco, você deverá renomear o arquivo de ajuda para o nome do projeto.

Adicionando um painel de caneta à faixa de opções

Agora, adicione um painel para exibir botões que controlam a espessura e a cor da caneta. Este painel contém uma caixa de seleção que alterna entre canetas grossas e finas. Sua funcionalidade se assemelha à do item de menu Linha Grossa no aplicativo Scribble.

O aplicativo Scribble original permite que o usuário selecione larguras de caneta em uma caixa de diálogo exibida quando o usuário clica em Larguras de Caneta no menu. Como a barra de faixa de opções tem amplo espaço para novos controles, você pode substituir a caixa de diálogo usando duas caixas de combinação na faixa de opções. Uma caixa de combinação ajusta a largura da caneta fina e a outra caixa de combinação ajusta a largura da caneta grossa.

Para adicionar um painel de caneta e caixas de combinação à faixa de opções

Na Caixa de Ferramentas, arraste um Painel para a categoria Página Inicial . Em seguida, arraste uma Caixa de Seleção e duas Caixas de Combinação para o painel.
Clique no painel para modificar suas propriedades. Altere a legenda para Pen.
Clique na caixa de seleção. Altere a legenda para Use Thick, e a ID para ID_PEN_THICK_OR_THIN.
Clique na primeira caixa de combinação. Altere a legenda para Thin Pen, ID para ID_PEN_THIN_WIDTH, Digite para Drop List, Dados para 1;2;3;4;5;6;7;8;9;e Texto para 2.
Clique na segunda caixa de combinação. Altere a legenda para Thick Pen, ID para ID_PEN_THICK_WIDTH, Digite para Drop List, Dados para 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;e Texto para 5.
As novas caixas de combinação não correspondem a nenhum item de menu existente, portanto, você deve criar um item de menu para cada opção de caneta.
1. Na janela Exibição de Recurso , abra o recurso de menu IDR_SCRIBBTYPE .
2. Clique em Caneta para abrir o menu de caneta. Em seguida, clique em Digitar Aqui e digite Thi&n Pen.
3. Clique com o botão direito do mouse no texto digitado para abrir a janela Propriedades e altere a propriedade ID para ID_PEN_THIN_WIDTH.
4. Crie um manipulador de eventos para cada item de menu de caneta. Clique com o botão direito do mouse no item de menu Thi&n Pen que você criou e clique em Adicionar Manipulador de Eventos. O Assistente de Manipulador de Eventos é exibido.
5. Na caixa de listagem Classe no assistente, selecione CScribbleDoc e clique em Adicionar e Editar. O comando cria um manipulador de eventos chamado CScribbleDoc::OnPenThinWidth.
6. Adicione o código a seguir 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();
```
Em seguida, crie um item de menu e manipuladores de eventos para a caneta grossa.
1. Na janela Exibição de Recurso , abra o recurso de menu IDR_SCRIBBTYPE .
2. Clique em Caneta para abrir o menu de caneta. Em seguida, clique em Digitar Aqui e digite Thic&k Pen.
3. Clique com o botão direito do mouse no texto digitado para exibir a janela Propriedades . Altere a propriedade ID para ID_PEN_THICK_WIDTH.
4. Clique com o botão direito do mouse no item de menu Caneta Grossa que você criou e clique em Adicionar Manipulador de Eventos. O Assistente de Manipulador de Eventos é exibido.
5. Na caixa de listagem Classe do assistente, selecione CScribbleDoc e clique em Adicionar e Editar. O comando cria um manipulador de eventos chamado CScribbleDoc::OnPenThickWidth.
6. Adicione o código a seguir 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();
```
Salve as alterações e, em seguida, compile e execute o aplicativo. Novos botões e caixas de combinação devem ser exibidos. Tente usar diferentes larguras de caneta para rabisco.

Adicionando um Botão de Cor ao Painel de Caneta

Em seguida, adicione um objeto CMFCRibbonColorButton que permite que o usuário rabisque em cores.

Para adicionar um botão de cor ao painel Caneta

Antes de adicionar o botão de cores, crie um item de menu para ele. Na janela Exibição de Recurso , abra o recurso de menu IDR_SCRIBBTYPE . Clique no item de menu Caneta para abrir o menu de caneta. Em seguida, clique em Digitar Aqui e digite &Color. Clique com o botão direito do mouse no texto digitado para exibir a janela Propriedades . Altere a ID para ID_PEN_COLOR.
Agora, adicione o botão de cor. Na Caixa de Ferramentas, arraste um Botão de Cor para o painel Caneta .
Clique no botão de cores. Altere a legenda para Color, ID para ID_PEN_COLOR, Simples Olhar para True, Índice de Imagem Grande para 1e Modo de Divisão para False.
Salve as alterações e, em seguida, compile e execute o aplicativo. O novo botão de cor deve ser exibido no painel Caneta . No entanto, ele não pode ser usado porque ainda não tem um manipulador de eventos. As próximas etapas mostram como adicionar um manipulador de eventos para o botão de cores.

Adicionando um membro de cor à classe de documento

Como o aplicativo Scribble original não tem canetas de cor, você deve escrever uma implementação para elas. Para armazenar a cor da caneta do documento, adicione um novo membro à classe CscribbleDocde documento.

Para adicionar um membro de cor à classe de documento

Em scribdoc.h, na CScribbleDoc classe, localize a // Attributes seção. Adicione as seguintes linhas de código após a definição do m_nThickWidth membro de dados.
```
// Current pen color
COLORREF m_penColor;
```
Cada documento contém uma lista de stokes que o usuário já desenhou. Cada traço é definido por um CStroke objeto. A CStroke classe não inclui informações sobre a cor da caneta, portanto, você deve modificar a classe. Em scribdoc.h, na CStroke classe, adicione as seguintes linhas de código após a definição do membro de m_nPenWidth dados.
```
// Pen color for the stroke
COLORREF m_penColor;
```
Em scribdoc.h, adicione um novo CStroke construtor cujos parâmetros especifiquem uma largura e uma cor. Adicione a seguinte linha de código após a instrução CStroke(UINT nPenWidth); .
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

Em scribdoc.cpp, adicione a implementação do novo CStroke construtor. Adicione o código a seguir após a implementação do CStroke::CStroke(UINT nPenWidth) construtor.

// 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();
}

Altere a segunda linha do CStroke::DrawStroke método da seguinte maneira.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Defina a cor da caneta padrão para a classe de documento. Em scribdoc.cpp, adicione as seguintes linhas após CScribbleDoc::InitDocumenta m_nThickWidth = 5; instrução.
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
Em scribdoc.cpp, altere a primeira linha do CScribbleDoc::NewStroke método para a seguinte.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Altere a última linha do CScribbleDoc::ReplacePen método para a seguinte.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Você adicionou o m_penColor membro em uma etapa anterior. Agora, crie um manipulador de eventos para o botão de cor que define o membro.
1. Na janela Modo de Exibição de Recurso , abra o recurso de menu IDR_SCRIBBTYPE.
2. Clique com o botão direito do mouse no item de menu Cor e clique em Adicionar Manipulador de Eventos. O Assistente do Manipulador de Eventos é exibido.
3. Na caixa de listagem Classe no assistente, selecione CScribbleDoc e clique no botão Adicionar e Editar . O comando cria o stub do CScribbleDoc::OnPenColor manipulador de eventos.

Substitua o stub do CScribbleDoc::OnPenColor manipulador de eventos pelo código a seguir.

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();
}

Salve as alterações e, em seguida, compile e execute o aplicativo. Agora você pode pressionar o botão de cor e alterar a cor da caneta.

Inicializando canetas e salvando preferências

Em seguida, inicialize a cor e a largura das canetas. Por fim, salve e carregue um desenho de cor de um arquivo.

Para inicializar controles na barra de faixa de opções

Inicialize as canetas na barra de faixa de opções.

Adicione o código a seguir para scribdoc.cpp, no CScribbleDoc::InitDocument método, após a instrução 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);

Salve um desenho de cor em um arquivo. Adicione a instrução a seguir para scribdoc.cpp, no CStroke::Serialize método, após a instrução ar << (WORD)m_nPenWidth; .
```
ar << (COLORREF)m_penColor;
```
Por fim, carregue um desenho de cores de um arquivo. Adicione a seguinte linha de código, no CStroke::Serialize método, após a m_nPenWidth = w; instrução.
```
ar >> m_penColor;
```
Agora rabisque em cores e salve o desenho em um arquivo.

Conclusão

Você atualizou o aplicativo Scribble MFC. Use este passo a passo como um guia ao modificar seus aplicativos existentes.

Consulte também

Instruções passo a passo
Passo a passo: atualizando o aplicativo de rabisco MFC (Parte 1)