Procédure pas à pas : mise à jour de l'application Scribble MFC (partie 2)

Article
10/12/2023

La partie 1 de cette procédure pas à pas a montré comment ajouter un ruban Fluent Bureau à l’application Scribble classique. Cette partie montre comment ajouter des panneaux de ruban et des contrôles que les utilisateurs peuvent utiliser au lieu de menus et de commandes.

Prérequis

Exemples Visual C++

Sections

Cette partie de la procédure pas à pas comporte les sections suivantes :

Ajout de nouveaux panneaux au ruban
Ajout d’un panneau d’aide au ruban
Ajout d’un panneau de stylet au ruban
Ajout d’un bouton Couleur au ruban
Ajout d’un membre de couleur à la classe de document
Initialisation des stylos et des préférences d’enregistrement

Ajout de nouveaux panneaux au ruban

Ces étapes montrent comment ajouter un panneau d’affichage qui contient deux zones case activée qui contrôlent la visibilité de la barre d’outils et de la barre d’état, ainsi qu’un panneau Fenêtre qui contient un bouton fractionné orienté verticalement qui contrôle la création et la disposition des fenêtres MDI (Multiple-Document Interface).

Pour ajouter un panneau d’affichage et un panneau Fenêtre à la barre de ruban

Créez un panneau nommé View, qui a deux zones case activée qui basculent la barre d’état et la barre d’outils.
1. À partir de la boîte à outils, faites glisser un panneau vers la catégorie Accueil . Faites ensuite glisser deux cases à cocher vers le panneau.
2. Cliquez sur le panneau pour modifier ses propriétés. Remplacez la légende par View.
3. Cliquez sur la première zone case activée pour modifier ses propriétés. Remplacez l’ID par ID_VIEW_TOOLBAR et la légende par Toolbar.
4. Cliquez sur la deuxième zone case activée pour modifier ses propriétés. Remplacez l’ID par ID_VIEW_STATUS_BAR et la légende par Status Bar.
Créez un panneau nommé Window avec un bouton fractionné. Lorsqu’un utilisateur clique sur le bouton fractionné, un menu contextuel affiche trois commandes déjà définies dans l’application Scribble.
1. À partir de la boîte à outils, faites glisser un panneau vers la catégorie Accueil . Faites ensuite glisser un bouton vers le panneau.
2. Cliquez sur le panneau pour modifier ses propriétés. Remplacez la légende par Window.
3. Cliquez sur le bouton . Modifiez la légende en Windows, les clés en w, l’index 1 d’image volumineux en et le mode fractionné en False. Cliquez ensuite sur les points de suspension (...) en regard des éléments de menu pour ouvrir la boîte de dialogue Éditeur d’éléments.
4. Cliquez sur Ajouter trois fois pour ajouter trois boutons.
5. Cliquez sur le premier bouton, puis remplacez Légende New Windowpar , et ID par ID_WINDOW_NEW.
6. Cliquez sur le deuxième bouton, puis remplacez Légende Cascadepar , et ID par ID_WINDOW_CASCADE.
7. Cliquez sur le troisième bouton, puis remplacez Légende Tilepar , et ID par ID_WINDOW_TILE_HORZ.
Enregistrez les modifications, puis générez et exécutez l’application. Les panneaux Affichage et Fenêtre doivent être affichés. Cliquez sur les boutons pour confirmer qu’ils fonctionnent correctement.

Ajout d’un panneau d’aide au ruban

À présent, vous pouvez affecter deux éléments de menu définis dans l’application Scribble aux boutons du ruban nommés Rubriques d’aide et À propos du scribble. Les boutons sont ajoutés à un nouveau panneau nommé Aide.

Pour ajouter un panneau d’aide

À partir de la boîte à outils, faites glisser un panneau vers la catégorie Accueil . Faites ensuite glisser deux boutons vers le panneau.
Cliquez sur le panneau pour modifier ses propriétés. Remplacez la légende par Help.
Cliquez sur le premier bouton. Remplacez la légende Help Topics par , et l’ID par ID_HELP_FINDER.
Cliquez sur le deuxième bouton. Remplacez la légende About Scribble... par , et l’ID par ID_APP_ABOUT.
Enregistrez les modifications, puis générez et exécutez l’application. Un panneau d’aide qui contient deux boutons de ruban doit être affiché.

Important

Lorsque vous cliquez sur le bouton Rubriques d’aide, l’application Scribble ouvre un fichier d’aide HTML compressé (.chm) nommé your_project_name.chm. Par conséquent, si votre projet n’est pas nommé Scribble, vous devez renommer le fichier d’aide en nom de projet.

Ajout d’un panneau de stylet au ruban

À présent, ajoutez un panneau pour afficher des boutons qui contrôlent l’épaisseur et la couleur du stylet. Ce panneau contient une boîte case activée qui bascule entre des stylos épais et minces. Sa fonctionnalité ressemble à celle de l’élément de menu Ligne épaisse dans l’application Scribble.

L’application Scribble d’origine permet à l’utilisateur de sélectionner des largeurs de stylet dans une boîte de dialogue qui s’affiche lorsque l’utilisateur clique sur Largeurs du stylet dans le menu. Étant donné que la barre du ruban a suffisamment de place pour les nouveaux contrôles, vous pouvez remplacer la boîte de dialogue à l’aide de deux zones de liste modifiable sur le ruban. Une zone de liste modifiable ajuste la largeur du stylet mince et l’autre zone de liste modifiable ajuste la largeur du stylet épais.

Pour ajouter un panneau stylet et des zones de liste modifiable au ruban

À partir de la boîte à outils, faites glisser un panneau vers la catégorie Accueil . Faites ensuite glisser une case à cocher et deux zones de liste déroulante vers le panneau.
Cliquez sur le panneau pour modifier ses propriétés. Remplacez la légende par Pen.
Cliquez sur la case à cocher. Remplacez la légende Use Thick par , et l’ID par ID_PEN_THICK_OR_THIN.
Cliquez sur la première zone de liste déroulante. Modifiez la légende Thin Penen , l’ID en ID_PEN_THIN_WIDTH, le type Drop List en , les données en 1;2;3;4;5;6;7;8;9;et le texte en 2.
Cliquez sur la deuxième zone de liste déroulante. Modifiez la légende Thick Penen , l’ID en ID_PEN_THICK_WIDTH, le type Drop List en , les données en 5;6;7;8;9;10;11;12;13;14;15;16;17;18;19;20;et le texte en 5.
Les nouvelles zones de liste modifiable ne correspondent à aucun élément de menu existant. Vous devez donc créer un élément de menu pour chaque option de stylet.
1. Dans la fenêtre Affichage des ressources, ouvrez la ressource de menu IDR_SCRIBBTYPE .
2. Cliquez sur Stylet pour ouvrir le menu stylet. Cliquez ensuite sur Taper ici et tapez Thi&n Pen.
3. Cliquez avec le bouton droit sur le texte que vous avez tapé pour ouvrir la fenêtre Propriétés , puis remplacez la propriété ID_PEN_THIN_WIDTHID par .
4. Créez un gestionnaire d’événements pour chaque élément de menu stylet. Cliquez avec le bouton droit sur l’élément de menu Thi&n Pen que vous avez créé, puis cliquez sur Ajouter un gestionnaire d’événements. L’Assistant Gestionnaire d’événements s’affiche.
5. Dans la zone de liste Classe de l’Assistant, sélectionnez CScribbleDoc , puis cliquez sur Ajouter et modifier. La commande crée un gestionnaire d’événements nommé CScribbleDoc::OnPenThinWidth.
6. Ajoutez le code suivant à 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();
```
Ensuite, créez un élément de menu et des gestionnaires d’événements pour le stylet épais.
1. Dans la fenêtre Affichage des ressources, ouvrez la ressource de menu IDR_SCRIBBTYPE .
2. Cliquez sur Stylet pour ouvrir le menu stylet. Cliquez ensuite sur Taper ici et tapez Thic&k Pen.
3. Cliquez avec le bouton droit sur le texte que vous avez tapé pour afficher la fenêtre Propriétés . Remplacez la propriété ID_PEN_THICK_WIDTHID par .
4. Cliquez avec le bouton droit sur l’élément de menu Stylet épais que vous avez créé, puis cliquez sur Ajouter un gestionnaire d’événements. L’Assistant Gestionnaire d’événements s’affiche.
5. Dans la zone de liste Classe de l’Assistant, sélectionnez CScribbleDoc , puis cliquez sur Ajouter et modifier. La commande crée un gestionnaire d’événements nommé CScribbleDoc::OnPenThickWidth.
6. Ajoutez le code suivant à 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();
```
Enregistrez les modifications, puis générez et exécutez l’application. Les nouveaux boutons et zones de liste modifiable doivent être affichés. Essayez d’utiliser différentes largeurs de stylet pour scribbler.

Ajout d’un bouton Couleur au panneau de stylet

Ensuite, ajoutez un objet CMFCRibbonColorButton qui permet à l’utilisateur de scribbler en couleur.

Pour ajouter un bouton de couleur au panneau Stylet

Avant d’ajouter le bouton couleur, créez un élément de menu pour celui-ci. Dans la fenêtre Affichage des ressources, ouvrez la ressource de menu IDR_SCRIBBTYPE . Cliquez sur l’élément de menu Stylet pour ouvrir le menu stylet. Cliquez ensuite sur Taper ici et tapez &Color. Cliquez avec le bouton droit sur le texte que vous avez tapé pour afficher la fenêtre Propriétés . Modifiez l’ID en lui attribuant la valeur ID_PEN_COLOR.
Ajoutez maintenant le bouton couleur. À partir de la boîte à outils, faites glisser un bouton Couleur vers le panneau Stylet .
Cliquez sur le bouton couleur. Remplacez la légende Color par , l’ID par ID_PEN_COLOR, l’apparence True simple , l’index 1 d’image volumineux et le mode fractionné sur .False
Enregistrez les modifications, puis générez et exécutez l’application. Le nouveau bouton couleur doit être affiché dans le panneau Stylet . Toutefois, elle ne peut pas être utilisée, car elle n’a pas encore de gestionnaire d’événements. Les étapes suivantes montrent comment ajouter un gestionnaire d’événements pour le bouton couleur.

Ajout d’un membre de couleur à la classe de document

Étant donné que l’application Scribble d’origine n’a pas de stylets de couleur, vous devez écrire une implémentation pour celles-ci. Pour stocker la couleur du stylet du document, ajoutez un nouveau membre à la classe de document. CscribbleDoc

Pour ajouter un membre de couleur à la classe de document

Dans scribdoc.h, dans la CScribbleDoc classe, recherchez la // Attributes section. Ajoutez les lignes de code suivantes après la définition du m_nThickWidth membre de données.
```
// Current pen color
COLORREF m_penColor;
```
Chaque document contient une liste de stokes que l’utilisateur a déjà dessinés. Chaque trait est défini par un CStroke objet. La CStroke classe n’inclut pas d’informations sur la couleur du stylet. Vous devez donc modifier la classe. Dans scribdoc.h, dans la CStroke classe, ajoutez les lignes de code suivantes après la définition du m_nPenWidth membre de données.
```
// Pen color for the stroke
COLORREF m_penColor;
```
Dans scribdoc.h, ajoutez un nouveau CStroke constructeur dont les paramètres spécifient une largeur et une couleur. Ajoutez la ligne de code suivante après l’instruction CStroke(UINT nPenWidth); .
```
CStroke(UINT nPenWidth, COLORREF penColor);
```

Dans scribdoc.cpp, ajoutez l’implémentation du nouveau CStroke constructeur. Ajoutez le code suivant après l’implémentation du CStroke::CStroke(UINT nPenWidth) constructeur.

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

Modifiez la deuxième ligne de la CStroke::DrawStroke méthode comme suit.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Définissez la couleur de stylet par défaut pour la classe de document. Dans scribdoc.cpp, ajoutez les lignes suivantes à CScribbleDoc::InitDocument, après l’instruction m_nThickWidth = 5; .
```
// default pen color is black
m_penColor = RGB(0, 0, 0);
```
Dans scribdoc.cpp, remplacez la première ligne de la CScribbleDoc::NewStroke méthode par ce qui suit.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Remplacez la dernière ligne de la CScribbleDoc::ReplacePen méthode par ce qui suit.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Vous avez ajouté le m_penColor membre à une étape précédente. À présent, créez un gestionnaire d’événements pour le bouton de couleur qui définit le membre.
1. Dans la fenêtre Affichage des ressources, ouvrez la ressource de menu IDR_SCRIBBTYPE.
2. Cliquez avec le bouton droit sur l’élément de menu Couleur , puis cliquez sur Ajouter un gestionnaire d’événements. L’Assistant Gestionnaire d’événements s’affiche.
3. Dans la zone de liste Classe de l’Assistant, sélectionnez CScribbleDoc , puis cliquez sur le bouton Ajouter et modifier . La commande crée le stub du gestionnaire d’événements CScribbleDoc::OnPenColor .

Remplacez le stub du gestionnaire d’événements CScribbleDoc::OnPenColor par le code suivant.

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

Enregistrez les modifications, puis générez et exécutez l’application. Vous pouvez maintenant appuyer sur le bouton couleur et modifier la couleur du stylet.

Initialisation des stylos et des préférences d’enregistrement

Ensuite, initialisez la couleur et la largeur des stylos. Enfin, enregistrez et chargez un dessin de couleur à partir d’un fichier.

Pour initialiser des contrôles dans la barre de ruban

Initialisez les stylos dans la barre du ruban.

Ajoutez le code suivant à scribdoc.cpp, dans la CScribbleDoc::InitDocument méthode, après l’instruction 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);

Enregistrez un dessin de couleur dans un fichier. Ajoutez l’instruction suivante à scribdoc.cpp, dans la CStroke::Serialize méthode, après l’instruction ar << (WORD)m_nPenWidth; .
```
ar << (COLORREF)m_penColor;
```
Enfin, chargez un dessin de couleur à partir d’un fichier. Ajoutez la ligne de code suivante, dans la CStroke::Serialize méthode, après l’instruction m_nPenWidth = w; .
```
ar >> m_penColor;
```
Maintenant scribble en couleur et enregistrez votre dessin dans un fichier.

Conclusion

Vous avez mis à jour l’application Scribble MFC. Utilisez cette procédure pas à pas comme guide lorsque vous modifiez vos applications existantes.

Voir aussi

Procédures pas à pas
Procédure pas à pas : mise à jour de l’application Scribble MFC (partie 1)

Partager via