© Enkel/Shutterstock.com
JavaFX an mehrere Bildschirmgrößen anpassen

Mehrere Hürden zu meistern


Anwendungen mit JavaFX kommen nicht nur unter Android zum Einsatz, sondern auch auf Desktops. Sie laufen auf Computern, an denen unterschiedliche Bildschirme angeschlossen sind. Mit diversen Tricks sehen JavaFX-Anwendungen auf unterschiedlichen Bildschirmgrößen gleich gut aus.

JavaFX stellt eigene Bordmittel zur Verfügung, mit denen sich Elemente vergrößern und anordnen lassen. Zunächst einmal sollte man die Bildschirmgröße ermitteln, weil darauf alles aufbaut. Die hier besprochene Beispielanwendung ist nach dem Model-View-Controller-(MVC-)Pattern aufgebaut, sodass zuerst das Model, gefolgt vom Controller MainVC gestartet wird (Listing 1).

Listing 1

import javafx.application.Application; import javafx.stage.*; public class App extends Application { public void start(Stage primaryStage) { Model data = new Model(primaryStage); MainVC mainVC = new MainVC(data); mainVC.show(); } public static void main (String[] args) { launch(args); } }

Listing 2 zeigt das Model, in dem anhand der Methode setScreenSize die tatsächliche Bildschirmgröße erfasst wird. Die setSceneSize-Methode legt basierend auf der Bildschirmgröße die Fenstergröße fest. Dank des MVC-Patterns hat jede View Zugriff auf die ermittelte Auflösung, da der Controller der View die Auflösung übergibt.

Listing 2

import javafx.stage.*; import javafx.scene.* public class Model { private Stage primaryStage = null; private int screenHeight = 0; private int screenWidth = 0; public Model(Stage primaryStage) { this.primaryStage = primaryStage; setScreenSize(); setSceneSize(); } public void setScreenSize(){ this.screenWidth = (int) Screen.getPrimary().getBounds().getWidth(); this.screenHeight = (int) Screen.getPrimary().getBounds().getHeight(); } public void setSceneSize(){ if (this.screenWidth <= 800 && this.screenHeight <= 600) { this.monitorSize = MonitorState.SMALL; } else if (screenWidth <= 1280 && screenHeight <= 768) { this.monitorSize = MonitorState.MEDIUM; } else if (this.screenWidth <= 1920 && this.screenHeight <= 1080) { this.monitorSize = MonitorState.LARGE; } } }

Die Beispielanwendung geht von drei möglichen Bildschirmtypen aus: klein, mittel (für 7-Zoll-Monitore) und groß (für 24-Zoll-Monitore). Diese Bildschirmtypen werden in einem Java-Enum definiert (Listing 3). Außerdem lässt sich dort für jeden Bildschirmtyp das passende Stylesheet festhalten. Es ist vorteilhaft, gleich mehrere Stylesheets zu erstellen. Denn JavaFX stellt keine Media Queries zur Verfügung, wie das im Web der Fall ist.

Listing 3

public enum MonitorState { SMALL("small",600,350,"simple_small.css"), MEDIUM("medium",800,500,"simple_medium.css"), LARGE("large", 1000,700,"simple_large.css"); private final String state; private final int width; private final int height; private final String stylesheet; MonitorState(String key, int value1, int value2,String stylesheet) { this.state = key; this.width = value1; this.height = value2; this.stylesheet = stylesheet; } public String getKey() { return this.state; } public int getWidth() { return this.width; } public int getHeight() { return this.height; } public String getStylesheet() { return this.stylesheet; } }

CSS-Styles

Falls ein Stylesheet für eure Anwendung ausreicht, könnt ihr darüber hinaus die einzelnen Größen relativ angeben. Für Schriftarten eignen sich die folgenden Einheiten:

  • rem: relativ zur Schriftgröße des Wurzelelements root

  • em: relativ zur Schriftgröße der aktuellen Schriftart

  • px: Abkürzung für Pixel, bezieht sich auf 1/96 eines Zolls

  • pt: Abkürzung für Punkte; ein Punkt besitzt eine Größe von 1/72 eines Zolls

  • %: relativ zum Elternelement

Beim Wurzelelement .root legt ihr die Standardschriftgröße fest (Listing 4).

Listing 4

.root { myMidBlue: #008284; myWhite: whitesmoke; -fx-font-size: 12 pt; -fx-background-color: myDarkGray; -fx-font-family: 'Roboto Regular'; }

Die Skalierung der Steuerelemente ist zum Teil recht simpel, denn Buttons lassen sich anpassen, indem sich die Größe der Buttons an Schriftgröße und Schriftart orientiert. Einen einfachen Button, wie in den Abbildungen 1 bis 4 zu sehen, könnt ihr in CSS variabel oder fix definieren.

minosi_javafx_1.tif_fmt1.jpgAbb. 1: Die Beschriftung des Buttons hat die Größe von 18 Punkten
minosi_javafx_2.tif_fmt1.jpgAbb. 2: Die Schriftgröße von 18 em scheint genauso groß zu sein wie 18 Punkte
minosi_javafx_3.tif_fmt1.jpgAbb. 3: Auch die Schriftgröße von 18 rem ähnelt sehr den 18 Punkten
minosi_javafx_4.tif_fmt1.jpgAbb. 4: Lediglich die Schriftgröße von 18 Prozent sticht heraus

Listing 5 zeigt die Definition eines Buttons für das JavaFX-Stylesheet. Ihr müsst lediglich die...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang