Sind Styles brauchbar?

[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

[TigerLilly]

Wie funktioniert das dann mit 3rd Party Komponenten?

[AuronTLG]

Zitat:

Wie funktioniert das dann mit 3rd Party Komponenten?

Die meisten optischen Drittanbieterkomponenten, die ich habe, sind von TMS, mit denen das auch sehr gut geht. Jene haben nämlich einfach ein Attribut "AdaptToStyle", was man anhaken kann, woraufhin die Komponente sich selbst automatisch an den Stil anpasst.

Abgesehen davon benutze ich FMX ausschließlich für Smartphone-Apps, wofür die Styles sehr nützlich und gut anwendbar waren. Ich habe mir sowohl für dunklen und hellen Stil einen Premium-Style als Template genommen, angepasst und das ganze funktioniert und schaut ziemlich gut aus.

[TigerLilly]

FMX oder FNC von TMS?
Ich hab da nicht soo super Erfahrungen mit dem Styling, dehalb frage ich. Schriftgrößen, Abstände, Margins, irgendwie funktioniert das nicht einheitlich + je nach Stlye schaut was anders geändert aus.

[Rollo62]

Zitat von milos:

Ich habe deswegen vor einigen Monaten ein kleines Programm geschrieben, welches "CSS"-artigen Source Code nimmt und in Firemonkey's TStyleBook umwandelt.

Das hört sich sehr cool an

Nur noch mal verständnishalber:
- Du schreibt Dein CCS, mit solchen primitiven Shapes
- Der läuft durch dein Tool, was ein TStyleBook daraus erzeugt
- Ich vermute, dass es dann ganz ohne die PNG Tapete auskommt, wenn es nur aus Primitiven Shapes generiert wird

oder

Hast Du da doch, wie oben, ein Basis-Template genommen, wie von beschrieben, von den PremiumStyles

Zitat von milos:

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

Wohl wahr, bei den PremiumStyles gibt es aber hier und das ein paar FarbVariablen.
Leider aber nur vereinzelt und es gibt kein stringentes Styles-Schema oder Konzept für alle Controls und Plattformen gleichermaßen.

Der Vorteil der PNG-Tapete ist natürlich, dass man fotorealistische Controls bauen kann, wenn man das will.
Ich vermute, nur die Wenigsten haben wirklich die notwendige Muße (oder Grafikabteilung) dazu ...

[milos]

Zitat von Rollo62:

Zitat von milos:

Ich habe deswegen vor einigen Monaten ein kleines Programm geschrieben, welches "CSS"-artigen Source Code nimmt und in Firemonkey's TStyleBook umwandelt.

Das hört sich sehr cool an

Nur noch mal verständnishalber:
- Du schreibt Dein CCS, mit solchen primitiven Shapes
- Der läuft durch dein Tool, was ein TStyleBook daraus erzeugt
- Ich vermute, dass es dann ganz ohne die PNG Tapete auskommt, wenn es nur aus Primitiven Shapes generiert wird

oder

Hast Du da doch, wie oben, ein Basis-Template genommen, wie von beschrieben, von den PremiumStyles

Zitat von milos:

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

Wohl wahr, bei den PremiumStyles gibt es aber hier und das ein paar FarbVariablen.
Leider aber nur vereinzelt und es gibt kein stringentes Styles-Schema oder Konzept für alle Controls und Plattformen gleichermaßen.

Der Vorteil der PNG-Tapete ist natürlich, dass man fotorealistische Controls bauen kann, wenn man das will.
Ich vermute, nur die Wenigsten haben wirklich die notwendige Muße (oder Grafikabteilung) dazu ...

Sorry für die sehr späte antwort, hab deinen post leider erst gerade gesehen.

Du hast recht, das System arbeitet zunächst nur mit diesen Primitiven Shapes, bzw kann da einfach jedes FMX Control verwendet werden. Also z.B.

Code:

TButton #custombuttonstyle { 
  ...
}

Ziel war es aber schon irgendwann ein Tileset oder ähnliches zu unterstützen damit wie du schon sagtest mehr möglichkeiten hat die Controls realistischer oder sonst irgendwie hübscher zu gestalten. Ich hab das ganze System bisher nur soweit programmiert wie ich es für mich selbst brauche, aber ich hoffe ich kriege das alles irgendwann noch hin und dann würde ich es hier und auf GitHub veröffentlichen.

[Rollo62]

Zitat von milos:

Sorry für die sehr späte antwort, hab deinen post leider erst gerade gesehen.

Besser spät als gar nicht

Hört sich jedenfalls interessant an, ich bin der Meinung, dass man mit den Shapes ( plus TPath unf PathDate ) eigentlich alles hat,
was man für medium-komplexe Shapes braucht.
Jedenfalls wäre das eine elegante Lösung für die fehlenden Farboptionen bei den PNG-Styles.