Création de dispositions SmartArt personnalisées avec Office Open XML pour Office 2007 et Office 2010

  • Article

Résumé : découvrez les composants d’une disposition de graphique SmartArt, apprenez à personnaliser des dispositions SmartArt en langage XML et à créer vos propres fichiers de disposition personnalisée. Par ailleurs, apprenez à personnaliser les galeries Couleurs et Styles SmartArt, et explorez le balisage d’une disposition personnalisée complète.

Dernière modification : vendredi 24 avril 2015

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

Dans cet article
Vue d’ensemble
Construction d’une disposition SmartArt
Mise en forme d’une disposition SmartArt
Présentation des fichiers de diagramme SmartArt
Personnalisation de graphiques SmartArt à l’aide d’Office Open XML
Création d’un fichier .glox, .gcsx ou .gqsx à partir d’un diagramme existant
Procédure pas à pas : layout1.xml
Étapes suivantes
Ressources supplémentaires
À propos de l’auteur

Publication :  février 2011

Auteur :  Stephanie Krieger

Sommaire

  • Vue d’ensemble

  • Construction d’une disposition SmartArt

  • Mise en forme d’une disposition SmartArt

  • Présentation des fichiers de diagramme SmartArt

  • Personnalisation de graphiques SmartArt à l’aide d’Office Open XML

  • Création d’un fichier .glox, .gcsx ou .gqsx à partir d’un diagramme existant

  • Procédure pas à pas : layout1.xml

  • Étapes suivantes

  • Ressources supplémentaires

  • À propos de l’auteur

Cliquez pour obtenir le code Récupérer l’exemple de code

Cliquez pour obtenir le code Télécharger les fichiers de modèles SmartArt

Vue d’ensemble

Les utilisateurs Microsoft Office créent des diagrammes dans quasiment tous les types de documents et de présentations pour illustrer les informations importantes et les rendre plus percutantes. Mais cela n’a pas toujours été une chose facile. L’introduction des graphiques SmartArt dans Microsoft Office 2007 a étendu les possibilités en matière de graphiques professionnels. En effet, les utilisateurs ont pu ainsi créer des graphiques à la fois captivants et esthétiques en tapant simplement une liste à puces.

Dans Microsoft Office 2010 (et Microsoft Office pour Mac 2011), il existe plus d’une centaine de dispositions SmartArt prédéfinies pour les différents types de diagrammes que les utilisateurs peuvent créer. Toutefois, votre entreprise peut avoir des exigences de personnalisation qui se distinguent des options proposées en matière de dispositions (il se peut également que les utilisateurs aient besoin d’un type de diagramme qui n’existe pas parmi les dispositions prédéfinies). Heureusement, les graphiques SmartArt sont extensibles, ce qui vous permet d’aider les utilisateurs à créer exactement le contenu demandé. Utilisez Office Open XML pour personnaliser des dispositions SmartArt prédéfinies ou créez des dispositions entièrement personnalisées pour vos utilisateurs.

Dans cet article, examinez la construction d’un diagramme SmartArt du début à la fin et découvrez les étapes fondamentales de la création d’une disposition SmartArt personnalisée.

Notes

Cet article suppose que vous connaissez déjà les aspects élémentaires relatifs à Office Open XML (Formats Open XML), notamment en matière de construction d’un package de documents Office Open XML de base et d’accès aux composants d’un package. Pour les développeurs qui découvrent Office Open XML, voir l’article Fondamentaux de la norme Open Packaging Conventions. Pour ceux qui découvrent Office Open XML et qui n’ont pas l’expérience du développement, voir le cours de formation en ligne gratuit Office Open XML I : Exploration des formats Office Open XML. Notez que même si les ressources et autres liens fournis dans cet article ont été écrits à l’origine pour Microsoft Office 2007, ils s’appliquent également à Office 2010.

Construction d’une disposition SmartArt

Un diagramme SmartArt est essentiellement une représentation graphique d’une liste à puces à plusieurs niveaux. Les utilisateurs peuvent ajouter des paragraphes et modifier le niveau de retrait dans le volet Texte, comme l’illustre la figure 1, pour insérer des formes et configurer le diagramme. Plus d’une centaine de dispositions sont disponibles dans Office 2010. Elles couvrent un large éventail de catégories de diagrammes : diagrammes de liste, diagrammes de processus, diagrammes hiérarchiques et diagrammes cycliques.

Figure 1 : Les utilisateurs créent des diagrammes SmartArt en ajoutant des puces et en modifiant les niveaux dans le volet Texte.

Diagrammes SmartArt créés par les utilisateurs

En tant que développeur, vous devez avoir à l’esprit deux éléments clés concernant les graphiques SmartArt du point de vue de l’utilisateur : les catégories de diagrammes disponibles et le mode de création du diagramme en fonction de la saisie effectuée par l’utilisateur.

La plupart des diagrammes suivent une structure ou un modèle qui leur permet de présenter visuellement les informations de manière plus efficace que du simple texte. Par exemple, comme l’illustre la figure 2, un organigramme suit un modèle hiérarchique pour représenter visuellement la hiérarchie d’une organisation. De même, un diagramme cyclique représente visuellement la relation cyclique qui existe entre les étapes d’un processus. Ces modèles ou structures sont des types de logiques relatives aux diagrammes.

Figure 2 : Exemples d’un organigramme SmartArt simple et d’un diagramme cyclique de base.

Exemples d’organigrammes SmartArt simples

La fonctionnalité SmartArt prend en charge de nombreux types de logiques basées sur les diagrammes. Par exemple, un diagramme peut être linéaire, cyclique ou hiérarchique. Il peut changer de direction à la fin de la zone de dessin. Peu importe le type de diagramme, chaque disposition SmartArt doit suivre au moins un modèle logique.

Figure 3 : Exemples de relations entre ce que l’utilisateur tape dans le volet Texte et ce qui est dessiné dans le diagramme.

Exemple de relations

Lorsque vous concevez une disposition, le texte de deuxième niveau peut apparaître dans la forme principale sous votre texte de premier niveau, il peut également apparaître dans sa propre forme ou ne pas être autorisé à apparaître. Vous pouvez disposer de formes dans lesquelles les utilisateurs peuvent ajouter des images plutôt que du texte, ou de formes purement décoratives qui n’acceptent aucun contenu et qui sont réservées à des fins esthétiques.

Mise en forme d’une disposition SmartArt

Lorsque vous insérez une disposition SmartArt dans un document, la mise en forme par défaut correspond généralement à la première couleur d’accentuation du thème appliqué au document et à un simple remplissage sans effets de mise en forme graphique supplémentaires. L’utilisateur peut ensuite mettre en forme facilement le diagramme en sélectionnant les options de son choix dans les galeries Styles SmartArt et Couleurs SmartArt.

La mise en forme SmartArt est liée au thème du document actif. Ainsi, par exemple, si vous travaillez pour une organisation qui applique des consignes spécifiques en matière de personnalisation des documents, vous pouvez créer un thème personnalisé qui inclut les couleurs de la marque et les préférences relatives à la mise en forme graphique. (Pour en savoir plus sur les thèmes et pour consulter une introduction destinée aux développeurs sur la façon de créer ses propres thèmes personnalisés, voir l’article Création de thèmes de document à l’aide des formats Office Open XML.)

Sous l’onglet Outils SmartArt - Création dans Office 2010 (ou sous l’onglet SmartArt dans Office pour Mac 2011) se trouvent les galeries Styles SmartArt et Couleurs SmartArt.

  • La galerie Styles SmartArt illustrée dans la figure 4 contient les styles d’effets de mise en forme graphique. La ligne supérieure qui s’y trouve utilise l’effet spécifié dans le thème appliqué à votre document.

  • La galerie Couleurs SmartArt illustrée dans la figure 4 contient une plage de combinaisons de couleurs basées sur les couleurs du thème appliqué à votre document.

Les options de ces galeries sont remplies automatiquement par Microsoft Office à l’aide des paramètres du thème actif. Vous ne pouvez pas modifier les options prédéfinies que vous voyez ici. Toutefois, vous pouvez ajouter vos propres entrées personnalisées dans ces galeries lorsque les utilisateurs ont des exigences auxquelles les options prédéfinies ne peuvent pas répondre. Apprenez à créer votre propre couleur personnalisée et des fichiers de styles rapides plus loin dans cet article.

Figure 4 : Les galeries Couleurs et Styles SmartArt

Galeries de styles et de couleurs SmartArt

Présentation des fichiers de diagramme SmartArt

Les fichiers de diagramme SmartArt permettent au développeur de travailler de deux façons principales :

  • Les composants de diagramme SmartArt font partie du package ZIP d’un fichier PowerPoint, Word ou Excel dans lequel des diagrammes ont été insérés par un utilisateur. Lorsque vous voulez personnaliser les options d’un diagramme qui existe déjà dans un document utilisateur, par exemple une diapositive d’un modèle PowerPoint personnalisé, vous devez utiliser ces fichiers.

  • Les fichiers de disposition SmartArt sont des fichiers Office Open XML qui portent l’extension .glox. Ces fichiers sont à la base de l’interface utilisateur SmartArt dans PowerPoint, Word et Excel. Lorsque vous créez une disposition SmartArt personnalisée, vous devez créer ce type de fichier.

    Notes

    (L’utilisation des termes interface utilisateur SmartArt dans cet article fait référence à la boîte de dialogue SmartArt, ainsi qu’à la galerie Dispositions SmartArt dans Office 2010 et à la galerie Insérer un graphique SmartArt dans Office pour Mac 2011.)

Outre ces deux approches de base en matière d’utilisation du format Office Open XML pour les graphiques SmartArt, vous pouvez également créer des fichiers de couleurs personnalisées (.gcsx) et des fichiers de styles rapides (.gqsx) pour ajouter des entrées personnalisées aux galeries Couleurs et Styles SmartArt.

Les fichiers .glox, .gcsx et .gqsx des styles et dispositions SmartArt prédéfinis ne sont pas exposés lors de l’installation de Microsoft Office. Toutefois, les fichiers .glox de l’ensemble des dispositions SmartArt prédéfinies sont téléchargeables à partir de la rubrique Ressources supplémentaires située à la fin de cet article. En outre, vous pouvez prendre connaissance des étapes nécessaires, plus loin dans cet article, pour créer vos propres fichiers à partir des composants de diagramme d’un package de documents Office 2010 (ou Office pour Mac 2011).

Exploration des composants XML d’un diagramme

Un diagramme SmartArt dans un fichier de document Microsoft Office comprend cinq composants, comme vous pouvez le voir dans la figure 5.

Figure 5 : Package de présentation PowerPoint développé pour illustrer les composants de diagramme.

Présentation PowerPoint

Il est important de bien comprendre ce que contient chaque composant et ce que vous avez la possibilité de personnaliser pour l’utilisateur. Toutefois, en tant que développeur, considérez que le composant des dispositions est celui qui correspond le mieux aux dispositions personnalisées SmartArt que vous créez.

  • Le fichier data#.xml contient les informations relatives aux données d’espace réservé (par exemple le « [Texte] » par défaut que vous voyez dans les exemples de formes lorsque vous générez un nouveau diagramme), ainsi que le contenu que l’utilisateur a ajouté au diagramme. En d’autres termes, ce fichier stocke tous les éléments du volet Texte SmartArt qui correspondent au diagramme.

  • Le fichier drawing#.xml décrit tout ce qui concerne l’aspect visuel du diagramme, par exemple le nombre de formes qu’il contient et la disposition de ces formes.

  • Le fichier layout#.xml contient les informations du fichier .glox SmartArt d’origine qui correspond à la disposition que l’utilisateur a sélectionnée dans l’interface utilisateur SmartArt pour créer son diagramme. Ce fichier détermine le type du diagramme et son mode de création.

  • Le fichier colors#.xml contient les définitions de couleurs utilisées dans cette instance du diagramme, en fonction de la sélection active dans la galerie Couleurs SmartArt. Ces informations incluent les définitions de couleurs de chaque étiquette de style SmartArt disponible.

    Une étiquette de style est un attribut que vous appliquez à chaque nœud de votre disposition pour spécifier des informations relatives à sa mise en forme. (Pour en savoir plus sur les étiquettes de style SmartArt, voir plus loin dans cet article.)

  • Le fichier quickStyle#.xml contient les définitions de styles rapides utilisées dans cette instance du diagramme, en fonction de la sélection active dans la galerie Styles SmartArt. À l’instar du fichier de couleurs, il inclut les définitions modifiables de chaque étiquette de style disponible.

Notez que la liste à puces précédente utilise le signe dièse à la place du chiffre 1 dans les noms de fichiers. En effet, le numéro indiqué dans les noms de fichiers de la figure 5 fait référence au premier diagramme du document. S’il existe plusieurs diagrammes, tous leurs composants apparaissent dans le sous-dossier diagrams et sont numérotés de manière consécutive.

Dans la prochaine section, découvrez à l’aide d’exemples comment interagir avec les fichiers layout, colors et quickStyle pour personnaliser le contenu SmartArt destiné aux utilisateurs dans des documents ou des modèles. Apprenez ensuite à extraire et modifier ces trois fichiers pour commencer à créer vos propres dispositions personnalisées et pour ajouter des entrées personnalisées dans les galeries Couleurs et Styles rapides.

Exploration des composants d’un fichier .glox

Un fichier de disposition SmartArt (.glox) est une version simplifiée des packages de documents Office Open XML que vous connaissez peut-être déjà. Comme vous le voyez dans la figure 6, il comprend un fichier [Content_Types].xml, un dossier _rels, ainsi qu’un dossier diagrams qui contient les composants de diagramme principaux.

Figure 6 : Composants d’un fichier .glox

Composants d’un fichier .glox

Comme pour un package de documents Office Open XML, le fichier [Content_Types].xml contient une définition pour chaque partie de document principale et une définition pour chaque extension de type de fichier incluse dans le package. Dans un package .glox, ce fichier contient juste une définition de nom de composant, qui correspond au fichier layout1.xml, ainsi que deux définitions d’extension pour les fichiers XML et de relations, comme vous le voyez ici.

<?xml version="1.0" encoding="utf-8"?>
<Types xmlns="https://schemas.openxmlformats.org/package/2006/content-types">
  <Default Extension="xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramLayoutHeader+xml" />
  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
  <Override PartName="/diagrams/layout1.xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml" />
</Types>

Par ailleurs, comme le montre n’importe quel package Office Open XML, vous disposez du dossier _rels (relation) requis qui contient un fichier .rels, lequel décrit les relations entre les composants du package. Dans un fichier .glox, le fichier .rels contient les relations du fichier de disposition et de l’en-tête de disposition, comme vous pouvez le voir ici.

<?xml version="1.0" encoding="utf-8"?><Relationships xmlns="https://schemas.openxmlformats.org/package/2006/relationships">
<Relationship Type="https://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramLayoutHeader" Target="/diagrams/layoutHeader1.xml" Id="rId1" />
<Relationship Type="https://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramLayout" Target="/diagrams/layout1.xml" Id="rId2" />
</Relationships>

Le fichier layoutheader1.xml contient un ID unique ainsi que des détails sur la disposition pour l’interface utilisateur SmartArt, comme vous pouvez le voir dans le balisage ci-après. L’ID doit être unique pour chaque disposition que vous créez, sinon le chargement ne pourra pas s’effectuer. Le titre et la description sont utilisés dans l’aperçu qui s’affiche au sein de la boîte de dialogue SmartArt dans Office 2010, comme l’illustre la figure 7.

Notez que le balisage de l’en-tête comprend une balise cat pour la catégorie dans laquelle la disposition apparaît. Vous pouvez ajouter plusieurs balises cat dans la balise catLst pour afficher la disposition dans plusieurs catégories. Notez également l’attribut pri (priorité) dans la balise cat (catégorie), qui indique l’emplacement du graphique dans la boîte de dialogue et la galerie Layouts. Plus le nombre est faible, plus le diagramme est placé en début de liste. Comme l’illustre la figure 4, la valeur 100 permet de placer le diagramme au début de la catégorie Liste.

<?xml version="1.0" encoding="utf-8"?>
<layoutDefHdr uniqueId="Simple Snip Corner List_10_2010" xmlns="https://schemas.openxmlformats.org/drawingml/2006/diagram">
    <title val="Snip Corner List" />
    <desc val="Simple custom list layout with a single node and no connectors. This linear layout adds shapes from left to right, reducing the size of all shapes as more are added." />
    <catLst>
        <cat type="list" pri="100" />
    </catLst>
</layoutDefHdr>

Figure 7 : Aperçu d’un diagramme dans la boîte de dialogue SmartArt.

Aperçu du diagramme

Le fichier layout1.xml est le composant qui contient les instructions complètes pour votre disposition. Parcourez le contenu du fichier layout1.xml pour plus d’informations sur la liste personnalisée simple illustrée à la figure 7, plus loin dans cet article.

Notes

Remarque : si vous utilisez l’outil Open XML Package Editor Power Tool pour Visual Studio 2010, vous pouvez ouvrir un fichier .glox dans Visual Studio afin de voir et de gérer plus clairement les relations de package, comme illustré dans la figure 8. Cet outil peut vous faire gagner beaucoup de temps lorsque vous créez et modifiez un package au format Office Open XML. En savoir plus et télécharger l’outil ici.

Figure 8 : Composants d’un fichier .glox illustrés dans l’éditeur OPC pour Visual Studio 2010

Composant affichés dans l’éditeur OPC

Personnalisation de graphiques SmartArt à l’aide d’Office Open XML

Une fois que vous êtes habitué au balisage des diagrammes SmartArt, vous pouvez personnaliser quasiment n’importe quel élément de diagramme présent dans un document Microsoft Office, qu’il s’agisse des styles, de la mise en forme, du type des formes ou de leur comportement.

Les exemples de tâches de personnalisation de cette section sont destinés à illustrer les concepts applicables lors de la personnalisation d’un diagramme existant et lors de la création de vos propres fichiers .glox, .gcsx et .gqsx.

Modification des formes

L’une des modifications les plus simples et les plus souvent demandées pour les diagrammes SmartArt concerne le type de forme utilisé. Par exemple, les utilisateurs trouvent les organigrammes particulièrement pratiques mais l’entreprise a des exigences de personnalisation qui n’autorisent pas l’emploi de bords à angle droit (par exemple un rectangle standard) pour les graphiques.

Un utilisateur peut sélectionner toutes les formes d’un graphique existant, puis utiliser la commande Modifier la forme sous l’onglet Outils SmartArt - Format pour modifier les formes comme il le souhaite. Toutefois, si de nouvelles formes sont ensuite ajoutées au diagramme, elles sont rétablies en fonction des formes indiquées dans la disposition. Par conséquent, pour modifier toutes les formes actuelles et ultérieures du diagramme, apportez la modification appropriée dans le fichier layout#.xml.

Notes

La plupart des dispositions d’organigramme prédéfinies utilisent un rectangle classique comme forme principale. La plupart des dispositions prédéfinies de la catégorie Hiérarchie illustrée dans la figure 9 ressemblent à des organigrammes, mais beaucoup n’en sont pas. Les dispositions qui incluent le mot hiérarchie dans leur nom ont un comportement semblable à celui d’un organigramme mais elles n’ont pas de fonctionnalités spécifiques aux organigrammes, par exemple la possibilité d’ajouter des formes Assistant ou de modifier la disposition des branches. Par conséquent, il peut s’avérer pertinent pour les utilisateurs de personnaliser les formes d’une disposition d’organigramme même si une disposition de hiérarchie prédéfinie utilise déjà les formes requises.

Figure 9: Catégorie de hiérarchie des dispositions SmartArt intégrées

Catégorie hiérarchie des dispositions SmartArt intégrées

  1. Si vous ne connaissez pas le nom du type de forme que vous souhaitez pour la nouvelle forme, vous pouvez soit le chercher dans la documentation relative au format de fichier (voir la Norme ECMA 376 sur le site ecma-international.org), soit insérer une forme du type requis dans une diapositive vide d’une présentation PowerPoint, puis examiner le balisage de cette diapositive pour identifier le type de forme.

    Si vous insérez la forme dans une diapositive pour trouver le nom du type de forme drawingML, recherchez dans la partie de document de la diapositive correspondante la balise a:prstGeom pour trouver le nom du type.

  2. Dans le fichier layout#.xml du diagramme que vous souhaitez personnaliser, pour trouver le nom du type de forme que vous remplacez, recherchez les balises shape afin de localiser une balise qui contient l’attribut type. Par exemple, notez que le type de forme « roundRect » dans le balisage suivant fait référence à un rectangle arrondi.

    <dgm:shape type="roundRect" xmlns:r="https://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">
            <dgm:adjLst>
              <dgm:adj idx="1" val="0.1667"/>
            </dgm:adjLst>
          </dgm:shape>

  3. Utilisez la commande Remplacer de l’Éditeur pour remplacer le nom de forme existant par le nouveau nom de forme souhaité. Le nombre d’instances du nom du type de forme peut varier en fonction du type de diagramme.

    Si le type de diagramme contient plusieurs nœuds pour les formes (par exemple une forme pour le contenu de niveau 1 et une forme distincte pour le contenu de niveau 2) et si vous voulez remplacer uniquement les formes d’un nœud spécifique, notez que la balise shape qui contient l’attribut type est imbriquée dans une balise layoutNode. Cette balise layoutNode inclut les attributs name et styleLbl d’un nœud, afin de faciliter l’identification du nœud que vous modifiez.

    Ainsi, dans l’exemple de balisage suivant, notez la présence de layoutNode et styleLbl à la première ligne. Dans ce cas, le nom est très explicite. Toutefois, si vous n’avez pas obtenu assez d’informations sur le nœud à partir du nom, vous pouvez également déduire l’identité du nœud à partir de l’étiquette de style. Pour plus d’informations sur les étiquettes de style, voir la prochaine section.

    <dgm:layoutNode name="firstChild" styleLbl="bgAccFollowNode1">
            <dgm:alg type="sp"/>
            <dgm:shape type="rect" xmlns:r="https://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">
              <dgm:adjLst/>
            </dgm:shape>
            <dgm:presOf axis="ch desOrSelf" ptType="node node" cnt="1 0"/>
            <dgm:constrLst/>
            <dgm:ruleLst/>
          </dgm:layoutNode>

Modification des couleurs

Bien sûr, un utilisateur peut sélectionner une forme dans un diagramme pour en modifier la couleur. Mais lorsque l’utilisateur ajoute de nouvelles formes au diagramme, les couleurs des nouvelles formes utilisent le style de couleur SmartArt appliqué (à savoir, la sélection effectuée dans la galerie Couleurs SmartArt). À l’instar de la modification de formes dans une disposition, si vous voulez que les couleurs des diagrammes se différencient par défaut des couleurs disponibles dans la galerie Couleurs SmartArt, modifiez les couleurs dans le code XML.

Comme indiqué auparavant, chaque option de la galerie Couleurs SmartArt contient un ensemble de définitions relatives à l’apparence des formes avec chaque étiquette de style. Par exemple, si vous utilisez la disposition prédéfinie Venn simple pour créer un diagramme de Venn, le remplissage de la forme est translucide. Ce remplissage transparent est fourni par l’étiquette de style vennNode1. Par conséquent, si vous devez créer une disposition Venn qui n’utilise pas de remplissage transparent, remplacez juste la valeur du nom de l’étiquette de style dans la balise layoutNode appropriée.

Notes

Lorsque vous créez vos propres dispositions personnalisées, si vous n’appliquez pas d’étiquettes de style, les étiquettes par défaut sont utilisées pour déterminer l’apparence de la couleur et du style rapide. Les étiquettes de style par défaut varient selon le type de forme. Par exemple, dans un diagramme de liste à un seul niveau, comme la disposition Liste de blocs simple (qui apparaît au début de la catégorie Liste dans la boîte de dialogue SmartArt par défaut), l’étiquette de style par défaut est node1. Ce style permet un changement des couleurs des nouvelles formes lorsqu’une option de la galerie Couleurs SmartArt utilisant une plage de remplissages est sélectionnée.

Consultez le tableau Étiquettes de style dans la référence du développeur SmartArt pour obtenir une liste complète des étiquettes de style avec leurs descriptions, des exemples visuels et leur finalité. Par exemple, ce tableau vous montre que l’étiquette de style référencée dans l’exemple de balisage précédent, « bgAccFollowNode1 », indique une forme secondaire, comme celle qui sert à afficher du texte enfant.

L’une des demandes que j’entends le plus souvent de la part des utilisateurs est la possibilité d’afficher automatiquement la couleur de thème Accent 1 en tant que première forme d’un diagramme qui utilise une gamme de couleurs d’accentuation de thème. En règle générale, la première couleur d’accentuation d’un thème qui utilise une personnalisation d’entreprise représente la couleur de personnalisation principale de l’entreprise.

Par défaut, de nombreuses dispositions n’affichent pas la couleur Accent 1 lorsqu’une option de couleur est sélectionnée dans la galerie Couleurs SmartArt. En effet, cette couleur est réservée à certaines finalités où elle doit toujours être la première couleur, par exemple pour la forme la plus élevée dans un organigramme ou pour la forme centrale d’un diagramme radial. En règle générale, node0 est l’étiquette de style utilisée dans ce cas et la couleur ne varie pas avec cette étiquette de style. Toutefois, vous pouvez modifier le composant colors#.xml du diagramme pour faciliter ce changement de sorte que la rotation des formes d’accentuation commence automatiquement par l’accent 1.

Figure 10 : Diagramme Liste de blocs simple utilisant la première option Couleur dans la galerie Couleurs SmartArt et qui commence par l’accent 2.

Diagramme Liste de blocs simple

Pour les besoins de cet exemple, insérez un diagramme Liste de blocs simple dans une diapositive et appliquez la première option Couleur de la galerie Couleurs SmartArt, comme l’illustre la figure 10. Fermez ensuite le fichier et ouvrez le package de documents ZIP pour modifier le code XML.

Notes

Une présentation qui contient un diagramme Liste de blocs simple par défaut et les autres dispositions prédéfinies référencées en tant qu’exemples dans cet article font partie de l’exemple à télécharger.

  1. Ouvrez le fichier colors#.xml associé au diagramme Liste de blocs simple que vous venez de créer.

  2. Faites défiler la liste vers le bas ou recherchez l’onglet styleLbl du style node1 (il s’agit du second style listé dans le fichier). Le contenu de cette balise styleLbl inclut des informations sur la couleur de remplissage et de trait, ainsi que les balises disponibles pour les informations de couleur supplémentaires (par exemple la couleur de remplissage du texte), comme indiqué ici.

    <dgm:styleLbl name="node1">
    <dgm:fillClrLst meth="repeat">
      <a:schemeClr val="accent2"/>
      <a:schemeClr val="accent3"/>
      <a:schemeClr val="accent4"/>
      <a:schemeClr val="accent5"/>
      <a:schemeClr val="accent6"/>
    </dgm:fillClrLst>
    <dgm:linClrLst meth="repeat">
      <a:schemeClr val="lt1"/>
    </dgm:linClrLst>
    <dgm:effectClrLst/>
    <dgm:txLinClrLst/>
    <dgm:txFillClrLst/>
    <dgm:txEffectClrLst/>
</dgm:styleLbl>

    Notez que l’attribut meth (méthode) dans fillClrLst a la valeur repeat. Cela signifie que chaque forme ultérieure doit utiliser la prochaine couleur d’accentuation de la liste et revenir ensuite au début de la liste après en avoir atteint la fin. Vous pouvez constater également la présence de définitions d’étiquettes de style qui utilisent la méthode span. Cette méthode permet de créer une gamme de couleurs à l’aide des formes des couleurs d’accentuation de la liste (à l’image d’une roue chromatique).

  3. Notez que la balise de liste de couleurs de remplissage (dgm:fillClrLst) dans le balisage précédent commence par la couleur de thème Accent 2. Ajoutez une nouvelle ligne au-dessus de la balise de couleur du jeu Accent 2 pour Accent 1.

    <a:schemeClr val="accent1"/>

    Une fois que vous avez terminé, six balises schemeClr doivent être imbriquées dans la balise de liste de couleurs de remplissage. Cela signifie que la première forme du diagramme utilise le remplissage Accent 1 et que les formes du diagramme répètent la gamme des six couleurs d’accentuation du thème au fur et à mesure que des formes sont ajoutées.

  4. Dans la mesure où node1 est l’étiquette de style par défaut utilisée pour ce diagramme, vous n’avez rien de plus à faire pour rouvrir la présentation dans PowerPoint et constater la modification du diagramme. De même, si vous modifiez les couleurs d’un autre diagramme, vous pouvez examiner le contenu du fichier layout#.xml pour identifier les étiquettes de style utilisées et modifier les couleurs de ces styles.

    Toutefois, si l’utilisateur souhaite remplacer la disposition du diagramme actif par une autre disposition SmartArt basée sur des étiquettes de style distinctes, parcourez la liste de toutes les étiquettes de style du fichier de couleurs, puis ajoutez Accent 1 tout au long, chaque fois qu’une liste de couleurs se répète.

    Si vous procédez ainsi, notez que la balise schemeClr de certaines étiquettes de style est une balise imbriquée qui contient des attributs. Par exemple, le style vennNode1 inclut un attribut de transparence pour chaque couleur spécifiée, indiquée par la balise alpha illustrée ici. Lorsque vous ajoutez une balise pour la couleur Accent 1, veillez à ajouter également les attributs requis pour des raisons de cohérence.

          <a:schemeClr val="accent2">
        <a:alpha val="50000"/>
      </a:schemeClr>

Lorsque vous rouvrez la présentation dans PowerPoint, vous voyez les couleurs modifiées dans le diagramme existant. Toutefois, notez que la galerie Couleurs SmartArt est inchangée. Pour ajouter des options à la galerie, que les utilisateurs peuvent appliquer à n’importe quel diagramme SmartArt d’un document, créez un fichier .gcsx personnalisé comme indiqué plus loin dans cet article.

Modification du comportement

Les règles et les contraintes présentes dans le fichier layout#.xml régissent les paramètres des formes et des relations au sein de la disposition, par exemple les marges, l’espacement entre les formes, la taille de police minimale et maximale, ainsi que la hauteur ou la largeur des formes.

Par exemple, insérez un nouveau graphisme dans une présentation en utilisant la disposition Liste de largeur variable (par défaut, dans Office 2010, cette disposition est la huitième entrée dans la catégorie Liste de la boîte de dialogue SmartArt). Cette liste verticale simple permet de rendre indépendante l’augmentation de la largeur de chaque forme.

Si vous examinez le composant layout#.xml d’un diagramme Liste de largeur variable, vous trouverez plusieurs sections dans le balisage contenant les contraintes et les règles. Dans une disposition, les contraintes et les règles sont relatives au nœud auquel elles appartiennent.

Le premier ensemble de contraintes que vous voyez définit plusieurs paramètres pour la totalité du diagramme (nœud de disposition racine). Notez la troisième contrainte de la liste, qui indique la taille de police maximale (en points) autorisée dans le diagramme illustré ici. Par défaut, la taille de police des diagrammes SmartArt est dynamique, en fonction de la quantité de contenu ajoutée par l’utilisateur. La valeur employée dans l’exemple ci-après empêche la taille de police de dépasser automatiquement 65 points lorsque l’utilisateur modifie du texte.

(Notez que cette valeur n’empêche pas l’utilisateur d’appliquer manuellement une taille de police supérieure. Lorsqu’un utilisateur applique une taille de police manuellement, le redimensionnement automatique ne se produit plus dans cette instance du diagramme.)

    <dgm:constr type="primFontSz" for="ch" forName="text" op="equ" val="65"/>

Un peu plus bas dans le fichier, vous pouvez voir les contraintes et les règles qui affectent les formes principales au sein du diagramme. Notez ici en particulier les contraintes et les règles en matière de marges.

<dgm:constrLst>
    <dgm:constr type="tMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="bMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="lMarg" refType="primFontSz" fact="0.2"/>
    <dgm:constr type="rMarg" refType="primFontSz" fact="0.2"/>
</dgm:constrLst>
<dgm:ruleLst>
    <dgm:rule type="w" val="INF" fact="NaN" max="NaN"/>
    <dgm:rule type="primFontSz" val="5" fact="NaN" max="NaN"/>
</dgm:ruleLst>

Après avoir essayé d’effectuer les tâches de cette section pour personnaliser un diagramme via le code XML, vous aurez probablement une idée plus précise des composants XML d’un diagramme. Au fil de votre exploration des sections restantes, n’oubliez pas que le contenu des composants de diagramme que vous modifiez pour une instance existante d’un diagramme est fondamentalement identique à celui que vous utilisez lorsque vous créez vos propres dispositions ou lorsque vous modifiez les galeries Couleurs et Styles SmartArt. Par conséquent, vous en savez déjà beaucoup sur les éléments requis pour aborder les étapes suivantes.

Création d’un fichier .glox, .gcsx ou .gqsx à partir d’un diagramme existant

Si vous voulez créer une disposition personnalisée qui ressemble à une disposition existante mais si vous n’avez pas accès au fichier .glox, vous pouvez gagner du temps en créant un fichier .glox qui utilise le composant layout#.xml pour une instance existante du diagramme à copier. De même, vous pouvez utiliser les composants des couleurs et des styles rapides dans un diagramme existant pour gagner du temps en créant vos propres fichiers .gcsx et .gqsx.

Création d’un fichier .glox

La première des deux procédures suivantes décrit la création du package .glox. Toutefois, vous devez suivre les étapes de la seconde procédure pour modifier le fichier layout1.xml afin que votre nouveau fichier .glox puisse être utilisable en tant que disposition.

Notez que l’exemple de la seconde procédure utilise le fichier layout#.xml pour la disposition Liste de blocs simple.

Relisez la section relative à l’exploration des composants d’un fichier .glox pour identifier les fichiers et dossiers que vous devez créer. Dans cette section, vous trouverez également le balisage nécessaire pour le fichier [Content_Types].xml, le fichier .rels et le fichier layoutHeader1.xml au cours des étapes suivantes.

Pour créer un package .glox

  1. Créez le fichier [Content_Types].xml en utilisant le balisage fourni précédemment.

  2. Créez des dossiers nommés _rels et diagrams.

    • Dans le dossier _rels, ajoutez le fichier .rels en utilisant le balisage fourni précédemment.

    • Dans le dossier diagrams, ajoutez le fichier layoutHeader1.xml en utilisant le balisage fourni précédemment.

  3. Dans le fichier layoutHeader1.xml, modifiez le balisage afin de vous assurer que vous avez spécifié un ID unique et afin de donner un titre et une description à la nouvelle disposition. Vous pouvez également être amené à modifier la liste des catégories et les priorités selon vos besoins pour le type de diagramme que vous créez.

  4. Extrayez le composant layout#.xml pour la disposition que vous voulez copier à partir du document Microsoft Office, dans lequel vous avez inséré une instance de ce diagramme. Si le diagramme n’était pas le premier dans le document dont vous avez extrait le composant, renommez le fichier layout1.xml.

  5. Ajoutez le fichier layout1.xml au dossier diagrams que vous avez créé à l’étape 2. La prochaine procédure de cette section vous montre quelles sont les modifications nécessaires à apporter à ce fichier pour que le nouveau package .glox fonctionne en tant que disposition SmartArt.

  6. Sélectionnez le fichier de types de contenu ainsi que les deux dossiers que vous avez créés et compressez-les dans un dossier ZIP. Remplacez ensuite l’extension de fichier du package zip par l’extension .glox.

Pour modifier un fichier layout1.xml afin de l’utiliser dans un fichier .glox

  1. Une fois le fichier layout1.xml ouvert pour être modifié, recherchez le préfixe dgm:, puis effectuez un remplacement global de ce dernier sans indiquer de valeur de remplacement. Par conséquent, la balise <dgm:layoutDef… devient par exemple <layoutDef….

  2. Modifiez la balise de définition de disposition (première ligne située sous la référence à la version XML au début du fichier) afin d’inclure uniquement la définition d’espace de noms d’un diagramme, sans référence au composant :dgm. La ligne modifiée doit ressembler au balisage suivant.

    <layoutDef xmlns ="https://schemas.openxmlformats.org/drawingml/2006/diagram">

    Notes

    Les étapes précédentes sont les seules étapes que vous devez entreprendre pour rendre le fichier .glox techniquement utilisable. Toutefois, les étapes restantes sont recommandées pour faciliter les modifications et garantir un comportement cohérent lors de la personnalisation de la présentation.

  3. Si les balises title, description et category apparaissent directement sous la balise de définition de disposition, supprimez-les. Si vous les laissez, cela n’empêchera pas le fichier de fonctionner mais ces informations apparaîtront dans le composant layoutHeader1.xml du package .glox.

  4. Vous pouvez remplacer les balises des données relatives aux exemples (sampData), aux styles (styleData) et aux couleurs (clrData) par votre propre contenu, mais il n’est pas nécessaire de le faire à ce stade.

  5. Ces balises sont techniquement optionnelles (en d’autres termes, le chargement du fichier .glox s’effectue sans ces dernières). Toutefois, elles sont nécessaires, car elles permettent d’afficher les aperçus dans la boîte de dialogue SmartArt, la galerie Styles SmartArt et la galerie Couleurs SmartArt, respectivement. Les exemples de données permettent également d’activer les formes de démarrage qui apparaissent lorsque l’utilisateur insère le diagramme pour la première fois. Par conséquent, vous pouvez modifier ces balises ultérieurement si ce que vous voyez dans les aperçus et les espaces réservés activés par ces balises ne correspond plus à vos attentes, une fois la disposition personnalisée. Pour en savoir plus sur les balises des exemples de données, des styles et des couleurs, voir la section Procédure pas à pas.

  6. Même si le fichier .glox fonctionne dans la plupart des cas, à ce stade, vous devez encore apporter quelques modifications recommandées pour nettoyer le fichier de disposition et le rendre facile à modifier. En l’occurrence, notez ce qui suit :

    • Les balises shape incluent des informations de relation qui s’appliquent à l’instance du diagramme d’un document et non à une disposition. Il est recommandé de parcourir le balisage et de nettoyer le fichier de disposition en supprimant ces informations inutiles. Par exemple, la balise présentée ici, qui contient les attributs relatifs à l’espace de noms et au spot, est la balise d’ouverture d’une balise associée, car elle ne contient aucune barre oblique à la fin de la balise.

      <shape xmlns:r="https://schemas.openxmlformats.org/officeDocument/2006/relationships" r:blip="">

      Remplacez la balise indiquée ici par la balise <shape> dans le fichier de disposition. Toutefois, si la balise shape d’origine n’a pas de balise associée (c’est-à-dire qu’une barre oblique apparaît à la fin de cette balise sans qu’il y ait de balise de fin dans le fichier), veillez à laisser la barre oblique lorsque vous supprimez les attributs inutiles de cette balise. N’enlevez pas les balises imbriquées dans une balise shape, même si elles sont vides. Certaines d’entre elles peuvent être requises.

    • Si une balise shape qui inclut le type de forme ne contient pas d’étiquette de style, il est préférable d’en ajouter une. Comme indiqué précédemment, les formes utilisent les étiquettes de style appropriées en l’absence de spécification. Toutefois, la spécification d’étiquettes de style vous donne un meilleur contrôle de l’apparence du diagramme. Pour ce faire, recherchez les balises layoutNode des nœuds de forme et ajoutez l’attribut styleLbl au sein de cette balise.

      Par exemple, si vous utilisez le fichier de disposition Liste de blocs simple comme dans l’exemple présenté ici, la balise qui doit contenir une étiquette de style est <layoutNode name="node">. Pour affecter l’étiquette de style node1 aux formes contenues dans ce nœud, modifiez la balise comme indiqué ici.

      <layoutNode name="node" styleLbl="node1">

Avant de commencer à personnaliser votre nouveau fichier .glox, enregistrez-le dans le dossier utilisateur SmartArt par défaut, puis ouvrez la boîte de dialogue SmartArt dans un programme Office 2010 pour vérifier si le fichier se charge correctement dans la boîte de dialogue et s’il peut être inséré dans un document.

  • L’emplacement par défaut du dossier SmartArt pour Office 2010 sur Microsoft Windows 7 ou Windows Vista est C:\Users\[nom_utilisateur]\AppData\Roaming\Microsoft\Templates\SmartArt Graphics.

  • Si votre nouveau fichier est également utilisé dans Office pour Mac 2011 (toutes les dispositions SmartArt sont compatibles avec toutes les plateformes), le chemin d’accès du contenu SmartArt personnalisé sur Mac OS est /Utilisateurs/[nom_utilisateur]/Library/Application Support/Microsoft/Office/SmartArt Graphics.

Création de fichiers .gcsx et .gqsx

Le processus de création des fichiers .gcsx et .gqsx ressemble au processus de création d’un fichier .glox. Les deux procédures qui suivent vous montrent les étapes de création d’un package .gcsx et expliquent les différences par rapport au package .gqsx.

Même si les étapes et la composition des fichiers/dossiers du package ressemblent fortement aux étapes de création d’un fichier .glox, ces étapes sont répétées ici, car il existe des différences pour certains noms de fichiers et en matière de balisage à chaque étape.

Pour créer un package .gcsx et .gqsx

  1. Créez le fichier [Content_Types].xml. Le balisage ressemble à celui du fichier .glox mais il fait référence au fichier approprié en ce qui concerne le nom du composant et au type de contenu approprié en ce qui concerne les couleurs ou les effets, aussi bien pour l’extension XML que pour les informations relatives au nom du composant. Le balisage indiqué ici s’applique à un fichier de couleurs, comme le montrent les références à diagramColorsHeader et diagramColors.

    <?xml version="1.0" encoding="utf-8"?>
<Types xmlns="https://schemas.openxmlformats.org/package/2006/content-types">
  <Default Extension="xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramColorsHeader+xml" />
  <Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml" />
  <Override PartName="/diagrams/colors1.xml" ContentType="application/vnd.openxmlformats-officedocument.drawingml.diagramColors+xml" />
</Types>

    Si vous créez un fichier .gqsx, remplacez diagramColors par diagramStyles (et diagramColorsHeader par diagramStylesHeader). Remplacez le nom de fichier colors1.xml dans le chemin d’accès de la définition du nom du composant par quickstyle1.xml. Notez que colors est au pluriel dans les noms de fichiers, contrairement à quickstyle.

  2. Créez des dossiers nommés _rels et diagrams.

    • Dans le dossier _rels, ajoutez le fichier .rels en utilisant le balisage indiqué ici. Si vous créez un fichier de styles rapides au lieu d’un fichier de couleurs, effectuez les mêmes modifications nécessaires dans le fichier de types de contenu.

      <?xml version="1.0" encoding="utf-8"?>
<Relationships xmlns="https://schemas.openxmlformats.org/package/2006/relationships">
  <Relationship Type="https://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramColorsHeader" Target="/diagrams/colorsHeader1.xml" Id="rId1" />
  <Relationship Type="https://schemas.openxmlformats.org/officeDocument/2006/relationships/diagramColors" Target="/diagrams/colors1.xml" Id="rId2" />
</Relationships>

    • Dans le dossier diagrams, ajoutez le fichier colorsHeader1.xml en utilisant le balisage suivant.

      <?xml version="1.0" encoding="utf-8"?>
<colorsDefHdr xmlns="https://schemas.openxmlformats.org/drawingml/2006/diagram" uniqueId="new unique ID">
    <title val="Colorful - Start with Accent 1" />
    <desc val="" />
    <catLst>
        <cat type="colorful" pri="100" />
    </catLst>
</colorsDefHdr>

      Dans le fichier d’en-tête, examinez le balisage pour vous assurer que vous avez spécifié un ID unique pour chaque fichier .gcsx ou .gqsx créé, ainsi que pour nommer votre couleur ou votre style. En outre, modifiez la catégorie et la priorité en fonction de vos besoins.

      Si vous créez un fichier de styles rapides, la balise colorsDefHdr de cet exemple de balisage se nomme styleDefHdr (veillez à changer les balises de début et de fin).

      La liste des noms de catégories à utiliser dans le fichier d’en-tête est indiquée ici dans le tableau 1. Comme toujours en langage XML, vous devez veiller à la précision de la terminologie utilisée, y compris en matière de majuscules/minuscules.

    Tableau 1. Noms de catégories de couleurs et de styles pour les fichiers .gcsx et .gqsx

    Catégories de la galerie de couleurs

    Catégories de la galerie de styles

    mainScheme

    colorful

    accent1

    accent2

    accent3

    accent4

    accent5

    accent6

    simple

    3D

  3. Créez une présentation PowerPoint contenant un graphique SmartArt, puis appliquez le style de couleur le plus proche des couleurs personnalisées souhaitées. (Si vous créez un fichier de styles rapides, appliquez le style SmartArt le plus proche du style rapide personnalisé souhaité).

  4. Extrayez le composant colors#.xml (ou le composant quickStyle#.xml) correspondant au diagramme applicable à partir du package ZIP du fichier que vous venez de créer. Si le diagramme n’est pas le premier du document dont vous avez extrait le composant, renommez le fichier en colors1.xml (ou quickStyle1.xml).

  5. Ajoutez le fichier que vous venez d’extraire au dossier diagrams que vous avez créé à l’étape 2. La prochaine procédure de cette section vous montre quelles sont les modifications nécessaires à apporter à ce fichier pour que le nouveau package fonctionne en tant que fichier de couleurs ou de styles rapides SmartArt.

  6. Sélectionnez le fichier de types de contenu ainsi que les deux dossiers que vous avez créés et compressez-les dans un dossier ZIP. Remplacez ensuite l’extension de nom de fichier du package zip par l’extension .gcsx (ou .gqsx pour un fichier de styles rapides).

Pour modifier un fichier colors1.xml (quickstyle1.xml) afin de l’utiliser dans un fichier .gcsx ou .gqsx

  1. Une fois le fichier colors1.xml (quickstyle1.xml) ouvert pour être modifié, recherchez le préfixe dgm:, puis effectuez un remplacement global de ce dernier sans indiquer de valeur de remplacement. Par conséquent, la balise <dgm:colorsDef… devient <colorsDef….

  2. Modifiez la balise de définition des couleurs ou des styles (première ligne située sous la référence à la version XML au début du fichier) afin d’inclure les deux définitions d’espaces de noms visibles par défaut mais pas l’ID unique (car cela fait partie du fichier d’en-tête du package), puis supprimez la référence au composant :dgm du préfixe d’espace de noms du diagramme (afin d’avoir uniquement xmlns=). La ligne modifiée doit ressembler au balisage suivant. Notez que dans un fichier de styles rapides, cette ligne de balisage est similaire sauf que le nom de la balise est styleDef.

    <colorsDef xmlns="https://schemas.openxmlformats.org/drawingml/2006/diagram" xmlns:a="https://schemas.openxmlformats.org/drawingml/2006/main">

Vous êtes maintenant prêt à apporter toutes les modifications de mise en forme souhaitées aux définitions d’étiquettes de style dans le fichier colors1.xml ou quickStyle1.xml de votre nouveau package. Procédez exactement comme vous le feriez pour changer la couleur des définitions d’étiquettes de style d’un diagramme existant, comme décrit précédemment.

Pour charger votre nouveau fichier de couleurs ou de styles, enregistrez ce dernier dans le chemin d’accès correspondant aux fichiers .glox personnalisés fournis dans la section précédente. Notez que les fichiers .gcsx et .gqsx sont compatibles avec toutes les plateformes et qu’ils se chargent à la fois dans les galeries Couleurs et Styles SmartArt d’Office 2010 et d’Office pour Mac 2011.

Procédure pas à pas : layout1.xml

Comme vous l’avez vu précédemment, le fichier layout1.xml stocke la définition complète d’une disposition de diagramme SmartArt. Cette section vous montre le contenu d’un fichier layout1.xml pour la liste linéaire simple personnalisée indiquée précédemment.

Pour créer votre propre disposition personnalisée du début à la fin, créez un package .glox tel que cela est décrit dans la section précédente, puis créez simplement un fichier layout1.xml au lieu de le copier à partir d’un diagramme existant.

Un fichier de disposition comprend les éléments suivants :

  • Données d’exemple\d’espace réservé pour créer des aperçus dans l’interface utilisateur SmartArt, ainsi que les galeries Couleurs et Styles SmartArt.

  • Définition du nœud de disposition racine (ensemble du diagramme) et de tous les nœuds qu’il contient, y compris les formes (points) à l’intérieur du diagramme, le texte et les images à l’intérieur des formes, ainsi que les relations entre les formes et les éléments de texte. Les définitions comprennent des paramètres et des contraintes pour l’apparence, ainsi que des règles pour le comportement de la disposition de diagramme et son contenu.

Même dans un diagramme simple, comme ici, notez la présence de plusieurs algorithmes en action, par exemple ceux qui sont relatifs au comportement du diagramme (flux linéaire et composite dans le cas présent), du texte (voir tx dans le balisage) et de l’espacement entre les formes (voir sp dans le balisage). Vous pouvez également constater la présence d’instructions For Each dans cet exemple de balisage pour gérer la propagation des formes et de l’espace entre les formes.

Certaines dispositions plus complexes contiennent des éléments qui ne sont pas visibles ici, par exemple des instructions conditionnelles pour gérer les options accessibles à l’utilisateur au sein du type d’algorithme (comme c’est le cas dans un diagramme hiérarchique, par exemple) ou l’utilisation de connecteurs entre les formes (comme c’est le cas dans l’image du diagramme affichée dans la figure 1). Toutefois, cette disposition vous offre un ensemble de bases qui vous permettent de commencer à utiliser vos propres dispositions et que vous pouvez étendre à l’aide des ressources supplémentaires fournis ultérieurement.

Pour examiner le balisage complet du fichier layout1.xml illustré dans les exemples ci-après, voir le fichier Simple Snip Corner List.glox dans les exemples à télécharger pour cet article.

Exemples de données, de couleurs et de styles

Juste après la balise de définition de la disposition figurent les balises relatives aux données d’exemple, de couleurs et de styles utilisées pour créer le contenu d’espace réservé, les miniatures de la galerie de couleurs et les miniatures de la galerie de styles, respectivement. Le contenu d’espace réservé créé à partir du balisage des données d’exemple détermine les formes par défaut qui apparaissent lorsque l’utilisateur insère un nouveau diagramme basé sur la disposition et sur l’aperçu qui s’affiche dans l’interface utilisateur SmartArt.

Il est classique d’afficher trois formes de niveau supérieur, comme vous pouvez le voir ici dans le balisage. Toutefois, vous pouvez personnaliser ces données pour un plus petit ou un plus grand nombre de formes dans vos affichages et dans le contenu par défaut créé lorsque l’utilisateur insère un nouveau diagramme basé sur la disposition.

Cet exemple illustre les données d’exemple. Juste après ces dernières dans le balisage figurent les balises styleData et clrData, qui contiennent le même modèle de données, la même liste de points et les mêmes balises de liste de connexions imbriquées. Dans l’exemple de disposition utilisé ici, comme toujours, les modèles styleData et clrData sont identiques à l’exemple de modèle de données. Toutefois, cela n’est pas une obligation.

<sampData>
<dataModel>
    <ptLst>
        <pt modelId="0" type="doc" />
        <pt modelId="10" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="20" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="30" type="node">
            <prSet phldr="1" />
        </pt>
    </ptLst>
    <cxnLst>
        <cxn modelId="40" type="parOf" srcId="0" destId="10" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="50" type="parOf" srcId="0" destId="20" srcOrd="1" destOrd="0" presId="" />
        <cxn modelId="60" type="parOf" srcId="0" destId="30" srcOrd="2" destOrd="0" presId="" />
    </cxnLst>
</dataModel>
</sampData>

  • Notez dans ce balisage que la liste de points fournit trois formes, définies en tant qu’espaces réservés. Vous pouvez répliquer les balises de point pour créer des formes d’espace réservé supplémentaires si vous le souhaitez (ou les supprimer afin d’inclure moins de formes). Toutefois, si vous procédez ainsi, veillez à mettre à jour les ID de sorte qu’ils soient tous uniques.

  • Si vous modifiez les ID, notez que les numéros d’ID des points sont référencés dans l’attribut destID (ID de destination) de la liste de connexions correspondantes. Par ailleurs, l’ID des connexions suit de manière consécutive les ID utilisés pour les points.

Si votre diagramme est plus complexe, vous pouvez imbriquer des points pour créer les données d’espace réservé correspondantes, comme indiqué ici.

<sampData>
<dataModel>
    <ptLst>
        <pt modelId="0" type="doc" />
        <pt modelId="10" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="11" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="20" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="21" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="30" type="node">
            <prSet phldr="1" />
        </pt>
        <pt modelId="31" type="node">
            <prSet phldr="1" />
        </pt>
    </ptLst>
    <cxnLst>
        <cxn modelId="40" type="parOf" srcId="0" destId="10" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="12" type="parOf" srcId="10" destId="11" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="50" type="parOf" srcId="0" destId="20" srcOrd="1" destOrd="0" presId="" />
        <cxn modelId="22" type="parOf" srcId="20" destId="21" srcOrd="0" destOrd="0" presId="" />
        <cxn modelId="60" type="parOf" srcId="0" destId="30" srcOrd="2" destOrd="0" presId="" />
        <cxn modelId="32" type="parOf" srcId="30" destId="31" srcOrd="0" destOrd="0" presId="" />
    </cxnLst>
</dataModel>
</sampData>

Notez que dans l’exemple précédent, les données permettent de savoir quelles sont les formes secondaires, car elles sont liées aux formes principales dans la liste de connexions (attribut srcID).

Si la structure des aperçus ou du contenu par défaut n’est pas d’une grande importance à vos yeux, et si vous souhaitez avoir la certitude que quelque chose s’affiche, vous pouvez utiliser les données par défaut (plus simples), dont voici un exemple.

<sampData useDef="1">
    <dataModel>
        <ptLst/>
        <bg/>
        <whole/>
    </dataModel>
</sampData>

L’attribut useDef (utilisation de valeur par défaut) est une valeur booléenne. Lorsqu’il a la valeur true, comme dans l’exemple, les balises clrData et styleData sont ignorées, et les valeurs par défaut sont utilisées à la place. (Notez que, par défaut, trois formes sont affichées.) Par conséquent, vous pouvez omettre les balises des données de couleur et de style : les aperçus continuent d’apparaître dans ces galeries. Si l’attribut useDef est omis (il a la valeur false par défaut), des informations doivent être spécifiées dans la liste de points et la liste de connexions pour permettre l’affichage des exemples de données.

Nœud de disposition racine

Juste après les exemples de données figure la définition du nœud de disposition racine, qui fournit la définition (y compris l’algorithme, les paramètres, les contraintes et les règles) de l’ensemble du diagramme.

Les nœuds de points (nœuds qui décrivent un élément de forme classique au sein du diagramme dans lequel l’utilisateur ajoute du contenu), ainsi que les nœuds de prise en charge (par exemple ceux qui définissent l’espace entre les formes), sont tous imbriqués dans la balise du nœud de disposition racine. Ils sont répartis ici en plusieurs sections pour une meilleure lisibilité.

<layoutNode>
    <alg type="lin" />
    <shape />
    <constrLst>
        <!--Font size constraint-->
        <constr op="equ" type="primFontSz" for="des" ptType="node" val="40" />
        <!--Constraints for composite-->
        <constr type="w" for="ch" forName="composite" refType="w" />
        <constr type="h" for="ch" forName="composite" refType="h" />
        <!--Space between rows/columns-->
        <constr op="equ" type="sp" refType="w" refFor="ch" refForName="composite" fact="0.1" />
        <!--Constraints for sibTrans-->
        <constr op="equ" type="w" for="ch" forName="sibTrans" refType="w" refFor="ch" refForName="composite" fact="0.1" />
        <constr op="equ" type="h" for="ch" forName="sibTrans" refType="w" refFor="ch" refForName="sibTrans" />
    </constrLst>
    <forEach name="nodesForEach" axis="ch" ptType="node">
        <!--composite-->
        <layoutNode name="composite">
        <alg type="composite">
            <param type="ar" val="1.6667" />
        </alg>
        <shape />

  • Le type d’algorithme principal de ce diagramme est flux linéaire. Dans le cas présent, il s’agit d’une liste linéaire horizontale dans laquelle des formes sont ajoutées de gauche à droite le long d’une ligne unique. Les formes sont redimensionnées automatiquement pour avoir la même taille et le même espacement au fur et à mesure de l’ajout de nouvelles formes.

  • La description font size constraint définit la taille de police maximale du diagramme à 40 points.

  • La description constraints for composite fait référence à l’algorithme composite, qui se trouve sous son propre nœud au bas de cet exemple. Cet algorithme spécifie la taille et la position des nœuds enfants, mais comme vous pouvez le voir ici, il définit également les paramètres de l’ensemble du diagramme. Notez ici la balise param imbriquée dans la balise d’algorithme composite au bas du balisage, qui définit les proportions de la disposition. Tout changement de proportions entraîne un changement des proportions des formes. Par exemple, si la valeur des proportions est égale à 1, les rectangles découpés de ce diagramme ressemblent à des carrés découpés.

  • L’instruction forEach de cet exemple propage les points ultérieurs (formes) pendant que l’utilisateur crée le diagramme. Sans cette instruction, seule une instance du rectangle découpé apparaît dans le diagramme et chaque nouvel élément de niveau supérieur est un paragraphe à puce au sein de la forme.

  • Les contraintes de sibTrans (transition sœur) font référence au balisage ci-après qui apparaît à la fin de ce fichier de disposition (toujours imbriqué dans le nœud de disposition racine). Ce contenu définit l’espacement entre les éléments frères.

    <forEach name="sibTransForEach" axis="followSib" ptType="sibTrans" cnt="1">
    <!--sibTrans-->
    <layoutNode name="sibTrans">
        <alg type="sp" />
        <shape />
    </layoutNode>
</forEach>

  • Notez une autre instruction forEach ici, qui propage une autre instance d’espacement pour chaque nouvelle instance de forme dans cette disposition.

  • Notez également que ce nœud sibTrans utilise un autre algorithme, l’algorithme sp (espace).

    Conseil

    Vous pouvez affecter une valeur négative à la contrainte de largeur pour la forme d’algorithme d’espace, afin de créer des formes qui se chevauchent dans votre disposition.

Nœud d’élément principal

Cet exemple de disposition contient un élément forme/point principal (le rectangle découpé) dont voici la définition.

<!--Main-->
<layoutNode name="Main" styleLbl="node1">
    <alg type="tx">
<param type="parTxLTRAlign" val="l" />
    </alg>
    <shape type="snipRoundRect">
<adjLst>
    <adj idx="1" val="0.1667" />
    <adj idx="2" val="0.1667" />
</adjLst>
    </shape>
    <presOf axis="desOrSelf" ptType="node" st="1" cnt="0" />
    <constrLst>
<constr type="lMarg" refType="primFontSz" fact="0.15" />
<constr type="rMarg" refType="primFontSz" fact="0.15" />
<constr type="tMarg" refType="primFontSz" fact="0.15" />
<constr type="bMarg" refType="primFontSz" fact="0.15" />
    </constrLst>
    <ruleLst>
<rule type="primFontSz" val="10" />
    </ruleLst>
</layoutNode>

J’ai nommé ce nœud Main, car il s’agit du seul élément forme du diagramme. Affectez à la valeur d’un attribut Name tout ce qui vous semble évocateur. Notez ce qui suit :

  • Comme indiqué précédemment dans cet article, une étiquette de style apparaît dans la balise layoutNode pour définir la mise en forme des formes de ce nœud.

  • L’algorithme tx (texte) définit des paramètres supplémentaires pour le texte au sein de ces formes. Dans le cas présent, l’alignement horizontal (de gauche à droite) du texte du paragraphe est spécifié comme étant à gauche. Si ce paramètre est omis, la valeur par défaut est un alignement centré.

  • La balise adjLst imbriquée dans la balise de la forme du rectangle découpé spécifie les valeurs des poignées de réglage. Ces valeurs vous permettent de définir la position des poignées de réglage en forme de losange jaune que vous voyez sur la plupart des formes Office Art. Si vous voulez une forme précise, il peut s’avérer plus simple d’insérer une forme dans une diapositive, de définir les poignées de réglage en fonction de la forme, puis d’extraire les valeurs de réglage du balisage pour la forme de cette diapositive.

  • La balise presOf (présentation de) fait référence au texte enfant au sein du nœud. Si cette ligne n’est pas présente, aucun texte n’est autorisé sous le niveau un. La valeur de l’axe desOrSelf fait référence au niveau actif ou à tous les descendants. Les références à ch (enfant) désignent le niveau inférieur suivant. Les références à des (descendants) désignent tous les niveaux ultérieurs.

  • Comme indiqué précédemment dans cet article, les contraintes supplémentaires figurant dans cet exemple de balisage définissent les marges en tant que facteur de la taille de police principale active. Par ailleurs, la règle fournie ici définit la taille de police minimale du texte au sein de ce nœud.

Naturellement, les dispositions plus complexes contiennent des éléments supplémentaires, mais cet exemple comprend tous les éléments de base nécessaires à la création complète d’une disposition SmartArt fonctionnelle.

Étapes suivantes

Une fois que vous vous sentez capable de créer une disposition personnalisée de base telle que celle décrite dans cet article, n’oubliez pas que vous pouvez copier et personnaliser les dispositions prédéfinies dans le but d’explorer les structures de dispositions plus complexes.

Visitez les liens spécifiques à la référence du développeur SmartArt dans la section Ressources supplémentaires pour en savoir plus sur l’ensemble des algorithmes et techniques SmartArt disponibles, par exemple l’ajout de paramètres d’animation à vos dispositions. En outre, les notes d’implémentation mentionnées dans la section Ressources supplémentaires représentent une source d’informations pertinente, où vous pouvez effectuer des recherches pour accéder à la totalité de la documentation sur les définitions de diagramme au sein du format de fichier.

Ressources supplémentaires

Pour plus d’informations, voir les ressources suivantes :

À propos de l’auteur

Stephanie Krieger est l’auteur de deux ouvrages, Advanced Microsoft Office Documents 2007 Edition Inside Out et Microsoft Office Document Designer. En tant que consultante professionnelle sur les documents, elle a aidé de nombreuses sociétés internationales à développer des solutions d’entreprise pour Microsoft Office sur les deux plateformes. La sortie de son nouveau livre pour Office 2010 et Office pour Mac 2011 est prévue au printemps 2011.