Cliquez ensuite avec le bouton droit sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparait, choisissez Empty Element et nommez le RibbonExample.
La dernière chose que nous allons faire est de renommer la feature qui a été automatiquement créée. Ouvrez donc le petit dossier Feature, Cliquez sur Feature1 et pressez ensuite F2 pour renommer l'élément. Nommez le RibbonFeature et validez.
Doublez-cliquez ensuite sur cette feature et dans la fenêtre qui apparait, modifiez le titre de la feature en AreaProg.Feature.RibbonFeature et sauvegardez votre projet. Au final, l'arborescence de votre projet devrait ressembler à ceci :
Nous allons partir de ce projet pour les besoins de notre exemple mais vous devez avant tout savoir une chose ; Tout la définition du ruban se trouve dans le fichier C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML. Nous nous réfèrerons de temps à en temps à ce fichier dans ce cours.
Si vous n'avez jamais personnalisé le ruban SharePoint, nous vous conseillons fortement de lire les cours précédent.
Explication des templates
Section simple
Ce que nous avons vu dans les cours précédents n'était pas fort compliqué. Il suffisait juste de suivre une arborescence et le reste allit tout seul. Nous allons maintenant passer à un sujet légèrement plus complexe qui concerne l'agencement des groupes. Effectivement, pour l'instant, nous avons utilisé 2 concepts que nous n'avons pas expliqué. Les Scaling et l'attribut TemplateAlias. Nous allons maintenant expliquer le deuxième de ces concepts dans ce cours et nous expliquerons le premier dans le cours suivant. La finalité de ce cours sera celle-ci :
Le second bouton est en fait une liste déroulante qui contiendra deux autres boutons. Nous profiterons de ces explications pour aborder quelques autres types de contrôles pouvant être placés dans des groupes.
Nous commençons comme d'habitude avec ce squelette :
Nous commençons ensuite la déclaration de notre définition d'extension d'interface utilisateur en ajoutant cet élément dans l'élément
Comme précédemment, nous la plaçons dans la collection de groupe des listes. Nous déclarons ensuite l'élément Group pour déclarer le groupe proprement dit :
Vous remarquerez une petite différence par rapport à toute à l'heure. Effectivement, la valeur de l'attribut Template est différente. En effet, cette fois, nous allons utiliser un template de groupe personnalisé nommé MyTouchyTemplate. Ne remplissez pas maintenant l'élément Group car nous allons passer à la déclaration de ce template.
Pour cela, nous allons devoir créer une nouvelle CommandUIDefinition. Tapez donc ceci dans l'élément CommandUIDefinitions :
Ici, nous allons placer cette définition dans la liste des templates du ruban car les template peuvent être utilisés n'importe où dans le ruban car ils s'appliquent sur des groupes et non sur un onglet en particulier. L'élément pour définir un template de groupe se nomme GroupTemplate. Déclarez donc l'élément suivant :
Un template de groupe va contenir au moins 1 ou plusieurs éléments Layout qui vont définir un style d'affichage différent, nous verrons cela dans le cours prochain, pour l'instant, nous allons n'en créer qu'un seul. Voici le code de déclaration de ce dernier, nous l'expliquerons petit à petit. Tapez donc ceci dans l'élément GroupTemplate :
Nous commençons tout d'abord par créer un style d'affichage que nous nommerons Normal. Soyez vigilent dans vos nommages car ces noms seront utilisés plus tard. Un Layout va en fait permettre de définir la manières dont les contrôles seront organisés dans le groupe. Basons nous sur cette image pour expliquer cela :
Il faut imaginer qu'un groupe va être divisé en section verticale. Dans la capture d'écran ci dessus, nous avons une première section qui va contenir un seul bouton qui sera affiché en grand. Cela correspond à cette partie de la déclaration :
Nous utilisons un élément Section pour créer une section verticale. L'attribut Type est obligatoire et va permettre de définir le type de section à créer. Cet attribut ne peut prendre que 4 valeurs différentes. "Divider" va permettre d'insérer une séparation entre les sections (une simple barre verticale). Nous avons ensuite les trois valeurs suivantes : "OneRow", "TwoRow" et "ThreeRow" qui serviront respectivement à créer une colonne de 1 ligne, 2 lignes et 3 lignes. Dans le bout de code isolé précédemment, nous créons donc une colonne qui contiendra une seule ligne.
Nous devons ensuite définir autant d'élément Row que de lignes attendues dans cette section. Ici, comme nous avons choisis OneRow, nous ne devons mettre qu'une seule ligne. Dans cet élément, nous ajoutons un élément ControlRef qui identifiera l'emplacement où le contrôle peut être placé. L'attribut TemplateAlias permet de donner un nom à cet emplacement et l'attribut DisplayMode permet de définir la taille d'affichage du contrôle. Les plus utilisés sont Large qui permettra d'afficher une grande icône en se basant sur l'attribut Image32by32 du contrôle, Medium qui affichera le contrôle sous forme d'image 16x16 (attribut Image16by16 du contrôle) suivi du texte (attribut LabelText) et Small qui affichera la même chose que Medium mais sans le texte.
Avec ces explications, vous devez être en mesure de comprendre les deux autres éléments sections du template.
Passez ensuite à la définition du Scaling comme ceci :
Le Scaling va permettre de définir l'affichage à l'échelle du groupe. Nous expliquerons ça dans le cours suivant, n'y prêtez donc pas attention actuellement. Revenons maintenant à notre élément Group. Définissez la collection de contrôles de celui-ci comme ceci :
Nous allons commencer par ajouter un premier bouton dans la première section :
La chose à laquelle il faut prêter attention ici est l'attribut TemplateAlias qui indique l'emplacement où doit se placer ce contrôle. Ici, nous voulons qu'il se place à l'emplacement c1. Ce bouton n'a rien de particulier, nous ne nous attarderons donc pas dessus.
Nous allons maintenant ajouter un autre type de contrôle, le SplitButton qui n'est rien d'autre qu'un menu déroulant. Voici tout le code de ce bouton, nous l'expliquerons après :
Nous commençons par déclarer l'élément SplitButton exactement de la même manière qu'un élément Button sauf que nous ne le fermons pas de suite. Effectivement, cet élément va devoir en contenir d'autre pour afficher le menu. Le tout premier élément qu'il doit contenir est l'élément Menu. Ce même élément va contenir un élément MenuSection qui va permettre de définir l'affichage du menu. Nous définissions donc son attribut Title pour indiquer le titre affiché dans ce menu et DisplayMode pour définir la taille de ce menu.
Ensuite, nous devons procéder de la même manière que pour un groupe. Nous devons définir la collection de contrôles de ce menu grâce à l'élément Controls et dans cet élément, nous ajoutons à nouveau deux boutons normaux. Au final, cela donnera ceci :
Remarquez que nous avons définit le TemplateAlias du SplitButton sur c2. Ainsi, il se placera dans la première ligne de la deuxième colonne du groupe.
Nous continuons ensuite avec un troisième contrôle qui sera un ToggleButton. Ce type de contrôle est similaire à un simple bouton à l'exception que lorsque ce bouton est cliqué, il reste enfoncé jusqu'à ce qu'on clique à nouveau dessus. Pour insérer ce type de bouton, il faut procéder de cette manière :
Il n'y a rien de bien étonnant à cette déclaration. Nous plaçons ce contrôle à l'emplacement c3. Le quatrième bouton va consister en une case à cocher. Pour cela, il faut utiliser l'élément CheckBox :
Nous ajoutons ensuite un simple Label qui est le contrôle permettant d'afficher du texte :
Et enfin, nous ajoutons un Spinner. Ce type de contrôle est une zone de texte suivie de deux flèches, l'une pointant vers le haut et l'autre vers le bas permettant d'incrémenter la valeur de la zone de texte :
L'attribut DefaultUnit permet d'indiquer l'unité de mesure de la zone de texte, ainsi, en mettant percent, le signe % sera ajouté à la valeur de la zone de texte (nous le définissons un peu plus loin). DefaultValue permet de définir une valeur par défaut pour la zone de texte. L'élément Spinner doit contenir un élément Unit qui va permettre de définir l'unité de mesure. Ici, nous l'appelons percent (c'est bien à ce nom que nous faisons référence dans la valeur de l'attribut DefaultUnit). MinimumValue et MaximumValue permettent de définir l'intervalle de valeur. L'attribut Interval quant à lui permet de définir le pas de l'incrémentation. Enfin, DecimalDigits permet de définir le nombre de chiffre affichés après la virgule.
Cet élément doit enfin contenir un élément UnitAbbreviation définissant le caractère identifiant l'unité, à savoir, % pour percent.
La dernière étape de ce code consiste à définir les commandes des boutons. Ici, nous n'allons exécuter aucune opération au click des contrôles car nous avons déjà vu comment cela fonctionnait. Nous sommes cependant obligé d'ajouter les éléments CommandUIHandler sans quoi les boutons n'ayant pas cet élément seront grisés et donc inactifs :
Au final, votre code devrait être le suivant :
Section complexe
Le type de template que nous venons de voir utilisait des sections simples, autrement dit, une section contenant 1, 2 ou 3 colonnes et c'était tout, il n'y avait pas moyen de modifier cela. Nous allons maintenant voir comment utiliser les OverflowSection. Ceci est très simple et permet de personnaliser un peu plus l'affichage de nos groupes.
Imaginez que vous vouliez afficher 3 grands boutons côte à côte. Pour l'instant, la méthode consistera à créer un template avec 3 sections de types OneRow, de définir ainsi 3 TemplateAlias et de placer les trois contrôles dans ces emplacements. Ce n'est pas une mauvaise méthode, mais il existe une méthode plus simple. Voici le code utilisant cette méthode :
Comme vous pouvez le remarquez, cette fois, nous attachons notre actions à une liste personnalisée (RegistrationId à 100). Les différents Location deviennent alors Ribbon.List. Penchons nous maintenant sur la définition du Template. Vous aurez sans doute remarqué que cette fois, nous n'avons plus 3 sections mais bien une seule de type OverflowSection. Les trois attributs de cette section ont exactement le même rôle que ceux de l'élément Section.
Le principe est en fait très simple. Alors que dans une section simple, nous ne pouvons ajouter que le nombre de contrôles prévus par l'attribut Type (donc 1 pour OneRow, 2 pour TwoRow et 3 pour ThreeRow), nous pouvons ajouter autant de contrôles que nous voulons à une section complexe. Mais comment cela va-t-il se passer ?
Si vous faites une OverflowSection de type OneRow et que vous ajoutez un contrôle Large dedans, celui-ci s'affichera normalement. Si vous ajoutez deux contrôles dans celui-ci (donc en utilisant le même TemplateAlias), et bien, le contrôle va simplement s'ajouter à la gauche (dépendant de la séquence) de l'autre contrôle et ainsi de suite. L'OverflowSection est donc simplement une section extensible.
Dans le cas d'une OverflowSection de type ThreeRow, cela fonctionnera de la même façon. Les contrôles s'empileront d'abord verticalement, comme prévu dans l'affichage de type ThreeRow et si on ajoute un quatrième, il s'ajoutera simplement à la droite des 3 autres boutons dans une "colonne virtuelle".
