Utiliser les composants TRibbon Control

Dans ce tutoriel, nous allons voir comment utiliser les TRibbon Control. Pour ceux qui ne savent pas ce que sont les TRibbon Control, ce sont les différents composants qui composent le menu d'Office depuis la version 2007. Le Ribbon de Microsoft était à la base uniquement réservé à partir de la version Seven de Windows.
Avant de commencer quoi que ce soit, il est bon de connaître les termes de la licence si vous utilisez ces composants. L'usage de la licence est gratuit, sous réserve de respecter certaines conditions, notamment :

• ne pas utiliser ces composants si le logiciel développé entre en concurrence avec ceux de la gamme Microsoft, à savoir Microsoft Word, Excel, PowerPoint, Outlook, et Access ;
• s'inscrire au programme via l'adresse suivante : License the Office UI.

Notons tout de même que la clause 3.g de la licence stipule que si un tiers veut modifier et redistribuer une application qui utilise le Ribbon, il devra à son tour souscrire à la licence Microsoft !
Pour ce qui est de la création d'une interface intuitive, Microsoft met à disposition les Guidelines qui sont un ensemble de conseils et de recommandations, auxquels le développeur devra se conformer (pour plus d'informations, consulter la section 3.b de la licence). Malheureusement, le document n'existe qu'en anglais.

Nous allons d'abord créer notre interface pour nous concentrer uniquement sur le TRibbon, l'ajout d'actions étant prévu dans la partie III du tutoriel. Nous déposons donc un TRibbon sur la form. Nous le renommons en « MenuRibbon » pour que cela soit plus parlant. Nous ajoutons également un TRichEdit que nous renommons « RichEdit » et mettons sa propriété « Align » à « AlClient ».
Une fois le tout configuré, nous avons une interface qui ressemble à celle-ci :

II-A. Ajout de la Quick Access Toolbar▲

Dans la FAQ que Microsoft fournit avec la licence, la présence d'une QAT (Quick access toolbar) est obligatoire. Nous allons donc la rajouter ! Pour ce faire, nous faisons un clic droit sur le TRibbon et nous sélectionnons « Ajouter Barre d'outils Accès rapide » comme le montre l'illustration ci-dessous :

Pour ce tutoriel, je n'ai pas configuré la barre d'outils rapide (QAT), je ne l'ai mise que dans le but de vous montrer comment la rajouter.

II-B. Ajout du TRibbonPage▲

Nous allons créer un TRibbonPage. Ce dernier regroupera plusieurs groupes d'actions selon la nature de ces dernières. Nous verrons tout cela dans la suite du tutoriel.
Nous sélectionnons le TRibbon et nous éditons sa propriété « Tabs ». De la, nous ajoutons un TRibbonPage. Nous le renommons de suite en « RibbonPageAccueil » ainsi que son « Caption » en « Accueil ».

Pour renommer le TRibbonPage, sélectionnez le « RibbonPage1 » dans la gestion de structure du projet comme le montre l'image ci-dessous :

II-C. Ajout du TRibbonGroup▲

Notre « page » étant créée, nous allons ajouter un TRibbonGroup qui servira de conteneur pour les actions de même type. Pour ce faire, il nous suffit de faire un clic droit sur le TRibbonPage et de sélectionner « Ajouter un groupe » (voir image ci-dessous).

Nous le renommons tout de suite en « RibbonGroupFormat » et mettons son « Caption » à « Format ». Notre conteneur est donc prêt. Il nous reste à y déposer les actions que celui-ci devra gérer.

Nous déposons donc un TActionManager (renommé « ActionManagerRichEdit ») sur la Form et nous lui affectons les actions pouvant agir sur le contenu du RichEdit (TRichEdit).

III-A. Paramétrage du TActionManager▲

Pour ce faire, nous double cliquons sur le TActionManager, puis, dans l'onglet « Actions », nous sélectionnons le TActionManager dans la liste déroulante. Ensuite, dans la partie actions (à droite), nous faisons un clic droit, puis, nous sélectionnons « Nouvelle action standard » et nous choisissons l'action « TRichEditBold » parmi la liste des actions proposées.
Afin de faire une démonstration plus complète, nous effectuons la même opération avec les actions « RichEditUnderline » et « RichEditItalic ». Une fois ceci terminé, nous quittons la fenêtre d'ajout d'actions. Vous l'aurez sûrement compris, nous allons agir sur le TRichEdit, plus particulièrement sur la mise en forme du texte de ce dernier.

III-B. Ajout des items dans le TRibbonGroup▲

À ce stade, nos actions sont définies, mais ne sont rattachées à aucun élément pouvant agir sur le contenu du RichEdit. Nous allons donc créer notre barre d'items. Sélectionnons le TActionManager et éditons la propriété « ActionBars ».

Nous ajoutons une nouvelle barre d'items et associons à la propriété « ActionBar » le « RibbonGroupFormat ».

Nous cliquons sur l'ActionBar que nous venons de créer, et éditons sa propriété « Items » pour y ajouter des items. Comme nous avons créé trois actions, nous allons créer trois items et nous associons à la propriété « Action » de chaque item une des actions définies précédemment (Bold, Italic, Underline).
Nous obtenons ceci :

La présentation des items reste à désirer. Nous allons arranger un peu tout ça. Tout d'abord, harmonisons les items avec le style du Ruban. Nous sélectionnons le TActionManager et nous mettons la valeur « Ribbon - Luna » à la propriété « Style ».
Cela rend déjà mieux, mais ce n'est pas encore ça. Nous allons désormais « ranger » les items en ligne et non en colonne comme présentés actuellement. Nous sélectionnons l'item « Italique » et positionnons sa propriété « NewCol » à « true ». Nous faisons de même avec l'item « Souligné ». Voilà qui est beaucoup mieux! Vous pouvez désormais tester le tout, tout fonctionne parfaitement !

Je vous ai montré comment utiliser le TRibbonPage ainsi que le TRibbonGroup et faire en sorte de lier les items d'un TRibbonGroup à un TActionManager.
Je vais maintenant vous montrer comment utiliser le TRibbonCombobox, quant au TRibbonSpinEdit, je ne l'utiliserai pas, mais son principe de fonctionnement est identique à celui du TRibbonCombobox.

IV-A. Utilisation du TRibbonCombobox▲

IV-A-1. Ajout du TRibbonCombobox▲

Nous allons travailler sur le même RibbonGroup « RibbonGroupFormat ». Nous ajoutons donc un TRibbonCombobox que nous nommerons « sizeFontRibbonCombobox » et mettons la propriété « NewRow » à « true » comme le montre l'image ci-dessous.

Pour agencer correctement les composants, sélectionnons le RibbonGroupFormat que nous avons créé au tout début du tutoriel, et mettons la propriété « GroupAlign » à « gaHorizontal ».

IV-A-2. Actions et événements du TRibbonCombobox▲

Notre but, vous l'aurez sûrement compris, est de pouvoir modifier la taille de la police. Dans un premier temps, nous allons faire en sorte de n'autoriser que les nombres. Pour ce faire, nous sélectionnons le composant « sizeFontRibbonCombobox » et mettons sa propriété « NumbersOnly » à « true ». Voilà, l'utilisateur ne peut rentrer que des nombres. Mettons également la propriété « MaxLength » à « 2 » afin de limiter la taille de police à 99.
Il nous reste à mettre un peu de code pour gérer le tout, ce qui donne ceci :

 

Sélectionnez

unit Unit1;
 
interface
 
uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, ToolWin, ActnMan, ActnCtrls, Ribbon, RibbonLunaStyleActnCtrls,
  StdCtrls, ComCtrls, ActnList, StdActns, ExtActns,
  PlatformDefaultStyleActnCtrls, ScreenTips, RibbonActnCtrls;
 
type
  TForm1 = class(TForm)
    RichEdit: TRichEdit;
    RibbonMenu: TRibbon;
    RibbonPageAccueil: TRibbonPage;
    RibbonGroupFormat: TRibbonGroup;
    ActionManagerRichEdit: TActionManager;
    RichEditBold1: TRichEditBold;
    RichEditItalic1: TRichEditItalic;
    RichEditUnderline1: TRichEditUnderline;
    RibbonQuickAccessToolbar: TRibbonQuickAccessToolbar;
    sizeFontRibbonCombobox: TRibbonComboBox;
    procedure sizeFontRibbonComboboxChange(Sender: TObject);
    procedure FormCreate(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form1: TForm1;
 
implementation
 
{$R *.dfm}
 
procedure TForm1.FormCreate(Sender: TObject);
begin
  // Ajout des différentes polices
  sizeFontRibbonCombobox.Items.Add('8');
  sizeFontRibbonCombobox.Items.Add('10');
  sizeFontRibbonCombobox.Items.Add('12');
  sizeFontRibbonCombobox.Items.Add('14');
  sizeFontRibbonCombobox.Items.Add('16');
 
  // On définit la taille par défaut
  sizeFontRibbonCombobox.Text := '8';
end;
 
procedure TForm1.sizeFontRibbonComboboxChange(Sender: TObject);
var
 size : integer;
begin
  if(TryStrToInt(sizeFontRibbonCombobox.Text,size))then
    RichEdit.SelAttributes.Size := size
  else
  begin
    RichEdit.SelAttributes.Size := RichEdit.SelAttributes.Size;
    sizeFontRibbonCombobox.Text := IntToStr(RichEdit.SelAttributes.Size);
  end;
end;
 
end.

Voilà, vous savez gérer une police. Bien entendu, l'exemple est très basique et ne montre pas comment détecter la taille de police de la sélection comme peut le faire Word. Vous pouvez faire exactement la même chose avec le TRibbonSpinEdit.

Nous avons vu dans le chapitre III-B, l'ajout d'items dans le TRibbonGroup. Delphi ne nous propose que deux objets disponibles dans la palette Contrôles Ruban, mais nous pouvons aller un peu plus loin grâce aux propriétés supplémentaires des items si celui-ci est dans un TRibbonGroup.
Avant toute chose, définissons une nouvelle action, comme le montre l'image ci-dessous :

Le caption de l'item est « &RichEdit en lecture seule » et son « Name », « ActionLectureSeule ».
L'action étant définie, nous pouvons maintenant passer à l'ajout de l'item dans le TRibbonGroup.

À partir de là, nous avons un nouvel item. Nous le renommons et mettons sa propriété « New Row » à « True » afin de mettre l'item sur une nouvelle ligne. Enfin, nous modifions la propriété « CommandStyle » en la mettant sur « csCheckBox ». Vous l'avez sûrement compris, tout passe par cette propriété pour définir le style de l'item.
Voici un récapitulatif visuel des options à changer (zones rouges).

Il ne nous reste plus qu'à implémenter l'action souhaitée dans l'événement « OnExecute » de l'item en cours d'édition. Il faut néanmoins prendre soin de mettre la propriété « AutoCheck » du menu Action à « true » comme le montre l'image ci-dessous, afin que l'état du bouton soit mémorisé :

procedure TForm1.ActionLectureSeuleExecute(Sender: TObject);
begin
  RichEdit.ReadOnly := ActionLectureSeule.Checked;
end;

Voilà, rien de bien sorcier dans tout cela. Vous pouvez donc vous amuser avec le style « csRadioButton » et sa propriété « selected »…

Voici donc ce que donne le projet :

Voilà, nous avons fait un petit tour de ce que propose le TRibbon Control. Bien entendu, je n'ai pas couvert toutes les fonctionnalités, mais juste les cas de base afin que vous puissiez mettre en œuvre ce type d'interface plus facilement et rapidement. Je vous rappelle que vous pouvez télécharger les sources ici : TRibbon Control.zip.

Je tiens à remercier Pedro, Franck Soriano, et Laurent Dardenne pour leurs conseils et leurs relectures.