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

2025-06-21

Este passo a passo demonstra como modificar um aplicativo MFC existente para usar a interface do usuário da Faixa de Opções. O Visual Studio dá suporte à Faixa de Opções do Office 2007 e à Faixa de Opções Cênica do Windows 7. Para obter mais informações sobre a interface do usuário da Faixa de Opções, consulte Faixas de Opções.

Este passo a passo modifica o exemplo clássico do Scribble 1.0 MFC que permite usar o mouse para criar desenhos de linha. Esta parte do passo a passo mostra como modificar o exemplo de Rabisco para que ele exiba uma barra de opções. A parte 2 adiciona mais botões à barra de faixa de opções.

Pré-requisitos

O exemplo de Scribble 1.0 MFC. Para obter ajuda sobre como converter no Visual Studio 2017 ou posterior, consulte o Guia de Portabilidade: Rabisco MFC.

Seções

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

Substituindo as classes base
Adicionando Bitmaps ao Projeto
Adicionando um recurso de faixa de opções ao projeto
Criando uma instância da barra de opções
Adicionando uma categoria de faixa de opções
Definindo a aparência do aplicativo

Substituindo as classes base

Para converter um aplicativo que dê suporte a um menu para um aplicativo que dê suporte a uma faixa de opções, você deve derivar as classes de aplicativo, janela de quadro e barra de ferramentas de classes base atualizadas. (Sugerimos que você não modifique o exemplo de Rabisco original. Em vez disso, limpe o projeto scribble, copie-o para outro diretório e modifique a cópia.)

Para substituir as classes base no aplicativo Scribble

Em scribble.cpp, verifique se isso CScribbleApp::InitInstance inclui uma chamada para AfxOleInit.
Adicione o seguinte código ao arquivo pch.h (stdafx.h no Visual Studio 2017 e anterior):
```
#include <afxcontrolbars.h>
```
Em scribble.h, modifique a definição da classe para CScribbleApp que ela seja derivada da classe CWinAppEx.
```
class CScribbleApp: public CWinAppEx
```
O Scribble 1.0 foi gravado quando aplicativos windows usaram um arquivo de inicialização (.ini) para salvar dados de preferência do usuário. Em vez de um arquivo de inicialização, modifique o Scribble para armazenar as preferências do usuário no Registro. Para definir a chave e a base do Registro, digite o código CScribbleApp::InitInstance a seguir após a LoadStdProfileSettings() instrução.
```
SetRegistryKey(_T("MFCNext\\Samples\\Scribble2"));
SetRegistryBase(_T("Settings"));
```
O quadro principal de um aplicativo MDI (interface de documento múltiplo) não é mais derivado da CMDIFrameWnd classe. Em vez disso, ela é derivada da classe CMDIFrameWndEx .

Nos arquivos mainfrm.h e mainfrm.cpp, substitua todas as referências por CMDIFrameWndCMDIFrameWndEx.
Nos arquivos childfrm.h e childfrm.cpp, substitua CMDIChildWnd por CMDIChildWndEx.

No childfrm. h arquivo, substitua CSplitterWnd por CSplitterWndEx.
Modifique barras de ferramentas e barras de status para usar as novas classes MFC.

No arquivo mainfrm.h:
1. Substitua CToolBar por CMFCToolBar.
2. Substitua CStatusBar por CMFCStatusBar.
No arquivo mainfrm.cpp:
1. Substitua m_wndToolBar.SetBarStyle por m_wndToolBar.SetPaneStyle
2. Substitua m_wndToolBar.GetBarStyle por m_wndToolBar.GetPaneStyle
3. Substitua DockControlBar(&m_wndToolBar) por DockPane(&m_wndToolBar)

No arquivo ipframe.cpp, comente as três linhas de código a seguir.

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

Salve as alterações e, em seguida, compile e execute o aplicativo.

Adicionando Bitmaps ao Projeto

As próximas quatro etapas deste passo a passo exigem recursos de bitmap. Você pode obter os bitmaps apropriados de várias maneiras:

Use os Editores de Recursos para inventar seus próprios bitmaps. Ou use os editores de recursos para montar bitmaps das imagens de elementos gráficos de rede portáteis (.png) incluídas no Visual Studio e que podem ser baixadas da biblioteca de imagens do Visual Studio.

No entanto, a interface do usuário da Faixa de Opções requer que determinados bitmaps ofereçam suporte a imagens transparentes. Bitmaps transparentes usam pixels de 32 bits, em que 24 bits especificam os componentes vermelho, verde e azul da cor, e 8 bits definem um canal alfa que especifica a transparência da cor. Os editores de recursos atuais podem exibir, mas não modificar bitmaps com pixels de 32 bits. Consequentemente, use um editor de imagem externo em vez dos editores de recursos para manipular bitmaps transparentes.
Copie um arquivo de recurso apropriado de outro aplicativo para seu projeto e importe bitmaps desse arquivo.

Este passo a passo copia arquivos de recurso do exemplo criado no Passo a passo: criando um aplicativo de faixa de opções usando o MFC.

Para adicionar bitmaps ao Projeto

Use o Explorador de Arquivos para copiar os seguintes arquivos de .bmp do diretório de recursos (res) do exemplo da Faixa de Opções para o diretório de recursos (res) do projeto Scribble:
1. Copie main.bmp para seu projeto de Rabisco.
2. Copie filesmall.bmp e filelarge.bmp para seu projeto do Scribble.
3. Faça novas cópias dos arquivos filelarge.bmp e filesmall.bmp, mas salve as cópias no exemplo da Faixa de Opções. Renomeie as cópias homesmall.bmp e homelarge.bmp e mova as cópias para o projeto scribble.
4. Faça uma cópia do arquivo toolbar.bmp, mas salve a cópia no exemplo da Faixa de Opções. Renomeie a cópia panelicons.bmp e mova a cópia para o projeto do Scribble.
Importe o bitmap para um aplicativo MFC. No Modo de Exibição de Recurso, clique duas vezes no nó scribble.rc , clique duas vezes no nó bitmap e clique em Adicionar recurso. Na caixa de diálogo exibida, clique em Importar. Navegue até o res diretório, selecione o arquivo main.bmp e clique em Abrir.

O bitmap main.bmp contém uma imagem 26x26. Altere a ID do bitmap para IDB_RIBBON_MAIN.
Importe os bitmaps para o menu de arquivo anexado ao botão Aplicativo .
1. Importe o arquivo filesmall.bmp, que contém onze imagens 16x16 (16x176). Altere a ID do bitmap para IDB_RIBBON_FILESMALL.
Observação

Como precisamos apenas das oito primeiras imagens 16x16 (16x128), você pode, opcionalmente, cortar a largura do lado direito deste bitmap de 176 a 128.
1. Importe o filelarge.bmp, que contém nove imagens 32x32 (32x288). Altere a ID do bitmap para IDB_RIBBON_FILELARGE.
Importe os bitmaps para as categorias e painéis da faixa de opções. Cada guia na barra de faixa de opções é uma categoria e consiste em um rótulo de texto e uma imagem opcional.
1. Importe o homesmall.bmp bitmap, que contém onze imagens 16x16 para bitmaps de botão pequeno. Altere a ID do bitmap para IDB_RIBBON_HOMESMALL.
2. Importe o homelarge.bmp bitmap, que contém nove imagens 32x32 para bitmaps de botão grande. Altere a ID do bitmap para IDB_RIBBON_HOMELARGE.
Importe bitmaps para os painéis de faixa de opções redimensionados. Esses bitmaps ou ícones de painel são usados após uma operação de redimensionamento se a faixa de opções for muito pequena para exibir todo o painel.
1. Importe o panelicons.bmp bitmap, que contém oito imagens 16x16. Na janela Propriedades do Editor de Bitmap, ajuste a largura do bitmap para 64 (16x64). Altere a ID do bitmap para IDB_PANEL_ICONS.
Observação

Como precisamos apenas das quatro primeiras imagens 16x16 (16x64), você pode, opcionalmente, cortar a largura do lado direito deste bitmap de 128 a 64.

Adicionando um recurso de faixa de opções ao projeto

Quando você converte um aplicativo que usa menus em um aplicativo que usa uma faixa de opções, você não precisa remover ou desabilitar os menus existentes. Basta criar um recurso de faixa de opções, adicionar botões de faixa de opções e associar os novos botões aos itens de menu existentes. Embora os menus não estejam mais visíveis, as mensagens da barra de faixa de opções são roteadas por meio dos menus e os atalhos de menu continuam funcionando.

Uma faixa de opções consiste no botão Aplicativo , que é o botão grande no lado superior esquerdo da faixa de opções e uma ou mais guias de categoria. Cada guia de categoria contém um ou mais painéis que atuam como contêineres para botões e controles da faixa de opções. O procedimento a seguir mostra como criar um recurso de faixa de opções e personalizar o botão Aplicativo .

Para adicionar um recurso de faixa de opções ao projeto

Com o projeto scribble selecionado no Gerenciador de Soluções, no menu Projeto , clique em Adicionar Recurso.
Na caixa de diálogo Adicionar Recurso , selecione Faixa de Opções e clique em Novo.

O Visual Studio cria um recurso de faixa de opções e o abre no modo de exibição de design. A ID do recurso da faixa de opções é IDR_RIBBON1exibida no Modo de Exibição de Recurso. A faixa de opções contém uma categoria e um painel.
Você pode personalizar o botão Aplicativo modificando suas propriedades. As IDs de mensagem que são usadas nesse código já estão definidas no menu do Scribble 1.0.
No modo de exibição de design, clique no botão Aplicativo para exibir suas propriedades. Altere os valores de propriedade da seguinte maneira: Imagem para IDB_RIBBON_MAIN, Prompt para File, Chaves para f, Imagens Grandes para IDB_RIBBON_FILELARGEe Pequenas Imagens para IDB_RIBBON_FILESMALL.
As modificações a seguir criam o menu exibido quando o usuário clica no botão Aplicativo . Clique nas reticências (...) ao lado de Itens Principais para abrir o Editor de Itens.
1. Com o botão Tipo de item selecionado, clique em Adicionar para adicionar um botão. Altere a legenda para &New, ID para ID_FILE_NEW, Imagem para 0, Imagem Grande para 0.
2. Clique em Adicionar para adicionar um botão. Altere a legenda para &Save, ID para ID_FILE_SAVE, Imagem para 2e Imagem Grande para 2.
3. Clique em Adicionar para adicionar um botão. Altere a legenda para Save &As, ID para ID_FILE_SAVE_AS, Imagem para 3e Imagem Grande para 3.
4. Clique em Adicionar para adicionar um botão. Altere a legenda para &Print, ID para ID_FILE_PRINT, Imagem para 4e Imagem Grande para 4.
5. Altere o tipo de item para Separador e clique em Adicionar.
6. Altere o tipo de item para Button. Clique em Adicionar para adicionar um quinto botão. Altere a legenda para &Close, ID para ID_FILE_CLOSE, Imagem para 5e Imagem Grande para 5.
As modificações a seguir criam um submenu no botão Imprimir que você criou na etapa anterior.
1. Clique no botão Imprimir , altere o tipo item para Rótulo e clique em Inserir. Altere a legenda para Preview and print the document.
2. Clique no botão Imprimir , altere o tipo item para Botão e clique em Inserir. Altere a legenda para &Print, ID para ID_FILE_PRINT, Imagem para 4e Imagem Grande para 4.
3. Clique no botão Imprimir e clique em Inserir para adicionar um botão. Altere a legenda para &Quick Print, ID para ID_FILE_PRINT_DIRECT, Imagem para 7e Imagem Grande para 7.
4. Clique no botão Imprimir e clique em Inserir para adicionar outro botão. Altere a legenda para Print Pre&view, ID para ID_FILE_PRINT_PREVIEW, Imagem para 6e Imagem Grande para 6.
5. Agora você modificou os itens principais. Clique em Fechar para sair do Editor de Itens.
A modificação a seguir cria um botão de saída que aparece na parte inferior do menu do botão Aplicativo .
1. Escolha a guia Modo de Exibição de Recurso no Gerenciador de Soluções.
2. Na janela Propriedades , clique nas reticências (...) ao lado de Button para abrir o Editor de Itens.
3. Com o botão Tipo de item selecionado, clique em Adicionar para adicionar um botão. Altere a legenda para E&xit, ID para ID_APP_EXIT, Imagem para 8.
4. Você modificou os botões. Clique em Fechar para sair do Editor de Itens.

Criando uma instância da barra de opções

As etapas a seguir mostram como criar uma instância da barra de faixa de opções quando o aplicativo é iniciado. Para adicionar uma barra de faixa de opções a um aplicativo, declare a barra de faixa de opções no arquivo mainfrm.h. Em seguida, no arquivo mainfrm.cpp, escreva o código para carregar o recurso da faixa de opções.

Para criar uma instância da barra de opções

No arquivo mainfrm.h, adicione um membro de dados à seção protegida da definição de CMainFrameclasse para o quadro principal. Esse membro é para a barra de faixa de opções.
```
// Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;
```
No arquivo mainfrm.cpp, adicione o código a seguir antes da instrução final return no final da CMainFrame::OnCreate função. Ele cria uma instância da barra de faixa de opções.
```
// Create the ribbon bar
if (!m_wndRibbonBar.Create(this))
{
    return -1;   //Failed to create ribbon bar
}
m_wndRibbonBar.LoadFromResource(IDR_RIBBON1);
```

Personalizando o recurso da faixa de opções

Agora que você criou o botão Aplicativo , você pode adicionar elementos à faixa de opções.

Observação

Este passo a passo usa o mesmo ícone de painel para todos os painéis. No entanto, você pode usar outros índices de lista de imagens para exibir outros ícones.

Para adicionar uma categoria Home e um painel Editar

O programa Scribble requer apenas uma categoria. No modo de exibição de design, na Caixa de Ferramentas, clique duas vezes em Categoria para adicionar um e exibir suas propriedades. Altere os valores de propriedade da seguinte maneira: Legenda para &Home, Imagens Grandes para IDB_RIBBON_HOMELARGE, Imagens Pequenas para IDB_RIBBON_HOMESMALL.
Cada categoria de faixa de opções é organizada em painéis nomeados. Cada painel contém um conjunto de controles que completam as operações relacionadas. Essa categoria tem um painel. Clique em Painel e, em seguida, altere a legenda para Edit.
Ao painel Editar , adicione um botão responsável por limpar o conteúdo do documento. A ID da mensagem para esse botão já foi definida no recurso de IDR_SCRIBBTYPE menu. Especifique Clear All como o texto do botão e o índice do bitmap que decora o botão. Abra a Caixa de Ferramentas e arraste um Botão para o painel Editar . Clique no botão e, em seguida, altere a Legenda para Clear All, ID para ID_EDIT_CLEAR_ALL, Índice de Imagem para 0, Índice de Imagem Grande para 0.
Salve as alterações e, em seguida, compile e execute o aplicativo. O aplicativo Scribble deve ser exibido e deve ter uma barra de faixa de opções na parte superior da janela em vez de uma barra de menus. A barra de faixa de opções deve ter uma categoria, Home e Home deve ter um painel, Editar. Os botões da faixa de opções que você adicionou devem ser associados aos manipuladores de eventos existentes e os botões Abrir, Fechar, Salvar, Imprimir e Limpar Tudo devem funcionar conforme o esperado.

Definindo a aparência do aplicativo

Um gerenciador de visuais é um objeto global que controla todo o desenho de um aplicativo. Como o aplicativo Scribble original usa o estilo de interface do usuário (interface do usuário) do Office 2000, o aplicativo pode parecer antiquado. Você pode redefinir o aplicativo para usar o gerenciador visual do Office 2007 para que ele se assemelhe a um aplicativo do Office 2007.

Para definir a aparência do aplicativo

CMainFrame::OnCreate Na função, digite o código a seguir antes da return 0; instrução para alterar o visual manager e o estilo padrão.

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

Salve as alterações e, em seguida, compile e execute o aplicativo. A interface do usuário do aplicativo deve ser semelhante à interface do usuário do Office 2007.

Próximas etapas

Você modificou o exemplo clássico do Scribble 1.0 MFC para usar o Designer da Faixa de Opções. Agora vá para a Parte 2.

Consulte também

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