Styles FMX : Introduction à la personnalisation

Un élément de base (rectangle,cercle…) a bon nombre de propriétés facilement personnalisables, en particulier le remplissage et la bordure.

En exemple, le changement du remplissage en utilisant un gradient.

Mais l’on peut aussi ajouter des effets aux éléments.

Deux types d’effets :

. ceux qui se retrouvent dans la palette de composants ;

Dire que tous les effets sont applicables à tous les composants visuels, c’est peut-être s’avancer un peu trop. De plus, certains des effets ne fonctionnent pas ensemble. En exemple :

Dans la partie gauche de l’image, les deux effets appliqués sur le conteneur (un TLayout) sont actifs, l’effet de floutage (BlurEffect) ne fonctionne pas. A contrario, dans la partie droite, l’effet d’ombre (ShadowEffect) est désactivé d’où le rendu de floutage.

Donc, testez, re-testez et n’en abusez pas trop.

. Plus difficiles à trouver, ceux « intrinsèques », créés via certaines propriétés du composant lui-même. Ces propriétés sont signalées par ce symbole devant la valeur de la propriété. Un sous-menu permet alors de créer l’effet en utilisant l’option de menu « Créer un nouveau TColorAnimation… ».

Dans ce tableau, les triggers disponibles :

Pour illustrer ce propos, j’ajoute au TRectangle (identifiant background) un second effet de lumière (GlowEffect) trouvé dans la palette des composants « Effets ». Cet effet sera désactivé au survol de la souris.

Comme je l’ai indiqué au début du chapitre I.B, l’avantage de FMX est que chaque composant peut être le parent d’autres composants. Pour corser et démontrer TColorAnimation, ajoutons-en un.

Sélectionnez la couleur de remplissage du TRectangle. Au lieu de sélectionner une couleur, utilisez l’option (tout en bas du menu des couleurs) « Créer un nouveau TColorAnimation… ». Modifiez les couleurs de début et de fin (StartValue, StopValue) et indiquez les triggers de déclenchement.

Déplacez ensuite la souris sur le composant pour voir ce qui se passe.

En dernier lieu, je vais ajouter un TLabel(2) pour que cela ressemble à un bouton.

Il faut savoir que l’on peut également combiner ces déclencheurs, exemple :

Vous avez donc, un nombre incroyable de possibilités, combinaisons d’effets et de composants laissant libre cours à votre seule imagination !

TLabel est un composant stylé contrairement à TText.

Qu’est-ce que cela implique ? Les caractéristiques de la police de caractères seront celles du style appliqué à la fiche (dans cette démo, le style par « défaut »), sauf si vous stipulez les propriétés StyledSettings indiquant quelles parties du style vous voulez garder. En exemple, si vous voulez uniquement changer la couleur, décochez FontColor.

Pour un TText, vous devrez indiquer toutes les caractéristiques de la police de caractères que vous désirez.

Il y a du pour et du contre :

Quelques précisions à ce sujet. La règle énoncée à la fin du chapitre I.A n’est pas complète ou plutôt doit être nuancée.

« Un élément à la racine de StyleContainer doit avoir un identifiant unique. » 

C’est applicable au sein d’un TStyleBook et encore, plus précisément, au sein de chaque parent (StyleContainer inclus).

Par contre, entre deux styles, c’est loin d’être une obligation, a contrario cela peut même s’avérer payant.

Par exemple, vous désirez que vos TPanels soient tous circulaires. La solution, renommer l’identifiant pcircle en panelstyle. L’identifiant panelstyle étant déjà utilisé par le style de la fiche (Rappel : comme nous n’en avons indiqué aucun, il s’agit du style par défaut), le TStyleBook personnalisé ayant priorité sur le style de la fiche, tout TPanel posé aura donc une forme circulaire.

Il faut passer par la modification de la propriété StyleLookup, mais il ne faut pas oublier de l’appliquer, ce que fait l’instruction ApplyStyleLookup d’un composant stylé.

Panel1.StyleLookup := 'prectangle';
Panel1.ApplyStyleLookup;

L’accès au texte n’est pas si simple que ça non plus (dans le cas d’un TPanel, contrairement à celui de la VCL, pas de propriété caption). Il faut utiliser la méthode FindStyleResource pour retrouver un élément du style.

// TText plutôt que TLabel permet d’obtenir plus de possibilités de 
// mise en forme 
TText(Panel1.FindStyleResource('text', False)).text := 'un cercle!';

Pour la démonstration, il suffit d’ajouter un bouton (TButton ou TCornerButton) et de coder son évènement OnClick.

procedure TMain.Button1Click(Sender: TObject);
begin
  if Button1.Tag = 0 then
  begin
    Panel1.StyleLookup := 'prectangle';
    TText(Panel1.FindStyleResource('text', False)).text := 'un cercle!';
    Panel1.ApplyStyleLookup;
    Panel2.StyleLookup := 'pcircle';
    TText(Panel2.FindStyleResource('text', False)).text := 'un rectangle!';
    Panel2.ApplyStyleLookup;
    Button1.Tag := 1;
  end
  else
  begin
    Panel1.StyleLookup := 'pcircle';
    TText(Panel1.FindStyleResource('text', False)).text := 'un cercle';
    Panel1.ApplyStyleLookup;
    Panel2.StyleLookup := 'prectangle';
    TText(Panel2.FindStyleResource('text', False)).text := 'un rectangle';
    Panel2.ApplyStyleLookup;
    Button1.Tag := 0;
  end;

end;

Pas très flagrant l’utilisation avec un TPanel ?

Déposez un nouveau bouton sur la fiche en indiquant le StyleLookup contenant le cercle. Saisissez ensuite un libellé (propriété Text) pour ce bouton.

Codifiez l’évènement onClick de ce bouton pour faire une opération quelconque, par exemple afficher un simple message.

procedure TMain.BoutonRondClick(Sender: TObject);
begin
Showmessage('Clic sur le bouton');
end;

Comme l’indiquent les textes de légende, je vais coder l’évènement OnClick du panneau TPanel, que j’ai renommé PTriangle, pour faire varier les couleurs de façon aléatoire.

Ce code me permet d’introduire deux manières différentes d’utiliser la fonction FindStyleResource.

procedure TMain.PTriangleClick(Sender: TObject);
var Triangle : TFMXObject;
    rectangle : Trectangle;
begin
// deux manières d'accéder aux éléments de style
// FindStyleRessource
 triangle:=PTriangle.FindStyleResource('trianglepath');
 if Assigned(Triangle) AND (Triangle is FMX.Objects.TPath) then
  FMX.Objects.TPath(Triangle).fill.Color:=TAlphaColorF.Create( random(255) / 255, random(255) / 255, random(255) / 255, 1).ToAlphaColor;
// FindStyleResource<Type>
 PTriangle.FindStyleResource<TRectangle>('background',rectangle);
 if assigned(rectangle) then
  begin
    rectangle.Fill.kind:=TBrushKind(ifthen(random(2)<1,0,1));
    rectangle.fill.color:=TAlphaColorF.Create( random(255) / 255, random(255) / 255, random(255) / 255, 1).ToAlphaColor;
  end;
end;

À l’exécution vous pourriez obtenir quelque chose comme ceci :

L’inconvénient du composant TPath, c’est qu’il est « monocouleur » si l’on excepte l’utilisation en remplissage de gradient ou d’image.

L’utilisation de la bibliothèque Skia est depuis peu intégrée à Delphi, ce qui nous permet d’obtenir des dessins proches des images au format .png sans les inconvénients inhérents aux diverses résolutions des écrans.

Déposez un composant TSKSVG sur votre forme, choisissez votre remplissage à partir d’un fichier.

J’ai choisi de montrer le drapeau du Bhoutan qui est quand même bien complexe niveau dessin !

La question qui se pose est alors   « peut-on utiliser ce composant au sein d’un style et comment le modifier ? »

Pour ce qui est de l’utilisation, pas de problème, les mêmes techniques que précédemment fonctionnent parfaitement à savoir :

• déposer un TLayout, lui donner un identifiant de style ;
• mettre un composant TSKSvg « à l’intérieur », et jouer sur les alignements.

Pour ce qui est de modifier le dessin chargé au moment de l’exécution, on a déjà vu, en particulier chapitre I.D.1 que la fonction FindStyleResource permettait d’accéder au composant. Il ne s’agit donc en fait que de savoir comment charger, dans la propriété Svg.Source, le dessin voulu.

Le programme de démonstration va vous proposer trois méthodes de modification et cela via l’utilisation d’une boite de choix déposée en dessous d’un nouveau TPanel utilisant le nouveau style défini (stylename = unsvg).

La boite de choix va contenir quatre éléments :

1. Bhoutan (fichier)
2. France
3. Ukraine
4. Grenades (ressource)

J’ai classé les dessins en trois types. Le premier est un fichier, le même que celui utilisé pour créer le style.
Deux autres sont définis en tant que constantes, directement incluses dans la procédure.

Quant au dernier, je l’ai inséré directement en tant que ressource.

Pour cela, j’ai fait appel au menu de l’IDE (Projet/Ressources et images…) ce qui m’a ouvert ce dialogue :

procedure TMain.ComboBox1Change(Sender: TObject);
const
france = '<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600">'+
         '<path fill="#CE1126" d="M0 0h900v600H0"/>'+
         '<path fill="#fff" d="M0 0h600v600H0"/>'+
         '<path fill="#002654" d="M0 0h300v600H0"/>'+
         '</svg>';
const
ukraine = '<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800">'+
          '<rect width="1200" height="800" fill="#0057B7"/>'+
          '<rect width="1200" height="400" y="400" fill="#FFD700"/>'+
          '</svg>';
var
  rs : TResourceStream;
  st : TStringStream;
begin
  case ComboBox1.ItemIndex of
    0:
      begin
        TSKSVG(Panel4.FindStyleResource('svg')).svg.Source :=
          TFile.ReadAllText('..\..\Flag_of_Bhutan.svg');
      end;
    1:
      TSKSVG(Panel4.FindStyleResource('svg')).svg.Source := france;
    2:
      TSKSVG(Panel4.FindStyleResource('svg')).svg.Source := ukraine;
    3:
      begin
        Rs := TResourceStream.Create(MainInstance, 'grenada', RT_RCDATA);
        st := TStringStream.Create;
        try
          st.LoadFromStream(Rs);
          TSKSVG(Panel4.FindStyleResource('svg')).svg.Source :=
            st.ReadString(st.size);
        finally
          Rs.free;
          st.free;
        end;
      end;
  end;
end;

Ouvrez le TStyleBook, ajoutez un TLayout, donnez-lui un identifiant de style (j’ai choisi de le nommer webbutton).

Je pense que désormais, vous devez commencer à maîtriser ces opérations.

Cette fois, nous n’allons pas utiliser un des composants de la palette Formes, mais un de ceux de la palette Style.

Il en existe quand même pas mal, comme nous allons définir un bouton, de surcroît pour une application Windows, mon choix s’arrête sur le composant TButtonStyleObject.

Déposez donc ce composant dans le TLayout, n’oubliez pas l’alignement (client) et de donner un identifiantpropriété StyleName si d’aventure vous vouliez, à l’exécution, le triturer un peu (l’identifiant par défaut : ButtonStyleObject1Style, même s’il est explicite, n’est quand même pas très maniable). .

Sélectionnez le composant de style et, plus particulièrement, une des propriétés dont le nom se termine par link.

Utilisez le bouton qui, aucune image n’étant définie, va vous ouvrir un dialogue de sélection .

Une fois l’image sélectionnée (j’ai délibérément choisi la petite taille), nous devons en sélectionner une zone.

C’est, sans aucun doute, la partie la plus délicate de l’opération !

Vous apercevez un point vert au centre, beaucoup moins visibles vous découvrirez des points jaunes aux quatre coins ainsi que deux points bleus (coins supérieur gauche et inférieur droit).

Comme on le voit sur l’image, les points jaunes sont presque invisibles, déplacez légèrement les deux points bleus. Le coin supérieur gauche vers le bas et la droite de façon à obtenir une petite marge et répétez l’opération pour le coin inférieur droit.

Une fois ces marges obtenues, vous devriez voir plus facilement ces points jaunes.

Utilisez désormais les points jaunes pour retailler l’image.

N’hésitez pas à utiliser le zoom !

L’objectif, définir le cadre et le fond du bouton, comme ci-dessous.

À ce stade, répétez l’opération pour les trois autres types de liens.

Vous remarquerez en bas à gauche une première représentation de votre futur bouton.

Une fois les sélections faites, fermez l’« Éditeur de BitmapLinks ».

N’oubliez pas d’ajouter à ce style, un TLabel ou un TText (rappel de la différence, le tableau TLabel vs TText I.B.2 ). Dans ce cas précis, j’ai plutôt choisi un TText ne voulant pas que la couleur puisse changer en fonction de ce que le StyleManager pourrait appliquer plus tard, ce qui pourrait rendre le texte peu visible. Imaginez, par exemple, que le style propose une couleur bleu clair ! Peu probable, mais…

La « définition d'écran » et « l'échelle » sont deux concepts distincts, mais liés, qui influencent la manière dont une application s'affiche sur différents appareils.

• La définition fait référence au nombre de pixels physiques disponibles sur l'écran d'un appareil, généralement exprimée en largeur × hauteur (par exemple, 1920×1080 pour un écran Full HD). C'est une caractéristique matérielle fixe, déterminée par l'écran lui-même. Dans FMX, la définition est importante, car elle définit la « toile » brute sur laquelle l'application va dessiner ses éléments ;
• L'échelle, ou facteur de mise à l'échelle, est un ajustement logiciel qui détermine comment les pixels physiques sont dessinés. Elle est liée à la densité de pixels (DPIDot Per Inch, points par pouces ) et permet à une interface de s’adapter à des écrans de différentes densités sans que les éléments paraissent trop petits ou trop grands. En exemple, sur un écran haute densité une échelle de 2.0 signifie que chaque « point » logique correspond à 2×2 pixels physiques.

FireMonkey est conçu pour être multiplate-forme et DPI-aware. Cela signifie que l’échelle est appliquée automatiquement pour adapter l’interface à la densité de l’écran :

• Si vous concevez une interface avec des tailles en « points » (unités logiques), FMX multiplie ces valeurs par le facteur d’échelle pour déterminer la taille en pixels réels.
• Exemple : un bouton de 50×50 points sur un écran avec une échelle de 2.0 sera rendu en 100×100 pixels.

Avec Firemonkey, il faut donc prendre en compte les échelles et, pour éviter les crénelages (phénomène aussi nommé pixellisation), ajouter des images pour diverses échelles.

Deux manipulations possibles, toujours avec le style ne contenant que la plus petite des images, pour s’en rendre compte :

• utilisez le zoom de l’Éditeur de BitmapLinks, indiquez une valeur importante (dans l’image ci-dessous 1000%) ;

  

• Ou, modifiez le facteur d’échelle du composant au design (rien qu’avec un facteur de 5, on commence à voir le phénomène).

III-B-2-a. Ajout d’images pour d’autres échelles▲

Pour la modification de l’image, commencez par ouvrir l’une des propriétés de lien et sélectionnez l’image.

Cliquez sur le bouton de modification pour ajouter une nouvelle image.

Ajoutez la nouvelle image avec le bouton en n’oubliant pas de spécifier l’échelle de celle-ci.

Pour les besoins de la démonstration, je me suis amusé un peu en changeant carrément de code couleur. Ce n’est pas forcément ce que l’on ferait dans une application.

Validez les modifications d’image et fermez ce dialogue

Nous devons alors ajouter des échelles en utilisant cette barre d’outils,

qui ouvre ce dialogue

Sans être une recommandation, il faudrait ajouter les échelles 1.5, 2 et même 3 pour couvrir les échelles possibles des écrans actuels.

Ensuite, vous devrez répéter les sélections de zones pour le bouton avec à l’échelle 1.5x :

Si, comme moi, vous avez un écran avec une échelle plus élevée (dans mon cas 150%), à la sauvegarde du style, le bouton est devenu rose.

Tester les différentes échelles est assez fastidieux puisque vous devrez modifier les paramètres d’affichage de votre écran ( Paramètres/paramètres d’écran)
et jouer avec l’échelle.

Avertissement

J’ai eu quelques problèmes pour redéfinir certains des liens pour l’échelle ajoutée (1,5x).
Les PressedLink et HotLink refusaient systématiquement de passer sur la seconde image.

Symptôme : Mise à l’échelle de 1,00x apparaissait deux fois !

Je vous livre mon astuce :

1. Sauvegarder, via le style dans un fichier ;
2. Éditer le fichier via l’IDE ou un éditeur de texte ;

Style

Sélectionnez

      PressedLink = <
        item
          CapInsets.Left = 9.000000000000000000
          CapInsets.Top = 9.000000000000000000
          CapInsets.Right = 8.000000000000000000
          CapInsets.Bottom = 7.000000000000000000
          SourceRect.Left = 155.000000000000000000
          SourceRect.Top = 3.000000000000000000
          SourceRect.Right = 224.000000000000000000
          SourceRect.Bottom = 71.000000000000000000
        end
        item
          CapInsets.Left = 10.000000000000000000
          CapInsets.Top = 12.000000000000000000
          CapInsets.Right = 13.000000000000000000
          CapInsets.Bottom = 15.000000000000000000
          Scale = 1.500000000000000000
          SourceRect.Left = 310.000000000000000000
          SourceRect.Right = 452.000000000000000000
          SourceRect.Bottom = 142.000000000000000000
        end>

3. Ajouter l’élément Scale manquant ou erroné (en gras) ;
4. Recharger le fichier modifié toujours via le concepteur de styles ;
5. Et définir à nouveau les liens erronés ;
6. N’oubliez pas ensuite de sauvegarder à nouveau (pour la postérité), mais, surtout de fermer le concepteur afin que le style ainsi modifié soit appliqué dans le source de la fiche (fichier .fmx).

Ouvrir ce fichier de style, comme il s’agit d’un fichier texte, augmentera peut-être votre curiosité.
Il n’est pas dans mon intention dans cette introduction d’en faire une plus ample étude.

Tout d’abord, cela va beaucoup dépendre des images utilisées. En second lieu, plus il y aura d’images plus la taille du style va augmenter. Et enfin, il faudrait dans le cas d’un TButtonStyleObject répéter à chaque fois les opérations décrites au début du chapitre III.B.1.

Dans le cas de trois échelles, cela revient à répéter les opérations de sélections douze fois !

Loin d’être agréable, surtout que, sans rentrer dans les détails et à peaufiner, il est possible d’avoir un rendu assez approchant uniquement en utilisant ce que l’on a vu chapitre I.