Personnalisation des menus contextuels dans Office 2010

Synthèse : La capacité à personnaliser les menus contextuels dans l’interface utilisateur Microsoft Office Fluent est une fonctionnalité souvent demandée par les développeurs. Découvrez comment personnaliser des menus contextuels et observez un exemple qui met à jour un menu contextuel existant dans Microsoft Word 2010.

Dernière modification : vendredi 24 avril 2015

Frank Rice, Microsoft Corporation

Novembre 2009

S’applique à : Excel 2010 | Office 2007 | Office 2010 | Open XML | PowerPoint 2010 | SharePoint Server 2010 | VBA | Word 2010

Sommaire

• Présentation des menus contextuels personnalisés dans Microsoft Office 2010

• Fonctionnalités et limitations de la personnalisation de menu contextuel

• Exemple de personnalisation de menu contextuel

• Conclusion

• Ressources supplémentaires

Présentation des menus contextuels personnalisés dans Microsoft Office 2010

Avant Microsoft Office 2010, le seul moyen de personnaliser des menus contextuels (menus accessibles par un clic droit) dans l’interface utilisateur du Ruban Microsoft Office Fluent était de recourir à des solutions CommandBars. Dans Office 2010, vous pouvez personnaliser des menus contextuels intégrés comme d’autres composants de l’interface utilisateur du Ruban. Ce modèle d’extensibilité de menu contextuel basé sur le langage XML repose sur le modèle d’extensibilité du Ruban bien connu. Cela signifie que vous pouvez utiliser les mêmes rappels et le même balisage XML que ceux utilisés actuellement pour personnaliser l’interface utilisateur du Ruban. De plus, l’activation des personnalisations de menus contextuels par le biais de l’extensibilité de l’interface utilisateur du Ruban n’entraîne pas de « rupture » des solutions de barre de commandes écrites précédemment. Et comme dans les scénarios d’extensibilité de l’interface utilisateur du Ruban que vous connaissez déjà, il est possible de personnaliser des menus contextuels en mettant à jour des fichiers au format Office Open XML ou en ajoutant des compléments créés dans Microsoft Visual Studio.

Notes

Pour plus d’informations sur la façon de personnaliser l’interface utilisateur du Ruban, voir la série de trois articles commençant par Personnalisation du Ruban Fluent Office 2007 pour les développeurs (Partie 1 de 3) (éventuellement en anglais)

Fonctionnalités et limitations de la personnalisation de menu contextuel

La personnalisation de menu contextuel à l’aide de l’extensibilité du Ruban offre de nombreuses options. Voici quelques-unes des fonctionnalités disponibles :

• Ajout de contrôles intégrés et personnalisés (types actuellement pris en charge dans le contrôle de menu du Ruban) à des menus contextuels intégrés comme suit :

  • Ajout de contrôles à n’importe quelle position dans le menu

  • Ajout de contrôles à n’importe quel sous-menu

  • Ajout de sous-menus personnalisés à des menus contextuels intégrés

• Masquage de contrôles dans les menus intégrés

• Ajout de lignes de séparation de menu avant ou après tout élément de menu contextuel

• Remplissage dynamique (lorsque le sous-menu est développé) des sous-menus personnalisés à l’aide d’un contrôle dynamicMenu

• Remplissage dynamique des galeries personnalisées affichées dans le menu contextuel

Les options suivantes ne sont pas disponibles lors de la personnalisation du menu contextuel :

• Ajout de types de contrôles qui ne sont pas pris en charge actuellement dans les menus contextuels tels que les zones de liste déroulante et les entrées (abordé plus loin dans cet article)

• Réassignation d’icônes et d’étiquettes de contrôles pour les contrôles de menus contextuels intégrés

• Réordonnancement des contrôles au sein des menus et des sous-menus contextuels intégrés

• Remplissage dynamique des menus contextuels intégrés

Exemple de personnalisation de menu contextuel

Pour personnaliser des menus contextuels, on utilise une grande partie des commandes et contrôles utilisés pour personnaliser l’interface utilisateur du Ruban. Voici la liste des contrôles autorisés dans les menus contextuels :

• control

• button

• checkBox

• dynamicMenu

• gallery

• menu

• menuSeparator

• splitButton

• toggleButton

Pour voir l’extensibilité de menu contextuel en action, observez l’exemple suivant. Celui-ci modifie le menu contextuel Texte présent dans Microsoft Word 2010 et effectue les actions suivantes :

• Masquage du bouton Police

• Ajout d’un bouton bascule

• Insertion d’un nouveau bouton avant le bouton Lien hypertexte

• Insertion d’une barre de séparation

• Ajout d’un menu avec un bouton

• Ajout d’un contrôle de galerie

• Ajout d’un menu dynamique (créé au moment de l’exécution) avec un bouton et un sous-menu

Dans la procédure suivante, vous ajoutez le balisage XML qu personnalise le menu contextuel Texte dans Word 2010. Il est très facile d’ajouter le balisage XML de personnalisation au document à l’aide de Custom UI Editor pour Office 14, mais sachez que ce balisage fonctionne également pour les compléments COM. Custom UI Editor est un outil gratuit créé par Trang Luu de l’équipe Microsoft Office User Experience, disponible à l’adresse OPENXMLDeveloper.org (éventuellement en anglais). Utilisez cet outil lors des étapes suivantes.

Ajout de balisage XML au document Word 2010

1. Démarrez Word 2010.

2. Ajoutez du texte au document. Dans le corps du document, tapez =rand(5, 5). Cette instruction ajoute cinq paragraphes au document, chacun avec cinq phrases de texte aléatoire.

3. Enregistrez le document en tant que fichier prenant en charge les macros sous le nom TestDocument.docm, puis fermez le fichier.

4. Démarrez l’outil Custom UI Editor d’Office 2010 et, dans le menu File, cliquez sur Open.

5. Naviguez jusqu’au document test que vous avez créé, puis cliquez sur Ouvrir.

6. Cliquez avec le bouton droit sur le nom de fichier dans le volet gauche, puis cliquez sur Insert Office 2010 Custom UI Part comme illustré à la Figure 1. Cela ajoute un composant customUI14.xml au document.

   Figure 1. Utilisation de Custom UI Editor pour insérer un composant Office 2010 dans le document

   

7. Dans le volet droit, insérez le balisage XML suivant :

   <customUI xmlns="https://schemas.microsoft.com/office/2009/07/customui">
      <contextMenus>
         <contextMenu idMso="ContextMenuText">
            <button idMso="FontDialog" visible="false" />
            <toggleButton id="MyToggle" label="My Toggle Button" />
            <button id="MyButton" label="My Button" insertBeforeMso="HyperlinkInsert" onAction="GetButtonID" />
            <menuSeparator id="MySeparator" />
            <menu id="MySubMenu" label="My Submenu" >
               <button id="MyButton2" label="Button on submenu" />
            </menu>
            <gallery id="galleryOne" label="My Gallery">
               <item id="item1" imageMso="HappyFace" />
               <item id="item2" imageMso="HappyFace" />
               <item id="item3" imageMso="HappyFace" />
               <item id="item4" imageMso="HappyFace" />
            </gallery>
            <dynamicMenu id="MyDynamicMenu" label= "My Dynamic Menu" getContent="GetMyContent" />
         </contextMenu>
      </contextMenus>
   </customUI>
   

8. Ce balisage XML ajoute des contrôles au menu contextuel Texte existant, comme indiqué par le paramètre d’attribut idMso="ContextMenuText" de la balise <contextMenu>. Ce premier bouton affecte la valeur false à l’attribut visible du bouton Police intégré, ce qui masque la commande. Après le toggleButton, on insère le second bouton avant le bouton Lien hypertexte dans le menu contextuel en fonction du paramètre insertBeforeMso="HyperlinkInsert". Après la barre menuSeparator, on ajoute un contrôle de menu avec un seul bouton. Ensuite, on ajoute un contrôle de galerie avec quatre éléments. Pour finir, lorsque le menu contextuel est affiché, le contrôle dynamicMenu appelle la méthode spécifiée dans l’attribut getContent. Comme vous le verrez, cette méthode retourne des contrôles supplémentaires au menu volant au moment de l’exécution.

9. Cliquez sur le bouton Validate dans Custom UI Editor pour vous assurer que le balisage ne contient aucune erreur. Corrigez les erreurs, si nécessaire, jusqu’à ce que le balisage n’en contienne plus et que vous receviez un message indiquant que le balisage est bien formé.

10. Enregistrez le fichier et fermez l’éditeur.

11. Insérez le code VBA suivant dans le volet de code.

      Sub GetButtonID(control As IRibbonControl)
          MsgBox ("You click the " & control.ID & " button.")
      End Sub
      Sub btnAction(control As IRibbonControl)
          MsgBox ("You clicked me!")
      End Sub
    

    On appelle ces méthodes à l’aide de deux boutons dans le menu contextuel. Notez que dans chaque méthode, un argument d’objet IRibbonControl représentant le contrôle qui a appelé la procédure est passé. L’objet IRibbonControl possède une propriété Id qui est utilisée dans la méthode GetButtonID pour déterminer lequel des boutons a appelé la procédure. La propriété Id est utile car elle permet à plusieurs contrôles d’appeler la même méthode et d’effectuer ensuite différentes tâches en fonction de l’identificateur du contrôle.

Ensuite, on ajoute du code Microsoft Visual Basic pour Applications (VBA) qui ajoute une fonctionnalité aux contrôles que l’on vient d’ajouter.

Ajouter du code VBA au document

1. Ouvrez le fichier TestDocument.docm créé lors des étapes précédentes.

2. Cliquez sur l’onglet Développeur, puis sur Visual Basic. Visual Basic Editor s’ouvre.

3. Dans le volet gauche, double-cliquez sur le nœud ThisDocument. Le volet de code s’affiche.

4. Ajoutez la méthode suivante au volet de code.

     Sub GetMyContent(control As IRibbonControl, ByRef content)
     Dim xmlString As String
     xmlString = "<menu xmlns=""" & _
           "https://schemas.microsoft.com/office/2009/07/customui"">"
     xmlString = xmlString & "<button id=""btn1"" imageMso=""HappyFace"" " & _
       " label=""Click Me"" onAction=""btnAction"" />"
     xmlString = xmlString & "<menu id=""mnu"" label=""My Dynamic Menu"" > " & _
       "<button id=""btn2"" imageMso=""RecurrenceEdit"" /> " & _
       "<button id=""btn3"" imageMso=""CreateReportFromWizard"" /> " & _
       "</menu>"
     content = xmlString & "</menu>"
   
     End Sub
   

   Cette méthode est appelée par le contrôle dynamicMenu à partir de l’attribut getContent lorsque le menu contextuel est affiché. Son rôle consiste à retourner du balisage XML qui génère un menu. Le balisage est implémenté comme s’il était codé en dur dans le balisage XML d’origine.

   Si l’on observe le code VBA, on remarque que l’on passe l’objet IRibbonControl, comme mentionné plus haut. Par ailleurs, on passe un argument content à la méthode. Cet argument ne spécifiant aucun type, le type Variant est utilisé par défaut. Cette variable contient le balisage XML retourné à Microsoft Office lorsque la méthode se termine. La chaîne XML contient un contrôle de menu et doit commencer par l’espace de noms spécifique. Chaque menu dynamique doit inclure cette ligne. Le reste du code génère une chaîne contenant les contrôles qui composent le menu qui, dans le cas présent, contient trois boutons. Pour finir, notez que la chaîne construite est assignée à la variable content qui la repasse à Office 2010 afin de l’afficher.

5. Fermez Visual Basic Editor.

6. Sélectionnez une section de texte, puis cliquez sur le bouton droit de la souris pour afficher le menu contextuel personnalisé.

En guise de référence, la Figure 2 illustre l’apparence du menu contextuel Texte avant sa personnalisation.

Figure 2. Le menu contextuel Texte standard

La Figure 3 illustre le menu contextuel Texte que vous avez créé.

Figure 3. Le menu contextuel Texte personnalisé

Conclusion

Les développeurs ont traditionnellement recours à la personnalisation des menus contextuels pour fournir des solutions personnalisées hautement contextuelles et efficaces du point de vue de la souris. La personnalisation de ces menus par le biais du modèle d’extensibilité du Ruban simplifie cette tâche, comparé à l’utilisation de barres de commandes. Nous vous encourageons à explorer les différentes combinaisons de contrôles afin de créer des interfaces utilisateur ciblées dans vos solutions Office 2010.

Ressources supplémentaires

Pour plus d’informations sur les sujets traités dans cet article, voir les ressources suivantes.

• Office 2010 Custom UI Editor (éventuellement en anglais)

• Personnalisation du Ruban Fluent Office 2007 pour les développeurs (éventuellement en anglais)

Remerciements : Je remercie mon éditrice, Linda Cannon, pour son aide lors de la préparation de la publication de cet article.