7/23/2019 Java FX Partie4
1/64
Cours IHM
-
1JavaFX
Jacques BAPST
4
-
Conteneurs
Layout
-
Panes
7/23/2019 Java FX Partie4
2/64
Disposition des composants
Gnralits
Notions de base
IHM-1 FX04 Jacques BAPST 2
7/23/2019 Java FX Partie4
3/64
Disposition des composants
[1]
La qualit d'une interface graphique repose sur de nombreux
lments mais la disposition des composants dans la fentre figurecertainement parmi les plus importants.
Quand on parle de la disposition(layout) d'une interface, ons'intresse plus particulirement :
A la taille des composants A la position des composants
Position dans la fentre
Position relative des lments les uns par rapport aux autres
Aux alignements et espacements qui favorisent la structuration visuelle
Aux bordures et aux marges (notamment autour des conteneurs) Au comportement dynamique de l'interface lorsqu'on redimensionne
la fentre, lorsqu'on dplace une barre de division (splitpane), etc.
IHM-1 FX04 Jacques BAPST 3
7/23/2019 Java FX Partie4
4/64
Disposition des composants
[2]
Il est possible de dimensionner et de positionner les composants de
manire absolue (en pixels, mm, etc.).
Une disposition avec des valeurs absolues peut tre utile et mmencessaire dans certaines situations particulires. Cependant, dansla plupart des cas, elle prsente de nombreux dfauts, car :
La taille naturelle des composants peut varier, en fonction De la langue choisie (libells, boutons, menus, )
De la configuration de la machine cible (paramtres de l'OS)
Du look&feel, thme, skin, style (CSS) choisi par l'utilisateur
La taille de la fentre peut galement varier
Par le souhait de l'utilisateur Par obligation, pour s'adapter la rsolution de l'cran de
la machine cible (pour afficher l'intgralit de l'interface)
IHM-1 FX04 Jacques BAPST 4
7/23/2019 Java FX Partie4
5/64
Disposition des composants
[3]
Pour viter ces inconvnients on prfre dlguer la disposition des
composants des gestionnaires de disposition(layout managers)qui sont associs des conteneurs.
L'ide principale est de dfinir des rgles de disposition (descontraintes) que le gestionnaire se chargera de faire respecter enfonction du contexte spcifique de la machine cible.
AvecJavaFX, les layout managers sont intgrs aux conteneurs(layout-panes) et ne sont pas manipuls directement par lesprogrammeurs (seulement au travers des proprits des conteneurs).
C'est donc par le choix du layout-pane et en fonction des contraintes
donnes que sont dtermines les rgles de disposition.
Plusieurs layout-panes sont prdfinis dansJavaFX. Il est galementpossible de dfinir ses propres conteneurs avec des rgles dedisposition spcifiques, mais c'est rarement ncessaire.
IHM-1 FX04 Jacques BAPST 5
7/23/2019 Java FX Partie4
6/64
Taille des composants
Les composants (nodes) que l'on peut placer dans des conteneurs
possdent des proprits qui peuvent tre prises en compte lors ducalcul de leur disposition.
minWidth : Largeur minimale souhaite pour le composant
prefWidth : Largeur prfre (idale) du composant
maxWidth : Largeur maximale souhaite pour le composant
minHeight : Hauteur minimale souhaite pour le composant
prefHeight : Hauteur prfre (idale) du composant
maxHeight : Hauteur maximale souhaite pour le composant
L'effet de ces proprits dpend naturellement du type deconteneur (layout-pane) utilis et de ses rgles spcifiques depositionnement et de dimensionnement.
IHM-1 FX04 Jacques BAPST 6
7/23/2019 Java FX Partie4
7/64
Systme de coordonnes [1]
Le systme de coordonnes utilis parJavaFXplace l'origine dans le
coin suprieur gauche du conteneur ou du composant considr.
Les valeurs de l'axexcroissent vers la droite.
Les valeurs de l'axe ycroissent vers le bas (traditionnel en infographie).
La taille des composants est dfinie par leur largeur (width) et parleur hauteur (height).
IHM-1 FX04 Jacques BAPST 7
Component
x
y
[0,0]
yc
xc
Width
Height
7/23/2019 Java FX Partie4
8/64
Systme de coordonnes [2]
Coordonnes d'origine de diffrents lments d'une application
JavaFX.
IHM-1 FX04 Jacques BAPST 8
Window / Stage
Scene / Root
Node / Component
Screen
7/23/2019 Java FX Partie4
9/64
Systme de coordonnes [3]
En ralit, toute la librairie graphique est base sur un systme de
coordonnes en trois dimensions (3D).
La troisime dimension est reprsentepar l'axe z dont les valeurs augmententlorsqu'on s'loigne de l'observateur.
Pour la gestion des interfaces "classiques"(de type WIMP), on ne s'occupe gnralement pas de l'axe z et ontravaille uniquement dans le planx/y.
Dans les API, pratiquement toutes les coordonnes sont donnesavec des nombres virgule (gnralement des double).
Le systme n'est donc pas ncessairement li aux pixels de l'cran Des transformations sont ainsi facilement possibles (translation,
homothtie, rotation, ) en utilisant l'algbre linaire
Lors du rendu un alignement sur les pixels peut tre automatiquementeffectu (voir mthode snapToPixel())
IHM-1 FX04 Jacques BAPST 9
7/23/2019 Java FX Partie4
10/64
Fentre principale [1]
Par dfaut, au lancement d'une application, la fentre principale
(primary stage) est centre sur l'cran.
Diffrentes mthodes peuvent tre invoques sur l'objet Stage pourinfluencer la position et la taille de cette fentre :
setX() : Position en x du coin suprieur gauche
setY() : Position en y du coin suprieur gauchecenterOnScreen() : Centrage sur l'cran (par dfaut)
setMinWidth() : Fixe la largeur minimale de la fentre
setMinHeight() : Fixe la hauteur minimale de la fentre
setMaxWidth() : Fixe la largeur maximale de la fentre
setMaxHeight() : Fixe la hauteur maximale de la fentresetResizable() : Dtermine si la fentre est redimensionnable
sizeToScene() : Adapte la taille de la fentre la taille de la scnelie cette fentre
IHM-1 FX04 Jacques BAPST 10
7/23/2019 Java FX Partie4
11/64
Fentre principale [2]
Autres mthodes de l'objet Stage :
setTitle() : Dfinit le titre de la fentre (affich selon OS)
setFullScreen() : Place la fentre en mode plein-cran ou en modestandard (si paramtre false) (selon OS)
getIcons().add() : Dfinit l'icne dans la barre de titre
setAlwaysOnTop() : Place la fentre toujours au dessus des autres
(gnralement viter)
setScene() : Dfinit la scne (sa racine) qui est associe la fentre
show() : Affiche la fentre l'cran (et la scne qu'elle contient)
showAndWait() : Affiche la fentre l'cran et attend que la fentre soitferme pour retourner (mthode bloquante).
Cette mthode n'est pas applicable la fentreprincipale (primary stage).
. . . Et beaucoup d'autres (consulter la documentation)
IHM-1 FX04 Jacques BAPST 11
7/23/2019 Java FX Partie4
12/64
Fentre principale [3]
Pour dterminer la taille de l'cran, on peut utiliser la classe Screen
et rechercher le rectangle qui englobe la zone utilisable de l'cran(ou l'intgralit de la surface de l'cran).
La mthode getVisualBounds() prend en compte l'espace occuppar certains lments du systme d'exploitation (barre de tche,menu, etc.).
La mthode getBounds() retourne par contre un rectangle quireprsente la surface totale de l'cran.
IHM-1 FX04 Jacques BAPST 12
Screenscreen= Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
doublescreenWidth = bounds.getWidth();
doublescreenHeight= bounds.getHeight();
doublescreenDpi = screen.getDpi(); // Dot per inch
7/23/2019 Java FX Partie4
13/64
Fentre principale [4]
La fentre principale, appeleprimary stage est celle qui est passe
en paramtre (par le systme) la mthode start().
Dans une applicationJavaFX, il est possible de crer d'autresfentres indpendantes (d'autres objets Stage) et de les grer.
IHM-1 FX04 Jacques BAPST 13
private voidcreateStage() {
Stage secondStage= newStage();secondStage.setTitle("Second Stage");
root2= . . . // Cration de la scne de la deuxime fentre
secondStage.setScene(newScene(root2));
secondStage.show();
}
@Override
public voidstart(Stage primaryStage) {
. . .
createStage();
. . .
}
7/23/2019 Java FX Partie4
14/64
Bordures [1]
Des bordures peuvent tre appliques toutes les sous-classes de
Region, notamment autour des conteneurs (layout-panes) et autourdes composants (moins frquent).
C'est la proprit border (hrite de Region) qui est utilise pourdfinir les caractristiques de la bordure.
Les classes Border et BorderStroke permettent de crer desbordures et de les assigner la proprit border. Border estimmuable et permet ainsi de crer des objets rutilisables (on peutappliquer une mme bordure plusieurs conteneurs ou composants).
Pour les bordures,JavaFXsuit le modle de conception propos
pour les feuilles de style CSS3. Cette spcification est relativementcomplexe et permet la gestion de bordures assez sophistiques.
Les exemples ci-aprs illustrent une utilisation simple des bordurespour entourer un conteneur (de type HBox).
IHM-1 FX04 Jacques BAPST 14
7/23/2019 Java FX Partie4
15/64
Bordures [2]
Exemple 1 : bordure rectangulaire
IHM-1 FX04 Jacques BAPST 15
primaryStage.setTitle("Test Border 1");
Button btnA= newButton("A Border Test");
HBox root= newHBox();
root.getChildren().add(btnA);
root.setPadding(newInsets(30, 50, 30, 50));root.setAlignment(Pos.CENTER);
Border border1= newBorder(
newBorderStroke(Color.GREEN,
BorderStrokeStyle.SOLID,
CornerRadii.EMPTY,
newBorderWidths(6),newInsets(0) ));
root.setBorder(border1);
primaryStage.setScene(newScene(root));
primaryStage.show();
7/23/2019 Java FX Partie4
16/64
Bordures [3]
Exemple 2 : bordure pointille, aux coins arrondis
IHM-1 FX04 Jacques BAPST 16
primaryStage.setTitle("Test Border 2");
Button btnA= newButton("A Border Test");
HBox root= newHBox();
root.getChildren().add(btnA);
root.setPadding(newInsets(30));root.setAlignment(Pos.CENTER);
Border border2= newBorder(
newBorderStroke(Color.ORANGE,
BorderStrokeStyle.DOTTED,
newCornerRadii(30),
newBorderWidths(10),newInsets(20) ));
root.setBorder(border2);
primaryStage.setScene(newScene(root));
primaryStage.show();
7/23/2019 Java FX Partie4
17/64
Arrire-plans [1]
Des couleurs et/ou des images d'arrire-plan peuvent tre
appliques toutes les sous-classes de Region, et donc aussi bienaux conteneurs (layout-panes) qu'aux composants (controls).
C'est la proprit background (hrite de Region) qui est utilisepour dfinir les caractristiques de l'arrire-plan.
Les classes Background, BackgroundFill et BackgroundImagepermettent de crer des arrire-plans qui peuvent tre compossd'une superposition de remplissage (fill) et/ou d'images. Ces classessont immuables et permettent ainsi de crer des objets rutilisables(on peut appliquer un mme arrire-plan plusieurs conteneurs oucomposants).
Les exemples qui suivent illustrent l'application d'arrire-plans desconteneurs (de type HBox).
IHM-1 FX04 Jacques BAPST 17
7/23/2019 Java FX Partie4
18/64
Arrire-plans [2]
Exemple avec deux remplissages (fill) d'arrire-plan superposs :
IHM-1 FX04 Jacques BAPST 18
Button btnA= newButton("A Background Test");
HBox root= newHBox();
root.getChildren().add(btnA);
root.setPadding(newInsets(30, 50, 30, 50));
root.setAlignment(Pos.CENTER);
Background bgGreen= newBackground(
newBackgroundFill(Color.LIGHTGREEN,
CornerRadii.EMPTY,
null ),
newBackgroundFill(Color.GREEN,
newCornerRadii(20),newInsets(15) ));
root.setBackground(bgGreen);
7/23/2019 Java FX Partie4
19/64
Arrire-plans [3]
Exemple avec la rptition d'une image d'arrire-plan :
IHM-1 FX04 Jacques BAPST 19
Button btnA= newButton("A Background Test");
Image img = newImage("/resources/warn_1.png");
HBox root= newHBox();
root.getChildren().add(btnA);
root.setPadding(newInsets(30, 50, 30, 50));
root.setAlignment(Pos.CENTER);
Background bgImg= newBackground(
newBackgroundImage(
img,
BackgroundRepeat.ROUND,
BackgroundRepeat.ROUND,BackgroundPosition.CENTER,
BackgroundSize.DEFAULT ));
root.setBackground(bgImg);
7/23/2019 Java FX Partie4
20/64
Conteneurs
Layout-Panes de base(disponibles par dfaut)
IHM-1 FX04 Jacques BAPST 20
7/23/2019 Java FX Partie4
21/64
Layout-Panes
Dans la cration des graphes de scne, les conteneurs (appels
layout-panes ou parfois simplement layouts oupanes) jouent doncun rle important dans la structuration et la disposition descomposants qui seront placs dans les interfaces.
En fonction du design adopt (phase de conception de l'interface),il est important de rflchir au choix des conteneurs qui permettront
au mieux de raliser la mise en page souhaite.
Les pages qui suivent dcrivent sommairement les layouts-panes quisont prdfinis dansJavaFX.
Seules les caractristiques principales sont mentionnes dans ce
support de cours. Ce n'est en aucun cas un manuel de rfrence.
Il faut donc imprativement consulter la documentation disponible(Javadoc, tutorials, ) pour avoir une description dtaille de l'API(constantes, proprits, constructeurs, mthodes, ).
IHM-1 FX04 Jacques BAPST 21
7/23/2019 Java FX Partie4
22/64
HBox [1]
Le layoutHBox place les composants sur une ligne horizontale. Les
composants sont ajouts la suite les uns des autres (de gauche droite).
L'alignement des composants enfants est dtermin par la propritalignment, par dfaut TOP_LEFT (type numr Pos).
L'espacement horizontal entre les composants est dfini par laproprit spacing (0 par dfaut). La valeur de cette proprit peuttre passe en paramtre au constructeur (new HBox(8)).
Si possible, le conteneur respecte la taille prfre des composants.Si le conteneur est trop petit pour afficher tous les composants leur taille prfre, il les rduit jusqu' minWidth.
IHM-1 FX04 Jacques BAPST 22
7/23/2019 Java FX Partie4
23/64
HBox [2]
L'ajout des composants enfants dans le conteneur s'effectue en
invoquant d'abord la mthode gnrale getChildren() quiretourne la liste des enfants du conteneur et en y ajoutant ensuitele composant considr (mthodes add() ou addAll()) :
HBoxroot= newHBox();
root.getChildren().add(btnA);
Des mthodes statiques de HBox peuvent tre invoques pourappliquer des contraintes de positionnement :
hgrow() : permet d'agrandir le composant pass en paramtre jusqu'sa taille maximale selon la priorit (Priority) donne
margin() : fixe une marge (objet de type Insets) autour du composantpass en paramtre (zro par dfaut Insets.EMPTY)
IHM-1 FX04 Jacques BAPST 23
7/23/2019 Java FX Partie4
24/64
HBox [3]
Exemple (dclaration des composants et code de la mthode start())
IHM-1 FX04 Jacques BAPST 24
primaryStage.setTitle("Test HBox");
root= newHBox(10); // Horizontal Spacing : 10
root.setAlignment(Pos.CENTER);
root.getChildren().add(btnA);
root.getChildren().add(lblB);
cbbC.getItems().addAll("Charlie", "Delta");
cbbC.getSelectionModel().select(0);root.getChildren().add(cbbC);
primaryStage.setScene(newScene(root, 300, 100));
primaryStage.show();
privateHBox root;
privateButton btnA = newButton("Alpha");
privateLabel lblB = newLabel("Bravo");
privateComboBox cbbC = newComboBox();
7/23/2019 Java FX Partie4
25/64
HBox [4]
La proprit padding permet de dfinir l'espace (marge) entre le
bord du conteneur et les composants enfants. Un paramtre de type Insets est pass en paramtre, il dfinit les
espacements dans l'ordre suivant : Top, Right, Bottom, Leftou unevaleur identique pour les quatre cts si l'on passe un seul paramtre
root.setPadding(newInsets(10, 5, 10, 5));
root.setPadding(newInsets(10));
Une couleur de fond peut tre applique au conteneur endfinissant la proprit style qui permet de passer en chane decaractres, un style CSS.
On dfinit la proprit CSS-fx-background-color.
root.setStyle("-fx-background-color: #FFFD33");
IHM-1 FX04 Jacques BAPST 25
On peut aussi utiliser
setBorder()discut
au dbut du chapitre
7/23/2019 Java FX Partie4
26/64
HBox [5]
Exemple (conteneur avecpadding et couleur de fond)
IHM-1 FX04 Jacques BAPST 26
primaryStage.setTitle("Test Padding+Background");
root= newHBox(10);
//--- Top, Right, Bottom, Left Spacing
root.setPadding(newInsets(20, 10, 20, 10));
root.setStyle("-fx-background-color: #FFFE99");
root.getChildren().add(btnA);
root.getChildren().add(lblB);
cbbC.getItems().addAll("Charlie", "Delta");
cbbC.getSelectionModel().select(0);root.getChildren().add(cbbC);
primaryStage.setScene(newScene(root));
primaryStage.show();
7/23/2019 Java FX Partie4
27/64
VBox [1]
Le layoutVBox place les composants verticalement, sur une colonne.
Les composants sont ainsi ajouts la suite les uns des autres (dehaut en bas).
Toutes les proprits et mthodes dcrites pour le conteneur HBoxs'appliquent galement au conteneur VBox avec seulement quelquesadaptations assez videntes, par exemple la proprit hgrow devientvgrow. La diffrence essentielle est donc simplement que le sens del'empilement des composants enfants est vertical et non horizontal.
Ce conteneur ne sera donc pas dcrit plus en dtail ici.
IHM-1 FX04 Jacques BAPST 27
7/23/2019 Java FX Partie4
28/64
VBox [2]
Exemple (avec agrandissement vertical d'un composant)
IHM-1 FX04 Jacques BAPST 28
primaryStage.setTitle("Test VBox");
VBox.setVgrow(btnA, Priority.ALWAYS);btnA.setMaxHeight(Double.MAX_VALUE);
root= newVBox(10); // Vertical Spacing : 10
root.setAlignment(Pos.TOP_CENTER);
root.getChildren().add(btnA);
root.getChildren().add(lblB);
cbbC.getItems().addAll("Charlie", "Delta");
cbbC.getSelectionModel().select(0);
root.getChildren().add(cbbC);
primaryStage.setScene(newScene(root, 180, 150));
primaryStage.show();
privateVBox root;
privateButton btnA = newButton("Alpha");
privateLabel lblB = newLabel("Bravo");
privateComboBox cbbC = newComboBox();
7/23/2019 Java FX Partie4
29/64
FlowPane [1]
Le layoutFlowPane place les composants sur une ligne horizontale
ou verticale et passe la ligne ou la colonne suivante (wrapping)lorsqu'il n'y a plus assez de place disponible.
Un des paramtres du constructeur (de type Orientation) dtermines'il s'agit d'un FlowPane horizontal (par dfaut) ou vertical.
IHM-1 FX04 Jacques BAPST 29
FlowPane horizontal FlowPane vertical
7/23/2019 Java FX Partie4
30/64
FlowPane [2]
L'ajout des composants enfants dans un conteneur FlowPane
s'effectue en invoquant getChildren().add(node) ou addAll(n, )
Quelques proprits importantes du conteneur FlowPane :
hgap : Espacement horizontal entre les composants ou colonnes(peut aussi tre pass au constructeur)
vgap : Espacement vertical entre les composants ou lignes
(peut aussi tre pass au constructeur)
padding : Espacement autour du conteneur (marge)
alignment : Alignement global des composants dans le conteneur
rowValignment : Alignement vertical dans les lignes (si horizontal-pane)
columnHalignment : Alignement horizontal dans les colonnes (si vertical-pane)
prefWrapLength : Dtermine la largeur prfre (si horizontal-pane) oula hauteur prfre (si vertical-pane)
orientation : Orientation du FlowPane (peut aussi tre pass auconstructeur)
IHM-1 FX04 Jacques BAPST 30
7/23/2019 Java FX Partie4
31/64
FlowPane [3]
Exemple (dclaration du conteneur et des composants)
IHM-1 FX04 Jacques BAPST 31
privateFlowPane root;
privateButton btnA = newButton("__Alpha__");
privateLabel lblB = newLabel("__Bravo__");
privateButton btnC = newButton("__Charlie__");
privateLabel lblD = newLabel("__Delta__");
privateButton btnE = newButton("__Echo__");privateLabel lblF = newLabel("__Foxtrot__");
privateButton btnG = newButton("__Golf__");
. . .
7/23/2019 Java FX Partie4
32/64
FlowPane [4]
Exemple (code de la mthode start())
IHM-1 FX04 Jacques BAPST 32
primaryStage.setTitle("FlowPane (horizontal)");
root= newFlowPane();
root.getChildren().add(btnA); // Ajout
root.getChildren().add(lblB); // des
root.getChildren().add(btnC); // composants
root.getChildren().add(lblD);
root.getChildren().add(btnE);root.getChildren().add(lblF);
root.getChildren().add(btnG);
root.setPadding(newInsets(5)); // Marge extrieure
root.setHgap(10); // Espacement horiz. entre composants
root.setVgap(15); // Espacement vertical entre lignes
root.setPrefWrapLength(250); // Largeur prfre du conteneur
root.setRowValignment(VPos.BOTTOM);// Alignement vertical dans lignes
primaryStage.setScene(newScene(root));
primaryStage.show();
7/23/2019 Java FX Partie4
33/64
TilePane [1]
Le layoutTilePane place les composants dans une grille alimente
soit horizontalement (par ligne, de gauche droite) soit verticalement(par colonne, de haut en bas).
Un des paramtres du constructeur (de type Orientation) dtermines'il s'agit d'un TilePane horizontal (par dfaut) ou vertical.
On dfinit pour la grille un certain nombre de colonnes (propritprefColumns) si l'orientation est horizontale ou un certain nombrede lignes (proprit prefRows) si l'orientation est verticale.
Toutes les cellules de cette grille (les tuiles) ont la mme taille quicorrespond la plus grande largeur prfre et la plus grande
hauteur prfre parmi les composants placs dans ce conteneur. Le conteneur TilePane est trs proche du conteneur FlowPane. La
diffrence principale rside dans le fait que toutes les cellules ontobligatoirement la mme taille (ce qui n'est pas le cas pour FlowPane).
IHM-1 FX04 Jacques BAPST 33
7/23/2019 Java FX Partie4
34/64
TilePane [2]
Quelques proprits importantes du conteneur TilePane :
hgap : Espacement horizontal entre les composants ou colonnes(peut aussi tre pass au constructeur).
vgap : Espacement vertical entre les composants ou lignes(peut aussi tre pass au constructeur).
padding : Espacement autour du conteneur (marge).
alignment : Alignement global de la grille dans le conteneur(par dfaut TOP_LEFT).
tileAlignment : Alignement des composants l'intrieur de chaque tuile(par dfaut CENTER). Peut tre redfini individuellement(par la proprit alignment de chaque composant).
prefColumns : Nombre prfr de colonnes (par dfaut 5) si horizontal.
Dtermine la largeur prfre du conteneur.prefRows : Nombre prfr de lignes (par dfaut 5) si vertical.
Dtermine la hauteur prfre du conteneur.
IHM-1 FX04 Jacques BAPST 34
7/23/2019 Java FX Partie4
35/64
TilePane [3]
Suite des proprits :
prefTileWidth : Dtermine la largeur prfre des tuiles (cellules).Change la valeur calcule par dfaut (USE_COMPUTED_SIZE).
prefTileHeight : Dtermine la hauteur prfre des tuiles (cellules).Change la valeur calcule par dfaut (USE_COMPUTED_SIZE).
Remarque : Les proprits prefColumns et prefRows ne refltent pasncessairement le nombre de colonnes ou le nombre de lignesactuels de la grille.
Ces proprits servent uniquement calculer la taille prfredu conteneur. Si la taille du conteneur change, le nombre delignes et de colonnes sera adapt l'espace disposition
(wrapping automatique des tuiles).
IHM-1 FX04 Jacques BAPST 35
7/23/2019 Java FX Partie4
36/64
TilePane [4]
L'ajout des composants enfants dans un conteneur TilePane
s'effectue en invoquant l'une des deux mthodes :getChildren().add(node)
getChildren().addAll(node1,node2,node3, )
Exemple avec des libells (Label) et des boutons (Button)
La police de caractres du bouton "__Echo__" a t agrandie etdtermine la taille de toutes les tuiles (cellules)
IHM-1 FX04 Jacques BAPST 36
7/23/2019 Java FX Partie4
37/64
BorderPane [1]
Le conteneur BorderPane permet de placer les composants enfants
dans cinq zones : Top, Bottom, Left, Rightet Center.
Un seul objet Node (composant, conteneur, ) peut tre plac danschacun de ces emplacements.
IHM-1 FX04 Jacques BAPST 37
7/23/2019 Java FX Partie4
38/64
BorderPane [2]
Les composants placs dans les zones Top et Bottom :
Gardent leur hauteur prfre Sont ventuellement agrandis horizontalement jusqu' leur largeur
maximale ou rduit leur taille minimale en fonction de la largeur duconteneur.
Les composants placs dans les zones Leftet Right:
Gardent leur largeur prfre Sont ventuellement agrandis verticalement jusqu' leur hauteur
maximale ou rduit leur taille minimale en fonction de la hauteurrestante entre les (ventuelles) zones Top et Bottom du conteneur.
Le composant plac dans la zone Center:
Est ventuellement agrandi (jusqu' sa taille maximale) ou rduit ( sataille minimale) dans les deux directions (largeur et hauteur) pouroccuper l'espace qui reste au centre du conteneur.
IHM-1 FX04 Jacques BAPST 38
setTop()
setBottom()
setLeft()
setRight()
setCenter()
7/23/2019 Java FX Partie4
39/64
BorderPane [3]
Certaines zones peuvent tre laisses libres (sans composant). Elles
n'occupent alors aucune place. Si les composants n'occupent pas tout l'espace disponible dans leur
zone, leur point d'ancrage par dfaut (alignement) respectera ladisposition suivante :
IHM-1 FX04 Jacques BAPST 39
7/23/2019 Java FX Partie4
40/64
BorderPane [4]
Des mthodes statiques de BorderPane peuvent tre invoques
pour appliquer des contraintes de positionnement :alignment() : permet de modifier l'alignement par dfaut du
composant pass en paramtre (point d'ancrage)
margin() : fixe une marge (objet de type Insets) autour ducomposant pass en paramtre (par dfaut Insets.EMPTY)
Remarque : Par dfaut, la taille maximale desboutons (Button) est gale leur tailleprfre. Pour qu'ils s'agrandissent, ilfaut modifier la proprit maxWidth :
btnT.setMaxWidth(Double.MAX_VALUE);
IHM-1 FX04 Jacques BAPST 40
BorderPane.setAlignment(btnTop, Pos.CENTER);
BorderPane.setAlignment(btnRight, Pos.BOTTOM_CENTER);
BorderPane.setMargin(btnBottom, newInsets(10));
7/23/2019 Java FX Partie4
41/64
BorderPane [5]
Le conteneur BorderPane est frquemment utilis comme
conteneur racine du graphe de scne car il correspond une divisionassez classique de la fentre principale d'une application (barre detitre, barre d'tat, zone d'options, zone principale, etc.).
Pour placer plusieurs composants dans les zones du BorderPane, ilfaut y ajouter des nuds de type conteneur et ajouter ensuite les
composants dans ces conteneurs imbriqus.
Il est donc trs frquent d'imbriquer plusieurs conteneurs pourobtenir la disposition dsire des composants de l'interface.
Le graphe de scne reprsente donc un
arbre d'imbrication dont la hauteur(nombre de niveaux) dpend du nombrede composants et de la complexit dela structure de l'interface graphique.
IHM-1 FX04 Jacques BAPST 41
7/23/2019 Java FX Partie4
42/64
BorderPane et HBox
IHM-1 FX04 Jacques BAPST 42
privateBorderPane root = newBorderPane();
privateHBox btnPanel = newHBox(10);
privateLabel lblTitle = newLabel("App Title");
privateButton btnSave = newButton("Save");
privateButton btnQuit = newButton("Quit");
privateButton btnCancel = newButton("Cancel");
lblTitle.setFont(Font.font("SansSerif", FontWeight.BOLD, 24));
lblTitle.setTextFill(Color.BLUE);
root.setTop(lblTitle);
//--- Build Buttons Panel
btnPanel.getChildren().add(btnSave);
btnPanel.getChildren().add(btnQuit);
btnPanel.getChildren().add(btnCancel);
btnPanel.setAlignment(Pos.CENTER);
root.setBottom(btnPanel);
BorderPane.setMargin(lblTitle, newInsets(10, 0, 10, 0));
BorderPane.setMargin(btnPanel, newInsets(10, 0, 10, 0));
BorderPane.setAlignment(lblTitle, Pos.CENTER);
primaryStage.setScene(newScene(root));
7/23/2019 Java FX Partie4
43/64
AnchorPane [1]
Le conteneur AnchorPane permet de positionner (ancrer) les
composants enfants une certaine distance des cts du conteneur(Top, Bottom, Leftet Right).
Un composant peut tre ancr, simultanment, plusieurs cts.
Plusieurs composants peuvent tre ancrs un mme ct.
Ce conteneur ressemble par certains aspects BorderPane mais il ya quelques diffrences essentielles :
Le conteneur AnchorPane n'est pas divis en zones, les composants sontsimplement lis (ancrs) par rapport aux bords du conteneur.
Un composant peut tre ancr plusieurs bords et mme des bords
opposs (leftet rightpar exemple). Dans ce cas, le composant pourratre tir ou comprim pour respecter les contraintes d'ancrage.
Plusieurs composants peuvent tre ancrs un mme bord. Il pourrontdans ce cas, tre partiellement ou totalement superposs.
IHM-1 FX04 Jacques BAPST 43
7/23/2019 Java FX Partie4
44/64
AnchorPane [2]
Par dfaut (sans contrainte), les composants sont ancrs en haut et
gauche (Top - Left). Exemple de positionnement avec les contraintes reprsentes par
des flches :
IHM-1 FX04 Jacques BAPST 44
7/23/2019 Java FX Partie4
45/64
AnchorPane [3]
L'ajout des composants enfants dans un conteneur AnchorPane
s'effectue en invoquant l'une des deux mthodes :getChildren().add(node)
getChildren().addAll(node1,node2,node3, )
Pour dfinir les contraintes d'ancrage, il faut invoquer des mthodes
statiques de AnchorPane :topAnchor() : dfinit la distance (double) par rapport au haut
rightAnchor() : dfinit la distance (double) par rapport au ct droit
bottomAnchor() : dfinit la distance (double) par rapport au bas
leftAnchor() : dfinit la distance (double) par rapport au ct gauche
Exemple de contraintes d'ancrage :AnchorPane.setTopAnchor (btnOk, 10.0);
AnchorPane.setRightAnchor (btnOk, 0.0);
AnchorPane.setBottomAnchor(btnQuit, 15.0);
IHM-1 FX04 Jacques BAPST 45
7/23/2019 Java FX Partie4
46/64
AnchorPane [4]
Les distances dfinies dans les contraintes d'ancrage sont donnes
par rapport aux cts du conteneur. Si le conteneur possde unebordure (setBorder()) et/ou unpadding (setPadding()), lesdimensions de ces lments seront pris en compte et s'ajouteront la distance donne en contrainte.
Le layoutAnchorPane respecte, si possible, la taille prfre des
composants enfants.
Cependant, selon les contraintes donnes, et si les composantsenfants sont redimensionnables (isResizable()), leur taille devratre adapte pour respecter les contraintes donnes. Dans ce cas, lelayoutAnchorPane ne tiendra pas compte des tailles minimales et
maximales des composants lors de leur redimensionnement.
Si des composants se superposent, c'est l'ordre des ajouts dans leconteneur qui dterminera leur visibilit (le dernier ajout sera au-dessus).
IHM-1 FX04 Jacques BAPST 46
7/23/2019 Java FX Partie4
47/64
AnchorPane [5]
IHM-1 FX04 Jacques BAPST 47
privateAnchorPaneroot = newAnchorPane();
privateButton btnA = newButton("Alpha");privateButton btnB = newButton("Bravo");
privateButton btnC = newButton("Charlie");
privateButton btnD = newButton("Delta");
primaryStage.setTitle("Test AnchorPane");
root.getChildren().addAll(btnA, btnB, btnC, btnD);
//--- Contraintes
AnchorPane.setRightAnchor(btnB, 20.0);
AnchorPane.setTopAnchor (btnC, 80.0);
AnchorPane.setLeftAnchor (btnC, 60.0);
AnchorPane.setBottomAnchor(btnD, 20.0);
AnchorPane.setLeftAnchor (btnD, 40.0);AnchorPane.setRightAnchor(btnD, 40.0);
primaryStage.setScene(newScene(root, 250, 250));
primaryStage.show();
7/23/2019 Java FX Partie4
48/64
StackPane [1]
Le conteneur StackPane empile les composants enfants les uns au
dessus des autres dans l'ordre d'insertion : les premiers "au fond",les derniers "au-dessus" (back-to-front).
Si ncessaire, les composants enfants sont redimensionns pours'adapter la taille du conteneur (la valeur de la proprit maxSize estrespecte, mais pas celle de minSize !).
Si les composants enfants n'occupent pas toute la place disponible,ils seront aligns selon la valeur de la proprit alignment duconteneur (CENTER par dfaut).
Cet alignement par dfaut peut tre modifi par les contraintesd'alignement spcifiques des composants enfants (voir page suivante)
L'ajout des composants enfants dans un conteneur de typeStackPane s'effectue en invoquant l'une des deux mthodes :
getChildren().add(node)
getChildren().addAll(node1,node2,node3, )
IHM-1 FX04 Jacques BAPST 48
7/23/2019 Java FX Partie4
49/64
StackPane [2]
Des mthodes statiques de StackPane peuvent tre invoques pour
appliquer des contraintes de positionnement aux composants :alignment() : permet de modifier l'alignement par dfaut du
composant pass en paramtre
margin() : fixe une marge (objet de type Insets) autour ducomposant pass en paramtre (par dfaut Insets.EMPTY)
Le conteneur StackPane peut tre utile pour crer un composantcomplexe partir d'lments existants en les superposant (placer dutexte au dessus d'une forme ou d'une image, combiner des lmentsgraphiques, etc.).
IHM-1
FX04
Jacques BAPST 49
StackPane.setAlignment(icon, Pos.CENTER_LEFT);
StackPane.setAlignment(label, Pos.CENTER_RIGHT);
StackPane.setMargin(label, newInsets(5));
k
7/23/2019 Java FX Partie4
50/64
StackPane [3]
Exemple (tat initial et aprs redimensionnement de la fentre) :
IHM-1
FX04
Jacques BAPST 50
privateStackPane root = newStackPane();
privateLabel lblA = newLabel("This is a label");
privateButton btnS = newButton("This is a button");
privateRectangle rect = newRectangle(80, 80, Color.YELLOW);
primaryStage.setTitle("Test StackPane");
StackPane.setAlignment(lblA, Pos.CENTER_LEFT);
StackPane.setAlignment(btnS, Pos.CENTER_RIGHT);
StackPane.setMargin(btnS, newInsets(5));
root.getChildren().addAll(rect, lblA, btnS);
primaryStage.setScene(newScene(root, 200, 100));
primaryStage.show();
id
7/23/2019 Java FX Partie4
51/64
GridPane [1]
Le conteneur GridPane permet de disposer les composants enfants
dans une grille flexible (arrangement en lignes et en colonnes), un peu la manire d'une table HTML.
La grille peut tre irrgulire, la hauteur des lignes et la largeur descolonnes de la grille ne sont pas ncessairement uniformes.
La zone occupe par un composant peut s'tendre (span) surplusieurs lignes et/ou sur plusieurs colonnes.
Le nombre de lignes et de colonnes de la grille est dterminautomatiquement par les endroits o sont placs les composants.
Par dfaut, la hauteur de chaque ligne est dtermine par la hauteur
prfre du composant le plus haut qui s'y trouve.
Par dfaut, la largeur de chaque colonne est dtermine par lalargeur prfre du composant le plus large qui s'y trouve.
IHM-1
FX04
Jacques BAPST 51
G id
7/23/2019 Java FX Partie4
52/64
GridPane [2]
Exemple simple avec illustration
du dcoupage (structure de lagrille).
IHM-1
FX04
Jacques BAPST 52
Padding
Column 0 Column 1
HGap
VGap
Row 2
Row 0
Padding
Margin (bottom)
Alignment
(right)
Spanning (2 columns)
Alignment (center)
Row 1
G idP
7/23/2019 Java FX Partie4
53/64
GridPane [3]
Pour placer les composants dans un conteneur GridPane , on utilise
la mthode add() qui permet de passer en paramtre le composantainsi que les contraintes principales de placement :
Indice de la colonne et de la ligne (numrotation commence zro)
Nombre de colonnes et de lignes de spanning (par dfaut : 1)
Par exemple, pour l'interface de la page prcdente :
root.add(lblTitle, 0, 0, 2, 1); // Title (2 cols spanning)
root.add(lblUsername, 0, 1); // Username label
root.add(tfdUsername, 1, 1); // Username text-field
root.add(lblPassword, 0, 2); // Password label
root.add(pwfPassowrd, 1, 2); // Password text-field
Les composants peuvent tre ajouts dans n'importe quel ordre.
On peut ajouter dans un GridPane n'importe quel objet de typeNode, donc galement des conteneurs (imbrication).
IHM-1
FX04
Jacques BAPST 53
G idP
7/23/2019 Java FX Partie4
54/64
GridPane [4]
Quelques proprits importantes du conteneur GridPane :
hgap : Espacement horizontal entre les colonnes
vgap : Espacement vertical entre les lignes
alignment : Alignement de la grille dans le conteneur(si elle n'occupe pas tout l'espace)
padding : Espacement autour de la grille (marge)
gridLinesVisible : Affichage des lignes de construction de la grille.Trs utile pour la mise au point (debugging) del'interface.
IHM-1
FX04
Jacques BAPST 54
G idP
7/23/2019 Java FX Partie4
55/64
GridPane [5]
Il est possible de placer plusieurs composants dans une mme
cellule de la grille. Ils s'afficheront comme dans un conteneur StackPane
Les composants seront empils, le dernier ajout sera "au-dessus"
Les contraintes de placement des composants peuvent tremodifies dynamiquement (durant le cours du programme) :
Position : Modifier les proprits columnIndex et rowIndexSpanning : Modifier les proprits columnSpan et rowSpan
La taille des lignes et des colonnes de la grille peut tre gre
Par des contraintes de lignes et de colonnes qui s'appliquent pour tousles composants placs dans la ligne ou la colonne concerne
Par des contraintes individuelles, appliques aux composants placsdans la grille
Les contraintes individuelles sont prioritaires sur celles appliquesglobalement aux lignes et aux colonnes.
IHM-1
FX04
Jacques BAPST 55
G idP
[ ]
7/23/2019 Java FX Partie4
56/64
GridPane [6]
Les contraintes globales de lignes/colonnes sont dfinies dans des
objets de type :RowConstraints : Pour les lignes
ColumnConstraints : Pour les colonnes
Les contraintes globales sont ensuite associes aux lignes/colonnesdu GridPane en les ajoutant dans une liste, avec les mthodes :
getRowConstraints.add(row_constraint)
getColumnConstraints.add(column_constraint)
L'ordre des ajouts correspond l'ordre des lignes/colonnes
Exemple :
ColumnConstraintsctCol0= newColumnConstraints(50, 100, 200,Priority.ALWAYS,HPos.CENTER,true );
root.getColumnConstraints().add(ctCol0);
IHM-1
FX04
Jacques BAPST 56
G idP
[ ]
7/23/2019 Java FX Partie4
57/64
GridPane [7]
Les contraintes de lignes RowConstraints possdent les proprits
suivantes :minHeight : Hauteur minimale souhaite pour la colonne
prefHeight : Hauteur prfre (idale) pour la colonne
maxHeight : Hauteur maximale souhaite pour la colonne
percentHeight : Hauteur de la ligne en pourcent de la hauteur de la
grille (est prioritaire sur min-,pref- et maxHeight)
valignment : Alignement par dfaut des composants dans la ligne(de type numr VPos : TOP, CENTER, BOTTOM, BASELINE)
vgrow : Priorit d'agrandissement vertical(de type numr Priority : ALWAYS, SOMETIMES, NEVER)
fillHeight : Boolen indiquant si le composant doit s'agrandir(true) jusqu' sa hauteur maximale ou alors garder sahauteur prfre (false). Par dfaut : true.
IHM-1
FX04
Jacques BAPST 57
G idP
[8]
7/23/2019 Java FX Partie4
58/64
GridPane [8]
Les contraintes de colonnes ColumnConstraints possdent les
proprits suivantes :minWidth : Largeur minimale souhaite de la colonne
prefWidth : Largeur prfre (idale) de la colonne
maxWidth : Largeur maximale souhaite de la colonne
percentWidth: Largeur de la colonne en pourcent de la largeur de la
grille (est prioritaire sur min-,pref- et maxWidth)
halignment : Alignement par dfaut des composants dans la colonne(de type numr HPos : LEFT, CENTER, RIGHT)
hgrow : Priorit d'agrandissement horizontal(de type numr Priority : ALWAYS, SOMETIMES, NEVER)
fillWidth : Boolen indiquant si le composant doit s'agrandir (true)jusqu' sa largeur maximale ou alors garder sa largeurprfre (false). Par dfaut : true.
IHM-1
FX04
Jacques BAPST 58
G idP
[9]
7/23/2019 Java FX Partie4
59/64
GridPane [9]
On peut galement appliquer des contraintes individuelles aux
composants placs dans un GridPane. Ces contraintes sontprioritaires sur les contraintes de lignes et colonnes.
Les contraintes sont appliques en invoquant des mthodesstatiques de GridPane qui permettent de grer les propritssuivantes :
halignment : Alignement horizontal du composant pass enparamtre (HPos : LEFT, CENTER, RIGHT)
valignement : Alignement vertical du composant pass en
paramtre (VPos : TOP, CENTER, BOTTOM, BASELINE)
hgrow : Priorit d'agrandissement horizontal
(Priority : ALWAYS, SOMETIMES, NEVER)
vgrow : Priorit d'agrandissement vertical(Priority : ALWAYS, SOMETIMES, NEVER)
margin : Marge autour du composant (de type Insets)
IHM-1
FX04
Jacques BAPST 59
G idP
t
HB
[1]
7/23/2019 Java FX Partie4
60/64
GridPane et HBox [1]
IHM-1
FX04
Jacques BAPST 60
privateGridPane root = newGridPane();
privateHBox btnPanel = newHBox(12);
privateLabel lblTitle = newLabel("JafaFX Course Login");
privateLabel lblUsername= newLabel("Username or email:");
privateTextField tfdUsername= newTextField();
privateLabel lblPassword= newLabel("Password:");
privateButton btnLogin = newButton("Login");
privateButton btnCancel = newButton("Cancel");
privatePasswordFieldpwfPassword= newPasswordField();
primaryStage.setTitle("Login Panel");
//--- Title
lblTitle.setFont(Font.font("System", FontWeight.BOLD, 20));
lblTitle.setTextFill(Color.rgb(80, 80, 180));
root.add(lblTitle, 0, 0, 2, 1);
GridPane.setHalignment(lblTitle, HPos.CENTER);
GridPane.setMargin(lblTitle, newInsets(0, 0, 10,0));
GridPane
et
HBo
[2]
7/23/2019 Java FX Partie4
61/64
GridPane et HBox [2]
IHM-1
FX04
Jacques BAPST 61
//--- Username (label and text-field)
tfdUsername.setPrefColumnCount(20);
root.add(lblUsername, 0, 1);root.add(tfdUsername, 1, 1);
GridPane.setHalignment(lblUsername, HPos.RIGHT);
//--- Password (label and text-field)
pwfPassword.setPrefColumnCount(12);
root.add(lblPassword, 0, 2);
root.add(pwfPassword, 1, 2);GridPane.setHalignment(lblPassword, HPos.RIGHT);
GridPane.setFillWidth(pwfPassword, false);
//--- Button panel
btnPanel.getChildren().add(btnLogin);
btnPanel.getChildren().add(btnCancel);
btnPanel.setAlignment(Pos.CENTER_RIGHT);root.add(btnPanel, 1, 3);
GridPane.setMargin(btnPanel, newInsets(10, 0, 0,0));
setGridLinesVisible(true)
GridPane
et
HBox
[3]
7/23/2019 Java FX Partie4
62/64
GridPane et HBox [3]
IHM-1
FX04
Jacques BAPST 62
//--- Column global constraints
ColumnConstraintsctCol0= newColumnConstraints(); // No constraint
ColumnConstraintsctCol1= newColumnConstraints(50, 200, 400,Priority.ALWAYS,
HPos.LEFT,
true);
root.getColumnConstraints().add(ctCol0);
root.getColumnConstraints().add(ctCol1);
//--- GridPane propertiesroot.setAlignment(Pos.CENTER);
root.setPadding(newInsets(20));
root.setHgap(10);
root.setVgap(15);
primaryStage.setMinWidth(300);
primaryStage.setMinHeight(200);
// root.setGridLinesVisible(true); // Uncomment to display grid lines
primaryStage.setScene(newScene(root));
primaryStage.show();
Rsum des conteneurs
[1]
7/23/2019 Java FX Partie4
63/64
Rsum des conteneurs [1]
IHM-1
FX04
Jacques BAPST 63
Classe Description
HBox, VBox Place les composants horizontalement (sur une ligne) ou
verticalement (dans une colonne).
FlowPane
(horizontal)
Place les composants horizontalement sur une ligne et passe la
ligne suivante s'il n'y a plus assez de place dans le conteneur (line-
wrapping).
FlowPane
(vertical)Place les composants verticalement (de haut en bas), en colonne etpasse la colonne suivante s'il n'y a plus assez de place dans le
conteneur (column-wrapping).
TilePane
(horizontal)
Place les composants dans une grille dont les cellules (les tuiles) ont
toutes la mme taille. Les composants sont ajouts horizontalement,
ligne par ligne.TilePane
(horizontal)
Place les composants dans une grille dont les cellules (les tuiles) ont
toutes la mme taille. Les composants sont ajouts verticalement,
colonne par colonne.
Rsum des conteneurs
[2]
7/23/2019 Java FX Partie4
64/64
Rsum des conteneurs [2]
Classe Description
BorderPane Dispose de cinq emplacements pour placer les composants : Top,
Bottom, Left, Right, Center.
AnchorPane Place les composants en respectant une contrainte de distance par
rapport un ou plusieurs bords du conteneur.
StackPane Place les composants les uns au dessus des autres (empilement).
Le dernier ajout est plac au-dessus des autres.
GridPane Place les composants dans une grille potentiellement irrgulire (par
dfaut, la taille des lignes et des colonnes est dtermine par le plus
grand composant qui y est plac.
Les composants sont ajouts en donnant l'indice de la colonne et de
la ligne (la numrotation commence zro).La zone d'un composant n'est pas limite une seule cellule, elle
peut s'tendre sur plusieurs colonnes et plusieurs lignes (spanning).
Un composant peut s'agrandir pour occuper toute sa zone.
Top Related