Návod: Aktualizace aplikace MFC Scribble (část 2)

Článek
10/12/2023

Část 1 tohoto názorného postupu ukázala, jak přidat pás karet Fluent pro Office do klasické aplikace Scribble. Tato část ukazuje, jak přidat panely a ovládací prvky pásu karet, které můžou uživatelé používat místo nabídek a příkazů.

Požadavky

Visual C++ – ukázky

Oddíly

Tato část návodu obsahuje následující části:

Přidání nových panelů na pás karet
Přidání panelu nápovědy na pás karet
Přidání panelu pera na pás karet
Přidání barevného tlačítka na pás karet
Přidání člena barvy do třídy dokumentu
Inicializace per a ukládání předvoleb

Přidání nových panelů na pás karet

Tyto kroky ukazují, jak přidat panel Zobrazení , který obsahuje dvě zaškrtávací políčka, která řídí viditelnost panelu nástrojů a stavového řádku, a také panel Okna , který obsahuje svisle orientované rozdělené tlačítko, které řídí vytváření a uspořádání oken rozhraní s více dokumenty (MDI).

Přidání panelu Zobrazení a panelu Okna na panel pásu karet

Vytvořte panel s názvem View, který má dvě zaškrtávací políčka, která přepíná stavový řádek a panel nástrojů.
1. Z panelu nástrojů přetáhněte panel do kategorie Domů . Potom přetáhněte dvě zaškrtávací políčka na panel.
2. Kliknutím na panel můžete upravit jeho vlastnosti. Změnit titulek na View.
3. Kliknutím na první zaškrtávací políčko upravte jeho vlastnosti. Změňte ID na ID_VIEW_TOOLBAR a titulek na Toolbar.
4. Kliknutím na druhé zaškrtávací políčko upravte jeho vlastnosti. Změňte ID na ID_VIEW_STATUS_BAR a titulek na Status Bar.
Vytvořte panel s názvem Window , který má tlačítko rozdělení. Když uživatel klikne na tlačítko Rozdělení, zobrazí místní nabídka tři příkazy, které jsou již definovány v aplikaci Scribble.
1. Z panelu nástrojů přetáhněte panel do kategorie Domů . Potom přetáhněte tlačítko na panel.
2. Kliknutím na panel můžete upravit jeho vlastnosti. Změnit titulek na Window.
3. Klikněte na tlačítko . Změňte titulek na Windows, klíče na w, Velký index obrázku do 1a rozdělený režim na False. Potom kliknutím na tři tečky (...) vedle položky nabídky otevřete dialogové okno Editor položek.
4. Kliknutím na Přidat třikrát přidáte tři tlačítka.
5. Klikněte na první tlačítko a potom změňte titulek na New Window, a ID na ID_WINDOW_NEW.
6. Klikněte na druhé tlačítko a potom změňte titulek na Cascade, a ID na ID_WINDOW_CASCADE.
7. Klikněte na třetí tlačítko a potom změňte titulek na Tilea ID na ID_WINDOW_TILE_HORZ.
Uložte změny a pak sestavte a spusťte aplikaci. Měly by se zobrazit panely Zobrazení a Okno . Kliknutím na tlačítka potvrďte, že fungují správně.

Přidání panelu nápovědy na pás karet

Nyní můžete přiřadit dvě položky nabídky, které jsou definovány v aplikaci Scribble na pásu karet tlačítka s názvem Témata nápovědy a O scribble. Tlačítka se přidají na nový panel s názvem Nápověda.

Přidání panelu nápovědy

Z panelu nástrojů přetáhněte panel do kategorie Domů . Potom přetáhněte dvě tlačítka na panel.
Kliknutím na panel můžete upravit jeho vlastnosti. Změnit titulek na Help.
Klikněte na první tlačítko. Změnit titulek na Help Topicsa ID na ID_HELP_FINDER.
Klikněte na druhé tlačítko. Změnit titulek na About Scribble...a ID na ID_APP_ABOUT.
Uložte změny a pak sestavte a spusťte aplikaci. Měl by se zobrazit panel nápovědy , který obsahuje dvě tlačítka pásu karet.

Důležité

Když kliknete na tlačítko Témata nápovědy , aplikace Scribble otevře komprimovaný soubor nápovědy HTML (.chm) s názvem your_project_name.chm. Pokud tedy váš projekt nemá název Scribble, musíte soubor nápovědy přejmenovat na název projektu.

Přidání panelu pera na pás karet

Teď přidejte panel pro zobrazení tlačítek, které řídí tloušťku a barvu pera. Tento panel obsahuje zaškrtávací políčko, které přepíná mezi tlustými a tenkými pery. Její funkce se podobá položce nabídky Tlustá čára v aplikaci Scribble.

Původní aplikace Scribble umožňuje uživateli vybrat šířky pera z dialogového okna, které se zobrazí, když uživatel klikne na Šířky pera v nabídce. Vzhledem k tomu, že panel pásu karet má pro nové ovládací prvky více místa, můžete dialogové okno nahradit pomocí dvou polí se seznamem na pásu karet. Jedno pole se seznamem upraví šířku tenkého pera a druhé pole se seznamem upraví šířku tlustého pera.

Přidání panelu Pera a polí se seznamem na pás karet

Z panelu nástrojů přetáhněte panel do kategorie Domů . Potom přetáhněte zaškrtávací políčko a dvě pole se seznamem na panel.
Kliknutím na panel můžete upravit jeho vlastnosti. Změnit titulek na Pen.
Klikněte na zaškrtávací políčko. Změnit titulek na Use Thicka ID na ID_PEN_THICK_OR_THIN.
Klikněte na první pole se seznamem. Změnit titulek na , ID na ID_PEN_THIN_WIDTH, typ na Drop List, data do 1;2;3;4;5;6;7;8;9;a text na 2.Thin Pen
Klikněte na druhé pole se seznamem. Změnit titulek na , ID na ID_PEN_THICK_WIDTH, typ na Drop List, data do 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;a text na 5.Thick Pen
Nová pole se seznamem neodpovídají žádným existujícím položkám nabídky, takže musíte vytvořit položku nabídky pro každou možnost pera.
1. V okně Zobrazení zdrojů otevřete prostředek nabídky IDR_SCRIBBTYPE.
2. Kliknutím na Pero otevřete nabídku pera. Potom klikněte na Typ sem a zadejte Thi&n Pen.
3. Klikněte pravým tlačítkem myši na text, který jste zadali, otevřete okno Vlastnosti a změňte vlastnost ID na ID_PEN_THIN_WIDTH.
4. Vytvořte obslužnou rutinu události pro každou položku nabídky pera. Klikněte pravým tlačítkem myši na položku nabídky Thi&n Pero , kterou jste vytvořili, a potom klepněte na tlačítko Přidat obslužnou rutinu události. Zobrazí se Průvodce obslužnou rutinou události.
5. V seznamu tříd v průvodci vyberte CScribbleDoc a potom klepněte na tlačítko Přidat a upravit. Příkaz vytvoří obslužnou rutinu události s názvem CScribbleDoc::OnPenThinWidth.
6. Přidejte následující kód do 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();
```
Dále vytvořte položku nabídky a obslužné rutiny událostí pro silné pero.
1. V okně Zobrazení zdrojů otevřete prostředek nabídky IDR_SCRIBBTYPE.
2. Kliknutím na Pero otevřete nabídku pera. Potom klikněte na Typ sem a zadejte Thic&k Pen.
3. Klikněte pravým tlačítkem myši na text, který jste zadali, a zobrazte okno Vlastnosti . Změňte vlastnost ID na ID_PEN_THICK_WIDTH.
4. Klikněte pravým tlačítkem myši na položku nabídky Silné pero , kterou jste vytvořili, a potom klepněte na tlačítko Přidat obslužnou rutinu události. Zobrazí se Průvodce obslužnou rutinou události.
5. V seznamu tříd průvodce vyberte CScribbleDoc a potom klepněte na tlačítko Přidat a upravit. Příkaz vytvoří obslužnou rutinu události s názvem CScribbleDoc::OnPenThickWidth.
6. Přidejte následující kód do 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();
```
Uložte změny a pak sestavte a spusťte aplikaci. Měla by se zobrazit nová tlačítka a pole se seznamem. Zkuste k klikybáku použít různé šířky pera.

Přidání barevného tlačítka na panel pera

Dále přidejte CMFCRibbonColorButton objekt, který uživateli umožňuje klikybít barvu.

Přidání barevného tlačítka na panel Pero

Než přidáte tlačítko barvy, vytvořte pro ni položku nabídky. V okně Zobrazení zdrojů otevřete prostředek nabídky IDR_SCRIBBTYPE. Kliknutím na položku nabídky Pero otevřete nabídku pera. Potom klikněte na Typ sem a zadejte &Color. Klikněte pravým tlačítkem myši na text, který jste zadali, a zobrazte okno Vlastnosti . Změňte ID na ID_PEN_COLOR.
Teď přidejte tlačítko barvy. Z panelu nástrojů přetáhněte tlačítko Barva na panel Pero .
Klikněte na barevné tlačítko. Změnit titulek na Color, ID na ID_PEN_COLOR, jednoduchý vzhled True , velký index obrázku na 1a rozdělit režim na False.
Uložte změny a pak sestavte a spusťte aplikaci. Nové barevné tlačítko by se mělo zobrazit na panelu Pero . Nedá se ale použít, protože ještě nemá obslužnou rutinu události. Další kroky ukazují, jak přidat obslužnou rutinu události pro tlačítko barvy.

Přidání člena barvy do třídy dokumentu

Protože původní aplikace Scribble nemá barevné pera, musíte pro ně napsat implementaci. Pokud chcete uložit barvu pera dokumentu, přidejte do třídy CscribbleDocdokumentu nový člen .

Přidání člena barvy do třídy dokumentu

V souboru scribdoc.h ve CScribbleDoc třídě najděte // Attributes oddíl. Za definici datového člena m_nThickWidth přidejte následující řádky kódu.
```
// Current pen color
COLORREF m_penColor;
```
Každý dokument obsahuje seznam stoků, které uživatel již nakreslil. Každý tah je definován objektem CStroke . Třída CStroke neobsahuje informace o barvě pera, takže je nutné upravit třídu. V scribdoc.h, ve CStroke třídě přidejte následující řádky kódu za definici datového členu m_nPenWidth .
```
// Pen color for the stroke
COLORREF m_penColor;
```
V souboru scribdoc.h přidejte nový CStroke konstruktor, jehož parametry určují šířku a barvu. Za příkaz přidejte následující řádek kódu CStroke(UINT nPenWidth); .
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

V souboru scribdoc.cpp přidejte implementaci nového CStroke konstruktoru. Za implementaci konstruktoru CStroke::CStroke(UINT nPenWidth) přidejte následující kód.

// 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();
}

Následujícím způsobem změňte druhý řádek CStroke::DrawStroke metody.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Nastavte výchozí barvu pera pro třídu dokumentu. Do souboru scribdoc.cpp přidejte za CScribbleDoc::InitDocumentm_nThickWidth = 5; příkaz následující řádky.
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
V souboru scribdoc.cpp změňte první řádek CScribbleDoc::NewStroke metody na následující.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Změňte poslední řádek CScribbleDoc::ReplacePen metody na následující.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Přidali jste člena m_penColor v předchozím kroku. Teď vytvořte obslužnou rutinu události pro barevné tlačítko, které nastaví člena.
1. V okně Zobrazení zdrojů otevřete prostředek nabídky IDR_SCRIBBTYPE.
2. Klepněte pravým tlačítkem myši na položku nabídky Barva a klepněte na tlačítko Přidat obslužnou rutinu události. Zobrazí se Průvodce obslužnou rutinou události.
3. V seznamu tříd v průvodci vyberte CScribbleDoc a potom klikněte na tlačítko Přidat a upravit. Příkaz vytvoří CScribbleDoc::OnPenColor zástupný kód obslužné rutiny události.

Zástupný kód obslužné CScribbleDoc::OnPenColor rutiny události nahraďte následujícím kódem.

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();
}

Uložte změny a pak sestavte a spusťte aplikaci. Teď můžete stisknout tlačítko barvy a změnit barvu pera.

Inicializace per a ukládání předvoleb

Potom inicializujete barvu a šířku per. Nakonec uložte a načtěte barevný výkres ze souboru.

Inicializace ovládacích prvků na panelu karet

Inicializuje pera na pásu karet.

Do metody za CScribbleDoc::InitDocument m_sizeDoc = CSize(200,200) příkaz přidejte následující kód pro scribdoc.cpp.

// 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);

Uložení barevného výkresu do souboru Do metody za CStroke::Serialize ar << (WORD)m_nPenWidth; příkaz přidejte následující příkaz pro scribdoc.cpp.
```
ar << (COLORREF)m_penColor;
```
Nakonec načtěte barevný výkres ze souboru. Za příkaz přidejte následující řádek kódu v CStroke::Serialize metodě m_nPenWidth = w; .
```
ar >> m_penColor;
```
Teď můžete kreslit barvou a uložit výkres do souboru.

Závěr

Aktualizovali jste aplikaci MFC Scribble. Tento názorný postup použijte jako vodítko při úpravě existujících aplikací.

Viz také

Návody
Návod: Aktualizace aplikace MFC Scribble (část 1)

Sdílet prostřednictvím

Návod: Aktualizace aplikace MFC Scribble (část 2)

Požadavky

Oddíly

Přidání nových panelů na pás karet

Přidání panelu Zobrazení a panelu Okna na panel pásu karet

Přidání panelu nápovědy na pás karet

Přidání panelu nápovědy

Přidání panelu pera na pás karet

Přidání panelu Pera a polí se seznamem na pás karet

Přidání barevného tlačítka na panel pera

Přidání barevného tlačítka na panel Pero

Přidání člena barvy do třídy dokumentu

Přidání člena barvy do třídy dokumentu

Inicializace per a ukládání předvoleb

Inicializace ovládacích prvků na panelu karet

Závěr

Viz také

Váš názor

Další materiály