JavaFX Optimierung für verschiedene Auflösungen

[sharkattack]

Hallo zusammen

Ich arbeite noch nicht lange mit Java, bzw. JavaFX und bin gerade dabei ein Adressbuch zu programmieren. Die wichtigsten Funktionen konnte ich bereits erfolgreich erstellen und das Programm wird langsam brauchbar.

Was mich aber noch stört, ist dass meine Anwendung auf meine Auflösung, bzw. Bildschirmgrösse ausgerichtet ist. Ich benutze einen 4k Fernseher mit 65 Zoll als Monitor. Ich habe die Fenstergrösse, Schriftgrössen, Buttons, usw. nun alle manuell im SceneBuilder angepasst, damit sie auf meinem Fernseher eine angenehme Grösse haben.
Was ich bis jetzt so gelesen habe, sollte man css benutzen, um die verschiedenen Elemente anzupassen. Kann man mit css eigentlich auch die Fenstergrösse einstellen, also das was im Moment in der fxml Datei mit

<AnchorPane prefHeight="1080.0" prefWidth="1920.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">

definiert ist? Wie realisiert man es am besten, dass das Programm möglichst unabhängig von Bildschirmgrössen und Auflösungen ist? Kann man beim Start des Programms die Auflösung und Bildschirmgrösse auslesen lassen und dann entsprechend eine passende css Datei dafür definieren?

LG

 

[dzim]

Hm... Betriebssystem? Also JavaFX 8 sollte unter Mac mehr oder minder out-of-the-box skalieren und auf Windows auch. Nur Linux ist da noch unbrauchbar. Ändert sich wohl mit Java 9, hab es aber noch nicht probiert.
Wir entwickeln gerade eine recht grosse Anwendung, die auf Windows 10 Hi-Res und Standard gut aussieht, ohne dass wir etwas machen mussten.

 

[sharkattack]

Und nochmals besten Dank für deine Antwort.
Ich benutze tatsächlich Linux und habe es bisher nur dort getestet. Eigentlich schreibe ich das Programm haupsächlich für meinen Vater, der ein Windows 7 installiert hat. So ganz verstehe ich allerdings noch nicht, wie das funktioniert. Ich habe ja in meinen fxml Dateien die bevorzugte grösse eingestellt. Für meinen 4k Fernseher habe ich es so eingestellt, dass die Anwendung in der Grösse von etwa einem Viertel des Bildschirm startet (1920x1080). Was passiert jetzt, wenn ich den selben Code auf einer anderen Auflösung ausführen lasse? Ich glaube mein Vater hat nur 1280x1024. Wird das Fenster dann automatisch verkleinert? Falls ja, wie wird es verkleinert? Auf die grösst mögliche Art? Also auf 1280x1024?
Und die CSS muss ich ja so oder so anpassen, oder? Weil bei 1280x1024 sind ja dann die Schriften viel zu gross.

Für ein paar Infos wäre ich dir sehr dankbar.
LG

 

[dzim]

Die Skalierung ist automatisch. Du arbeitest - in Theorie - mit desity-independent Pixel. Also wenn du 1px sagst, schaut er, wie der Skalierungsfaktor auf dem jeweiligen System ist (100%, 120%, ...).
Bei deinem Vater würde das Programm nun also über die Grenzen des Monitors hinausgehen...

#edit: zu schnell abgeschickt: du kannst verschiedene CSS für verschiedene Systeme anbieten. im ".root" kannst du dann die generelle Skalierung für Schriften etc. setzen. Knifflig wird es etwas, wenn du noch so etwas wie FontAwesomeFX verwendest (sind ein paar Extra-CSS-Zeilen notwendig - kann dir bei Bedarf helfen).

Bsp.:

.root {
    /* ... alle deine globalen Settings und Variablen ... */
    -fx-font-size: 1.2em;
}

/* fix für FontAwesomeFX - MaterialDesignWebIcons */
MaterialDesignIconView {
    /* bescheuert, aber durch einen Bug, oder wenigstens ein bekanntes Problem, muss explizit noch mal die Font-Family gesetzt werden, sonst hast du statt Icons Vierecke/Artefakte */
    -fx-font-family: 'Material Design Icons';
    -fx-font-size: 16; /* Basis-Grösse setzen */
}

 

[sharkattack]

Danke schon mal für die Antwort. Das war eigentlich auch meine Idee, es mit mehreren CSS zu machen. Ich weiss aber nicht genau, wie ich es hinbekommen, dass das Programm bei meinem Vater nicht über die Grenzen hinausgeht. Muss ich das irgendwie im Code machen, indem ich beim Programmstart die aktuelle Auflösung abfrage und dann den Namen der jeweiligen CSS einer Variablen zuweise und das CSS (mittels Variable) dann im Code der fxml zuweisen?

Tut mir Leid, für die vielleicht etwas dumme Frage, aber was bedeutet -fx-font-size: 1.2em; Hab ich jetzt schon ein paar mal gesehen und werde nicht so richtig schlau daraus. Bei den Schriften steht in ein paar CSS Dateien bei font-size pt, px oder eben em.

 

[dzim]

CSS-Einheiten: https://www.w3.org/Style/Examples/007/units.de.html
Es ist eine Schriftartabhängige Grössenangabe. Würde ich für Text immer verwenden, für alles andere nutze ich im Normalfall px (ich glaube, nichts hinzuschreiben, bedeutet auch px - bin mir aber nicht zu 100% sicher).

Die Displaygrösse kannst du recht einfach in Erfahrung bringen:
Ein Beispiel aus einer Example-App (JavaFX für Dektop & Mobile), bei der ich Probleme hatte und mir ein paar der Entwickler des Frameworks/der Runtime für Mobile geholfen haben.
https://github.com/bgmf/example/blob/master/ExampleProject/src/main/java/eu/dzim/example/Main.java
Diese verwendet immer Full-Screen (logisch, für Mobile).

Für eine unserer Anwendungen speichern wir die Position und die Grösse (auch im Multi-Monitor-Betrieb) und laden sie beim Start.
Beispiel:
Diese Klasse enthält die ein-/ausgelesenen Daten:
https://github.com/bgmf/poc/blob/master/shared/src/main/java/eu/dzim/shared/fx/util/WindowSetup.java

In den Utils hier werden sie aus dem "ConfigService" (lädt eine lokale JSON-Konfigurationsdatei) gelesen oder geschrieben.
https://github.com/bgmf/poc/blob/37...ava/eu/dzim/shared/util/SharedUtils.java#L318

In meine Application-Klasse, im #start-Block, lese ich es so aus:

WindowSetup windowSetup = SharedUtils.windowSetup(primaryStage, configService);
Scene scene = new Scene(root, windowSetup.getWidth(), windowSetup.getHeight());

und so wird es beim Schliessen des Programms gespeichert ():

CoreUtils.saveWindowSetup(
    configService,
    new WindowSetup.Builder()
        .maximized(stage.isMaximized())
        .width(stage.getWidth())
        .height(stage.getHeight())
        .posX(stage.getX())
        .posY(stage.getY())
        .build()
);

Das kann man in etwa so machen, dass man den Code von oben vor dem Schliessen über einen Listener auf Window-Events triggert:

// Method #start(Stage)
primaryStage.setOnCloseRequest(this::handleCloseRequest);
// the rest

private void handleCloseRequest(WindowEvent event) {
    // ... do your thing ...
}

Ist alles vielleicht etwas viel auf einmal, aber vielleicht kannst du ja ein paar Impressionen daraus mitnehmen...

 

[sharkattack]

Entschuldige bitte die späte Antwort, aber ich bin gestern nicht mehr dazu gekommen. Vielen Dank für die ausführlichen Informationen. Ist zwar im Moment etwas viel für mich, aber das mit der Displaygrösse in Erfahrung bringen habe ich schon mal getestet. Bei meinem Fernseher zeigt es 3840 x 2120 an, was ja ziemlich genau passt. Komisch finde ich allerdings die Anzeige bei meinem kleinem Notebook. Es hat laut Menü eine Auflösung von 3200 x 1800, mit der Methode von oben zeigt es aber nur 1280 x 680 an. An was liegt das? Oder verstehe ich da etwas komplett falsch?

LG

 

[sharkattack]

Aha, vermutlich hat es etwas mit dem von dir erwähnten Skalierungsfaktor zu tun. Muss mich dazu mal genauer informieren.

 

[AndyJ]

Es gibt ja immer noch das AWT, probier mal:
Toolkit.getDefaultToolkit().getScreenSize();
Toolkit.getDefaultToolkit().getScreenResolution();

Cheers,
Andy

 

[dzim]

Mit Java9 (wenn du Module verwendest) müsstest du dann aber eine unnötig grosse Dependency reinziehen, nur um das zu erfahren.

final Screen primaryScreen = Screen.getPrimary();
final Rectangle2D visualBounds = primaryScreen.getVisualBounds();

Das macht haargenau das Selbe.

Generell bietet die Klasse Screens alles, was man in JavaFX benötigt und man muss nicht nach AWT schauen (was schlechter supportet ist, da eigentlich EOL): https://docs.oracle.com/javase/8/javafx/api/javafx/stage/Screen.html
z.B.: #getDpi um die - überraschend - DPI-Settings auszulesen.

Interessant ist vielleicht auch:
http://news.kynosarges.org/2015/06/29/javafx-dpi-scaling-fixed/
-> http://mail.openjdk.java.net/pipermail/openjfx-dev/2015-June/017337.html
-> http://mail.openjdk.java.net/pipermail/openjfx-dev/2015-June/thread.html#17337
https://stackoverflow.com/questions/26182460/javafx-8-hidpi-support

Eine Suche nach "javafx get dpi scaling factor" liefert so einige Tipps...

 

[sharkattack]

Besten Dank für die Antworten. Ich habe es vorhin mal bei meinem Vater getestet und dort ist die Ausgabe korrekt. Jedenfalls habe ich jetzt die CSS Datei so angepasst, dass die Darstellung bei ihm und auch auf meinem Notebook schon ziemlich gut ist.

Zwei Sachen aber stören mich im Moment noch. Ich habe ein ImageView, wo der Benutzer ein Bild auswählen kann. Leider ist die Darstellung bei meinem Vater und auf dem Notebook zu gross, da ich die Grösse des Bildes auf meinem 4k definiert habe. Ich habe verschiedene Einstellungen in der CSS versucht, aber scheinbar lässt sich die Grösse vom ImageView nicht per CSS ändern. Wie könnte ich das am Besten lösen? Vermutlich könnte ich die Grösse im Controller-Code anpassen, das wollte ich allerdings vermeiden. Gibt es da andere Möglichkeiten, oder muss das direkt im Code angepasst werden?
Dasselbe Problem habe ich mit den Abständen (topAnchor, usw.), auch wenn es dort nicht so schlimm ist und man dort einen Kompromiss zwischen den Auflösungen finden kann. Soweit ich gesehen habe, gibt es auch dort keine Möglichkeit diese direkt in der CSS zu definieren.

JavaFX gefällt mir wirklich sehr gut, aber diese zwei Punkte, sofern sie wirklich nur über den Code selber gelöst werden können, stören mich noch etwas. Des Weiteren ist mir der SceneBuilder unter Linux schon ein paar mal eingefroren, zwei dreimal sogar die gesamte Desktop-Umgebung.

Noch eine letzte Frage hätte ich zur CSS. Ich habe jetzt in der gesamten CSS die Schriftgrössen mit em Werten angegeben. Nur im root selber habe ich px genommen. Wenn ich jetzt die px im root anpasse, ändern sich die Grössen überall, was auch gut so ist. Weiter oben in deinem Code habe ich aber gesehen, dass du die Schrifftgrösse auch im root mit em definiert hast. Was ist da aber dann der Referenzwert? Ich habe die Schrift im root jetzt auf 16px definiert, also weiss ich, dass alle Schriften, bei denen ich 1em gesetzt habe, 16px gross sind. Wenn aber in der root ein em Wert steht, gibt es ja keinen Referenzwert. Oder gibt es da einen Standardwert?

LG

 

[dzim]

Beim ImageView kannst du im Controller fitWidth oder fitHeight verwenden (ich sage bewusst *oder*). Wichtig ist, dass du preserveRatio auf true setzt. Dann müsstest du die fit[Width|Height]Property() an die Höhe/Breite vom Parent oder so binden, so dass diese sich immer anpasst. Verwendest du also ein High-Res-Bild für 4K, sollte es sich so automatisch skalieren, wenn du das Fenster verkleinerst, und/oder eben die Anwendung auf einem Bildschirm mit niedriger Auflösung dargestellt wird. Ich verwende relativ selten Bilder mittels CSS - kann dir aber nicht sagen, warum.

Beim AnchorPane kann ich dir leider weniger helfen, da ich mich damit nie gross beschäftigt habe. Ich dachte, dass auch dort die density-independen Pixel verwendet werden, aber ich muss passen. Kann dir da keine Tipps oder so geben. Einfach ein wenig experimentieren. Vielleicht auch mal mit anderen Layouts (MigPane? nie Probiert, gibt's aber auch für JavaFX…).

Ich verwende den Scene Builder nicht. Unter IntilliJ verwende ich nur den reinen FXML-Support, in Eclipse (wenn ich GTK2 forciere, ansonsten crasht Eclipse) den e(fx)clipse gelieferten Preview-View und die nach FXML übersetzende DSL "FXGraph". Hatte daher das Problem noch nie.

Genau: Es gibt einen Standard-Wert (bzw. muss ihn geben). Er wird hier beschrieben, aber ich glaube, er ist Hard-Coded im JDK. (Merke: glauben, ist nicht wissen…)
Der im ".root" verwendete Wert wird dann wiederum als Basis für die anderen verwendet. Schreibst du also im ".root" 1.2em und woanders für eine spezielle Klasse wieder 1.2em, so wird das noch auf den Basiswert aus ".root" oben drauf gerechnet. So sieht es für mich immerhin aus, als ich es einmal ausprobiert habe.

 

[sharkattack]

Vielen Dank dzim für deine wertvollen Informationen und die Geduld mit mir. Ich werde deine Tipps versuchen und mich vielleicht bei Unsicherheiten wieder melden. Im Moment brauche ich mal eine kurze Pause von den GUIs und arbeite an weiteren Funktionen meines Programms (Export für Thunderbird und Outlook). Dann widme ich mich wieder der Oberfläche.

LG und besten Dank nochmals