Adaptation à la résolution de l'écran et scrollbar en fxml

**Java Ou Javapas** · 07/03/2017, 15h33

Salut tout le monde, j'utilise mon appli que je développe en fxml grâce a sceneBuilder sur plusieurs types d'ecran et je voulais savoir comment faire pour qu'elle s'adapte à chaque fois et comment faire pour avoir une scrollbar qui s'affiche si l'écran est trop petit ou alors comment faire pour que tout les éléments s'adapte proportionnellement (j'utilise un AnchorPane) ?
Et j'ai mis une imageView de fond et j'aimerais qu'elle prenne la même taille que l'anchorpane à chaque fois.
Merci

**bouye** · 08/03/2017, 01h34

Pour l'image de fond, essaie de passer par CSS plutôt (-fx-background-image, -fx-background-repeat, -fx-background-position, -fx-background-size) ça t’évitera de devoir faire des calculs de mise a l’échelle et de positionnement a mano (ça reste possible bien sur mais bon c'est se casser la tête pour pas grand chose).

Pour la barre de défilement... utiliser un ScrollPane avec fitWidth a true est en général est suffisant pour régler le problème. Et un petit CSS modifié pour éviter de voir la bordure du ScrollPane ou la couleur de fond de son viewPort.

Pour une adaptation a des mises en pages ou des tailles différentes en fonction de la résolution (et voir même de l'orientation...), bref avoir une UI responsive en JavaFX... l'API ne le supporte pas de base : pas 36 solutions donc. Faut faire ça a la main.

Une première approche est que le contrôleur va modifier l’arborescence pour remplacer un conteneur par un autre lorsque la taille / l'orientation change. Ex: en mode paysage / large tout est dans des HBox; en mode portrait / étroit on met tout dans des VBox a la place.

On peut aussi créer des sous-FXML spécifiques pour chaque type d'affichage et faire que le contrôleur principale les charge et les change lorsque la taille / l'orientation change.

D'autres ont fait des approches en utilisant CSS (code).
Voir aussi changer la skin via le CSS.

Bon, bref ca va demander du boulot par contre

**Java Ou Javapas** · 10/03/2017, 13h58

Ok merci pour ta réponse, je vais essayer tout ça

EDIT : Bon j'ai essayé, j'ai remplacé mon AnchorPane par un ScrollPane dans le xml et la balise "children" par la balise "content" mais quand je lance l'application je n'ai plus que JFXDatePicker qui apparaît tous mes autres éléments disparaissent (boutons, zone de texte...) et quand j'ouvre le fichier XML avec SceneBuilder il m'indique que les seuls element sont le ScrollPane et mon ImageView, le JFXDatePicker est présent mais il n'est pas indiqué dans la hierarchy (en bas a gauche).
Utiliser un css en plus d'un fxml ? ça ne fait pas un peu beaucoup ?

**bouye** · 12/03/2017, 22h39

Envoyé par Java Ou Javapas

Utiliser un css en plus d'un fxml ? ça ne fait pas un peu beaucoup ?

Pourquoi donc ?

Sinon, pour répondre a ton mp : non, il ne semble pas y avoir de notifications après édition.

Pour le reste je peux pas être devin si je ne sais pas ce que contient ton FXML...

**Java Ou Javapas** · 12/03/2017, 22h55

Je pensais qu'en javfx, c'était soi avec un css soit avec un fxml.
Dans mon fxml j'ai 8 JFXButton, 3 textarea, une dizaine de label, 2 JFXDatePicker, 1 imageView..... Mais rien ne s'affiche

**bouye** · 13/03/2017, 00h07

Envoyé par Java Ou Javapas

Je pensais qu'en javfx, c'était soi avec un css soit avec un fxml.

Y a aucun soucis a me langer tout ça ensemble.

Dans mon fxml j'ai 8 JFXButton, 3 textarea, une dizaine de label, 2 JFXDatePicker, 1 imageView..... Mais rien ne s'affiche

Ça ne me dit pas ce qu'il y a dans le code XML du fichier pour que je puisse tester ca par moi-même

**Java Ou Javapas** · 13/03/2017, 19h01

Code XML :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<?xml version="1.0" encoding="UTF-8"?>
 
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXDatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.text.Font?>
 
<ScrollPane id="ScrollPane" fx:id="scroll" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1005.0" prefWidth="1820.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="fr.packagea.FXMLDocumentController">
    <content>
      <ImageView fitHeight="1005.0" fitWidth="1820.0" pickOnBounds="true">
         <image>
            <Image url="@fond02.gif" />
         </image>
      </ImageView>
        <Label fx:id="label" layoutX="323.0" layoutY="217.0" minHeight="16" minWidth="18.0" prefHeight="27.0" prefWidth="34.0" text="ou">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font></Label>
      <JFXButton fx:id="btnFichier" cacheShape="false" layoutX="101.0" layoutY="206.0" onAction="#actionFichier" prefHeight="48.0" prefWidth="194.0" ripplerFill="#27119c" text="FICHIER (video, images, pdf..)" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <JFXButton fx:id="btnTexte" buttonType="RAISED" layoutX="365.0" layoutY="207.0" onAction="#actionTexte" prefHeight="48.0" prefWidth="140.0" ripplerFill="#27119c" text="TEXTE" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <Label fx:id="lblDuree" layoutX="101.0" layoutY="296.0" text="Durée d'affichage (en secondes) :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <TextField fx:id="txtDuree" layoutX="387.0" layoutY="285.0" prefHeight="38.0" prefWidth="100.0" />
      <JFXButton fx:id="btnPrecedent" layoutX="113.0" layoutY="393.0" onAction="#actionPrecedent" prefHeight="38.0" prefWidth="100.0" text="PRECEDENT" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <JFXButton fx:id="btnSuivant" layoutX="252.0" layoutY="393.0" onAction="#actionSuivant" prefHeight="38.0" prefWidth="108.0" text="SUIVANT" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <JFXButton fx:id="btnTerminer" buttonType="RAISED" layoutX="387.0" layoutY="393.0" onAction="#actionTerminer" prefHeight="38.0" prefWidth="100.0" text="TERMINER" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <Label fx:id="lblNom" layoutX="103.0" layoutY="508.0" text="Nom (Obligatoire) :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <TextField fx:id="txtNom" layoutX="275.0" layoutY="499.0" prefHeight="38.0" prefWidth="242.0" />
      <Label fx:id="lblDescriptif" layoutX="103.0" layoutY="620.0" text="Descriptif :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <TextArea fx:id="txtDescriptif" layoutX="103.0" layoutY="648.0" prefHeight="200.0" prefWidth="445.0" />
      <Label fx:id="lblScenar" layoutX="856.0" layoutY="54.0" text="Votre scénario :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <TextArea fx:id="txtScenar" editable="false" layoutX="856.0" layoutY="84.0" prefHeight="718.0" prefWidth="639.0" />
      <TextField fx:id="txtDureeTotale" editable="false" layoutX="1387.0" layoutY="888.0" prefHeight="38.0" prefWidth="108.0" />
      <Label fx:id="lblNombreElements" layoutX="514.0" layoutY="223.0" minHeight="16" minWidth="69" text="Elements crées :                ">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font></Label>
      <Label layoutX="1048.0" layoutY="899.0" text="Durée d'affichage totale (en secondes) : ">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <JFXButton fx:id="btnActiver" buttonType="RAISED" layoutX="1357.0" layoutY="933.0" onAction="#actionActiver" prefHeight="48.0" prefWidth="176.0" ripplerFill="#27119c" text="ACTIVER LE SCENARIO" textFill="#27119c">
         <font>
            <Font name="System Bold" size="14.0" />
         </font>
      </JFXButton>
      <TextField fx:id="txtFichier" editable="false" layoutX="101.0" layoutY="342.0" prefHeight="38.0" prefWidth="382.0" />
      <Label layoutX="1289.0" layoutY="819.0" text="Heure de début :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <Label layoutX="1289.0" layoutY="849.0" text="Heure de fin :">
         <font>
            <Font name="Copperplate Gothic Bold" size="14.0" />
         </font>
      </Label>
      <JFXDatePicker fx:id="heureDebut" defaultColor="#002d8f" editable="false" layoutX="1431.0" layoutY="813.0" prefHeight="28.0" prefWidth="100.0" showTime="true" />
      <JFXDatePicker fx:id="heureFin" defaultColor="#002d8f" editable="false" layoutX="1431.0" layoutY="843.0" prefHeight="28.0" prefWidth="100.0" showTime="true" />
    </content>
</ScrollPane>

Voila

**bouye** · 13/03/2017, 23h04

Et ca charge sans planter ca ?

Alors je rapelle que ScrollPane ca prend un seul et unique nœud qui va dans <content> et donc que tu coup ça parait évident qu'il faut que ce soit un conteneur (genre celui que tu utilisais auparavant) qui contient tout les autres nœuds.... du coup...

**Java Ou Javapas** · 14/03/2017, 15h48

AH ok ! je ne savais pas, je n'avais jamais utilisé de ScrollPane avant, je viens de tester j'ai mis un AnchorPane dans la balise content et ça fonctionne bien mieux.
Merci.

**bouye** · 15/03/2017, 01h04

Le FXML n'est qu'une transposition simplifiée en XML, de l'API Java. Donc dans le doute, se reporter a l'API Java.

public final ObjectProperty<Node> contentProperty
The node used as the content of this ScrollPane.
See Also:
getContent(), setContent(Node)

Adaptation à la résolution de l'écran et scrollbar en fxml

JavaFX

Discussions similaires

Partager

Partager