Contenu redimensionnable en fonction de la résolution

Tu peux tenter de mettre un facteur de mise a l’échelle sur le noeud racine de l'application root.setScale(facteur). Et il te faudra aussi calculer ce facteur en fonction de la résolution d'affichage en cours. Ça va rendre tes bitmap toutes floues par contre.

Cependant, je dirais que, par défaut CSS semble être la voie a suivre ; principalement en augmentant la taille de la police. Je pense notamment au fait de positionner des pseudo classes sur le noeud racine de l'UI en fonction de la taille affichée / de la résolution de l’écran. Ça devrait entrainer le changement de taille de tous les composants qui permettent de gérer du texte (ex : TextField, Label, etc.) mais pas forcement du reste de l'UI (ex : le texte d'un CheckBox va être plus gros mais pas la case a cocher en elle-même).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .root { -fx-font-size: 1.0em; } .root:large { -fx-font-size: 1.5em; } .root:xtra-large { -fx-font-size: 2.0em; } .root:xxl { -fx-font-size: 5.0em; }
Cependant, à partir du JDK 8_60, la mise à l’échelle sur les machines HiDPI / Retina est sensée être automatique et surtout consistante (ca marchait avec les version précédentes mais le résultat était pas top).
Et, en plus, tu peux mettre manuellement une UI à l’échelle en passant comme paramètre de JVM le flag -Dglass.win.uiScale=<facteur d’échelle ou pourcentage ou DPI>, par exemple :

Citation:

Envoyé par http://news.kynosarges.org/2015/06/29/javafx-dpi-scaling-fixed/

-Dglass.win.uiScale=200% (in cygwin shell)
-Dglass.win.uiScale=200%% (in cmd.exe since it eats single '%' chars)
-Dglass.win.uiScale=192dpi
-Dglass.win.uiScale=2.00

Si on utilise -Dglass.win.uiScale=2.00, ça affiche une fenêtre 400 x 400 en 800 x 800 avec tout son contenu en taille double. Par contre ça rend les images bitmaps assez moches du coup. Le contenu vectoriel reste impec bien sur.

Par exemple avec l'UI suivante :

Pièce jointe 190656

Ici, les deux images qui composent le header sont définie via CSS :

Code:

-fx-background-image: url(header-watermark.png), url(header-arch.png);

Tandis que l'image centrale est definie par une Image
Code:

1 2 final Image image = new Image(getClass().getResource("test-image.png").toExternalForm()); final ImageView imageView = new ImageView(image);
Ici si on affiche en double résolution via le flag, soudainement les images deviennent toutes floues et moches :

Pièce jointe 190658

Pour afficher des images en résolution double (et ça apparemment c'est nouveau, même si ça avait été annoncé en 2011-2012), il faut faire comme sur Mac et périphériques iOS Retina : il faut fournir 2 jeux d'images :

toto.png est l'image utilisée lors de la mise à l’échelle 1.0
toto@2x.png est l'image à résolution x2 utilisée lors de la mise à l’échelle 2.0 (Retina)

Et pareil pour des résolutions plus hautes :

toto@4x.png est l'image à résolution x4 utilisée lors de la mise à l’échelle 4.0 (4K)
etc.

EDIT - après plus de tests, le support du 4x n'est pas fonctionnel.

Le chargement de l'image appropriée est fait automatiquement par le runtime en fonction de la mise à l’échelle actuelle. Ce qui permet d'obtenir une image toute nette sans changer une ligne dans le code ni dans les CSS ni manuellement changer la taille des polices ou quoi que ce soit :

Pièce jointe 190657

Avertissement : d’après le blog post la valeur 120% est une valeur spéciale et la mise à l’échelle est désactivée pour cette valeur (on reste à l'échelle 1.0 donc).

Hum va me falloir mettre à jour la FAQ JavaFX (j'avais pas testé ça jusqu'à lors).