Partilhar via

Instruções passo a passo: atualizar o aplicativo Rabisco da MFC (parte 1)

  • Artigo

Este passo a passo demonstra como modificar um aplicativo da 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 Cenários 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 Rabisco 1.0 da MFC que permite usar o mouse para criar desenhos de linha. Esta parte do passo a passo mostra como modificar o exemplo do Rabisco para que ele exiba uma barra de faixa de opções. A Parte 2 adiciona mais botões à barra de faixa de opções.

Pré-requisitos

O exemplo do Rabisco 1.0 da MFC. Para obter ajuda na conversão no Visual Studio 2017 ou posterior, confira o Guia de portabilidade: Rabisco da MFC.

Seções

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

Substituir as classes base

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

Para substituir as classes base no aplicativo Rabisco

  1. Em scribble.cpp, verifique se esse CScribbleApp::InitInstance inclui uma chamada para AfxOleInit.

  2. Adicione o seguinte arquivo pch.h (stdafx.h no Visual Studio 2017 e anteriores):

    #include <afxcontrolbars.h>

  3. Em scribble.h, modifique a definição da classe CScribbleApp para que ela seja derivada da classe CWinAppEx.

    class CScribbleApp: public CWinAppEx

  4. O Rabisco 1.0 foi gravado quando aplicativos do 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 Rabisco para armazenar as preferências do usuário no Registro. Para definir a chave e a base do Registro, digite o seguinte código a CScribbleApp::InitInstance após a instrução LoadStdProfileSettings().

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

  5. O quadro principal de um aplicativo MDI (interface de vários documentos) não é mais derivado da classe CMDIFrameWnd. Em vez disso, ele é derivado da classe CMDIFrameWndEx.

    Nos arquivos mainfrm.h e mainfrm.cpp, substitua todas as referências a CMDIFrameWnd por CMDIFrameWndEx.

  6. Nos arquivos childfrm.h e childfrm.cpp, substitua CMDIChildWnd por CMDIChildWndEx.

    No arquivo childfrm. h, substitua CSplitterWnd por CSplitterWndEx.

  7. Modifique as barras de ferramentas e as barras de status para usar as novas classes da MFC.

    No arquivo mainfrm.h:

    1. Substitua CToolBar por CMFCToolBar.

    2. Substitua CStatusBar por CMFCStatusBar.

  8. 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)

  9. 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);

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

Adicionar 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 formato 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 sejam compatíveis com imagens transparentes. Os 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 imagens 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: criar um aplicativo de Faixa de Opções usando a MFC.

Adicionar bitmaps ao projeto

  1. Use o Explorador de Arquivos para copiar os seguintes arquivos .bmp do diretório de recursos (res) do exemplo da Faixa de Opções para o diretório de recursos (res) do projeto do Rabisco:

    1. Copie main.bmp no seu projeto do Rabisco.

    2. Copie filesmall.bmp e filelarge.bmp em seu projeto do Rabisco.

    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 do Rabisco.

    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 para o projeto do Rabisco.

  2. Importe o bitmap em um aplicativo da MFC. No Modo de Exibição de Recursos, 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 diretório res, 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.

  3. 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 desse bitmap de 176 para 128.

    1. Importe o filelarge.bmp, que contém nove imagens 32x32 (32x288). Altere a ID do bitmap para IDB_RIBBON_FILELARGE.

  4. Importe os bitmaps para as categorias e painéis da faixa de opções. Cada guia na barra da faixa de opções é uma categoria e consiste em um rótulo de texto e uma imagem opcional.

    1. Importe o bitmap homesmall.bmp, que contém onze imagens 16x16 para bitmaps de botão pequeno. Altere a ID do bitmap para IDB_RIBBON_HOMESMALL.

    2. Importe o bitmap homelarge.bmp, que contém nove imagens 32x32 para bitmaps de botão grande. Altere a ID do bitmap para IDB_RIBBON_HOMELARGE.

  5. 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 é muito pequena para exibir todo o painel.

    1. Importe o bitmap panelicons.bmp, 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 desse bitmap de 128 para 64.

Adicionar 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, não é necessário 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 encaminhadas pelos 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.

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

  1. Com o projeto do Rabisco selecionado em Gerenciador de Soluções, no menu Projeto, clique em Adicionar Recurso.

  2. 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_RIBBON1, que é exibida no Modo de Exibição de Recursos. A faixa de opções contém uma categoria e um painel.

  3. Você pode personalizar o botão Aplicativo modificando suas propriedades. As IDs de mensagem usadas nesse código já estão definidas no menu do Rabisco 1.0.

  4. No modo de exibição de design, clique no botão Aplicativo para exibir suas propriedades. Altere os valores da propriedade da seguinte maneira: Imagem para IDB_RIBBON_MAIN, Prompt para File, Chaves para f, Imagens Grandes para IDB_RIBBON_FILELARGE e Imagens Pequenas para IDB_RIBBON_FILESMALL.

  5. As modificações a seguir criam o menu que aparece 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 de 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 2, e 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 3, e 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 4, e Imagem Grande para 4.

    5. Altere o tipo de Item para Separador e clique em Adicionar.

    6. Altere o tipo de Item para Botão. Clique em Adicionar para adicionar um quinto botão. Altere a Legenda para &Close, ID para ID_FILE_CLOSE, Imagem para 5, e Imagem Grande para 5.

  6. 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 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 4, e 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 7, e 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 6, e Imagem Grande para 6.

    5. Agora você modificou os Itens Principais. Clique em Fechar para sair do Editor de Itens.

  7. 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 Recursos no Gerenciador de Soluções.

    2. Na janela Propriedades, clique nas reticências (...) ao lado de Botão para abrir o Editor de Itens.

    3. Com o botão de tipo de Item selecionado, clique em Adicionar para adicionar um botão. Altere 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.

Criar uma instância da barra de Faixa 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.

Criar uma instância da barra de faixa de opções

  1. No arquivo mainfrm.h, adicione um membro de dados à seção protegida de CMainFrame, a definição de classe para o quadro principal. Esse membro é para a barra de faixa de opções.

    // Ribbon bar for the application
CMFCRibbonBar m_wndRibbonBar;

  2. No arquivo mainfrm.cpp, adicione o código a seguir antes da instrução return final no final da função CMainFrame::OnCreate. 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);

Personalizar o recurso da Faixa de Opções

Agora que você criou o botão Aplicativo, é possível 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.

Adicionar uma categoria Página Inicial e um painel Editar

  1. O programa Rabisco requer apenas uma categoria. No modo de exibição de design, na Caixa de Ferramentas, clique duas vezes em Categoria para adicionar uma e exibir suas propriedades. Altere os valores da propriedade da seguinte maneira: Legenda para &Home, Imagens Grandes para IDB_RIBBON_HOMELARGE, Imagens Pequenas para IDB_RIBBON_HOMESMALL.

  2. Cada categoria de faixa de opções é organizada em painéis nomeados. Cada painel contém um conjunto de controles que completam operações relacionadas. Essa categoria tem um painel. Clique em Painel e, em seguida, altere a Legenda para Edit.

  3. No painel Editar, adicione um botão responsável por limpar o conteúdo do documento. A ID da mensagem para este botão já foi definida no recurso de menu IDR_SCRIBBTYPE. 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 ao 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.

  4. Salve as alterações e, em seguida, compile e execute o aplicativo. O aplicativo Rabisco 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, Página Inicial, e Página Inicial deve ter um painel, Editar. Os botões de faixa de opções que você adicionou devem estar associados aos manipuladores de eventos existentes e os botões Abrir, Fechar, Salvar, Imprimir e Limpar Tudo devem funcionar conforme o esperado.

Definir a aparência do aplicativo

Um gerenciador visual é um objeto global que controla todos os desenhos de um aplicativo. Como o aplicativo Rabisco original usa o estilo de 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.

Definir a aparência do aplicativo

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

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

  2. 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 Rabisco 1.0 da MFC para usar o Designer de Faixa de Opções. Agora vá para a Parte 2.

Confira também

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