Discussion :

[SBanogo]

Bonjour a tous ! Je suis sur un projet de developpement d'app desktop et je n'arrive pas a gerer la responsiviter avec scene builder et javafx ! Maintenant comment responsiver une app javafx avec scene builder !?

[bouye]

Hum, JavaFX est plus flexible que Swing mais pas au point de supporter le responsive de base comme certains framework web, donc le développeur doit quand même se taper pas mal de code pour gérer ça (ou trouver qq part un composant / gestionnaire de mise en forme / Parent prêt a l'emploi qui le fasse). Même les UI mobiles de Gluon ne sont pas vraiment responsive en fait.

Certains des layout de base peuvent aider pour gérer ça : HBox, VBox, FlowPane, TilePane ou encore GridPane. Le but du développeur est d’écouter les évènements de redimensionnement de la fenêtre ou du composant racine de la scène et de changer le layout, retirer les controles de l'ancien layout, les disposer dans le nouveau, et les repositionner ailleurs si besoin, etc. en fonction de la nouvelle taille ou du ratio largeur / hauteur. De même lorsque la surface d'affichage devient plus petite on peut switcher sur un fichier CSS qui demande l'affichage d'une police plus petite, etc.

On peut trouver plusieurs tentatives ou explications sur comment tenter de faire du responsive en JavaFX qui ont été publiés au cours des années :

• Responsive Design with JavaFX - ici on utilise CSS pour changer le skin des contrôles (même si l'exemple montre est sur un contrôle d'aspect différent, l'article indique bien qu'on peut en profiter pour spécifier des skins de layout différent via le CSS).
• Responsive Design for JavaFX - via CSS.
• How to create a responsive layout in JavaFX - ici on alterne entre HBox et VBox.
  

SceneBuilder en lui-mene ne supporte pas non-plus vraiment le responsive. En fait il faudrait trouver un layout qui supporte le responsive et l’intégrer a SceneBuilder. Ça permettrait alors de faire directement du responsive en mode WYSIWYG dans SceneBuilder. Par contre là où SceneBuilder peut largement aider c'est pour le prototypage de l'UI car tu peux coder un FXML par type de vue : desktop landscape, desktop portait, tablet landscape, tablet portrait, phone landscape, photo portrait, etc. De qui permet de comparer les vues et ensuite de décider comment coder tout ça soit directement dans le contrôleur soit via CSS.

Une 3e option est de créer un composant de haut niveau genre "boite vide" et que le contrôleur de ce composant charge les FXML appropriés (ceux décrit plus haut pour chacune des vues) et les insère dans la scène si besoin quand la fenêtre est redimensionnée. Par contre ça veut dire aussi propager les valeurs des contrôles d'une vue a une autre donc pas mal de modifs pour vérifier qu'on perd rien en cours de route.


Et pour du responsive avec des animations genre deplacement / redimentionnement des composant. euh, la ca rajouter une couche de complexite supplementaire.