Procedura dettagliata: aggiornamento dell'applicazione MFC Scribble (parte 2)

Articolo
10/12/2023

La parte 1 di questa procedura dettagliata ha illustrato come aggiungere una barra multifunzione fluente di Office all'applicazione classica Scribble. Questa parte illustra come aggiungere pannelli e controlli della barra multifunzione che gli utenti possono usare invece di menu e comandi.

Prerequisiti

Esempi di Visual C++

Sezioni

In questa parte della procedura dettagliata sono incluse le seguenti sezioni:

Aggiunta di nuovi pannelli alla barra multifunzione
Aggiunta di un pannello della Guida alla barra multifunzione
Aggiunta di un pannello penna alla barra multifunzione
Aggiunta di un pulsante Colore alla barra multifunzione
Aggiunta di un membro color alla classe Document
Inizializzazione delle penne e salvataggio delle preferenze

Aggiunta di nuovi pannelli alla barra multifunzione

Questi passaggi illustrano come aggiungere un pannello Visualizza contenente due caselle di controllo che controllano la visibilità della barra degli strumenti e della barra di stato, nonché un pannello Finestra che contiene un pulsante di divisione orientato verticalmente che controlla la creazione e la disposizione delle finestre MDI (Multiple-Document Interface).

Per aggiungere un pannello Visualizza e un pannello Finestra alla barra multifunzione

Creare un pannello denominato View, con due caselle di controllo che attivano o disattivano la barra di stato e la barra degli strumenti.
1. Dalla casella degli strumenti trascinare un pannello nella categoria Home. Trascinare quindi due caselle di controllo nel pannello.
2. Fare clic sul pannello per modificarne le proprietà. Modificare Caption (Didascalia) in View.
3. Fare clic sulla prima casella di controllo per modificarne le proprietà. Modificare l'ID in ID_VIEW_TOOLBAR e Didascalia in Toolbar.
4. Fare clic sulla seconda casella di controllo per modificarne le proprietà. Modificare l'ID in ID_VIEW_STATUS_BAR e Didascalia in Status Bar.
Creare un pannello denominato Window con un pulsante di divisione. Quando un utente fa clic sul pulsante di divisione, un menu di scelta rapida visualizza tre comandi già definiti nell'applicazione Scribble.
1. Dalla casella degli strumenti trascinare un pannello nella categoria Home. Trascinare quindi un pulsante nel pannello.
2. Fare clic sul pannello per modificarne le proprietà. Modificare Caption (Didascalia) in Window.
3. Fare clic sul pulsante . Impostare Caption su Windows, Keys to , Large Image Index (Indice immagine di grandi dimensioni) su w1e Split Mode (Modalità di divisione) su False. Fare quindi clic sui puntini di sospensione (...) accanto a Voci di menu per aprire la finestra di dialogo Editor elementi.
4. Fare clic su Aggiungi tre volte per aggiungere tre pulsanti.
5. Fare clic sul primo pulsante e quindi impostare Caption su New Windowe ID su ID_WINDOW_NEW.
6. Fare clic sul secondo pulsante e quindi impostare Caption su Cascadee ID su ID_WINDOW_CASCADE.
7. Fare clic sul terzo pulsante e quindi impostare Caption su Tilee ID su ID_WINDOW_TILE_HORZ.
Salvare le modifiche, quindi compilare ed eseguire l'applicazione. I pannelli Visualizza e Finestra devono essere visualizzati. Fare clic sui pulsanti per verificare che funzionino correttamente.

Aggiunta di un pannello della Guida alla barra multifunzione

A questo punto, è possibile assegnare due voci di menu definite nell'applicazione Scribble ai pulsanti della barra multifunzione denominati Argomenti della Guida e Informazioni su Scribble. I pulsanti vengono aggiunti a un nuovo pannello denominato Guida.

Per aggiungere un pannello della Guida

Dalla casella degli strumenti trascinare un pannello nella categoria Home. Trascinare quindi due pulsanti nel pannello.
Fare clic sul pannello per modificarne le proprietà. Modificare Caption (Didascalia) in Help.
Fare clic sul primo pulsante. Modificare Caption (Didascalia ) in Help Topicse ID in ID_HELP_FINDER.
Fare clic sul secondo pulsante. Modificare Caption (Didascalia ) in About Scribble...e ID in ID_APP_ABOUT.
Salvare le modifiche, quindi compilare ed eseguire l'applicazione. Verrà visualizzato un pannello della Guida che contiene due pulsanti della barra multifunzione.

Importante

Quando si fa clic sul pulsante Argomenti della Guida, l'applicazione Scribble apre un file della Guida HTML compresso (con estensione chm) denominato your_project_name.chm. Di conseguenza, se il progetto non è denominato Scribble, è necessario rinominare il file della Guida con il nome del progetto.

Aggiunta di un pannello penna alla barra multifunzione

Aggiungere ora un pannello per visualizzare i pulsanti che controllano lo spessore e il colore della penna. Questo pannello contiene una casella di controllo che alterna le penne spesse e sottili. La sua funzionalità è simile a quella della voce di menu Thick Line nell'applicazione Scribble.

L'applicazione originale Scribble consente all'utente di selezionare la larghezza della penna da una finestra di dialogo visualizzata quando l'utente fa clic su Larghezza penna nel menu. Poiché la barra multifunzione dispone di spazio sufficiente per i nuovi controlli, è possibile sostituire la finestra di dialogo usando due caselle combinate sulla barra multifunzione. Una casella combinata regola la larghezza della penna sottile e l'altra casella combinata regola la larghezza della penna spessa.

Per aggiungere un pannello Penna e caselle combinate alla barra multifunzione

Dalla casella degli strumenti trascinare un pannello nella categoria Home. Trascinare quindi una casella di controllo e due caselle combinate nel pannello.
Fare clic sul pannello per modificarne le proprietà. Modificare Caption (Didascalia) in Pen.
Fare clic sulla casella di controllo. Modificare Caption (Didascalia ) in Use Thicke ID in ID_PEN_THICK_OR_THIN.
Fare clic sulla prima casella combinata. Modificare Didascalia in , ID in ID_PEN_THIN_WIDTHThin Pen, digitare Drop List in , dati in 1;2;3;4;5;6;7;8;9;e testo in 2.
Fare clic sulla seconda casella combinata. Modificare Didascalia in , ID in ID_PEN_THICK_WIDTHThick Pen, digitare Drop List in , dati in 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;e testo in 5.
Le nuove caselle combinate non corrispondono ad alcuna voce di menu esistente, quindi è necessario creare una voce di menu per ogni opzione penna.
1. Nella finestra Visualizzazione risorse aprire la risorsa di menu IDR_SCRIBBTYPE.
2. Fare clic su Penna per aprire il menu della penna. Fare quindi clic su Digitare qui e digitare Thi&n Pen.
3. Fare clic con il pulsante destro del mouse sul testo digitato per aprire la finestra Proprietà e quindi modificare la proprietà ID in ID_PEN_THIN_WIDTH.
4. Creare un gestore eventi per ogni voce di menu della penna. Fare clic con il pulsante destro del mouse sulla voce di menu Thi&n Pen creata e quindi scegliere Aggiungi gestore eventi. Viene visualizzata la Creazione guidata gestore eventi.
5. Nella casella di riepilogo Classe della procedura guidata selezionare CScribbleDoc e quindi fare clic su Aggiungi e modifica. Il comando crea un gestore eventi denominato CScribbleDoc::OnPenThinWidth.
6. Aggiungere il codice seguente a 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();
```
Creare quindi una voce di menu e i gestori eventi per la penna spessa.
1. Nella finestra Visualizzazione risorse aprire la risorsa di menu IDR_SCRIBBTYPE.
2. Fare clic su Penna per aprire il menu della penna. Fare quindi clic su Digitare qui e digitare Thic&k Pen.
3. Fare clic con il pulsante destro del mouse sul testo digitato per visualizzare la finestra Proprietà . Modificare la proprietà ID in ID_PEN_THICK_WIDTH.
4. Fare clic con il pulsante destro del mouse sulla voce di menu Thick Pen creata e quindi scegliere Aggiungi gestore eventi. Viene visualizzata la Creazione guidata gestore eventi.
5. Nella casella di riepilogo Classe della procedura guidata selezionare CScribbleDoc e quindi fare clic su Aggiungi e modifica. Il comando crea un gestore eventi denominato CScribbleDoc::OnPenThickWidth.
6. Aggiungere il codice seguente a 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();
```
Salvare le modifiche, quindi compilare ed eseguire l'applicazione. Verranno visualizzati nuovi pulsanti e caselle combinate. Provare a usare larghezze di penna diverse per scarabocchiare.

Aggiunta di un pulsante colore al pannello della penna

Aggiungere quindi un oggetto CMFCRibbonColorButton che consente all'utente di colorarsi.

Per aggiungere un pulsante colore al pannello Penna

Prima di aggiungere il pulsante colore, crearne una voce di menu. Nella finestra Visualizzazione risorse aprire la risorsa di menu IDR_SCRIBBTYPE. Fare clic sulla voce di menu Penna per aprire il menu della penna. Fare quindi clic su Digitare qui e digitare &Color. Fare clic con il pulsante destro del mouse sul testo digitato per visualizzare la finestra Proprietà . Modificare l'ID in ID_PEN_COLOR.
Aggiungere ora il pulsante colore. Dalla casella degli strumenti trascinare un pulsante colore nel pannello Penna.
Fare clic sul pulsante colore. Impostare Caption su Color, ID su ID_PEN_COLOR, Simple Look (Aspetto semplice) su , Large Image Index (TrueIndice 1immagine di grandi dimensioni) su e Split Mode (Modalità di divisione) su False.
Salvare le modifiche, quindi compilare ed eseguire l'applicazione. Il nuovo pulsante colore deve essere visualizzato nel pannello Penna . Tuttavia, non può essere usato perché non ha ancora un gestore eventi. I passaggi successivi illustrano come aggiungere un gestore eventi per il pulsante colore.

Aggiunta di un membro color alla classe Document

Poiché l'applicazione originale Scribble non dispone di penne a colori, è necessario scrivere un'implementazione per tali penne. Per archiviare il colore della penna del documento, aggiungere un nuovo membro alla classe del documento, CscribbleDoc.

Per aggiungere un membro colore alla classe document

Nella classe scribdoc.h CScribbleDoc trovare la // Attributes sezione . Aggiungere le righe di codice seguenti dopo la definizione del m_nThickWidth membro dati.
```
// Current pen color
COLORREF m_penColor;
```
Ogni documento contiene un elenco di stoke già disegnati dall'utente. Ogni tratto è definito da un CStroke oggetto . La CStroke classe non include informazioni sul colore della penna, quindi è necessario modificare la classe . Nella classe scribdoc.h CStroke aggiungere le righe di codice seguenti dopo la definizione del m_nPenWidth membro dati.
```
// Pen color for the stroke
COLORREF m_penColor;
```
In scribdoc.h aggiungere un nuovo CStroke costruttore i cui parametri specificano una larghezza e un colore. Aggiungere la riga di codice seguente dopo l'istruzione CStroke(UINT nPenWidth); .
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

In scribdoc.cpp aggiungere l'implementazione del nuovo CStroke costruttore. Aggiungere il codice seguente dopo l'implementazione del CStroke::CStroke(UINT nPenWidth) costruttore.

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

Modificare la seconda riga del CStroke::DrawStroke metodo come indicato di seguito.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Impostare il colore predefinito della penna per la classe documento. In scribdoc.cpp aggiungere le righe seguenti a CScribbleDoc::InitDocument, dopo l'istruzione m_nThickWidth = 5; .
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
In scribdoc.cpp modificare la prima riga del CScribbleDoc::NewStroke metodo come segue.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Modificare l'ultima riga del CScribbleDoc::ReplacePen metodo come segue.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Il membro è stato aggiunto m_penColor in un passaggio precedente. Creare ora un gestore eventi per il pulsante colore che imposta il membro.
1. Nella finestra Visualizzazione risorse aprire la risorsa di menu IDR_SCRIBBTYPE.
2. Fare clic con il pulsante destro del mouse sulla voce di menu Colore e scegliere Aggiungi gestore eventi. Viene visualizzata la Creazione guidata gestore eventi.
3. Nella casella di riepilogo Classe della procedura guidata selezionare CScribbleDoc e quindi fare clic sul pulsante Aggiungi e modifica. Il comando crea lo stub del CScribbleDoc::OnPenColor gestore eventi.

Sostituire lo stub per il CScribbleDoc::OnPenColor gestore eventi con il codice seguente.

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

Salvare i cambiamenti, quindi compilare ed eseguire l'applicazione. È ora possibile premere il pulsante colore e modificare il colore della penna.

Inizializzazione delle penne e salvataggio delle preferenze

Inizializzare quindi il colore e la larghezza delle penne. Infine, salvare e caricare un disegno a colori da un file.

Per inizializzare i controlli sulla barra multifunzione

Inizializzare le penne sulla barra multifunzione.

Aggiungere il codice seguente a scribdoc.cpp, nel CScribbleDoc::InitDocument metodo , dopo l'istruzione 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);

Salvare un disegno a colori in un file. Aggiungere l'istruzione seguente a scribdoc.cpp, nel CStroke::Serialize metodo , dopo l'istruzione ar << (WORD)m_nPenWidth; .
```
ar << (COLORREF)m_penColor;
```
Caricare infine un disegno a colori da un file. Aggiungere la riga di codice seguente, nel CStroke::Serialize metodo , dopo l'istruzione m_nPenWidth = w; .
```
ar >> m_penColor;
```
Ora scarabocchiare a colori e salvare il disegno in un file.

Conclusione

L'applicazione MFC Scribble è stata aggiornata. Usare questa procedura dettagliata come guida quando si modificano le applicazioni esistenti.

Vedi anche

Procedure dettagliate
Procedura dettagliata: aggiornamento dell'applicazione MFC Scribble (parte 1)

Condividi tramite