FMX : ajouter un bouton à un onglet

Tout d’abord, en mode conception, il faut ajouter au moins un onglet qui pourra être détruit plus tard. Cela peut être fait en utilisant le menu contextuel du composant TTabControl (clic droit, « Ajouter TTabItem »).

Une fois l’onglet créé, un nouveau clic droit sur ce dernier affiche un nouveau menu contextuel dans lequel je choisis l’option « Modifier un style personnalisé... », ce qui ouvre la fenêtre de conception de style.

Première action incontournable, changer le nom de style proposé par défaut : TabItem1Style1 est certainement moins explicite que, pour mon exemple, CloseTabItem.

Seconde étape, il faut glisser et déposer dans la structure un TButton de la palette. Par convention, ce bouton sera aligné à droite. Là encore, renseigner la propriété StyleName sera un plus non négligeable si, par la suite, je veux changer de glyphe en jouant sur les propriétés images et imageindex. Par défaut, j’ai décidé de fournir ce glyphe via la propriété StyleLookup comme étant un stoptoolbuttonbordered.

Une fois ces actions effectuées, j’applique les modifications et ferme le concepteur de style.

De retour au design de la forme, on remarque tout de suite qu’un composant TStyleBook a été créé. Le simple fait de changer la propriété StyleLookup du TTabItem, renseignée par défaut en TabItem1Style1, par le nom du style que je viens de créer (CloseTabItem), fait apparaître le bouton ajouté.

Néanmoins cela ne suffit pas : pour l’instant le bouton n’est relié à aucun événement et il est évidemment hors de question d’utiliser l’événement OnClick de l’onglet. Par rapport à la création d’un onglet présenté au chapitre I, la première chose à faire est, bien sûr, d’indiquer quel style appliquer en renseignant, comme lors de la conception, la propriété StyleLookup :

ATab.StyleLookup:='CloseTabItem';

Ensuite il faut assigner au bouton une procédure quelque peu particulière, un TNotifyEvent :

TButton(ATab.FindStyleResource('btnTabItem')).OnClick:=CloseTab;

mais aussi renseigner quel objet il faudra détruire (indication qui sera stockée dans une propriété du bouton créé, le très pratique : TagObject).

TButton(ATab.FindStyleResource('btnTabItem')).TagObject:=ATab;

Il n’y a alors plus qu’à coder cette procédure :

procedure TForm1.CloseTab(sender: TObject);
begin
  TTask.Run(
    procedure
    begin
      TThread.Synchronize(nil,
        procedure
        begin
         TButton(Sender).TagObject.DisposeOf;
        end);
    end);
end;

procedure TForm1.BtnStyleClick(Sender: TObject);
var ATab : TTabItem;
    ForeNumber : Integer;
begin
  ForeNumber:=TabControl1.TabCount;
  ATab:=TabControl1.Add();
  ATab.Text:='tabitem '+ForeNumber.ToString;
  Atab.StyleLookup:='CloseTabItem';
  // le bouton n’apparaît que si l’onglet est positionné 
  // en haut ou en bas  
  case TabControl1.EffectiveTabPosition of
    TTabPosition.Bottom,TTabPosition.Top : begin
      TButton(ATab.FindStyleResource('btnTabItem')).OnClick:=CloseTab;
      TButton(ATab.FindStyleResource('btnTabItem')).TagObject:=ATab;
    end;
  end;
  TabControl1.ActiveTab:=ATab;
end;

Tout fonctionne sur le poste de développement, un poste Windows 10, mais au déploiement vers d’autres systèmes d’exploitation (version de Windows antérieure, Mac, Android), il n’y a plus de bouton, de quoi devenir dingue ! Il ne s’agit pas d’une faute de programmation, mais d’un manque d’information concernant les styles. Depuis la version Seattle, les styles pour les différents systèmes d’exploitation sont, en quelque sorte, stockés dans le même conteneur, une sorte de super TStyleBook, qui contient une collection de styles. C’est là que ça se corse, tout à mon ajout, je n’ai pas fait attention au fait que je travaillais sur la collection Windows 10 Desktop (cela se fait naturellement).

Une autre manipulation aurait pu, elle aussi, me mettre sur la voie : changer de style.

Deux solutions sont envisageables pour pallier cette « erreur » :

• copier les éléments créés dans la collection par défaut et toutes les autres collections nécessaires ;
• supprimer la collection par défaut, puis renommer la collection Windows 10. En fait, quand j’écris « renommer » il ne s’agit pas tant d’écrire « défaut » que d’effacer le nom de la collection.

Même si la première solution est assez simple (quelques copier-coller), il est encore plus facile d’utiliser la seconde.