Discussion :

[Golzinne]

Bonjour,

Est-il possible de construire une application qui se redimensionnerait automatiquement en fonction de la résolution de l'écran ?
Je ne parle pas simplement du cadre extérieur, mais bien de tous les composants en ce compris les polices de caractère !

Je vois bien des possibilités en jouant avec les propriétés de mes containers ou contrôles ainsi qu'avec le CSS, mais je voudrais savoir s'il n'existe pas un moyen de tout agrandir ou diminuer en gardant la même proportion.

Merci d'avance

[bouye]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

-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 :



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

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Tandis que l'image centrale est definie par une Image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :



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 :



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).