Download pdf - Java FX Partie4

7/23/2019 Java FX Partie4

1/64

Cours IHM

-

1JavaFX

Jacques BAPST

[email protected]

4

-

Conteneurs

Layout

-

Panes


2/64

Disposition des composants

Gnralits

Notions de base

IHM-1 FX04 Jacques BAPST 2


3/64


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



4/64


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



5/64


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



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.



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


Component

x

y

[0,0]

yc

xc

Width

Height


8/64


Coordonnes d'origine de diffrents lments d'une application

JavaFX.


Window / Stage

Scene / Root

Node / Component

Screen


9/64


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



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



11/64


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)



12/64


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.


Screenscreen= Screen.getPrimary();

Rectangle2D bounds = screen.getVisualBounds();

doublescreenWidth = bounds.getWidth();

doublescreenHeight= bounds.getHeight();

doublescreenDpi = screen.getDpi(); // Dot per inch


13/64


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.


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();

. . .

}


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



15/64

Bordures [2]

Exemple 1 : bordure rectangulaire


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();


16/64

Bordures [3]

Exemple 2 : bordure pointille, aux coins arrondis


primaryStage.setTitle("Test Border 2");

Button btnA= newButton("A Border Test");



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




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



18/64

Arrire-plans [2]

Exemple avec deux remplissages (fill) d'arrire-plan superposs :


Button btnA= newButton("A Background Test");



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


19/64

Arrire-plans [3]

Exemple avec la rptition d'une image d'arrire-plan :


Button btnA= newButton("A Background Test");

Image img = newImage("/resources/warn_1.png");





Background bgImg= newBackground(

newBackgroundImage(

img,

BackgroundRepeat.ROUND,

BackgroundRepeat.ROUND,BackgroundPosition.CENTER,

BackgroundSize.DEFAULT ));

root.setBackground(bgImg);


20/64

Conteneurs

Layout-Panes de base(disponibles par dfaut)



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



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.



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();


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)



24/64

HBox [3]

Exemple (dclaration des composants et code de la mthode start())


primaryStage.setTitle("Test HBox");

root= newHBox(10); // Horizontal Spacing : 10



root.getChildren().add(lblB);

cbbC.getItems().addAll("Charlie", "Delta");

cbbC.getSelectionModel().select(0);root.getChildren().add(cbbC);

primaryStage.setScene(newScene(root, 300, 100));


privateHBox root;

privateButton btnA = newButton("Alpha");

privateLabel lblB = newLabel("Bravo");

privateComboBox cbbC = newComboBox();


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

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");


On peut aussi utiliser

setBorder()discut

au dbut du chapitre


26/64

HBox [5]

Exemple (conteneur avecpadding et couleur de fond)


primaryStage.setTitle("Test Padding+Background");

root= newHBox(10);

//--- Top, Right, Bottom, Left Spacing


root.setStyle("-fx-background-color: #FFFE99");




cbbC.getSelectionModel().select(0);root.getChildren().add(cbbC);




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.



28/64

VBox [2]

Exemple (avec agrandissement vertical d'un composant)


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




cbbC.getSelectionModel().select(0);

root.getChildren().add(cbbC);



privateVBox root;

privateButton btnA = newButton("Alpha");

privateLabel lblB = newLabel("Bravo");

privateComboBox cbbC = newComboBox();


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.


FlowPane horizontal FlowPane vertical


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)



31/64

FlowPane [3]

Exemple (dclaration du conteneur et des composants)


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__");

. . .


32/64

FlowPane [4]

Exemple (code de la mthode start())


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




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



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.



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



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)



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.



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.


setTop()

setBottom()

setLeft()

setRight()

setCenter()


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 :



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


BorderPane.setAlignment(btnTop, Pos.CENTER);

BorderPane.setAlignment(btnRight, Pos.BOTTOM_CENTER);

BorderPane.setMargin(btnBottom, newInsets(10));


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.



42/64

BorderPane et HBox


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



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.



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 :



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)


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



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



47/64

AnchorPane [5]


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




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)




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


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



id


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


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


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


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


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

[ ]


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

[ ]


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]


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]


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]


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]


61/64


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]


62/64


IHM-1

FX04

Jacques BAPST 62

//--- Column global constraints

ColumnConstraintsctCol0= newColumnConstraints(); // No constraint

ColumnConstraintsctCol1= newColumnConstraints(50, 200, 400,Priority.ALWAYS,

HPos.LEFT,

true);



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



Rsum des conteneurs

[1]


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]


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.