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.
Scaling
Dans les cours précédents, nous avons vu comment ajouter des contrôles dans un groupe, comment ajouter un groupe et même comment agencer les contrôles dans un groupe du Ribbon. Si vous ne maitrisez pas ces concepts, nous vous conseillons fortement de les relire sans quoi vous risquez de ne pas bien comprendre ce cours-ci. Nous allons repartir d'une Custom Action simple permettant de faire ceci :
Le code pour réaliser ce groupe est le suivant :
Il n'y a rien de bien nouveau par rapport aux cours précédents. Nous attachons cette custom action à une liste personnalisée et nous utilisons une OverflowSection pour stocker 2 contrôles en mode Large les uns à cotés des autres. Rien de bien compliqué jusque là, mais penchons nous un peu maintenant sur cette ligne :
Dans les cours précédents, nous avons toujours utilisé un Scaling, mais nous n'avons jamais expliqué en quoi cela consistait. En fait, le Scaling va permettre de gérer le dimensionnement du groupe. Dans le meilleur des cas, le groupe a assez de place pour s'afficher, il est dans un état que l'on peut qualifier de "grandeur maximale" (MaxSize). Les Scaling vont permettre de définir comment les groupes vont s'afficher dépendant de l'espace disponible qui leur est alloué.
Un groupe doit au moins avoir un type de Scaling pour définir son affichage sans quoi, il ne s'afficherait pas correctement. De base, nous utilisons un Scaling de type MaxSize. Ce type de Scaling va nous permettre de définir comment notre groupe s'affichera lorsqu'il dispose de la place nécessaire pour s'afficher. L'attribut Id de cet élément a la même utilité que dans les autres éléments. Nous reviendrons sur l'attribut Sequence plus tard. L'attribut suivant (GroupId) va permettre de définir à quel groupe le Scaling sera appliqué. Donc, quand vous créez un groupe, il faut absolument qu'il existe au moins un Scaling contenant l'Id de ce groupe en tant que valeur de l'attribut GroupId. Le dernier attribut, Size devra contenir le nom d'un Layout précédemment défini. C'est grâce à ce nom que SharePoint saura comment afficher le groupe. Effectivement, dans notre exemple, nous définissons que le Layout appliqué au groupe lorsque celui-ci à la place nécessaire pour s'afficher sera celui portant le nom Large.
Actuellement, cela affichera ceci :
Rien de bien compliqué, mais il y a un problème. Effectivement, si nous redimensionnons notre page, nous obtenons :
Alors que tous les autres groupes ont été redimensionnés, le notre a toujours la même taille et c'est pire si nous rétrécissons encore un peu la page :
Cette fois, le groupe n'ayant plus assez de place pour apparaitre et bien il n'apparaît même plus, cela peut être gênant. Pour palier à ce problème, nous devons utiliser les échelles.
La première chose à faire est de définir un Layout qui sera affiché lorsque le groupe manquera légèrement de place pour s'afficher. Tapez donc ceci dans l'élément GroupTemplate de votre action :
Ici, nous définissons un style d'affichage qui n'affichera plus les contrôles côte à côte en taille Large mais bien en colonnes de 3 lignes dans lesquels les contrôles auront une taille moyenne (Medium). Maintenant ceci fait, il suffit juste de déclarer notre échelle. Tapez donc ceci dans l'élément CommandUIDefinitions :
Ici, nous n'utilisons plus MaxSize car nous définissons l'échelle et non plus la taille maximale. Il faut savoir que les Scale s'appliqueront dans un ordre précis dépendant du numéro de Sequence du Scale. Soyez prudent car il faut aussi prendre en compte le numéro de Sequence des autres Scaling, nous verrons cela un peu plus tard, pour l'instant, laissez la valeur de Sequence des exemples. Cette fois, nous définissons l'attribut Size sur le nom du template que nous avons nommé Medium. Si vous testez votre action actuellement, vous obtiendrez ceci en plein écran :
Vous remarquerez vite qu'il y a un petit soucis. Effectivement, alors que le groupe a toute la place nécessaire pour s'afficher, il apparait quand même de taille moyenne. Cela vient en fait du numéro de séquence. Effectivement, SharePoint va se baser sur les différents numéros de séquence des autres Scaling pour définir la taille d'affichage des groupes ajoutés par après, mais comment savoir ces numéros de séquence ?
En fait, il faut ouvrir le fichier C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\XML\CMDUI.XML. En cherchant un peu, vous remarquez qu'il y a un Tab (un onglet) s'appelant Ribbon.List :
Dans cet onglet se trouve un élément Scaling :
Vous remarquerez que chacun des Scaling a un numéro de séquence en dizaine. Cela vous permet d'insérer des Scaling personnels entre ceux par défaut en mettant par exemple 115 comme valeur de l'attribut Sequence. Ici, notre groupe se placera à la suite de tous les autres, les Scaling devront donc être modifiés en conséquence. Si nous nous référons à l'extrait de code ci-dessus, vous remarquerez que ce sont d'abord les MaxSize qui sont appliqués, nous devrons donc intercaler le notre à la suite. Le dernier numéro de séquence des MaxSize est 70, modifiez donc notre code en remplaçant 10 par 75 :
Cela permettra de l'intercaler entre le dernier MaxSize et le premier Scale du fichier de définition par défaut.
Dans l'extrait de code du fichier CMDUI.XML se trouve deux autres "groupe de Scaling". Il y a ceux de 80 à 160 (compris) qui permettent de définir l'affichage des groupes quand la place pour s'afficher manque mais reste raisonnable, donc moyenne. Nous allons placer notre deuxième Scaling juste après pour définir que notre groupe sera le premier a être redimensionné en affectant 165 à son numéro de séquence :
Si nous déployons à nouveau notre solution et que nous affichons notre page, nous obtiendrons ceci :
Cette fois, l'affichage est correct. Redimensionnez ensuite légèrement la page, le groupe deviendra alors :
Nous nous approchons de la solution mais il reste un dernier problème. Si vous redimensionnez fortement la page, le groupe va disparaitre alors que les autres apparaitront sous forme de menu déroulant. Pour palier à ce problème, il existe une manière très simple. Il faut définir un layout de type Popup. Tapez donc ceci dans l'élément GroupTemplate :
Définissez également le Scaling suivant :
Nous voulons que notre groupe soit le dernier à être affiché sous forme de Popup, nous lui affectons donc un numéro de séquence plus grand que tous les autres Scaling de la liste et nous référençons ce Scaling comme étant lié au layout nommé Popup.
Ce Layout portant le nom de Popup, SharePoint saura immédiatement que c'est ce layout qu'il doit appliqué lorsque le contrôle ne dispose vraiment pas de place pour s'afficher correctement. L'attribut LayoutTitle permet quant à lui d'indiquer quel Layout devra être appliqué pour afficher le groupe dans le menu ouvert lors du click sur le bouton de popup. Ainsi, si vous redimensionnez fortement votre page, vous obtiendrez ceci :
Comme vous le voyez, c'est bien le Layout "Large" qui est appliqué au menu déroulant. La dernière petite chose à modifier est l'icône affichée pour représenter le groupe en mode popup. Si vous ne faites rien, c'est l'image par défaut qui sera appliqué. Ici, nous allons mettre une image personnalisée. L'idéal serait d'ajouter un dossier "images" mappé mais nous ne pouvons pas faire cela dans une solution Sandboxed, je met donc à votre disposition l'image suivante :
Nous affecterons cette image comme icône du groupe en mode popup. Pour ce faire, il suffit bêtement d'ajouter cet attribut à l'élément Group :
Si vous compilez, cela donnera ceci :
L'image est donc bien appliquée. Au final, votre code doit ressembler à ceci :
