Procédure pas - à - pas : Mettre à jour l'application scribble MFC (partie 2)

Article
03/04/2013

partie de cette procédure pas - à - pas a montré comment ajouter un ruban Office Fluent à l'application classique scribble.Cette partie indique comment ajouter des panneaux et contrôles du ruban que les utilisateurs peuvent utiliser au lieu des menus et des commandes.

Composants requis

Exemples Visual C++

Sections

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

Ajouter de nouveaux panneaux au ruban
Ajouter un panneau d'aide au ruban
Ajouter un panneau de stylet au ruban
Ajouter un bouton de couleur au ruban
Ajouter un membre de couleur dans la classe de document
Initialisation des stylets et stocker des préférences

Ajouter de nouveaux panneaux au ruban

Les étapes suivantes indiquent comment ajouter un panneau Afficher qui contient deux cases à cocher qui contrôlent la visibilité de la barre d'outils et la barre d'état, et également un panneau Fenêtre qui contient un bouton partagé verticalement orienté qui contrôle la création et la disposition des fenêtres (MDI) d'interface multidocument.

Pour ajouter un panneau de vue et le panneau de fenêtre et la barre de ruban

Créez un panneau nommé vue, qui a deux cases à cocher qui basculent la barre d'état et la barre d'outils.
1. De boîte à outils, faites glisser Panel à la catégorie Home .Puis faites glisser deux Cases à cocher dans le panneau.
2. Cliquez sur le panneau pour modifier ses propriétés.Modification légende à vue.
3. Cliquez sur la première case à cocher pour modifier ses propriétés.Modifiez ID à ID_VIEW_TOOLBAR et légende à barre d'outils.
4. Cliquez sur la deuxième case à cocher pour modifier ses propriétés.Modifiez ID à ID_VIEW_STATUS_BAR et légende à barre d'état.
Créez un panneau nommé fenêtre avec un bouton partagé.Lorsqu'un utilisateur clique sur le bouton partagé, les affiche dans un menu contextuel trois commandes qui sont déjà définies dans l'application scribble.
1. De boîte à outils, faites glisser Panel à la catégorie Home .Faites ensuite glisser Button dans le panneau.
2. Cliquez sur le panneau pour modifier ses propriétés.Modification légende à fenêtre.
3. Cliquez sur le bouton.Modifiez légende à fenêtres, Keys à W, grand index d'image à 1, et mode fractionné à False.Cliquez sur les points de suspension (###…) situé en regard é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 modifiez légende à nouvelle fenêtre, et ID à ID_WINDOW_NEW.
6. Cliquez sur le deuxième bouton puis modifiez légende à cascade, et ID à ID_WINDOW_CASCADE.
7. Cliquez sur le troisième bouton puis modifiez légende à mosaïque, et ID à ID_WINDOW_TILE_HORZ.
Enregistrez les modifications, puis générez et exécutez l'application.Les panneaux Afficher et Fenêtre doivent être affichés.Cliquez sur les boutons pour confirmer qu'ils fonctionnent correctement.

[Sections]

Ajouter un panneau d'aide au ruban

Maintenant, vous pouvez assigner deux éléments de menu qui sont définis dans l'application scribble aux boutons de ruban qui sont nommés Rubriques d'aide et Sur le scribble.Les boutons sont ajoutés à un nouveau panneau nommé Aide.

Pour ajouter un panneau d'aide

De boîte à outils, faites glisser Panel à la catégorie Home .Puis faites glisser deux boutons dans le panneau.
Cliquez sur le panneau pour modifier ses propriétés.Modification légende à aide.
Cliquez sur le premier bouton.Modification légende à rubriques d'aide, et ID à ID_HELP_FINDER.
Cliquez sur le deuxième bouton.Modification légende à Sur le scribble…, et ID à ID_APP_ABOUT.
Enregistrez les modifications, puis générez et exécutez l'application.Un panneau Aide qui contient deux boutons de ruban doit s'afficher.

Important

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

[Sections]

Ajouter un panneau de stylet au ruban

Maintenant, ajoutez un panneau aux boutons d'affichage qui contrôlent l'épaisseur et la couleur du stylet.Ce panneau contient une case à cocher qui bascule les stylets entre lourds et minces.Sa fonctionnalité est similaire à celle de l'élément de menu Trait épais dans l'application scribble.

L'application d'origine scribble permet à l'utilisateur de sélectionner la largeur du stylet d'une boîte de dialogue qui s'affiche lorsque l'utilisateur clique sur Largeur du stylet dans le menu.Étant donné que la barre de ruban possède la partie suffisante pour les nouveaux contrôles, vous pouvez remplacer la boîte de dialogue à l'aide de deux zones de liste déroulante du ruban.Une zone de liste déroulante règle la largeur du stylet un et l'autre zone de liste déroulante règle la largeur du stylet épais.

Pour ajouter un stylet aux éléments et des zones de liste déroulante du ruban

De boîte à outils, faites glisser Panel à la catégorie Home .Faites ensuite glisser Case à cocher et deux zones de liste déroulante dans le panneau.
Cliquez sur le panneau pour modifier ses propriétés.Modification légende à stylet.
Cliquez sur la case à cocher.Modification légende à utilisation profondément, et ID à ID_PEN_THICK_OR_THIN.
Cliquez sur la première zone de liste déroulante.Modification légende à Fine le stylet, à ID à ID_PEN_THIN_WIDTH, à Text à 2, à Type à liste de déplacement, et à Données à 1 ; 2 ; 3 ; 4 ; 5 ; 6 ; 7 ; 8 ; 9 ;.
Cliquez sur la deuxième zone de liste déroulante.Modification légende à Stylet lourds, à ID à ID_PEN_THICK_WIDTH, à Text à 5, à Type à liste de déplacement, et à Données à 5 ; 6 ; 7 ; 8 ; 9 ; 10 ; 11 ; 12 ; 13 ; 14 ; 15 ; 16 ; 17 ; 18 ; 19 ; 20 ;.
Les nouvelles zones de liste déroulante ne correspondent pas à un élément de menu existant.Par conséquent, vous devez créer un élément de menu pour chaque option de stylet.
1. Dans la fenêtre Affichage des ressources , ouvrez la ressource menu en IDR_SCRIBBTYPE.
2. Cliquez sur Ouvrir pour ouvrir le menu de pen .Cliquez sur le type ici et tapez le stylet de Thi&n.
3. Cliquez avec le bouton droit sur le texte que vous venez de taper pour ouvrir la fenêtre Propriétés , puis modifiez la propriété d'ID à ID_PEN_THIN_WIDTH.
4. Vous devez également créer un gestionnaire d'événements à chaque élément de menu du stylet.Cliquez avec le bouton droit sur l'élément de menu du stylet de Thi&n que vous venez de créer puis cliquez sur ajouter un gestionnaire d'événements.assistant Gestionnaire d'événements s'affiche.
5. Dans la zone Liste des classes dans l'Assistant, sélectionnez CScribbleDoc puis cliquez sur Ajouter et modifier.Cette opération 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(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 du stylet épais.
1. Dans la fenêtre Affichage des ressources , ouvrez la ressource menu en IDR_SCRIBBTYPE.
2. Cliquez sur Ouvrir pour ouvrir le menu du stylet.Cliquez sur le type ici et tapez le stylet de Thic&k.
3. Cliquez avec le bouton droit sur le texte que vous venez de taper pour afficher la fenêtre Propriétés .Modifiez la propriété d'ID à ID_PEN_THICK_WIDTH.
4. Cliquez avec le bouton droit sur l'élément de menu Stylet lourds que vous venez de créer puis cliquez sur Ajouter un gestionnaire d'événements.assistant Gestionnaire d'événements s'affiche.
5. Dans la zone Liste des classes de l'Assistant, sélectionnez CScribbleDoc puis cliquez sur Ajouter et modifier.Cette opération 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(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 les zones de liste déroulante doit s'afficher.Essayez d'utiliser différentes largeur du stylet à griffonner.

[Sections]

Ajouter un bouton de couleur dans le panneau de stylet

Ensuite, ajoutez un objet de CMFCRibbonColorButton qui permet à l'utilisateur griffonner en couleur.

Pour ajouter un bouton de couleur dans le panneau de stylet

Avant d'ajouter le bouton de couleur, créez un élément de menu pour lui.Dans la fenêtre Affichage des ressources , ouvrez la ressource menu en IDR_SCRIBBTYPE.Cliquez sur l'élément de menu Ouvrir pour ouvrir le menu du stylet.Cliquez sur le type ici et tapez le &Color.Cliquez avec le bouton droit sur le texte que vous venez de taper pour afficher la fenêtre Propriétés .Modifiez l'ID à ID_PEN_COLOR.
Ajoutez maintenant le bouton de couleur.De boîte à outils, faites glisser bouton de couleur dans le panneau Ouvrir .
Cliquez sur le bouton de couleur.Modifiez légende à couleur, ID à ID_PEN_COLOR, SimpleRecherchez à True, grand index d'image à 1, et mode fractionné à False.
Enregistrez les modifications, puis générez et exécutez l'application.Le nouveau bouton de couleurs doivent être affiché dans le panneau Ouvrir .Toutefois, il ne peut pas être utilisé car il n'a pas encore un gestionnaire d'événements.Les étapes suivantes indiquent comment ajouter un gestionnaire d'événements pour le bouton de couleur.

[Sections]

Ajouter un membre de couleur dans la classe de document

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

Pour ajouter un membre de couleur dans la classe de document

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

Dans scribdoc.cpp, ajoutez l'implémentation du nouveau constructeur d' CStroke .Ajoutez le code suivant après l'implémentation du constructeur d' 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();
}

Modifiez la deuxième ligne de la méthode d' CStroke::DrawStroke comme suit.
```
if (!penStroke.CreatePen(PS_SOLID, m_nPenWidth, m_penColor))
```
Définissez la couleur du stylet par défaut pour la classe de document.Dans scribdoc.cpp, ajoutez les lignes suivantes à CScribbleDoc::InitDocument, après l'instruction d' m_nThickWidth = 5; .
```
// default pen color is black
m_penColor = RGB(0,0,0); 
```
Dans scribdoc.cpp, modifiez la première ligne de la méthode d' CScribbleDoc::NewStroke au suivant.
```
CStroke* pStrokeItem = new CStroke(m_nPenWidth, m_penColor);
```
Remplacez la dernière ligne de la méthode d' CScribbleDoc::ReplacePen au suivant.
```
m_penCur.CreatePen(PS_SOLID, m_nPenWidth, m_penColor);
```
Vous avez ajouté le membre d' m_penColor dans une étape précédente.Maintenant, 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 menu en IDR_SCRIBBTYPE.
2. Cliquez avec le bouton droit sur l'élément de menu Couleur et cliquez sur ajoutez le gestionnaire d'événements….assistant Gestionnaire d'événements s'affiche.
3. Dans la zone Liste des classes dans l'Assistant, sélectionnez CScribbleDoc puis cliquez sur le bouton d' Ajouter et modifier .Cela crée le stub de gestionnaire d'événements d' CScribbleDoc::OnPenColor .

Remplacez le stub pour le gestionnaire d'événements d' 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 devez pouvoir appuyer sur le bouton de couleur et de modifier la couleur du stylet.

[Sections]

Initialisation des stylets et stocker des préférences

Ensuite, initialisez la couleur et la largeur des stylets.Enfin, d'enregistrement et chargent un dessin de couleur d'un fichier.

Pour initialiser des contrôles dans la barre de ruban

Initialisez les stylets dans la barre de ruban.

Ajoutez le code suivant à scribdoc.cpp, dans la méthode d' CScribbleDoc::InitDocument , après l'instruction d' 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 une couleur de dessin dans un fichier.Ajoutez l'instruction suivante à scribdoc.cpp, dans la méthode d' CStroke::Serialize , après l'instruction d' ar << (WORD)m_nPenWidth; .
```
ar << (COLORREF)m_penColor;
```
Enfin, chargez un dessin de couleur d'un fichier.Ajoutez la ligne de code suivante, dans la méthode d' CStroke::Serialize , après l'instruction d' m_nPenWidth = w; .
```
ar >> m_penColor;
```
Maintenant scribble en couleur et enregistrez votre dessin dans un fichier.

[Sections]

Conclusion

Vous avez mis à jour l'application scribble MFC.Utilisez cette procédure pas - à - pas de conseil lorsque vous modifiez les applications existantes.

Voir aussi

Tâches

Procédure pas - à - pas : Mettre à jour l'application scribble MFC (partie 1)

Autres ressources

Procédures pas - à - pas (MFC)

Partager via

Procédure pas - à - pas : Mettre à jour l'application scribble MFC (partie 2)

Composants requis

Sections

Ajouter de nouveaux panneaux au ruban

Pour ajouter un panneau de vue et le panneau de fenêtre et la barre de ruban

Ajouter un panneau d'aide au ruban

Pour ajouter un panneau d'aide

Ajouter un panneau de stylet au ruban

Pour ajouter un stylet aux éléments et des zones de liste déroulante du ruban

Ajouter un bouton de couleur dans le panneau de stylet

Pour ajouter un bouton de couleur dans le panneau de stylet

Ajouter un membre de couleur dans la classe de document

Pour ajouter un membre de couleur dans la classe de document

Initialisation des stylets et stocker des préférences

Pour initialiser des contrôles dans la barre de ruban

Conclusion

Voir aussi

Tâches

Autres ressources

Ressources supplémentaires