Discussion :

[SergioMaster]

Delphi à 30 ans. À l'occasion de son anniversaire, je voulais faire un geste et partager avec vous les fruits de mes expériences Firemonkey.

Voici donc le premier le premier, de, je l'espère, une longue série de tutoriaux sur l'utilisations des styles.

Ce tutoriel s’adresse aux personnes qui souhaitent se lancer dans l'écriture d'applications FMX et utiliser les styles pour rendre moderne l'interface utilisateur.

Consultez le tutoriel :

Delphi - Introduction aux styles Firemonkey (FMX)
Apprendre diverses manières d'utiliser le composant TStyleBook pour enjoliver votre interface utilisateur

Pour poser les bases de cette utilisation, seul l'environnement Windows est abordé. Les exemples, téléchargeables, ont été réalisé avec la version 12.1 de Delphi, correspondant à la version Community.

Et vous ?
Que pensez-vous de cet article ?
Utilisez-vous la personnalisation de styles ?

[Bernard B]

Tuto très agréable à suivre, clair simple et efficace.
Enfin un éclaircissement sur cette technique, en attendant avec impatience la suite.

Merci Sergio

[NABIL74]

Un grand merci pour ce tuto clair et détaillé ! Votre pédagogie est top, continuez comme ça, c’est très précieux !

[BrunoTrez]

Le problème avec les styles fournis (C:\Program Files (x86)\Embarcadero\Studio\23.0\Redist\styles\Fmx ) c'est qu'ils font référence à d'ENORMES images PNG, ce qui est bien cher pour simplement indiquer des couleurs ou des formes simples (comme les croix ou coches des Checkbox) aux éléments, et très compliqué à modifier (éditeur de bitmap de style lourd et bogué).
Pour ma part je crée mes propres styles "à la main" dans Notepad.
J'utilise toujours un seul Stylebook par programme avec la propriété UsedStyleManager à True, même s'il n'y a qu'une fiche.
Il est toujours possible d'utiliser localement un Png pour les cas particuliers comme le Sizegrip.
Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
object TStyleContainer
  object TRectangle
    StyleName = 'backgroundstyle'
    HitTest = False
    Stroke.Kind = None
  end
  object TLayout
    StyleName = 'sizegripstyle'
    object TImage
      MultiResBitmap = <
        item
          Width = 11
          Height = 11
          PNG = {
            89504E470D0A1A0A0000000D494844520000000B0000000B0806000000A9AC77
            260000000473424954080808087C086488000000244944415418956360A03610
            1616FE4F1B13A96732BA89949B8CCB44F24D26642259260300F0211249774938
            7B0000000049454E44AE426082}
        end>
      Align = Center
      Locked = True
      HitTest = False
      Position.X = 6.000000000000000000
      Position.Y = 6.000000000000000000
      WrapMode = Original
    end
  end
  object TLayout
    StyleName = 'editstyle'
    Align = Center
    Size.Width = 100.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    object TRectangle
      StyleName = 'background'
      Align = Contents
      Locked = True
      HitTest = False
      Stroke.Kind = None
      object TRectangle
        Align = Contents
        Fill.Kind = None
        Locked = True
        HitTest = False
        Margins.Left = 1.000000000000000000
        Margins.Top = 1.000000000000000000
        Margins.Right = 1.000000000000000000
        Margins.Bottom = 1.000000000000000000
        Stroke.Color = xFF3E3E3E
      end
    end
    object TBrushObject
      StyleName = 'foreground'
      Brush.Color = claBlack
    end
    object TBrushObject
      StyleName = 'selection'
      Brush.Color = x70269BDA
    end
    object TLayout
      StyleName = 'content'
      Align = Client
      Locked = True
      Margins.Left = 4.000000000000000000
      Margins.Top = 3.000000000000000000
      Margins.Right = 3.000000000000000000
      Margins.Bottom = 3.000000000000000000
    end
    object TInnerGlowEffect
      Softness = 0.2000000000
      GlowColor = xFF009DFA
      Opacity = 0.90000000000
      Trigger = 'IsFocused=true'
      Enabled = False
    end
  end
...

Après compilation, j'utilise un éditeur de ressources (http://www.angusj.com/resourcehacker/ ) pour supprimer les data de style par défaut (il faut avoir mis UsedStyleManager à True sinon le programme ne marchera plus !).

Mes créations :
http://bruno.tredez.com/Programmation/index.html

[SergioMaster]

Bienvenue sur le forum

Le problème avec les styles fournis (C:\Program Files (x86)\Embarcadero\Studio\23.0\Redist\styles\Fmx ) c'est qu'ils font référence à d'ENORMES images PNG, ce qui est bien cher pour simplement indiquer des couleurs ou des formes simples (comme les croix ou coches des Checkbox) aux éléments

Pas tous, mais et c'est ce que je prône, utiliser des styles sans utilisation des composants Tstylexxx faisant référence aux images est certainement le mieux pour "réduire la facture"

éditeur de bitmap de style lourd et bogué

Hélas, mais découvrir un éditeur de style parfait n'est pas aussi simple qu'il n'y paraît

Après compilation, j'utilise un éditeur de ressources (http://www.angusj.com/resourcehacker/ ) pour supprimer les data de style par défaut

comme il s'agit d'un tutoriel pour débutant (ou du moins supposé pour) je ne voulais pas les embarquer vers ces astuces.
De plus, si l'on peut supprimer les ressources windows, quid des programmes Android, OSX, IOS et Linux ?

En cours de correction justement, la personnalisation de styles.
En cours d'écriture le chargement de styles à l'éxécution.
En prévision beaucoup d'autres mais plus particulièrement, et pour rester dans le sujet, l'étude de la structure d'un fichier style.

[BrunoTrez]

Merci pour cette réponse.
L'astuce de l'allègement des ressources est à la portée d'un débutant (c'est quelques clics), et je reste dans le sujet du spécifique Windows.
J'étais passé à FMX pour bénéficier de l'affichage rapide (pour les jeux) et du multiplateforme. j'ai regardé du côté d'Androïd et i-OS mais j'ai vite abandonné ; c'est tout un monde que je ne connais pas .
Je suis impatient de lire le futur article sur la syntaxe des styles ; je n'ai trouvé aucune documentation et j'ai beaucoup tâtonné, notamment pour personnaliser la barre de titre des fenêtres.

[SergioMaster]

j'ai regardé du côté d'Androïd et i-OS

n'oublions pas aussi Linux pour ceux qui ont une version Entreprise
En ce moment je me bats sur les compatibilités selon les divers chargement de styles (mon troisième tuto en cours d'écriture) entre les diverses possibilités de Windows elles deviennent plus limitées pour Android et Linux.
N'ayant pas de truc à la pomme, je ne peut pas me prononcer sur OSX et iOS, quand j'en serai à cette étape, je ferai appel à la communauté.

Je suis impatient de lire le futur article sur la syntaxe des styles ; je n'ai trouvé aucune documentation et j'ai beaucoup tâtonné, notamment pour personnaliser la barre de titre des fenêtres.

moi aussi et ce n'est encore qu'au stade de projet