JavaFX JavaFX und CSS

[MichaProgs]

Guten Abend zusammen,

wie man vielleicht schon öfter in diesem Forum mitbekommen hat, bin ich dabei von Swing auf FX umzusteigen. Mit der größte Grund dafür waren die Designmöglichkeiten in FX und genau darum geht es in diesem Thread.

Ich habe schon öfter mit CSS gearbeitet - hauptsächlich natürlich in Verbindung mit HTML. In FX sind die Befehle allerdings anders aufgebaut. Die Dokumentation hilft da zwar schon um einiges weiter, aber ganz logisch erscheint mir das dennoch nicht. Das nötigste konnte ich gestalten, bei den Tabellen wird es dann aber zu viel.

Ich möchte diesen Thread nutzen, um allgemein das Thema CSS in Verbindung mit FX zu behandeln. Gibt es ein "Grundtutorial" über die Funktionsweise, ausgenommen der von Oracle bereitgestellten? Oder kann jemand mit seinen eigenen Worten die Grundkenntnisse erläutern?

Ich hoffe ich habe den Thread mit der Fragestellung nicht zu offen gehalten und freue mich über konstruktive Antworten.

Gruß
TB94

 

[dzim]

Ist zwar schon ein paar Tage her, aber ich möchte noch mal kurz dazu was sagen:
Was mit zu JavaFX 2-Zeiten geholfen hat, war das caspian.css aus der jfxrt.jar (mal im jdk-Verzeichnis suchen, entpacken und dann diese Datei suchen), sowie diese CSS Referenz.
Leider wurde letztere nie auf JavaFX8 geupdated, so dass ich sie nur noch sporadisch verwende, dafür aber immer ein Auge auf die modena.css werfe. Die findet man auch im o.g. jfxrt.jar.

Dies ist eigentlich die Quelle aller meiner Erfahrung und hat IMHO voll und ganz genügt.

Was es aber an Besonderheiten gibt (und was sich zum Teil von JavaFX 2 zu JavaFX 8 geändert hat), ist:
die CSS-Klasse .root. In ihr kannst du eigene "Variablen" definieren. Ich hab dann z.B. so etwas wie background-colo: <my-color-or-gradient>; definiert und verwende es dann in den anderen Klassen, etc.
Dort setze ich auch die Basisfarbe der Anwendung. Allerdings bin ich mir nicht so sicher, ob das so klug ist, daher habe ich in einer neueren Anwendung auf dem Root der Scene meiner Anwendung eine spezielle CSS-Klasse definiert, die den Hintergrund und den Base auch dort noch einmal setzt. Ich glaube, hier habe es mal ansonsten Probleme mit neueren Java8-Versionen...

 

[Tom299]

Ich bin auch erst seit ein paar Wochen mit JavaFX beschäftigt und hab vorher aber noch nie richtige Web-Projekte entwickelt, d.h. CSS ist für mich selbst noch in vielen Dingen Neuland.
Aber nach etwas Einarbeitung und Eingewöhnung geht es schon ganz gut von der Hand, auch wenn Eclipse nicht immer alle CSS-JavaFX-Eigenschaften kennt. Mit Google bzw. Stackoverflow findet man oft Antworten oder Hinweise, um weiterzukommen und Modena.css hab ich mir auch extrahiert und im Notepad++ immer offen

Mit den Gradients usw. tu ich mir oft schwer und es hat ne Weile gedauert, bis ich das mal kapiert habe, weil manchmal findet man ja anstatt z.B.

-fx-background-color: linear-gradient(steelblue, skyblue)

sowas wie

-fx-background-color: red, green, lightblue, darkblue, blue;
-fx-background-insets: 25 0 0 0, 35 10 10 10, 44 20 19 19, 45 18 18 20, 45 20 20 20;

also daß mehrere Farben angegeben werden und mehrere Insets. Hab dann irgendwann eine Seite gefunden, wo das schön erklärt wird, daß die Paints quasi aufeinander gelegt werden und man von außen nach innen dann zeichnet. Ok, für CSS-Erfahrene war das vielleicht kein Neuland, für mich schon. Und daß die Insets nicht relativ zum vorherigen stehen sondern absolut sind, war der nächste AHA-Effekt.

Was mir aber auch aufgefallen ist: es gibt Eigenschaften, wenn ich die in der FXML setze, dann werden sie vom CSS nicht überschrieben. Hab jetzt grad kein Beispiel mehr zur Hand, aber das ist mir schon öfters begegnet.

Ein weiterer Punkt sind Grafiken auf Buttons. Man kann im SceneBuilder eine ImageView in einen Button legen, was ich schon gemacht habe. Man kann auch über CSS die Grafik auf den Button legen. Das klappt aber auch nur gut, wenn man z.B. keinen Text und nur die Grafik auf dem Button hat. Ansonsten hab ich z.B. keine Möglichkeit gefunden, den Abstand zwischen Grafik und Text im CSS einzustellen. Als "Workaround" hab ich dann dem Button im FXML/SceneBuilder ein Padding gegeben, damit der Text einen Abstand zur der CSS-Grafik beommt, aber dann kann man auch gleich wieder eine ImageView auf den Button ziehen.

Ich bin mir auch noch nicht schlüssig, ob ich für jede View eine CSS-Datei erstellen sollte (was ich bis jetzt so gemacht habe als Anfänger) oder ob man nur eine CSS-Datei haben sollte. Ein Bekannter hat mir zu letzterem geraten, da ja öfter Komponenten in mehreren Views gleich aussehen sollen und ich muß das halt dann mehrfach im CSS pflegen.

Das mit dem selbst Farben definieren muß ich mir mal noch anschauen (was dzim geschrieben hat), das kann ich nämlich auch gebrauchen ;-)

 

[MichaProgs]

Die modena.css habe ich mir bereits angesehen. Vieles kann man auch durch die Documentation von Oracle herausfinden, aber speziell Tabellen zu gestalten ist eine reine Katastrophe - da hilft auch die modena nicht weiter.

Diese vorgegeben Farben würden mich ebenfalls noch interessieren. Oft sieht man sowas wie "-fx-color: -fx-focused-base;". Wie kann man denn so etwas umsetzen? Irgendwo müsste man ja diese "-fx-focused-base;" als Farbe definieren.

Gruß
TB94

 

[Tom299]

Na ich denke das geht genauso wie es in der modena.css auch gemacht ist, mit dem .root kannst du (vermutlich) für das ganze dokument die standards definieren:

Auszug aus der modena.css:

/*******************************************************************************
 *                                                                             *
 * CSS Styles for core infrastructure bits.  The .root section provides the    *
 * overall default colors used by the rest of the sections.                    *
 *                                                                             *
 ******************************************************************************/

.root {
    /***************************************************************************
     *                                                                         *
     * The main color palette from which the rest of the colors are derived.   *
     *                                                                         *
     **************************************************************************/

    /* A light grey that is the base color for objects.  Instead of using
     * -fx-base directly, the sections in this file will typically use -fx-color.
     */
    -fx-base: #ececec;

    /* A very light grey used for the background of windows.  See also
     * -fx-text-background-color, which should be used as the -fx-text-fill
     * value for text painted on top of backgrounds colored with -fx-background.
     */
    -fx-background: derive(-fx-base,26.4%);

    /* Used for the inside of text boxes, password boxes, lists, trees, and
     * tables.  See also -fx-text-inner-color, which should be used as the
     * -fx-text-fill value for text painted on top of backgrounds colored
     * with -fx-control-inner-background.
     */
    -fx-control-inner-background: derive(-fx-base,80%);
    /* Version of -fx-control-inner-background for alternative rows */
    -fx-control-inner-background-alt: derive(-fx-control-inner-background,-2%);

    /* One of these colors will be chosen based upon a ladder calculation
     * that uses the brightness of a background color.  Instead of using these
     * colors directly as -fx-text-fill values, the sections in this file should
     * use a derived color to match the background in use.  See also:
     *
     * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
     * -fx-text-background-color for text on top of -fx-background
     * -fx-text-inner-color for text on top of -fx-control-inner-color
     * -fx-selection-bar-text for text on top of -fx-selection-bar
     */
    -fx-dark-text-color: black;
    -fx-mid-text-color: #333;
    -fx-light-text-color: white;

    /* A bright blue for highlighting/accenting objects.  For example: selected
     * text; selected items in menus, lists, trees, and tables; progress bars */
    -fx-accent: #0096C9;

    /* Default buttons color, this is similar to accent but more subtle */
    -fx-default-button: #ABD8ED;

    /* A bright blue for the focus indicator of objects. Typically used as the
     * first color in -fx-background-color for the "focused" pseudo-class. Also
     * typically used with insets of -1.4 to provide a glowing effect.
     */
    -fx-focus-color: #039ED3;
    -fx-faint-focus-color: #039ED322;

    /* The color that is used in styling controls. The default value is based
     * on -fx-base, but is changed by pseudoclasses to change the base color.
     * For example, the "hover" pseudoclass will typically set -fx-color to
     * -fx-hover-base (see below) and the "armed" pseudoclass will typically
     * set -fx-color to -fx-pressed-base.
     */
    -fx-color: -fx-base;

.root {   
    -fx-base: #ececec;
    -fx-background: derive(-fx-base,26.4%);
}

 

[dzim]

Wie ich schon sagte, wäre ich vorsichtig, den BG im .root zu setzen. Bei mir hat das u.U. zu Problemen geführt, bzw. er wurde nicht in allen Fällen (Java7-Java8) gleich - oder überhaupt nicht - dargestellt.
Ich habe mir dazu eine separate CSS-Klasse .main-root erstellt und sie wie oben beschrieben via scene.getRoot().getStyleClass().add("main-root"); (scene ist die Scene, die ich in der Main-Klasse auf die primary Stage gelegt habe).
Und wie schon erwähnt: Im .root kann man quasi "beliebige" Variablen anlegen und dann im weiteren Verlauf der CSS nutzen. Ich habe das für eine ganze Palette an eigenen Farben oder Verläufen gemacht.