Sind Styles brauchbar?

[TigerLilly]

Ich habe mich jetzt in FMX ein bissl mit Styles gespielt + hab nicht den Einbdruck, dass das wirklich brauchbar ist. Die Styles ändern zT Fopntgrößen und Komponentengrößen und mit dem Wechsel des Styles schaut das Formular plötzlich furchtbar aus. Manche Schriften/Hintegrundkombinationen sind gar nicht lesbar. Und Drittkompoonenten sind nochmal ein Problem.

Für einfache + ausgewählt designte Formulare schaut das hübsch aus, aber in echt einsetzen möchte ich das nicht. Mörderperformant ist so ein Stylewechsel nun auch nicht gerade.

Wie handhabt Ihr das

[Mavarik]

Zitat von TigerLilly:

Wie handhabt Ihr das

Für mich sind die Styles alle entweder "schwarz" oder zu hell...

Daher habe ich mir für meine APP(s) eigene Styles erzeugt, die nicht die von Dir beschriebene Probleme machen...

Mavarik

[himitsu]

Ja klar, eigene Farben sind immer bissl hinderlich, wenn man mehrere Styles unterstützen will.

Aber was die Größenänderungen betrifft, daran bist du selber Schuld, wenn sich deine Form nicht an ihren Inhalt anpasst.
Das fängt ja schon an, wenn ein Halbblinder bei sich die Anzeige stark zoomt und womöglich noch Kontraste aktiviert.

Es gibt z.B. massenhaft Panels (VCL), bzw. Layout nennen sich diese Komponenten im FMX, worüber du deine Form sich anpassen lassen könntest.

[Rollo62]

FMX Styles sind erstmal hübsch.
Das Problem fängt dann an, wenn Du diese eine Linie in dem bestimmten Element ändern möchtest und das auf allen Plattformen.
Dann wirst Du sehen, dass dies erstmal auf allen Plattformen völlig unterschiedlich implementiert sein kann und dass der Zugriff auf die gewünschte Linie mehr oder weniger verbarrikadiert sein kann.

Das Gute ist, die Styles sind im Prinzip auch nur simple ShapeControls, welche im Designer relativ beliebig umgemodelt und ergänzt werden können.
Du kannst z.B. ein TRectangle hinterlegen, wenn ansonsten kein Hintergrund da wäre.
Es sind sogar Animationen möglich, um z.B. Farbanimationen oder Slide-Effekte direkt in die Styles mit einzubauen, siehe TFameStand.

Auf diese Elemente kann man per StyleName zugreifen, aber da muss man höllisch aufpassen, dass dies zur richtigen Zeit passiert.

Der große Vorteil wäre, dass man sich eine riesige Tapete baut, mit den Bitmaps der Controls, welche dann beliebig von der Tapete gerendert werden.
Leider gibt es da auf dem Weg zig Fettnäpfchen, welche die Vorteile meiner Meinung nach schnell ins negative gleiten lassen.

Wenn Du sicher nur dem den Standard-Controls auskommst, dann mag das OK sein.

Ich für meinen Teil habe auch ein eigenes Style-System gebaut, wo ich Farben, Fonts, etc. Ad Hoc ändern kann, ohne jedes Mal eine ganze Tapete umzugestalten.
Dafür ist allerdings auch viel Frickelei nötig, denn die Styles lassen nicht jede Änderung einfach zu.

[Mavarik]

Ach ja und ich haben den gleichen Style für alle Plattformen...
Weil ich will das meine Android App genauso aussieht wie auf Windows und iOS...

Mavarik

[fisipjm]

ich würde mich in dem Themebereich gern einklinken. Das geht eher an die, welche schon mit Styles arbeiten. Gibt es eine gute Quelle (Bücher, How-To, Tutorials, etc...) wo man step by step im FMX Umfeld mal ein eigenes Stylebook erstellt und implementiert. Inklusive dem Gefummel mit den Bitmaps? Da steige ich nämlich noch nicht so wirklich durch.

vG
PJM

[Rollo62]

Zitat von Mavarik:

Ach ja und ich haben den gleichen Style für alle Plattformen...
Weil ich will das meine Android App genauso aussieht wie auf Windows und iOS...

Mavarik

Ja, super, das wollte ich auch immer mal in Angriff nehmen.
Bei DelphiStyles kann man das wohl nicht bestellen, oder ?

War mir bisher immer zuviel Arbeit bei unklarem Ausgang, wo liegen denn da die Stolpersteine ?
Ich habe nur mal ganz kleine, einzelne eigene Styles gebaut, so als Button-Ersatz.

[Mavarik]

Zitat von Rollo62:

War mir bisher immer zuviel Arbeit bei unklarem Ausgang, wo liegen denn da die Stolpersteine ?

In meinem Blog habe ich hierzu das ein oder andere geschrieben.

Mein Workflow war:
1.) Ich nehme einen Windows Style
2.) Ein kleines Delphi-Programm, dass es ermöglicht aus Unterverzeichnissen mit 32/48/64/96 Grafiken (ICONS) zusammen mit der original Style Bitmap zu bringen.
3.) Hierbei hat die 32er Grafik ein Gitter, damit man die Position im Styleeditor besser setzen kann.
4.) Nachdem alle Grafik aufbereitet sind, jage ich die durch ein Grafikprogramm wo ich die Farben anpassen oder ersetzen kann.
5.) Dann die Styles für jede Plattform mit dem Plattform Tag versehen und auf die Platte schreiben.
6.) In einen Resource packen
7.) Einen Stylehandler der die Daten aus der Resource laden kann...

Fertig.

Mavarik

[Rollo62]

Ah ja, Du meinst dies hier.
https://delphiprofi.blogspot.com/search?q=style

Sorry, ist mit ganz entgangen, das schaue ich mir mal in Ruhe durch.

[milos]

Ich finde FMX Styles eigentlich schon ziemlich gut. Ein Custom Style zu erstellen funktioniert meiner Meinung nach um einiges besser und einfacher als mit VLC oder ähnlichen UI-Frameworks, die nicht auf Web-Technologien aufbauen.

Leider fehlen ein paar Dinge, wie Variablen für Farben, Textgrößen usw.

Ich habe deswegen vor einigen Monaten ein kleines Programm geschrieben, welches "CSS"-artigen Source Code nimmt und in Firemonkey's TStyleBook umwandelt. Dies kann zur Laufzeit gemacht werden, oder man kann das generierte Stylebook auch in eine Datei abspeichern und dann in der Delphi IDE laden.

Es unterstützt alle Controls, Custom Variablen für Farben und Größen, Vererbung, "Macros" (z.B. "!Margin", der den Margin gleich für Top, Right, Bottom und Left setzt), Animationen/States (Property => {} Struktur), Kommentare usw.

Eine Button Style definition sieht dann ungefähr so aus:

Code:

TRectangle #buttonstyle { 
  !Radius: @radius-controls;
  Stroke.Thickness: 0;
  Stroke.Color => {
    default: @bg-ui-5;
    active: @bg-ui-2;
  }
  Fill.Color:@bg-ui-4;

  TRectangle { 
    !Radius: @radius-controls; 
    Stroke.Thickness: 0; 
    Fill.Color: @color-primary;    
    Opacity => {
      default: 0;
      hover: 0.4;
    }
  }
       
  TRectangle { 
    !Radius: @radius-controls; 
    Stroke.Thickness: 0; 
    Fill.Color: @color-primary;    
    Opacity => {
      default: 0;
      active: 1;
    }
  }
                       
  TText #text {             
    TextSettings.FontColor: @color-text;
  } 
}

Es ist ziemlich ähnlich wie CSS aufgebaut, hat aber ein paar kleine Unterschiede und man muss grundsätzlich wissen wie das FMX styling system funktioniert um es Anwenden zu können.

Bilder der Demo Anwendung mit den Styles findet man im Anhang. Der einzige unterschied zwischen den Bildern sind die Variabeln für die Farben.

Sollte jemand interesse daran haben das System selbst auszuprobieren oder anzuwenden kann man mir gerne eine PN schreiben. Ich wollte dies mal ganz öffentlich auf GitHub posten, kam aber leider nie dazu den Code zu verbessern und ein paar Bugs zu beseitigen...

Freundliche Grüsse