IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Delphi - Introduction aux styles Firemonkey (FMX) : apprendre diverses manières d'utiliser le composant TStyleBook pour enjoliver votre interface utilisateur,
Un tutoriel de Serge Girard

Le , par SergioMaster

30PARTAGES

50  0 
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 :



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 ?
Vous avez lu gratuitement 1 590 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de Bernard B
Membre averti https://www.developpez.com
Le 12/02/2025 à 13:21
Tuto très agréable à suivre, clair simple et efficace.
Enfin un éclaircissement sur cette technique, en attendant avec impatience la suite.

Merci Sergio
6  0 
Avatar de NABIL74
Membre confirmé https://www.developpez.com
Le 12/02/2025 à 19:00
Un grand merci pour ce tuto clair et détaillé ! Votre pédagogie est top, continuez comme ça, c’est très précieux !
5  0 
Avatar de BrunoTrez
Nouveau Candidat au Club https://www.developpez.com
Le 23/02/2025 à 12:35
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
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
0  0 
Avatar de SergioMaster
Rédacteur/Modérateur https://www.developpez.com
Le 24/02/2025 à 7:37
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.
0  0 
Avatar de BrunoTrez
Nouveau Candidat au Club https://www.developpez.com
Le 24/02/2025 à 9:08
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.
0  0 
Avatar de SergioMaster
Rédacteur/Modérateur https://www.developpez.com
Le 24/02/2025 à 10:36
Citation Envoyé par BrunoTrez Voir le message
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
0  0