JavaFX "DefaultButton"-Design ändern

[top_chief]

Hallo,
kann mir jemand sagen wie der Style eines als "default" gekennzeichneten Buttons ändert?
In JavaFX wird ein Button, der mit der default-Eigenschaft erkannt wird, recht heftig mit blauer Farbe hinterlegt (eher "monoton überpinselt" <- was meiner Meinung nach ziemlich beschränkt aussieht...)

Unter dem folgenden Link habe ich schon ein paar Ansätze gefunden, die aber nicht zum gewünschten Ergebnis geführt haben. Dass die .css-Datei korrekt gesetzt ist kann ich 100%tig sicher sagen, da für andere Objekte diese bereits erkannt wird.
Skinning JavaFX Applications with CSS | JavaFX 2 Tutorials and Documentation

Folgender Code führt leider nicht zum Erfolg:

.button:default {
    -fx-color: transparent;
}

Besten Dank vorab und viele Grüße
Martin

 

[top_chief]

Habs glaube ich hinbekommen
ergänze dann die Lösung...

Bin nun mit dem Ergebnis mehr oder weniger zufrieden (jedenfalls ist es mir jetzt zu mühsam die Sache weiter zu verfeinern, so GUI-Spielereien hebe ich mir gerne für Regenwetter oder Schneestürme auf^^)

hier der Code

.button:default {
    -fx-background-color: -fx-outer-border, -fx-inner-border, #eaeaea;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5, 4, 3;
}

Und noch ein Bildchen dazu...

 

[top_chief]

Nachtrag Nummero 3 für Caspian...

.button:default {
    -fx-background-color: #424242, #bdbdbd, #757575;
    -fx-background-insets: 0, 1, 2;
    -fx-background-radius: 5, 4, 3;
}

Habe jetzt auch den anfänglichen Bug aus meinem Startbeitrag gefunden: Dadurch, dass ich in der FXML den Eintrag auf das Stylesheet gesetzt hatte, wurde die Referenz im Java-Code nicht geladen.. (JavaFX != Android ^^)
Nun funktioniert es hiermit:

scene.getStylesheets().add(Pref.getTheme().equals(Application.STYLESHEET_MODENA) ?
                                   "/resources/Styles.css" : "/resources/StylesDark.css");

 

[dzim]

Um die ganze Bandbreite an Zuständen von Buttons abzufangen, sieht es bei mir im CSS-Code so aus:

.root {
	-fx-base: #3377AB;
	
	/* can be used for the primary scene's fill pain */
	background-fill: linear-gradient(to bottom, #444444 0%, black 100%);
	/* the default background */
	background0-old: radial-gradient(focus-angle 320.0deg, focus-distance 0.0%, center 50.0%
		100.0%, radius 125.0%, #69b7e6, #005596, #054377);
	background0: radial-gradient(focus-angle 320.0deg, focus-distance 0.0%, center 50.0%
		100.0%, radius 125.0%, #96CDEE, #3377AB, #1E5685);
	/* the default background, but the light point on the left instead of the bottom */
	background1: radial-gradient(focus-angle 320.0deg, focus-distance 0.0%, center 0.0%
		50.0%, radius 150.0%, #96CDEE, #3377AB, #1E5685);
	/* the default background, but the light point on the right instead of the bottom */
	background2: radial-gradient(focus-angle 320.0deg, focus-distance 0.0%, center 100.0%
		50.0%, radius 150.0%, #96CDEE, #3377AB, #1E5685);
	/* the default background, but the light point on the top instead of the bottom */
	background3: radial-gradient(focus-angle 320.0deg, focus-distance 0.0%, center 50.0%
		0.0%, radius 150.0%, #96CDEE, #3377AB, #1E5685);
	button-color-base: linear-gradient(to bottom, dimgray, black, dimgray);
	button-color-hover: linear-gradient(to bottom, grey, black, grey);
	button-color-armed: linear-gradient(to bottom, dodgerblue, black, dodgerblue);
	button-color-default: linear-gradient(to bottom, dimgray, darkslategray, dimgray);
	button-border-color-base: slategray;
	button-border-color-focused: lightsteelblue;

	button-0-color-base: #054377;
	/*linear-gradient(to bottom, #054377, #005596, #69b7e6);*/
	button-0-color-hover: #376992;
	/*linear-gradient(to bottom, #376992, #005596, #87C5EB);*/
	button-0-color-armed: #04365F;
	/*linear-gradient(to bottom, #04365F, #004478, #5492B8);*/
	button-0-color-default: #698EAD;
	/*linear-gradient(to bottom, #698EAD, #6699C0, #A5D4F0);*/
	button-0-border-color-base: slategray;
	button-0-border-color-focused: lightsteelblue;
	button-90-color-base: #054377;
	/*linear-gradient(to left, #054377, #005596, #69b7e6);*/
	button-90-color-hover: #376992;
	/*linear-gradient(to left, #376992, #005596, #87C5EB);*/
	button-90-color-armed: #04365F;
	/*linear-gradient(to left, #04365F, #004478, #5492B8);*/
	button-90-color-default: #698EAD;
	/*linear-gradient(to left, #698EAD, #6699C0, #A5D4F0);*/
	button-90-border-color-base: slategray;
	button-90-border-color-focused: lightsteelblue;
	button-270-color-base: #054377;
	/*linear-gradient(to left, #69b7e6, #005596, #054377);*/
	button-270-color-hover: #376992;
	/*linear-gradient(to left, #87C5EB, #005596, #376992);*/
	button-270-color-armed: #04365F;
	/*linear-gradient(to left, #5492B8, #004478, #04365F);*/
	button-270-color-default: #698EAD;
	/*linear-gradient(to left, #A5D4F0, #6699C0, #698EAD);*/
	button-270-border-color-base: slategray;
	button-270-border-color-focused: lightsteelblue;
	
	button-t-color-base: #376992;
	/*linear-gradient(to bottom, #054377, #005596, #69b7e6);*/
	button-t-color-hover: #376992;
	/*linear-gradient(to bottom, #376992, #005596, #87C5EB);*/
	button-t-color-armed: #365E7F;
	/*linear-gradient(to bottom, #04365F, #004478, #5492B8);*/
	button-t-color-default: #698EAD;
	/*linear-gradient(to bottom, #698EAD, #6699C0, #A5D4F0);*/
	button-t-border-color-base: slategray;
	button-t-border-color-focused: lightsteelblue;
}

/* ====== BUTTON ========================================================================== */
.button {
	-fx-text-fill: white;
	-fx-font-family: Verdana;
	-fx-background-radius: 5px;
	-fx-background-color: button-0-color-base;
	-fx-background-insets: 1.0, 1.0, 1.0, 1.0;
	-fx-border-radius: 5px;
	-fx-border-color: button-0-border-color-base;
}

.button:focused,.button:default:focused {
	-fx-border-radius: 5px;
	/*-fx-border-color: button-0-border-color-focused;*/
}

.button:hover,.button:default:hover {
	-fx-background-radius: 5px;
	-fx-background-color: button-0-color-hover;
	-fx-background-insets: 1.0, 1.0, 1.0, 1.0;
}

.button:armed,.button:default:armed {
	-fx-background-radius: 5px;
	-fx-background-color: button-0-color-armed;
	-fx-background-insets: 1.0, 1.0, 1.0, 1.0;
}

.button:disabled {
	-fx-opacity: 50.0%
}

.button:default {
	-fx-background-radius: 5px;
	-fx-background-color: button-0-color-default;
	-fx-background-insets: 1.0, 1.0, 1.0, 1.0;
}

Das praktische ist hier, dass du in der Style-Klasse .root "Variablen" anlegen kannst mit eigenen Farben. Lässt sich leichter warten/ändern...

 

[top_chief]

Hey
puhh, das ist heftig^^
aber ich glaube da werde ich auch noch etwas feilen müssen. Je mehr ich teste, desto mehr fällt mir auf was bei mir nicht passt :-/

Gerade habe ich leider ein ganz anderes Problem: irgendwie werden nach dem Theme-Wechsel von Modena auf Caspian die jeweiligen Icons nicht mitverändert (habe ein Set mit dunklen und eins mit hellen Icons). Sprich das Problem hinsichtlich des dunklen Grafikelements auf dunklem Hintergrund bzw. hell auf hell verfolgt mich derzeit.

Ich habe jetzt schon den ganzen Morgen damit verbracht den Fehler zu finden, komme aber auf keinen grünen Zweig, ist echt zum Mäusemelken -.-
Immer wieder bin ich bei meiner Recherche auf folgenden Code gestoßen:

css = Main.class.getResource("/resources/Styles.css").toExternalForm();
            mScene.getStylesheets().clear();
            mScene.getStylesheets().add(css);

.. der bei mir aber keine Änderung zur Folge hat.

Dann wird bei mir der StyleManager* nicht erkannt - mit diesem kann wohl auch das Theme refresht werden... (wenn ich die Anwendung "neustarte" ist alles bestens - wenn ich während der Laufzeit das Theme ändere, gibts besagtes Problem mit den Ressourcen bzw. css-Einträgen). Aber einfach mal die Application neustarten ist auch nicht so einfach ("application must not be called multiple times" <- herrlich! :lol Also dazu habe ich nun auch keine Lösung gefunden.

*der Aufruf soll so erfolgen:
StyleManager.getInstance().addUserAgentStylesheet(xzy); ???:L

Deshalb mal ganz einfach gefragt:
Gibt es eine Möglichkeit die Ressourcen möglichst "sauber" zu laden? Also so, dass man entweder nur im Controller die Ressourcen lädt und in der "normalen" Klasse nur die eigentliche Logik hat? Derzeit ist das bei mir ein ziemliches Hin-und-her.. Was auf Dauer die von dir angesprochene Wartung extrem erschwert^^

Werde ich den kommenden Tagen mal eine Gegenüberstellung JavaFx vs. Android schreiben - wenn man das beste aus beiden Konzepten zusammenfassen würde, wäre es wahrscheinlich die ideale Plattform, aber gerade bin ich kurz davor die Maus durch den Monitor zu feuern :-/ Nicht zuletzt, da das Laden der Ressourcen scheinbar auf 1000 Wegen möglich ist, aber keiner so recht funktioniert - von der extrem sinnvollen Implementierung des Ladens von Stringressourcen via ISO-8859-1 mal ganz abgesehen... (erst einen CustomUtf8Loader zu schreiben bevor ü's und ö's korrekt angezeigt werden, empfinde ich jedenfalls als eher unspaßig ueh:, aber sei's drum^^).

Danke vorab und beste Grüße
Martin

 

[dzim]

Vergiss erst mal den StyleManager. Ich denke mal, dass ist der hier: GC: StyleManager - com.sun.javafx.css.StyleManager (.java) - GrepCode Class Source

Alles im com.sun.* package ist mehr oder weniger private API - oder besser einfach non-public :-D Es sollte nicht von jedem verwendet werden, da sie sich beliebig ändern kann.
Etwas mehr Hintergrund (gerade auch heute erst gelesen): JEP 253: Prepare JavaFX UI Controls & CSS APIs for Modularization

Main.class.getResource("/resources/Styles.css").toExternalForm() kann natürlich auch nur funktionieren, wenn du im Classpath einen solchen Eintrag hast. Per se ist der natürlich nicht da... Ob ein #clear() und dann ein #add() wirklich die Lösung ist, kann ich mir nicht vorstellen. Es braucht halt immer so etwas wie ein Minimal-Theme... Ich denke also, dass du modena oder caspian nicht komplett los wirst. (Was bei Android mit dem gewählten Basis-Theme ähnlich ist, aber das nur am Rande.)

Bei JavaFX ist es wirklich sinnvoll zu überlegen, ob man bei einem Export eines fertigen Produkts nicht auch gleich das passende JRE mit bundelt. Da für Otto-Normal die Java7-Unterstützung vorbei ist, würden somit alle in den Genuss von Java8 - und somit modena - kommen.

Dein rant bezüglich der Tausend Wege zum Ziel gilt auch für Android. Auch dort kann man alles anders machen. Habe mittlerweile mehrere mittlegrosse Anwendungen in beidem gemacht und muss sagen...... Es hat alles sein Vor- und Nachteile.
Aber: JavaFX mausert sich gerade - zumindest auf Android und iOS - zu einer plattformübergreifenden Lösung für Anwendungen. Noch ist es nicht perfekt, aber ich habe bereits kleine Test-Programme gemacht, die ohne jede Code-Anpassung auf beiden liefen (vom Desktop mal abgesehen, da liefen sie sowieso). Aber speziell Android und neuere Adreno-Prozessoren (namentlich der, der in meinem Nexus 6 steckt) machen es mir schwer, dort ordentlich zu entwickeln. Warum? Die Verwendung von Gradienten (irgendwo im CSS) bringt eine App zum Absturz -.-

Was ich an FX mag ist das Binding-Konzept und die CSS, weniger die property-basierten Strings (wobei ich dennoch dein UTF8-Problem nicht zu haben scheine). Auch die Animationen finde ich recht logisch aufgebaut. Auch wenn die in Android vorkompilierten sicher auch ihre Vorteile haben.
An Android mag ich die Vielfalt und die gute Integration, aber speziell Themes finde ich auf Android extrem umständlich und ist jedes mal mit erheblicher Suche/Recherche verbunden, wenn man sich nur an Kleinigkeiten wagen will. Ausserdem die mangelnde Java8-Sprachfeature-Unterstützung mach es mir auch jedes mal Gram. Und nein: Ich will kein retro-lambda verwenden...

 

[top_chief]

Okay, wie löst du das mit der Internationalisierung?
Ich bin dem Anschein nach nicht der einzige, dem dieses Problem widerfahren ist
java - How to use UTF-8 in resource properties with ResourceBundle - Stack Overflow
(für JavaFX Verhältnisse mit 90 up-Votes ja ein regelrecht "massiv" diskutiertes Thema)

Irgendwie hab ichs mit den FXML-Dateien nicht drauf, oder nicht gecheckt - oder vielleicht auch beides...
Hab jetzt "zu Fuß" gelöst und es funktioniert wieder alles so wie es soll.. (war halt etwas Tipp-Arbeit, aber letztlich komme ich mir dieser Lösung um Welten besser klar... ich muss auch ehrlich sagen, dass es mir bei fällt FMXL bzw. XML-Dateien nach einer gewissen Zeit, in der ich nicht an einem Projekt gearbeitet habe, um einiges schwerer fällt wieder in den Code einzusteigen - also so gesehen ist das mit der Wartbarkeit vielleicht mit dem aktuellen Code für mich persönlich einfacher^^)

public class MenuHelper {

    protected static void initFileMenu(String theme, ObservableList<MenuItem> items) {
        String mkDark = "";
        if (!theme.equals(Application.STYLESHEET_MODENA)) mkDark = "white_";
        items.get(0).setGraphic(new ImageView("/images/action/menu18/ic_note_add_" + mkDark + "18dp.png"));
        items.get(1).setGraphic(new ImageView("/images/action/menu18/ic_add_circle_" + mkDark + "18dp.png"));
        items.get(2).setGraphic(new ImageView("/images/action/menu18/ic_database_import_" + mkDark + "18dp.png"));
        items.get(3).setGraphic(new ImageView("/images/action/menu18/ic_database_export_" + mkDark + "18dp.png"));
        items.get(4).setGraphic(new ImageView("/images/action/menu18/ic_lock_outline_" + mkDark + "18dp.png"));
        items.get(5).setGraphic(new ImageView("/images/action/menu18/ic_switch_off_" + mkDark + "18dp.png"));
    }


    protected static void initEditMenu(String theme, ObservableList<MenuItem> items) {
        String mkDark = "";
        if (!theme.equals(Application.STYLESHEET_MODENA)) mkDark = "white_";
        items.get(0).setGraphic(new ImageView("/images/action/menu18/ic_edit_" + mkDark + "18dp.png"));
        items.get(1).setGraphic(new ImageView("/images/action/menu18/ic_delete_" + mkDark + "18dp.png"));
        items.get(2).setGraphic(new ImageView("/images/action/menu18/ic_edit_" + mkDark + "18dp.png"));
        items.get(3).setGraphic(new ImageView("/images/action/menu18/ic_delete_" + mkDark + "18dp.png"));
    }


    protected static void initToolsMenu(String theme, ObservableList<MenuItem> items) {
        String mkDark = "";
        if (!theme.equals(Application.STYLESHEET_MODENA)) mkDark = "white_";
        items.get(0).setGraphic(new ImageView("/images/action/menu18/generate_" + mkDark + "18dp.png"));
        items.get(1).setGraphic(new ImageView("/images/action/menu18/ic_backup_" + mkDark + "18dp.png"));
        items.get(2).setGraphic(new ImageView("/images/action/menu18/ic_restore_" + mkDark + "18dp.png"));
    }


    protected static void initSettingsMenu(String theme, ObservableList<MenuItem> items) {
        String mkDark = "";
        if (!theme.equals(Application.STYLESHEET_MODENA)) mkDark = "white_";
        items.get(0).setGraphic(new ImageView("/images/action/menu18/ic_security_" + mkDark + "18dp.png"));
        items.get(1).setGraphic(new ImageView("/images/action/menu18/ic_settings_" + mkDark + "18dp.png"));
        items.get(2).setGraphic(new ImageView("/images/action/menu18/ic_sync_" + mkDark + "18dp.png"));
    }


    protected static void initHelpMenu(String theme, ObservableList<MenuItem> items) {
        String mkDark = "";
        if (!theme.equals(Application.STYLESHEET_MODENA)) mkDark = "white_";
        items.get(0).setGraphic(new ImageView("/images/action/menu18/ic_announcement_" + mkDark + "18dp.png"));
        items.get(1).setGraphic(new ImageView("/images/action/menu18/ic_extension_" + mkDark + "18dp.png"));
        items.get(2).setGraphic(new ImageView("/images/action/menu18/ic_info_outline_" + mkDark + "18dp.png"));
    }


    public static void initToolBar(String theme, HBox toolBar) {
        String defBtnStyle;
        if (theme.equals(Application.STYLESHEET_MODENA)) {
            defBtnStyle = "    -fx-background-color: -fx-outer-border, -fx-inner-border, #eaeaea;\n" +
                          "    -fx-background-insets: 0, 1, 2;\n" +
                          "    -fx-background-radius: 5, 4, 3;";
        } else {
            defBtnStyle = "    -fx-background-color: #424242, #bdbdbd, #757575;\n" +
                          "    -fx-background-insets: 0, 1, 2;\n" +
                          "    -fx-background-radius: 5, 4, 3;\n" +
                          "    -fx-text-fill: white";
        }

        Collection<Button> buttonList = toolBar.getChildren().stream().filter(
                node -> node instanceof Button).map(node -> (Button) node).collect(Collectors.toList());

        for (Button button : buttonList) button.setStyle(defBtnStyle);

    }

}

Gibts hinsichtlich des Performance Unterschiede? (Ich würde es selbst testen, bekomme es ja aber über die "fmxl-Implementierung / Verlinkung" nicht hin)..

 

[dzim]

Bezüglich der Property-Dateien: Ich habe es gerade noch einmal gecheckt und bei uns sind es ISO-8859-1. Warum klappt es bei mir?

When using a sane IDE such as Eclipse, this is already automatically done when you create a .properties file in a Java based project and use Eclipse's own editor. Eclipse will transparently convert the characters beyond ISO-8859-1 range to \uXXXX format.

(Aus der ersten StackOverlow-Antwort)

Neben regulären Umllauten habe ich also auch so etwas hier bei mir drin:

# see: http://dev.networkerror.org/utf8/
# note: \uXXXX where XXXX=HexCode
utf8.oWithStroke=\u00F8
utf8.arrowLeft=\u2190
utf8.arrowUp=\u2191
utf8.arrowRight=\u2192
utf8.arrowDown=\u2193

Und bei mir klappt alles...

Welche IDE nutzt du?


Thema FXML:
Mag sein, dass es eine andere Art von Herausforderung ist. In der Regel aber wirst du die XMLs eh nicht von Hand editieren, sondern einen Editor dafür nutzen, der dir die Arbeit erleichtert. XML ist ja auch primär ein Austauschformat für Maschinen, das lediglich nebenbei zufällig auch noch Menschenlesbar ist. Das ist aber nicht der Fokus von XML.
Grundsätzlich der IMHO grösste Vorteil von FXML, wie von Androids Layout-XMLs, ist die wesentlich einfacher zu erreichende strikte Trennung von UI und Code (Stichworte MVC oder noch besser MVVM). Wenn du dich einmal daran gewöhnt hast, WILLST du die UIs gar nicht mehr im Code machen, es sei denn, es lässt sich nicht mehr vermeiden.

Spiele vielleicht noch etwas mehr mit dem SceneBuilder herum. Oder wenn du unter Eclipse entwickelst, dann halt mit FXGraph vom e(fx)clipse-Plugin. Ich verwende letzteres (eine DSL, die etwas besser händelbar als FXML ist).

 

[top_chief]

Okay, ja dann wird es an der IDE liegen... Ich nutze IntelliJ (hatte unter Android, besser gesagt unter Sqlite, aber auch schon hin und wieder Probleme mit der Zeichensatzkodierung - aber da die IDE an anderer Stelle ein paar nette Features hat, kommt für mich Netbeans bzw. Eclipse nicht in Frage^^).
Du hast auf jeden Fall recht, der SceneBuilder ist wirklich eine komfortable Lösung, eine gewisse Eingewöhnungszeit brauch ich immer ^^
So langsam steige ich durch

Danke nochmal für die Hinweise