Instruções passo a passo: atualizando o aplicativo de rabisco MFC (parte 2)

Artigo
06/16/2023

A parte 1 deste passo a passo mostrou como adicionar uma Faixa de Opções Fluente do Office ao aplicativo Rabisco clássico. Esta parte mostra como adicionar painéis e controles de faixa de opções 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:

Adição de Novos Painéis à Faixa de Opções
Adição de um Painel de Ajuda à Faixa de Opções
Adição de um Painel de Caneta à Faixa de Opções
Adição de um Botão de Cores à Faixa de Opções
Adição de um Membro Colorido à Faixa de Opções
Inicialização de Canetas e Salvamento de Preferências

Adição de Novos Painéis à Faixa de Opções

Estas etapas mostram como adicionar um painel de Exibição que contém duas caixas de seleção, que controlam a visibilidade da barra de ferramentas e da barra de status, além de um painel Janela que contém um botão dividido orientado verticalmente, que controla a criação e a disposição de 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 entre a barra de status e a barra de ferramentas.
1. Na Caixa de Ferramentas, arraste um Painel até a categoria Página Inicial. Arraste duas Caixas de Seleção para o painel.
2. Clique no painel para modificar as propriedades. Altere Legenda para View.
3. Clique na primeira caixa de seleção para modificar as propriedades. Altere ID para ID_VIEW_TOOLBAR e Legenda para Toolbar.
4. Clique na segunda caixa de seleção para modificar as propriedades. Altere ID para ID_VIEW_STATUS_BAR e Legenda para Status Bar.
Crie um painel chamado Window que tenha um botão de divisão. Quando um usuário clica no botão dividir, um menu de atalho exibe três comandos que já estão definidos no aplicativo Rabisco.
1. Na Caixa de Ferramentas, arraste um Painel até a categoria Página Inicial. Arraste um Botão para o painel.
2. Clique no painel para modificar as propriedades. Altere Legenda para Window.
3. Clique no botão . Altere Legenda paraWindows, Chaves para w, Índice de Imagem Grande para 1 e Modo de Divisão para False. 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 altere Legenda para New Window e ID para ID_WINDOW_NEW.
6. Clique no segundo botão e altere Legenda para Cascade e ID para ID_WINDOW_CASCADE.
7. Clique no terceiro botão e altere Legenda para Tile e ID para ID_WINDOW_TILE_HORZ.
Salve as alterações e, em seguida, compile e execute o aplicativo. Os painéis Exibir e Janela deverão ser mostrados. Clique nos botões para confirmar se funcionam corretamente.

Adição de um Painel de Ajuda à Faixa de Opções

Agora, você pode atribuir dois itens de menu definidos no aplicativo Rabisco aos botões de faixa de opções chamados Tópicos de Ajuda e 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 até a categoria Página Inicial. Arraste dois Botões para o painel.
Clique no painel para modificar as propriedades. Altere Legenda para Help.
Clique no primeiro botão. Altere Legenda para Help Topics e ID para ID_HELP_FINDER.
Clique no segundo botão. Altere Legenda para About Scribble... e ID para ID_APP_ABOUT.
Salve as alterações e, em seguida, compile e execute o aplicativo. Um painel Ajuda que contém dois botões de faixa de opções deverá ser exibido.

Importante

Quando você clica no botão Tópicos da Ajuda, o aplicativo Rabisco 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 como o nome do projeto.

Adição de um Painel de Caneta à Faixa de Opções

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

O aplicativo Rabisco original permite que o usuário selecione as larguras de caneta em uma caixa de diálogo, que é exibida quando o usuário clica em Larguras de Caneta no menu. Como a barra de faixa de opções tem muito 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 ajusta a largura da caneta grossa.

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

Na Caixa de Ferramentas, arraste um Painel até a categoria Página Inicial. Arraste uma Caixa de Seleção e duas Caixas de Combinação para o painel.
Clique no painel para modificar as propriedades. Altere Legenda para Pen.
Clique na caixa de seleção. Altere Legenda para Use Thick e ID para ID_PEN_THICK_OR_THIN.
Clique na primeira caixa de combinação. Altere Legenda para Thin Pen, ID para ID_PEN_THIN_WIDTH, Tipo 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 Legenda para Thick Pen, ID para ID_PEN_THICK_WIDTH, Tipo 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 Modo de Exibição de Recursos, abra o recurso de menu IDR_SCRIBBTYPE.
2. Clique em Caneta, para abrir o menu de canetas. Clique em Digitar Aqui e digite Thi&n Pen.
3. Clique com o botão direito do mouse no texto que você digitou, 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 canetas. Clique com o botão direito do mouse no item de menu Thi&n Pen que você criou e, em seguida, clique em Adicionar manipulador de eventos . O Assistente do Manipulador de Eventos será exibido.
5. Na caixa Lista de Classes 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();
```
Crie um item de menu e os manipuladores de eventos para a caneta grossa.
1. Na janela Modo de Exibição de Recursos, abra o recurso de menu IDR_SCRIBBTYPE.
2. Clique em Caneta, para abrir o menu de canetas. Clique em Digitar Aqui e digite Thic&k Pen.
3. Clique com o botão direito do mouse no texto que você digitou, 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 do Manipulador de Eventos será exibido.
5. Na caixa Lista de Classes 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. Os novos botões e caixas de combinação deverão ser exibidos. Tente usar diferentes larguras de caneta para rabisco.

Adição de um Botão de Cores ao Painel Caneta

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

Para adicionar um botão de cores ao painel Caneta

Antes de adicionar o botão de cores, crie um item de menu. Na janela Modo de Exibição de Recursos, abra o recurso de menu IDR_SCRIBBTYPE. Clique no item de menu Caneta, para abrir o menu de canetas. Clique em Digitar Aqui e digite &Color. Clique com o botão direito do mouse no texto que você digitou, para exibir a janela Propriedades. Altere a ID para ID_PEN_COLOR.
Agora, adicione o botão de cores. Na Caixa de Ferramentas, arraste um Botão de Cores para o painel Caneta.
Clique no botão de cores. Altere Legenda para Color, ID para ID_PEN_COLOR, Aparência Simples para True, Índice de Imagem Grande para 1 e Modo de Divisão para False.
Salve as alterações e, em seguida, compile e execute o aplicativo. O novo botão de cores deverá 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 ao botão de cores.

Adição de um Membro Colorido à Faixa de Opções

Como o aplicativo Rabisco original não tem canetas coloridas, você deve gravar uma implementação. Para armazenar a cor da caneta do documento, adicione um novo membro à classe do documento, CscribbleDoc.

Para adicionar um membro colorido à classe do documento

Em scribdoc.h, na classe CScribbleDoc, localize a seção // Attributes. Adicione as seguintes linhas de código após a definição do membro de dados m_nThickWidth.
```
// Current pen color
COLORREF m_penColor;
```
Cada documento contém uma lista de traços que o usuário já desenhou. Cada traço é definido por um objeto CStroke. A classe CStroke não inclui informações sobre a cor da caneta. Portanto, você deve modificar a classe. Em scribdoc.h, na classe CStroke, adicione as seguintes linhas de código após a definição do membro de dados m_nPenWidth.
```
// Pen color for the stroke
COLORREF m_penColor;
```
Em scribdoc.h, adicione um novo construtor CStroke cujos parâmetros especificam 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 construtor CStroke. Adicione o código a seguir após a implementação do construtor 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();
}

Altere a segunda linha do método CStroke::DrawStroke da seguinte forma.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Defina a cor da caneta padrão para a classe do documento. Em scribdoc.cpp, adicione as seguintes linhas a CScribbleDoc::InitDocument após a instrução m_nThickWidth = 5;.
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
Em scribdoc.cpp, altere a primeira linha do método CScribbleDoc::NewStroke para a seguinte.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Altere a última linha do método CScribbleDoc::ReplacePen para a seguinte.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Você adicionou o membro m_penColor em uma etapa anterior. Agora, crie um manipulador de eventos para o botão de cores que define o membro.
1. Na janela Modo de Exibição de Recursos, 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 será exibido.
3. Na caixa Lista de Classes no assistente, selecione CScribbleDoc e clique no botão Adicionar e Editar. O comando cria o stub do manipulador de eventos CScribbleDoc::OnPenColor.

Substitua o stub do manipulador de eventos CScribbleDoc::OnPenColor 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 cores e alterar a cor da caneta.

Inicialização de Canetas e Salvamento de Preferências

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

Para inicializar os controles na barra de faixas de opções

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

Adicione o código a seguir ao scribdoc.cpp, no método CScribbleDoc::InitDocument, 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 colorido em um arquivo. Adicione a instrução a seguir ao scribdoc.cpp, no método CStroke::Serialize, após a instrução ar << (WORD)m_nPenWidth;.
```
ar << (COLORREF)m_penColor;
```
Por fim, carregue um desenho colorido em um arquivo. Adicione a seguinte linha de código, no método CStroke::Serialize, após a instrução m_nPenWidth = w;.
```
ar >> m_penColor;
```
Agora, rabisque em cores e salve o desenho em um arquivo.

Conclusão

Você atualizou o aplicativo Rabisco do MFC. Use este passo a passo como guia ao modificar os aplicativos existentes.

Confira também

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

Compartilhar via