Wskazówki: aktualizowanie aplikacji bazgrołów MFC (część 2)

Część 1 tego przewodnika pokazała, jak dodać wstążkę Fluent pakietu Office do klasycznej aplikacji Scribble. W tej części pokazano, jak dodać panele wstążki i kontrolki, których użytkownicy mogą używać zamiast menu i poleceń.

Wymagania wstępne

Przykłady Visual C++

Sekcje

Ta część przewodnika zawiera następujące sekcje:

• Dodawanie nowych paneli do wstążki

• Dodawanie panelu Pomocy do wstążki

• Dodawanie panelu pióra do wstążki

• Dodawanie przycisku koloru do wstążki

• Dodawanie elementu członkowskiego koloru do klasy dokumentu

• Inicjowanie piór i zapisywanie preferencji

Dodawanie nowych paneli do wstążki

W tych krokach pokazano, jak dodać panel Widok zawierający dwa pola wyboru, które kontrolują widoczność paska narzędzi i paska stanu, a także panel okna , który zawiera pionowo zorientowany przycisk podziału, który steruje tworzeniem i rozmieszczeniem okien interfejsu wielu dokumentów (MDI).

Aby dodać panel Widok i panel okna do paska wstążki

1. Utwórz panel o nazwie View, który zawiera dwa pola wyboru, które przełączają pasek stanu i pasek narzędzi.

   1. Z przybornika przeciągnij panel do kategorii Narzędzia główne. Następnie przeciągnij dwa pola wyboru do panelu.

   2. Kliknij panel, aby zmodyfikować jego właściwości. Zmień podpis na View.

   3. Kliknij pierwsze pole wyboru, aby zmodyfikować jego właściwości. Zmień identyfikator na ID_VIEW_TOOLBAR i Podpis na Toolbar.

   4. Kliknij drugie pole wyboru, aby zmodyfikować jego właściwości. Zmień identyfikator na ID_VIEW_STATUS_BAR i Podpis na Status Bar.

2. Utwórz panel o nazwie Window z przyciskiem podziału. Gdy użytkownik kliknie przycisk podziału, w menu skrótów zostaną wyświetlone trzy polecenia, które są już zdefiniowane w aplikacji Scribble.

   1. Z przybornika przeciągnij panel do kategorii Narzędzia główne. Następnie przeciągnij przycisk do panelu.

   2. Kliknij panel, aby zmodyfikować jego właściwości. Zmień podpis na Window.

   3. Kliknij przycisk . Zmień wartość Caption na , Keys to wWindows, Large Image Index na , i Split Mode na 1False. Następnie kliknij wielokropek (...) obok pozycji Elementy menu, aby otworzyć okno dialogowe Edytor elementów.

   4. Kliknij przycisk Dodaj trzy razy, aby dodać trzy przyciski.

   5. Kliknij pierwszy przycisk, a następnie zmień pozycję Podpis na New Window, i identyfikator na ID_WINDOW_NEW.

   6. Kliknij drugi przycisk, a następnie zmień pozycję Podpis na Cascade, i identyfikator na ID_WINDOW_CASCADE.

   7. Kliknij trzeci przycisk, a następnie zmień pozycję Podpis na Tile, i identyfikator na ID_WINDOW_TILE_HORZ.

3. Zapisz zmiany, a następnie skompiluj i uruchom aplikację. Powinny być wyświetlane panele Widok i Okno . Kliknij przyciski, aby potwierdzić, że działają prawidłowo.

Dodawanie panelu Pomocy do wstążki

Teraz możesz przypisać dwa elementy menu zdefiniowane w aplikacji Scribble do przycisków wstążki o nazwie Tematy pomocy i Informacje o scribble. Przyciski są dodawane do nowego panelu o nazwie Pomoc.

Aby dodać panel Pomoc

1. Z przybornika przeciągnij panel do kategorii Narzędzia główne. Następnie przeciągnij dwa przyciski do panelu.

2. Kliknij panel, aby zmodyfikować jego właściwości. Zmień podpis na Help.

3. Kliknij pierwszy przycisk. Zmień wartość Podpis na Help Topics, i identyfikator na ID_HELP_FINDER.

4. Kliknij drugi przycisk. Zmień wartość Podpis na About Scribble..., i identyfikator na ID_APP_ABOUT.

5. Zapisz zmiany, a następnie skompiluj i uruchom aplikację. Powinien zostać wyświetlony panel Pomoc zawierający dwa przyciski wstążki.

   Ważne

   Po kliknięciu przycisku Tematy pomocy aplikacja Scribble otwiera skompresowany plik pomocy HTML (.chm) o nazwie your_project_name.chm. W związku z tym, jeśli projekt nie ma nazwy Scribble, musisz zmienić nazwę pliku pomocy na nazwę projektu.

Dodawanie panelu pióra do wstążki

Teraz dodaj panel do wyświetlania przycisków sterujących grubością i kolorem pióra. Ten panel zawiera pole wyboru, które przełącza się między grubymi i cienkimi piórami. Jego funkcjonalność przypomina element menu Gruba linia w aplikacji Scribble.

Oryginalna aplikacja Scribble umożliwia użytkownikowi wybranie szerokości pióra z okna dialogowego wyświetlanego po kliknięciu przez użytkownika szerokości pióra w menu. Ponieważ pasek wstążki ma miejsce na nowe kontrolki, możesz zamienić okno dialogowe przy użyciu dwóch pól kombi na wstążce. Jedno pole kombi dostosowuje szerokość cienkiego pióra, a drugie pole kombi dostosowuje szerokość grubego pióra.

Aby dodać panel pióra i pola kombi do wstążki

1. Z przybornika przeciągnij panel do kategorii Narzędzia główne. Następnie przeciągnij pole wyboru i dwa pola kombi do panelu.

2. Kliknij panel, aby zmodyfikować jego właściwości. Zmień podpis na Pen.

3. Kliknij pole wyboru. Zmień wartość Podpis na Use Thick, i identyfikator na ID_PEN_THICK_OR_THIN.

4. Kliknij pierwsze pole kombi. Zmień wartość Caption na , ID na ID_PEN_THIN_WIDTHThin Pen, Wpisz na Drop List, Dane na 1;2;3;4;5;6;7;8;9;, i Text na 2.

5. Kliknij drugie pole kombi. Zmień wartość Caption na , ID na ID_PEN_THICK_WIDTHThick Pen, Wpisz na Drop List, Dane na 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;, i Text na 5.

6. Nowe pola kombi nie odpowiadają żadnym istniejącym elementom menu, dlatego należy utworzyć element menu dla każdej opcji pióra.

   1. W oknie Widok zasobu otwórz zasób menu IDR_SCRIBBTYPE.

   2. Kliknij pozycję Pióro, aby otworzyć menu pióra . Następnie kliknij pozycję Wpisz tutaj i wpisz Thi&n Pen.

   3. Kliknij prawym przyciskiem myszy wpisany tekst, aby otworzyć okno Właściwości , a następnie zmień właściwość ID na ID_PEN_THIN_WIDTH.

   4. Utwórz procedurę obsługi zdarzeń dla każdego elementu menu pióra. Kliknij prawym przyciskiem myszy utworzony element menu Thi&n Pen , a następnie kliknij polecenie Dodaj program obsługi zdarzeń. Zostanie wyświetlony Kreator obsługi zdarzeń.

   5. W polu Lista klas w kreatorze wybierz pozycję CScribbleDoc, a następnie kliknij pozycję Dodaj i edytuj. Polecenie tworzy procedurę obsługi zdarzeń o nazwie CScribbleDoc::OnPenThinWidth.

   6. Dodaj następujący kod do pliku 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();
      

7. Następnie utwórz element menu i programy obsługi zdarzeń dla grubego pióra.

   1. W oknie Widok zasobu otwórz zasób menu IDR_SCRIBBTYPE.

   2. Kliknij pozycję Pióro, aby otworzyć menu pióra . Następnie kliknij pozycję Wpisz tutaj i wpisz Thic&k Pen.

   3. Kliknij prawym przyciskiem myszy wpisany tekst, aby wyświetlić okno Właściwości . Zmień właściwość ID na ID_PEN_THICK_WIDTH.

   4. Kliknij prawym przyciskiem myszy utworzony element menu Gruby pióro , a następnie kliknij polecenie Dodaj procedurę obsługi zdarzeń. Zostanie wyświetlony Kreator obsługi zdarzeń.

   5. W polu Lista klas kreatora wybierz pozycję CScribbleDoc, a następnie kliknij pozycję Dodaj i edytuj. Polecenie tworzy procedurę obsługi zdarzeń o nazwie CScribbleDoc::OnPenThickWidth.

   6. Dodaj następujący kod do pliku 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();
      

8. Zapisz zmiany, a następnie skompiluj i uruchom aplikację. Powinny być wyświetlane nowe przyciski i pola kombi. Spróbuj użyć różnych szerokości pióra do bazgrołowania.

Dodawanie przycisku koloru do panelu pióra

Następnie dodaj obiekt CMFCRibbonColorButton , który umożliwia użytkownikowi bazgrołowanie w kolorze.

Aby dodać przycisk koloru do panelu Pióro

1. Przed dodaniem przycisku koloru utwórz dla niego element menu. W oknie Widok zasobu otwórz zasób menu IDR_SCRIBBTYPE. Kliknij element menu Pióro, aby otworzyć menu pióra. Następnie kliknij pozycję Wpisz tutaj i wpisz &Color. Kliknij prawym przyciskiem myszy wpisany tekst, aby wyświetlić okno Właściwości . Zmień identyfikator na ID_PEN_COLOR.

2. Teraz dodaj przycisk koloru. Z przybornika przeciągnij przycisk Color (Kolor) do panelu Pióro.

3. Kliknij przycisk koloru. Zmień wartość Caption na , ID na ID_PEN_COLORColor, Simple Look na , Large Image Index na True, i Split Mode na 1False.

4. Zapisz zmiany, a następnie skompiluj i uruchom aplikację. Nowy przycisk koloru powinien być wyświetlany na panelu Pióro . Nie można go jednak użyć, ponieważ nie ma jeszcze programu obsługi zdarzeń. W następnych krokach pokazano, jak dodać procedurę obsługi zdarzeń dla przycisku koloru.

Dodawanie elementu członkowskiego koloru do klasy dokumentu

Ponieważ oryginalna aplikacja Scribble nie ma piór kolorów, musisz napisać dla nich implementację. Aby zapisać kolor pióra dokumentu, dodaj nowy element członkowski do klasy dokumentów , CscribbleDoc.

Aby dodać składową koloru do klasy dokumentów

1. W pliku scribdoc.h w CScribbleDoc klasie znajdź sekcję // Attributes . Dodaj następujące wiersze kodu po definicji m_nThickWidth elementu członkowskiego danych.

   // Current pen color
   COLORREF m_penColor;
   

2. Każdy dokument zawiera listę podsyci, które użytkownik już narysował. Każdy pociągnięcie jest definiowane CStroke przez obiekt. Klasa CStroke nie zawiera informacji o kolorze pióra, więc należy zmodyfikować klasę. W pliku scribdoc.h w CStroke klasie dodaj następujące wiersze kodu po definicji składowej m_nPenWidth danych.

   // Pen color for the stroke
   COLORREF m_penColor;
   

3. W pliku scribdoc.h dodaj nowy CStroke konstruktor, którego parametry określają szerokość i kolor. Dodaj następujący wiersz kodu po instrukcji CStroke(UINT nPenWidth); .

   CStroke(UINT nPenWidth, COLORREF penColor);
   

4. W pliku scribdoc.cpp dodaj implementację nowego CStroke konstruktora. Dodaj następujący kod po implementacji konstruktora 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();
   }
   

5. Zmień drugi wiersz CStroke::DrawStroke metody w następujący sposób.

   if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
   

6. Ustaw domyślny kolor pióra dla klasy dokumentu. W pliku scribdoc.cpp dodaj następujące wiersze do CScribbleDoc::InitDocument, po instrukcji m_nThickWidth = 5; .

   // default pen color is black
   m_penColor = RGB(0, 0, 0);
   

7. W pliku scribdoc.cpp zmień pierwszy wiersz CScribbleDoc::NewStroke metody na następujący.

   CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
   

8. Zmień ostatni wiersz CScribbleDoc::ReplacePen metody na następujący.

   m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
   

9. Element członkowski m_penColor został dodany w poprzednim kroku. Teraz utwórz procedurę obsługi zdarzeń dla przycisku koloru, który ustawia element członkowski.

   1. W oknie Widok zasobu otwórz zasób menu IDR_SCRIBBTYPE.

   2. Kliknij prawym przyciskiem myszy element menu Kolor , a następnie kliknij polecenie Dodaj program obsługi zdarzeń. Zostanie wyświetlony Kreator obsługi zdarzeń.

   3. W polu Lista klas w kreatorze wybierz pozycję CScribbleDoc, a następnie kliknij przycisk Dodaj i edytuj. Polecenie tworzy wycinkę CScribbleDoc::OnPenColor programu obsługi zdarzeń.

10. Zastąp wycinkę CScribbleDoc::OnPenColor programu obsługi zdarzeń następującym kodem.

    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. Zapisz zmiany, a następnie skompiluj i uruchom aplikację. Teraz możesz nacisnąć przycisk koloru i zmienić kolor pióra.

Inicjowanie piór i zapisywanie preferencji

Następnie zainicjuj kolor i szerokość piór. Na koniec zapisz i załaduj rysunek koloru z pliku.

Aby zainicjować kontrolki na pasku wstążki

1. Zainicjuj pióra na pasku wstążki.

   Dodaj następujący kod do pliku scribdoc.cpp w metodzie CScribbleDoc::InitDocument po instrukcji 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);
   

2. Zapisz rysunek koloru w pliku. Dodaj następującą instrukcję do pliku scribdoc.cpp w metodzie CStroke::Serialize po instrukcji ar << (WORD)m_nPenWidth; .

   ar << (COLORREF)m_penColor;
   

3. Na koniec załaduj rysunek koloru z pliku. Dodaj następujący wiersz kodu w metodzie CStroke::Serialize po instrukcji m_nPenWidth = w; .

   ar >> m_penColor;
   

4. Teraz przeszukuj kolor i zapisz rysunek w pliku.

Podsumowanie

Zaktualizowano aplikację MFC Scribble. Użyj tego przewodnika jako przewodnika podczas modyfikowania istniejących aplikacji.

Zobacz też

Przewodniki
Przewodnik: aktualizowanie aplikacji bazgrołów MFC (część 1)