Discussion :

[navyg]

Bonjour,
Je crois que je vais devenir dingue avec les composants FMX sous Android.
Je souhaite juste avoir un TPanel noir avec des boutons blancs ou gris (ou vert, bleu, etc ...), et poser dessus un bouton qui reste de la couleur fixée (comme en VCL quoi ...) et sans passer par les styles auxquels j'ai essayé de me frotter et je n'ai toujours rien compris au bout de plusieurs mois de tentatives (je dois être complètement idiot, mais je ne veux pas passer par les styles qui sont beaucoup trop rigides).
J'ai essayé un Tpanel tout seul et un bouton dessus ... ça marche, et tout est gris ...
J'ai donc essayé de mettre un trectangle sur le Tpanel pour y affecter une couleur : ça marche bien, mais tous les boutons qui sont sur le Trectangle prennent la couleur du Trectangle ! c'est du grand n'importe quoi.
J'ai donc essayé de mettre un trectangle sur le bouton (évidemment il faut rajouter un Tlabel car le Trectangle cache le texte du bouton. Mais même en mettant un trectangle blanc dans le bouton et un trectangle noir sur le tpanel, j'obtiens ... du gris sur le bouton ...
Et bien sûr tous ces effets inattendus ne sont pas visibles lors de la conception.
Y a t'il un moyen de rendre indépendante la couleur du bouton qui est sur un trectangle ?
C'est tellement simple avec la VCL ...
Je pense qu'il faut torturer les gens d'embarcadero qui ont opté pour FMX, pour leur faire comprendre ce qu'endurent les utilisateurs.

Mais je ne veux pas utiliser les styles. Est-ce possible ?

Merci à ceux qui auront le temps de me répondre et me mettre sur la voix.

[gbegreg]

Bonsoir,

Sous FMX, je ne me sert plus des TPanel.
En VCL, il y avait des composants "conteneurs" tels que le TPanel pour contenir d'autres composants. En FMX, n'importe quel composant peut en contenir d'autres, c'est très pratique.
Pour la mise en page, il y a différents TLayout qui permettent de gérer les alignements et faire du "responsive".

Sans jouer avec les styles, je pense que vous pouvez avantageusement remplacer vos TPanel par des TLayout. Si vous souhaitez avoir des fonds de couleurs différentes et fixées à vos TLayout, placer un TRectangle dans chacun de vos TLayout. Vous pouvez définir la couleur (une couleur unie, un dégradé, un bitmap ou rien) dans le fond du TRectangle (propriété Fill) ainsi que le contour (propriété Stroke). De plus le TRectangle peut avoir des coins arrondis ou en biseau, ça peut être utile.

Vous pouvez placer ensuite un autre TRectangle dans le TRectangle précédent. Le TRectangle a un événement OnClick, il peut donc remplacer le bouton standard. Enfin, placez dans ce dernier TRectangle un TLabel pour le libellé du bouton.

Voici une capture d'écran montrant un exemple, la vue Structure montre l'arborescence des composants (j'ai ajouté des TGlowEffect à chaque rectangle représentant un bouton avec dans leur propriété "Trigger" la valeur IsMouseOver=true afin que l'effect Glow s'active lorsque le curseur de souris passe au dessus du rectangle) :

[navyg]

Merci pour ces conseils qui me confortent car j'en étais arrivé à la même conclusion, mais que c'est compliqué par rapport à la VCL.
Et en plus, le TCornerButton ne gère pas les "corner" sous android !
Car c'est uniquement sous android que j'ai vraiment des problèmes. Donc le onmouseover risque de ne pas fonctionner ... je vais voir.
Alors qu'effectivement avec un TRectangle je pourrai adoucir les angles
Merci beaucoup .... et du travail en perspective pour revoir mon interface.

[navyg]

Bon, j'y suis arrivé grâce à vos conseils.
Mais les gloweffect ne servent à rien sous android. Ou alors, ce qui est plus probable, je ne suis pas arrivé à en tirer quoi que ce soit.

Effectivement il faut oublier les Tpanel et les Tbutton. C'est vrai que ces objets nes sont pas très pratiques car ils sont hyper rapides et faciles à utiliser.

Il faut utiliser des Tlayout, dans lequel on met des Trectangle de la couleur voulue et on refait des boutons à partir de Trectangle et de TLabel

C'est juste beaucoup plus long et beaucoup plus compliqué qu'avec la VCL (rappelez moi ce que veut dire RAD Studio ?)

Je pense qu'il faudrait torturer très très très longuement et sauvagement les décideurs de chez embarcadero qui ont choisi de s'orienter sur FMX, rien que pour leur montrer les souffrances à développer avec cet environnement.

De toute façon, toutes ces nouvelles interfaces avec des objets touts plats sans relief sont d'une laideur absolue.
Je me rappelle que même avec Turbo-Pascal sous Dos (et même avant quand j'ai commencé à faire du Turbo-Pascal (en 1986 si mes souvenirs sont bons) sur un Amstrad 6128 avant même l'existence d'un PC), Borland avait pris soin de simuler le relief des objets et c'était plus sympa qu'une interface android actuelle !

Et ne parlons pas de la puissance des cartes graphiques actuelles qui permettraient d'avoir de jolies interfaces.

Vraiment Windows tourne mal et devient aussi laid que MacOs ou Android (voire même linux).

Et tout ça pour pouvoir faire fonctionner des softs sur des téléphones qui, même pour les plus grands, sont quasiment impossibles à utiliser pour la moindre application bureautique ou de gestion, qui représentent l'essentiel des softs dans le monde.

Mais heureusement qu'il reste plein d'objets sympa sous windows VCL ... si on ne choisit pas un thème windows 10 bien entendu.

Bon, c'était ma petite période râleur ... désolé, mais ... c'était mieux avant !!!

[SergioMaster]

Je crois que je vais devenir dingue avec les composants FMX sous Android
...sans passer par les styles auxquels j'ai essayé de me frotter et je n'ai toujours rien compris au bout de plusieurs mois de tentatives
...je dois être complètement idiot, mais je ne veux pas passer par les styles qui sont beaucoup trop rigides.

Ces réflexions me confortent dans mon objectif de néo-retraité : Écrire un "livre" sur les styles FMX. J'en ai la structure, dans peu de temps, je pense poser la question "Qu'est-ce que vous voudriez savoir/apprendre sur les styles FMX ?" afin d'ajouter des chapitres ou répondre à des questions qui ne me seraient pas venues à l'esprit. J'espère que tu y ajouteras tes questionnements.

J'ai essayé un Tpanel tout seul et un bouton dessus ... ça marche, et tout est gris ...
Mais je ne veux pas utiliser les styles. Est-ce possible ?

pour colorier un panel cf. la FAQ
Tu me rétorqueras certainement que n'utilise pas de style, mais en fait si, même sans stylebook ta/tes forme(s) utilise(nt) un style par défaut.
Toujours sans passer par une manipulation de style, as-tu songé à utiliser la propriété TintColor du TButton ?
Pour le moment, la propriété TintColor est disponible uniquement pour les plates-formes mobiles (iOS et Android).



p.s. pour donner du 'relief' au TRectangle j'ai ajouté un ShadowEffect et caché les bords (stroke.kind=none), une autre solution : ne pas montrer tous les bords.

Je pense qu'il faut torturer les gens d'embarcadero qui ont opté pour FMX, pour leur faire comprendre ce qu'endurent les utilisateurs.

Moi, c'est plus la gabegie de Ko qui me torture (une image par style par résolution) qui me fait soupirer .

gbegreg a tout à fait raison, en FMX, il vaut mieux utiliser des TLayouts (ou des dérivées de Tlayout) et des TRectangles que des Panels c'est d'ailleurs pour cela que j'avais sa réponse et n'avais pas été plus loin.

Mais les gloweffects ne servent à rien sous Android.

Je ne suis pas un grand utilisateur d'effets, j'aurais du mal à confirmer. Toutefois, il faut savoir que les styles utilisent souvent des effets, peut-être que dans ton cas, il y a double fonction. De plus, selon l'appareil de destination, il est possible que le rendu soit plus ou moins conforme à l'effet recherché.

Cela va être mon petit exercice dominical et matinal que de chercher confirmation.

Bon, c'était ma petite période râleur... désolé, mais... c'était mieux avant !!!

Totalement subjectif, on dit tous ça en colère

[SergioMaster]

Après quelques essais et pour répondre à tes demandes, je commence en partie avec une réponse n'utilisant aucun style (en théorie) mais quand même un TStylebook "dérivé"

peu de code

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
procedure TForm1.Button1ApplyStyleLookup(Sender: TObject);
begin
if Sametext(TButton(Sender).StyleLookup,'tintedcolorbutton') then
 begin
  var aRectangle:=TButton(Sender).FindStyleResource('background');
  if assigned(aRectangle) then TRectangle(aRectangle).Fill.Color:=TButton(Sender).TintColor;
 end;
end;
 
procedure TForm1.Button1Click(Sender: TObject);
begin
if TButton(Sender).TintColor<>TAlphacolors.Null then
  Rectangle1.Fill.Color:=TButton(Sender).TintColor
  else Rectangle1.Fill.Color:=TAlphaColors.Gold;
end;

pour un résultat qui, il me semble, est plus ou moins ta demande


Avantage de la solution d'utiliser un "dérivé du style" (à défaut d'autre terme) cela fonctionne aussi sous windows



Bien sûr, il y a pas mal de pièges à éviter, aujourd'hui, j'en relève 2, quant à la conception du style :

• Bien faire attention à la propriété HitTest.
• Bien faire attention à n'avoir que dans la StyleCollection que le style 'default'.

En contrepartie, l'utilisation de OnApplyStyleLookup, dans cet exemple, assez peu contraignante, peu vite devenir une gêne s'il avait fallu le coder pour chaque boutons.

Bon si tu es encore en mode râleur, tu vas me dire que je n'ai pas encore traité le gloweffect. Brillance (gloweffect) ou remplissage (filleffect) d'ailleurs, je me pose la question).
Je vais m'y atteler (même si pour Android un trigger comme onMouseOver quelle souris vais-je trouver ) bien que je me pose la question : le mettre dans mon tintedcolorbutton ou en dehors ?

Cependant, je te dois déjà des remerciements, cette recherche, va largement m'inspirer pour un chapitre de mon bouquin.

P.S. 'tintedcolorbutton' c'est un peu long comme nom, 'tintedbutton' aurait suffi, je pense

[navyg]

pour colorier un panel cf. la FAQ

Alors l'astuce de la FAQ, j'ai testé sans succès. Cela doit faire partie des exceptions évoquées ?
Pourtant j'ai scrupuleusement respecté le code.

Toujours sans passer par une manipulation de style, as-tu songé à utiliser la propriété TintColor du TButton ?Pour le moment, la propriété TintColor est disponible uniquement pour les plates-formes mobiles (iOS et Android).

Tintcolor, c'est la première fois que j'en entends parler !
J'ai passé des heures à scruter les propriétés du TCornerButton, et je croyais pourtant les avoir toutes passées en revue, mais il y en a tellement que j'ai dû passer dessus sans la voir
Je dois avouer que j'ai surtout cherché dans la logique des autres composants du côté d'une propriété Fill TBrush.

Je vais essayer dès que possible.

Merci Sergio.

Totalement subjectif, on dit tous ça en colère

Alors autant je développe décontracté en VCL, autant je suis très souvent en colère dès que j'aborde le développement sous FMX.
Et pourtant, j'ai testé le développement sous Turbo-Pascal Objet (je ne pense pas qu'on ait été énormément à se frotter à ça), avant Delphi, où il fallait définir et créer chaque objet par code (très très long et fastidieux).
J'ai failli abandonner l'informatique loisir à ce moment là jusqu'à ce que sorte Delphi 1, qui était une vraie révolution en terme de rapidité d'écriture de code.
Et bien je trouve que FMX c'est pire !

[SergioMaster]

Tintcolor, c'est la première fois que j'en entends parler !

Je ne sais pas quand c'est apparu (pour moi, c'est du récent, mais impossible de le vérifier aujourd'hui, depuis hier docwiki est aux abonnés absents)

J'ai passé des heures à scruter les propriétés du TCornerButton,

Je ne me suis attaché qu'aux TButtons (je crois n'avoir jamais utilisé de TCornerButton)

Alors autant je développe décontracté en VCL, autant je suis très souvent en colère dès que j'aborde le développement sous FMX.

c'est une question d'habitude, après une vingtaine d'applications FMX Desktop sans parler de mes centaines de divers petits essais, je suis désormais bien plus frustré par VCL que par FMX. Par contre, je me débats toujours avec Androïd les réflexes Desktop ont la peau dure !

[navyg]

je me débats toujours avec Androïd les réflexes Desktop ont la peau dure !

Alors c'est vrai je précise : c'est sous android fmx que j'ai le plus de mal.
Sous windows c'est déjà beaucoup plus simple, mais quand même il y a des lacunes énormes (comme les stringgrid sur lesquelles tu ne peux pas définir des colonnes fixes par exemple. Et pour moi, en gestion, point de salut sans une grid. Je ne supporte pas les tlistview et consorts avec lesquelles il faut des plombes pour accéder à la donnée que tu souhaites.
Ou tout simplement la taille ridicule des scrollbar sous android ! et j'en passe ...
En fait c'est Android qui est un OS de M...., ne serait ce que par toutes les complications de programmation à rallonge que cela demande.
Ca me rappelle un peu VBA pour lequel tu dois écrire une ligne de code très longue pour un truc ridicule à faire.

Je suis toujours très remonté ce matin.

[navyg]

Après quelques essais et pour répondre à tes demandes, je commence en partie avec une réponse n'utilisant aucun style (en théorie) mais quand même un TStylebook "dérivé"

peu de code

Je n'avais pas vu ce message là avant ma réponse.
Mais tu utilises déjà le concepteur de style, auquel je ne comprends rien.
Dès que j'essaye de l'utiliser ça fout la merde dans tous les objets et je ne peux pas revenir en arrière en cas d'erreur ! Je suis obligé de supprimer le projet et de repartir à zéro.
Je ne veux pas utiliser cet outil du diable !
Mais merci quand même de tous les efforts que tu fais au long de tes tutos. Malgré ces tutos que j'ai essayé de suivre pas à pas je n'y arrive pas (je dois faire un rejet violent). En plus je trouve le produit très compliqué d'utilisation et illogique. Pourtant moi je suis très structuré et rationnel.

Concernant TintColor, je viens d'essayer et le problème reste entier, le bouton reste semi-transparent et tu n'obtiens pas la couleur désiré, mais une couleur mélangé avec la couleur que tu mets derrière. D'ailleurs dans ton exemple on voit bien les points de la maille derrière le bouton.

Moi je ne veux pas que le fond interfère avec la couleur que je mets sur le bouton. Avant on ne se posait pas de problèmes, il n'y avais pas de transparence et de canal Alpha et c'était beaucoup plus joli avec des couleurs "entières". Marre de tous ces "filtres" qu'on est obligé de mettre partout maintenant, qui ne sont que des effets de mode..

Pareil pour les effets divers et variés qui sont finalement laids comme tout : un simple relief donné aux objets suffit amplement à faire quelque chose de simple et joli. Pourquoi ils n'ont pas fait un effet qui s'appelle juste Window7 !

[SergioMaster]

Alors c'est vrai je précise : c'est sous android fmx que j'ai le plus de mal.

Que ce soit Android, Linux Windows (pour ceux que je pratique) FMX reste FMX. La complication Android vient des permissions, de la gestion Asynchrone et du mono-fenêtrage.

comme les stringgrid sur lesquelles tu ne peux pas définir des colonnes fixes par exemple. Et pour moi, en gestion, point de salut sans une grid.

Les Grids (j'aime moins le Stringgrid qui apporte moins) c'est un domaine que j'ai attaqué très tôt dans mes tutoriels sur Livebindings, mais j'ai encore beaucoup à faire.

Je ne supporte pas les tlistview et consorts avec lesquelles il faut des plombes pour accéder à la donnée que tu souhaites.

Objections :
AMHA, avec Android, c'est mieux qu'une grille
Accèder à la donnée est simple s'il s'agit d'une grille liée et synchronisée à une source de données.

Je suis toujours très remonté ce matin.

Ça se ressent, mais je maintiens qu'il s'agit d'une question d'habitude.

Mais tu utilises déjà le concepteur de style, auquel je ne comprends rien.
Je ne veux pas utiliser cet outil du diable !

et encore, tu ne t'es pas confronté au concepteur de styles de bitmaps !
Effectivement, l'outil de conception est perfectible même s'il a évolué par rapport à mes premiers combats avec.
De plus, selon les versions, le stylebook est plus ou moins lisible dans le DFM.
Désormais en binaire

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
 object StyleBook1: TStyleBook
    Styles = <
      item
        ResourcesBin = {
          464D585F5354594C4520322E3501061174696E746564636F6C6F72627574746F
          6E031004005450463007544C61796F757400095374796C654E616D6506117469
          6E746564636F6C6F72627574746F6E05416C69676E070643656E7465720A5369
          7A652E57696474680500000000000000EA05400B53697A652E48656967687405
          00000000000000A404401453697A652E506C6174666F726D44656661756C7408
          085461624F726465720204000A5452656374616E676C6500095374796C654E61
          6D65060A6261636B67726F756E6405416C69676E0708436F6E74656E74730A46
          696C6C2E436F6C6F720707636C61476F6C640748697454657374080A53697A65
          2E57696474680500000000000000EA05400B53697A652E486569676874050000
          0000000000A404401453697A652E506C6174666F726D44656661756C74080B53
          74726F6B652E4B696E6407044E6F6E6507585261646975730500000000000000
          A0024007595261646975730500000000000000A00240000D54536861646F7745
          666665637400095374796C654E616D65060D536861646F774566666563743208
          44697374616E63650500000000000000C0004009446972656374696F6E050000
          0000000000B4044008536F66746E6573730500000000009A9999FD3F074F7061
          636974790500000000009A9999FE3F0B536861646F77436F6C6F720708636C61
          426C61636B0000001654427574746F6E5374796C65546578744F626A65637400
          095374796C654E616D6506047465787405416C69676E0706436C69656E74064C
          6F636B6564090C4D617267696E732E4C65667405000000000000008000400B4D
          617267696E732E546F70050000000000000080FF3F0D4D617267696E732E5269
          67687405000000000000008000400E4D617267696E732E426F74746F6D050000
          0000000000C000400A53697A652E57696474680500000000000000E205400B53
          697A652E48656967687405000000000000009404401453697A652E506C617466
          6F726D44656661756C7408045465787406045465787416546578745365747469
          6E67732E466F6E742E53697A6505000000000000009003401654657874536574
          74696E67732E466F6E74436F6C6F7207097846463232323232320D536861646F
          7756697369626C650808486F74436F6C6F7207097846463232323232320C466F
          6375736564436F6C6F7207097846463232323232320B4E6F726D616C436F6C6F
          7207097846463232323232320C50726573736564436F6C6F7207097846463232
          3232323200000B54476C6F7745666665637400095374796C654E616D65061047
          6C6F77456666656374315374796C6508536F66746E657373050000000000CDCC
          CCFD3F09476C6F77436F6C6F72070D636C614D656469756D626C7565074F7061
          636974790500000000006666E6FE3F0754726967676572061049734D6F757365
          4F7665723D7472756507456E61626C656408000000}
      end>

c'est vrai que c'est incompréhensible !
Pourtant, en clair (j'ai sauvegardé le style dans un fichier)

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
object TStyleContainer
  object TLayout
    StyleName = 'tintedcolorbutton'
    Align = Center
    Size.Width = 117.000000000000000000
    Size.Height = 41.000000000000000000
    Size.PlatformDefault = False
    Visible = False
    TabOrder = 4
    object TRectangle
      StyleName = 'background'
      Align = Contents
      Fill.Color = claGold
      HitTest = False
      Size.Width = 117.000000000000000000
      Size.Height = 41.000000000000000000
      Size.PlatformDefault = False
      Stroke.Kind = None
      XRadius = 10.000000000000000000
      YRadius = 10.000000000000000000
      object TShadowEffect
        StyleName = 'ShadowEffect2'
        Distance = 3.000000000000000000
        Direction = 45.000000000000000000
        Softness = 0.300000011920929000
        Opacity = 0.600000023841857900
        ShadowColor = claBlack
      end
    end
    object TButtonStyleTextObject
      StyleName = 'text'
      Align = Client
      Locked = True
      Margins.Left = 2.000000000000000000
      Margins.Top = 1.000000000000000000
      Margins.Right = 2.000000000000000000
      Margins.Bottom = 3.000000000000000000
      Size.Width = 113.000000000000000000
      Size.Height = 37.000000000000000000
      Size.PlatformDefault = False
      Text = 'Text'
      TextSettings.Font.Size = 18.000000000000000000
      TextSettings.FontColor = xFF222222
      ShadowVisible = False
      HotColor = xFF222222
      FocusedColor = xFF222222
      NormalColor = xFF222222
      PressedColor = xFF222222
    end
    object TGlowEffect
      StyleName = 'GlowEffect1Style'
      Softness = 0.400000005960464500
      GlowColor = claMediumblue
      Opacity = 0.899999976158142100
      Trigger = 'IsMouseOver=true'
      Enabled = False
    end
  end
end

ce ne sont ni plus ni moins que des composants et leurs propriétés

Dès que j'essaye de l'utiliser ça fout la merde dans tous les objets et je ne peux pas revenir en arrière en cas d'erreur ! Je suis obligé de supprimer le projet et de repartir à zéro.

En général, une simple suppression du stylebook suffit
Concernant l'effet, j'eusse aimé avoir une explication de ce que tu voulais avec ton gloweffect