Sind Styles brauchbar?

[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.

[milos]

Zitat von 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.

TPath mit Data also Vektor-Grafiken funktionieren auch.

Ich kam bisher mit all den Shapes gut zurecht, deswegen sind PNG's noch nicht implementiert.