Compartilhar via


Demonstra Passo a passo: Atualizando o MFC Rabisco aplicativo (parte 2)

In Parte 1 desta explicação passo a passo, adicionamos uma faixa de Opções Fluent do Office ao aplicativo Rabisco clássico.Na parte 2 desta explicação passo a passo adicionamos controles para executar tarefas que anteriormente eram executadas usando a BAR de menus e painéis da faixa de opções.

Pré-requisitos

Rabisco exemplo: Aplicativo de desenho MDI do MFC

Seções

Parte 2 desta explicação passo a passo possui as seguintes seções:

  • Adding New Panels to the Ribbon

  • Adding a Help Panel to the Ribbon

  • Adding a Pen Panel to the Ribbon

  • Adding a Color Button to the Ribbon

  • Adding a Color Member to the Document Class

  • Initializing Pens and Saving Preferences

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

Nesta etapa, adicionamos dois painéis.Primeiro, adicione um Modo de exibição painel que contém a seleção duas caixas que controle a visibilidade da BAR de ferramentas e a BAR de status.Em segundo lugar, adicione um Janela painel que contém um botão de divisão orientado verticalmente que controla a criação e a organização de janelas MDI.

Para adicionar um painel de exibição e painel da janela na BAR de faixa de opções

  1. Adicione o seguinte código à CMainFrame::OnCreate método, imediatamente após o edição painel código que você criou na parte 1.

    // Add a panel to control the visibility of tool bars
    CMFCRibbonPanel* pPanelView = pCategory->AddPanel(
    // Set panel name
       _T("View"),
    // Set panel icon
       m_PanelImages.ExtractIcon(0));  
    // Add panel buttons for Toolbar and Status Bar
    pPanelView->Add(new CMFCRibbonCheckBox(
       ID_VIEW_TOOLBAR, _T("Toolbar")));
    pPanelView->Add(new CMFCRibbonCheckBox(
       ID_VIEW_STATUS_BAR, _T("Status Bar")));
    
  2. Logo após o código que cria o Modo de exibição painel, adicione o seguinte código para criar um novo painel chamado Janela, que tem um botão de divisão.Quando um usuário clica no botão de divisão, um menu pop-up exibe três itens de menu que foram definidos no Rabisco 1.0.

    // Add a panel to control the display of MDI windows
    CMFCRibbonPanel* pPanelWindow = pCategory->AddPanel( _T("Window"), m_PanelImages.ExtractIcon(0));
    CMFCRibbonButton* pBtnWindows = new CMFCRibbonButton( 0, _T("Windows\nw"), -1, 1);
    pBtnWindows->AddSubItem(new CMFCRibbonButton( ID_WINDOW_NEW, _T("New  Window"), -1, -1), -1); 
    pBtnWindows->AddSubItem(new CMFCRibbonButton( ID_WINDOW_CASCADE, _T("Cascade"), -1, -1), -1); 
    pBtnWindows->AddSubItem(new CMFCRibbonButton(
       ID_WINDOW_TILE_HORZ, _T("Tile"), -1, -1), -1);
    pPanelWindow->Add(pBtnWindows);
    
  3. Salvar as alterações e, em seguida, compile e execute o aplicativo.The Modo de exibição and Janela painéis devem aparecer.clicar nos botões para confirmar que eles funcionem corretamente.

[go to top]

Adicionar um painel de ajuda a faixa de opções

Em seguida, atribuímos dois itens de menu definidos no Rabisco 1.0 a botões da faixa de opções denominado Tópicos da Ajuda and Sobre o rabisco….Adicionamos os botões a um novo painel chamado Ajuda.

Para adicionar um painel de ajuda

  1. Adicione o seguinte código para CMainFrame::OnCreate, logo após o código para o Janela painel que você adicionou na etapa anterior.

    // Create a new panel with the name "Help"
    CMFCRibbonPanel* pPanelHelp = pCategory->AddPanel(
       _T("Help"),           
    m_PanelImages.ExtractIcon(0)); 
    pPanelHelp->Add(new CMFCRibbonButton(ID_HELP_FINDER, _T("Help Topics")));
    pPanelHelp->Add(new CMFCRibbonButton(ID_APP_ABOUT, _T(
       "About Scribble...")));
    
  2. Salvar as alterações e, em seguida, compile e execute o aplicativo.A Ajuda painel que contém dois botões de faixa de opções deve aparecer.

    Observação importante:

    Quando você clicar na Tópicos da Ajuda botão, o rabisco aplicativo abre uma compactada HTML (.chm) ajuda a arquivo chamado your_project_name.chm.Conseqüentemente, se seu projeto não tiver o nome rabisco, você deve renomear o arquivo de ajuda com o nome do projeto.

[go to top]

Adicionar um painel de caneta a faixa de opções

Em seguida, adicionamos um painel para exibir botões que controlam a espessura e cor da caneta.Esse painel contém uma caixa de seleção alterna entre as canetas espessas e finas.Sua funcionalidade semelhante que o Linha grossa item de menu no Rabisco 1.0.

O aplicativo original do Rabisco permite que o usuário selecionar as larguras de caneta em uma caixa de diálogo que aparece quando um usuário seleciona Largura da caneta no menu.Como temos bastante espaço em nossa BAR de faixa de opções para novos controles, podemos substituir a caixa de diálogo com duas caixas de combinação na faixa de opções.Uma caixa de combinação ajusta a largura da Caneta fina e caixa de combinação ajusta a largura da caneta espessa.

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

  1. Adicione o seguinte código à CMainFrame::OnCreate método imediatamente após o código para o edição painel que criamos na parte 1.

    // Create a new panel for the pen-related buttons
    CMFCRibbonPanel* pPanelPen = pCategory->AddPanel(
    // Panel name
       _T("Pen"), 
    // Panel icon
       m_PanelImages.ExtractIcon(0));
    pPanelPen->Add(new CMFCRibbonCheckBox(
       ID_PEN_THICK_OR_THIN, _T("Use Thick")));
    
    // Add combo boxes for pen thicknesses
    CMFCRibbonComboBox* pThinComboBox = new CMFCRibbonComboBox(
       ID_PEN_THIN_WIDTH, 0, 20, "Thin Pen :", -1);
    pThinComboBox->AddItem(_T("1"), 1);
    pThinComboBox->AddItem(_T("2"), 2);
    pThinComboBox->AddItem(_T("3"), 3);
    pThinComboBox->AddItem(_T("4"), 4);
    pThinComboBox->AddItem(_T("5"), 5);
    pThinComboBox->AddItem(_T("6"), 6);
    pThinComboBox->AddItem(_T("7"), 7);
    pThinComboBox->AddItem(_T("8"), 8);
    pThinComboBox->AddItem(_T("9"), 9);
    pThinComboBox->SelectItem(1);
    pPanelPen->Add(pThinComboBox);
    CMFCRibbonComboBox* pThickComboBox = new CMFCRibbonComboBox(
       ID_PEN_THICK_WIDTH, 0, 20, "Thick Pen:", -1);
    pThickComboBox->AddItem(_T("5"), 5);
    pThickComboBox->AddItem(_T("6"), 6);
    pThickComboBox->AddItem(_T("7"), 7);
    pThickComboBox->AddItem(_T("8"), 8);
    pThickComboBox->AddItem(_T("9"), 9);
    pThickComboBox->AddItem(_T("10"), 10);
    pThickComboBox->AddItem(_T("11"), 11);
    pThickComboBox->AddItem(_T("12"), 12);
    pThickComboBox->AddItem(_T("13"), 13);
    pThickComboBox->AddItem(_T("14"), 14);
    pThickComboBox->AddItem(_T("15"), 15);
    pThickComboBox->AddItem(_T("16"), 16);
    pThickComboBox->AddItem(_T("17"), 17);
    pThickComboBox->AddItem(_T("18"), 18);
    pThickComboBox->AddItem(_T("19"), 19);
    pThickComboBox->AddItem(_T("20"), 20);
    pThickComboBox->SelectItem(0);
    pPanelPen->Add(pThickComboBox);
    
  2. As novas caixas de combinação não correspondem a quaisquer itens de menu existente.Portanto, devemos criar itens de menu para cada opção de caneta.

    1. No Modo de exibição de recurso janela, abra o recurso de menu IDR_SCRIBBTYPE.

    2. clicar Caneta para em em aberto o menu de caneta.Em seguida, clicar Digite aqui e digite EST & n caneta.

    3. clicar com o botão direito do mouse no texto que você acabou de digitar para em em aberto o Propriedades caixa de diálogo e, em seguida, alterar a ID de propriedade para ID_PEN_THIN_WIDTH.

    4. Também deve criar um manipulador de eventos para cada item de menu da caneta.clicar com o botão direito do mouse o EST & n caneta item de menu que você acabou de criar e, em seguida, clique em Adicionar manipulador de eventos... .The manipulador de eventos Assistente aparece.

    5. FROM Lista de classes caixa de listagem, selecionar CScribbleDoc e, em seguida, clicar no Adicionar e edição botão.Isso cria um manipulador de eventos chamado CScribbleDoc::OnPenThinWidth.

  3. Adicione o seguinte código para 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 = (int) pThinComboBox->GetItemData(nCurSel);
    }
    // Create a new pen using the selected width
    ReplacePen();  
    
  4. Em seguida, nós criar manipuladores de item e evento um menu para a caneta espessa.

    1. No Modo de exibição de recurso janela, abra o recurso de menu IDR_SCRIBBTYPE.

    2. clicar Caneta para em em aberto o menu de caneta.Em seguida, clicar Digite aqui e digite Thic & caneta.

    3. clicar com o botão direito do mouse no texto que acabou de inserir para exibir o Propriedades caixa de diálogo.alterar a propriedade ID como ID_PEN_THICK_WIDTH.

    4. clicar com o botão direito do mouse o Espessura da caneta item de menu que acabou de criar e clique em Adicionar manipulador de eventos ….The manipulador de eventos Assistente aparece.

    5. FROM Lista de classes caixa de listagem, selecionar CScribbleDoc e, em seguida, clicar no Adicionar e edição botão.Isso cria um manipulador de eventos chamado CScribbleDoc::OnPenThickWidth.

  5. Adicione o seguinte código para 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 = (int) pThickComboBox ->GetItemData(nCurSel);
    }
    // Create a new pen using the selected width
    ReplacePen();
    
  6. Salvar as alterações e, em seguida, compile e execute o aplicativo.Novos botões e caixas de combinação devem aparecer.Tente usar a caneta diferentes larguras para Rabisco.

[go to top]

Adicionando um botão de cor à caneta no painel

Embora seja bom preto e branco, a cor é livelier.Em seguida, adicionamos um CMFCRibbonColorButton objeto que permite ao usuário Rabisco em cores.

Para adicionar um botão de cor no painel de caneta

  1. Podemos adicionar botão cor de, criamos um item de menu do botão cor.No Modo de exibição de recurso janela, abra o recurso de menu IDR_SCRIBBTYPE.clicar no Caneta item de menu para em em aberto o menu de caneta.Em seguida, clicar Digite aqui e insira e cor.clicar com o botão direito do mouse no texto que acabou de inserir para exibir o Propriedades caixa de diálogo.alterar a ID para ID_PEN_COLOR.

  2. Adicione o seguinte código à CMainFrame::OnCreate método imediatamente após o código que cria a caixa de combinação espessura da caneta.

    CMFCRibbonColorButton* pColorBtn = new CMFCRibbonColorButton(
       ID_PEN_COLOR, _T("Color"), TRUE, -1, 1);
    pColorBtn->SetAlwaysLargeImage();
    pColorBtn->SetColor(RGB(0,0,0)); // Black is the initial color
    pColorBtn->SetDefaultCommand(FALSE);
    pPanelPen->Add(pColorBtn);
    
  3. Salvar as alterações e, em seguida, compile e execute o aplicativo.O botão cor nova deve aparecer sobre o Caneta painel.No entanto, ele não pode ser usado porque não tem um manipulador de eventos.No próximo procedimento, adicione um manipulador do botão cor.

[go to top]

Adicionando um membro de cor à classe de documento

Porque Rabisco 1.0 não tem cor canetas, nós deve escrever uma implementação para eles.Para armazenar a cor do documento da caneta, podemos adicionar um novo membro à classe de documento CscribbleDoc.

Para adicionar um membro de cor para a classe do documento

  1. Em scribdoc.h no CScribbleDoc classe, localizar o // 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;
    
  2. Cada documento contém uma lista dos traços que o usuário já tiver desenhado.Cada traço é definido por um CStroke objeto. The CStroke classe não inclui informações sobre a cor da caneta. Portanto, nós deve modificar a classe.Em scribdoc.h no CStroke classe, adicione as seguintes linhas de código após a definição da m_nPenWidth membro de dados.

    // Pen color for the stroke
    COLORREF   m_penColor;
    
  3. No scribdoc.h, adicione um novo CStroke construtor cujos parâmetros especifique uma largura e cor. Adicione a seguinte linha de código após a CStroke(UINT nPenWidth); demonstrativo.

    CStroke(UINT nPenWidth, COLORREF penColor);
    
  4. Em scribdoc.cpp, adicionar a implementação do novo CStroke construtor. Adicione o seguinte código 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();
    }
    
  5. alterar a segunda linha do CStroke::DrawStroke método da seguinte maneira.

    if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
    
  6. Defina a cor de caneta padrão para a classe de documento.Em scribdoc.cpp, adicione as seguintes linhas para CScribbleDoc::InitDocument, depois que o m_nThickWidth = 5; demonstrativo.

    // default pen color is black
    m_penColor = RGB(0,0,0); 
    
  7. Em scribdoc.cpp, alterar a primeira linha do CScribbleDoc::NewStroke método a seguir.

    CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
    
  8. Altere a última linha do CScribbleDoc::ReplacePen método a seguir.

    m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
    
  9. 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. No Modo de exibição de recurso janela, abra o recurso de menu IDR_SCRIBBTYPE.

    2. clicar com o botão direito do mouse o Cor item de menu e clique em Adicionar manipulador de eventos ….The manipulador de eventos Assistente aparece.

    3. FROM Lista de classes caixa de listagem, selecionar CScribbleDoc e, em seguida, clicar no Adicionar e edição botão.Isso cria o CScribbleDoc::OnPenColor evento manipulador stub.

  10. Substitua o stub para o CScribbleDoc::OnPenColor manipulador de eventos com o 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();
    }
    
  11. Salvar as alterações e, em seguida, compile e execute o aplicativo.Você poderá pressionar o botão cor e alterar cor da caneta.

[go to top]

Inicializando canetas e salvando preferências

Em seguida, inicializar a cor e a largura das canetas.Por fim, salvar e carregar uma cor de um arquivo de desenho.

Ao inicializar os controles da BAR de faixa de opções

  1. Inicialize as canetas na BAR de faixa de opções.

    Adicione o seguinte código para scribdoc.cpp no CScribbleDoc::InitDocument método, após o m_sizeDoc = CSize(200,200) demonstrativo.

    // 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);
    
  2. salvar uma cor para um arquivo de desenho.Adicione a demonstrativo a seguir para scribdoc.cpp no CStroke::Serialize método, após o ar << (WORD)m_nPenWidth; demonstrativo.

    ar << (COLORREF)m_penColor;
    
  3. Por fim, carregar uma cor de um arquivo de desenho.Adicione a seguinte linha de código, no CStroke::Serialize método, após o m_nPenWidth = w; demonstrativo.

    ar >> m_penColor;
    
  4. Agora Rabisco em cores e salvar o desenho em um arquivo.

[go to top]

Sucesso!

Aplicativo MFC Rabisco foi atualizado com êxito.Use esta explicação passo a passo sistema autônomo um guia quando você modifica seus aplicativos existentes.

Consulte também

Tarefas

Demonstra Passo a passo: Atualizando o MFC Rabisco aplicativo (parte 1)

Outros recursos

Explicações passo a passo (@@)