Cours IHM-1

JavaFX
10 - Botes de dialogue
(simples et spcialises)
Jacques BAPST
jacques.bapst@hefr.ch

Dfinition [1]
Les botes de dialogue sont des lments d'une interface graphique
qui se prsentent gnralement sous la forme d'une fentre affiche
par une application (ou ventuellement par le systme d'exploitation)
dans le but :
d'informer l'utilisateur (texte, mise en garde, graphique, etc.)
d'obtenir une information de l'utilisateur (mot-de-passe, choix, etc.)
ou une combinaison des deux

Par exemple l'informer d'un vnement et lui demander de faire un choix

Une bote de dialogue dpend d'une autre fentre (v. d'une autre
bote de dialogue), c'est ce qui distingue ce composant d'une fentre
indpendante (la fentre principale par exemple).

IHM-1 FX10

Jacques BAPST

Modal / Non-modal
Une bote de dialogue peut tre
Modale

: L'utilisateur ne peut pas interagir avec la fentre dont la

(modal)
bote de dialogue dpend avant de l'avoir ferme.
Non-modale : L'utilisateur peut interagir avec la bote de dialogue mais
(modeless)
aussi avec la fentre dont la bote de dialogue dpend
(en laissant la bote de dialogue ouverte).

On utilisera une bote de dialogue modale par ex. pour confirmer

ou annuler une action critique (suppression de donnes par exemple).
La fentre principale est 'bloque' tant que l'utilisateur n'a pas dcid.
La bote de dialogue se ferme automatiquement ds la dcision prise.

Une bote de dialogue non-modale sera utilise par exemple pour

prsenter l'utilisateur une palette d'outils qu'il pourra slectionner
et appliquer successivement sur la fentre principale.
La bote de dialogue reste ouverte tant que l'utilisateur ne la ferme pas
explicitement.
IHM-1 FX10

Jacques BAPST

Botes de dialogue simples

IHM-1 FX10

Jacques BAPST

Types de botes de dialogue

Dans une application, on peut trouver
des botes de dialogue standard avec une mise en page prdfinie et qui
sont utilises
Pour informer l'utilisateur par un simple texte
Pour demander quittance l'utilisateur
Pour demander l'utilisateur de faire un choix entre plusieurs options
Pour saisir une information simple (ligne de texte)

des botes de dialogue spcifiques avec

Une disposition des lments propre l'application
De nombreux composants pour reprsenter l'information

La plupart des kits de dveloppement offrent des solutions cls en

main pour les botes de dialogue simples (standard).
Les botes de dialogue spcifiques doivent par contre tre conues et
ralises avec les mmes efforts que pour tout autre type d'interface
(choix des conteneurs et composants, contraintes de disposition, etc.).
IHM-1 FX10

Jacques BAPST

Botes de dialogue JavaFX

Les botes de dialogue standard n'ont t introduites que trs
tardivement dans JavaFX (version 8u40, en 2015).
Avant cette version, il tait habituel d'utiliser les composants de type
Dialogs de la librairie externe ControlsFX (qui sont dsormais marqus
comme tant deprecated).
Les pages suivantes dcrivent sommairement, et sur la base
d'exemples concrets, la manire de coder les botes de dialogue en
se basant sur les classes et composants disponibles dans JavaFX.

IHM-1 FX10

Jacques BAPST

Bote de dialogue - Alert [1]

Bote de dialogue Alert de type "Information" avec en-tte (header).
Alert dialog = new Alert(AlertType.INFORMATION);
dialog.setTitle("An information dialog-box");
dialog.setHeaderText("An information dialog with header");
dialog.setContentText("Le message d'information\n" +
"(une deuxime ligne)");
dialog.showAndWait();

IHM-1 FX10

Jacques BAPST

Bote de dialogue - Alert [2]

Bote de dialogue Alert de type "Warning" sans en-tte (header).
Alert dialogW = new Alert(AlertType.WARNING);
dialogW.setTitle("A warning dialog-box");
dialogW.setHeaderText(null); // No header
dialogW.setContentText("Caution : Low Level Battery !");
dialogW.showAndWait();

IHM-1 FX10

Jacques BAPST

Bote de dialogue - Alert [3]

Bote de dialogue Alert de type "Error".
Alert dialogE = new Alert(AlertType.ERROR);
dialogE.setTitle("An error dialog-box");
dialogE.setHeaderText("Not Printed");
dialogE.setContentText("Error : Incorrect Paper-Format !");
dialogE.showAndWait();

IHM-1 FX10

Jacques BAPST

Bote de dialogue - Alert [4]

Bote de dialogue Alert de type "Confirmation".
Alert dialogC = new Alert(AlertType.CONFIRMATION);
dialogC.setTitle("A confirmation dialog-box");
dialogC.setHeaderText(null);
dialogC.setContentText("Full backup will start immediately");
Optional<ButtonType> answer = dialogC.showAndWait();
if (answer.get() == ButtonType.OK) {
System.out.println("User chose OK");
}
else {
System.out.println("User chose Cancel or closed the dialog-box");
}

IHM-1 FX10

Jacques BAPST

10

Bote de dialogue - Alert [5]

Bote de dialogue Alert de type "Confirmation" avec options
personnalises.
Alert dBox = new Alert(AlertType.CONFIRMATION);
dBox.setTitle("A confirmation dialog-box with custom actions");
dBox.setHeaderText("Java-Pizza : The Very Best in Town !");
dBox.setContentText("Choose your pizza size :");
ButtonType
ButtonType
ButtonType
ButtonType

btnSmall
btnMedium
btnBig
btnCancel

=
=
=
=

new
new
new
new

ButtonType("Small");
ButtonType("Medium");
ButtonType("Big");
ButtonType("Cancel", ButtonData.CANCEL_CLOSE);

dBox.getButtonTypes().setAll(btnSmall, btnMedium, btnBig, btnCancel);

IHM-1 FX10

Jacques BAPST

11

Bote de dialogue - Alert [6]

Optional<ButtonType> choice = dBox.showAndWait();
if (choice.get() == btnSmall) {
System.out.println("User chose Small");
}
else if (choice.get() == btnMedium) {
System.out.println("User chose Medium");
}
else if (choice.get() == btnBig) {
System.out.println("User chose Big");
}
else {
System.out.println("Cancel or Close");
}

IHM-1 FX10

Jacques BAPST

12

Saisie de texte - TextInputDialog [1]

Bote de dialogue TextInputDialog pour saisir une ligne de texte.
TextInputDialog inDialog = new TextInputDialog("Guest");
inDialog.setTitle("A Text-Input Dialog");
inDialog.setHeaderText("Account Login (or Guest Access)");
inDialog.setContentText("Username :");

Valeur par dfaut

Optional<String> textIn = inDialog.showAndWait();

//--- Get response value (traditional way)
if (textIn.isPresent()) {
System.out.println("Login name = " + textIn.get());
}

Retourne false si l'utilisateur

presse Cancel ou ferme la
bote de dialogue

IHM-1 FX10

Jacques BAPST

13

Saisie de texte - TextInputDialog [2]

Le texte saisi par l'utilisateur peut aussi tre rcupr en utilisant la
mthode ifPresent() qui prend en paramtre un objet de type
Consumer<T> que l'on peut instancier avec une expression lambda.
L'interface fonctionnelle Consumer<T> possde la mthode abstraite void
accept(T t) qui effectue une opration avec la valeur t passe en paramtre
(pas de valeur de retour, opration par effet de bord).
Optional<String> textIn = inDialog.showAndWait();
//--- Get response value (with lambda expression)
textIn.ifPresent(txt -> System.out.println("Login name = " + txt));

Expression lambda non

excute si l'utilisateur
presse Cancel ou ferme
la bote de dialogue

IHM-1 FX10

Jacques BAPST

14

Slection - ChoiceDialog [1]

Bote de dialogue ChoiceDialog pour saisir un choix (dans une liste).
String[]

choices = {"Urgent", "High", "Standard", "Low"};

ChoiceDialog<String> cDial = new ChoiceDialog<>(choices[2], choices);

cDial.setTitle("A Choice Dialog");
cDial.setHeaderText("Select Execution Priority");
cDial.setContentText("Priority:");

Valeur par dfaut

Optional<String> selection = cDial.showAndWait();

selection.ifPresent(str -> System.out.println("Selection:" + str));

Expression lambda non

excute si l'utilisateur
presse Cancel ou ferme
la bote de dialogue

IHM-1 FX10

Jacques BAPST

15

Bote de dialogue personnalise [1]

Il est possible de personnaliser des botes de dialogue (custom
dialog) en utilisant directement la classe Dialog qui est la classe
parente de Alert, TextInputDialog et ChoiceDialog.

En plus du texte principal dfini par la proprit contentText (de

type String), il est possible, pour toutes les botes de dialogue, de
dfinir un contenu tendu (affich par "Show Details") reprsent par
la proprit expandableContent (de type Node) de l'objet interne
DialogPane.
Peut correspondre
On peut dfinir ce contenu tendu ainsi :
tout un graphe de scne
Alert mBox = new Alert(AlertType.ERROR);
mBox.getDialogPane().setExpandableContent(node);

Expandable
Content

IHM-1 FX10

Jacques BAPST

16

Bote de dialogue personnalise [2]

Par dfaut, toutes les botes de dialogues standards (qui hritent de
Dialog) sont modales.
Pour crer une bote de dialogue non-modale, on peut invoquer la
mthode initModality() :
//--- To create a modeless dialog box
Alert mBox = new Alert(AlertType.ERROR);
mBox.initModality(Modality.NONE);

L'icne par dfaut (place dans la barre de titre de la fentre popup)

peut tre remplace par une icne personnalise :
//--- To add a custom title-bar icon
Stage dStage = (Stage)(cDial.getDialogPane().getScene().getWindow());
dStage.getIcons().add(new Image("/resources/warn_1.png"));

IHM-1 FX10

Jacques BAPST

17

Bote de dialogue personnalise [3]

Pour changer l'icne principale qui est place gauche du contenu
de la bote de dialogue ou dans son en-tte (header), on peut utiliser
la mthode setGraphic().
//--- Add a custom content icon
cDial.setGraphic(new ImageView("/resources/warn_1.png"));

Par dfaut, cette icne est dtermine par le type de bote de

dialogue ou par le type d'alerte
(AlertType : ERROR, WARNING, ).
Icne

Icne

IHM-1 FX10

Jacques BAPST

18

Botes de dialogue spcialises

IHM-1 FX10

Jacques BAPST

19

FileChooser [1]
L'utilitaire FileChooser permet d'ouvrir une bote de dialogue
permettant l'utilisateur de naviguer dans l'arborescence des
fichiers de la machine cible et de slectionner un ou plusieurs
fichiers (pour slectionner un rpertoire, il faut utiliser DirectoryChooser).
Il s'agit d'une bote de dialogue spcifique au systme d'exploitation
de la machine cible. Le look & feel est indpendant de JavaFX (il
correspond en principe au look & feel natif).

Ce composant peut tre utilis pour :

Naviguer et slectionner un seul fichier showOpenDialog()
Naviguer et slectionner plusieurs fichiers showOpenMultipleDialog()
Naviguer et sauvegarder un fichier
showSaveDialog()

L'invocation de FileChooser est gnralement lie l'action d'un

bouton, d'une option de menu ou autre action de l'utilisateur.
IHM-1 FX10

Jacques BAPST

20

FileChooser [2]
Exemple d'utilisation de FileChooser avec :
Dfinition d'un titre pour la fentre popup
Dfinition d'un rpertoire initial (point de dpart de la navigation)
bas sur des proprits du systme
Dfinition de filtres bass sur les extensions des fichiers
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("FileChooser Example");
File homeDir = new File(System.getProperty("user.home"));
fileChooser.setInitialDirectory(homeDir);
fileChooser.getExtensionFilters().addAll(
new ExtensionFilter("Text Files" , "*.txt"),
new ExtensionFilter("Image Files", "*.png", "*.jpg", "*.gif"),
new ExtensionFilter("Audio Files", "*.wav", "*.mp3", "*.aac"),
new ExtensionFilter("All Files" , "*.*"));

IHM-1 FX10

Jacques BAPST

21

FileChooser [3]
La fentre popup s'ouvre lors de l'invocation de la mthode show()
qui retourne le fichier slectionn ou une rfrence null si
l'utilisateur a press sur Cancel ou a ferm la fentre.
File selectedFile = fileChooser.showOpenDialog(primaryStage);
if (selectedFile != null) {
try {
//--- Open the file with associated application
Desktop.getDesktop().open(selectedFile);
}
catch (Exception e) {
System.err.println("ERROR: Unable to open the file");
}
}
Tente d'ouvrir le fichier
avec l'application associe

IHM-1 FX10

Jacques BAPST

22

FileChooser [4]
Affichage (sous Windows) :

IHM-1 FX10

Jacques BAPST

23

FileChooser [5]
Pour permettre une slection multiple, il faut utiliser la mthode
showOpenMultipleDialog() qui retourne une liste de fichiers ou
une rfrence null si l'utilisateur a press sur Cancel ou a ferm la
fentre.
List<File> selectedFiles = fileChooser.showOpenMultipleDialog(stage);
if (selectedFiles != null) {
for (File f : selectedFiles) {
System.out.println(f);
}

Codage classique
Avec expression lambda

selectedFiles.forEach(f -> System.out.println(f));

selectedFiles.forEach(System.out::println);
}
Avec rfrence de mthode

IHM-1 FX10

Jacques BAPST

24

DirectoryChooser [1]
L'utilitaire DirectoryChooser permet d'ouvrir une bote de dialogue
permettant l'utilisateur de naviguer dans l'arborescence des
fichiers de la machine cible et de slectionner un rpertoire.

Il s'agit d'une bote de dialogue spcifique au systme d'exploitation

de la machine cible. Le look & feel est indpendant de JavaFX (il
correspond au look & feel natif).
Ce composant ne comporte qu'une seule mthode de slection
showDialog(), qui retourne un objet de type File reprsentant un
rpertoire.

IHM-1 FX10

Jacques BAPST

25

DirectoryChooser [2]
Exemple :
DirectoryChooser dirChooser = new DirectoryChooser();
dirChooser.setTitle("DirectoryChooser Example");
dirChooser.setInitialDirectory(new File("D://Temp"));

File selectedFile = dirChooser.showDialog(primaryStage);

if (selectedFile != null) {
try {
Desktop.getDesktop().open(selectedFile);
}
catch (Exception e) {
e.printStackTrace();
}
}
Tente d'ouvrir le gestionnaire de
fichiers de l'OS (file manager)

IHM-1 FX10

Jacques BAPST

26

DirectoryChooser [3]
Affichage (sous Windows) :

IHM-1 FX10

Jacques BAPST

27

DatePicker [1]
La classe DatePicker reprsente un composant qui permet
l'utilisateur de slectionner une date dans un calendrier qui est
affich en fentre popup.

Le composant reprsente une forme de ComboBox ditable (il a

comme classe parente ComboBoxBase) et la date slectionne par
l'utilisateur peut tre consulte avec la mthode getValue() qui
retourne un objet de type LocalDate.

IHM-1 FX10

Jacques BAPST

28

DatePicker [2]
Exemple d'utilisation du composant :
. . .
DatePicker dPicker = new DatePicker();
Ajout du composant
dans le graphe de scne

root.getChildren().add(dPicker);

dPicker.setOnAction(e -> {
LocalDate date = dPicker.getValue();
System.out.println("Selected date: " + date);
. . .
int day
= date.getDayOfMonth();
// 1..31
int month = date.getMonthValue();
// 1..12
int year = date.getYear();
. . .
});
. . .

IHM-1 FX10

Jacques BAPST

29

ColorPicker [1]
La classe ColorPicker reprsente un composant qui permet
l'utilisateur de slectionner une couleur dans une palette ou selon
diffrents espaces de couleur (HSB, RBG, Web, ).

Le composant reprsente une forme de ComboBox ditable (il a

comme classe parente ComboBoxBase) et la couleur slectionne par
l'utilisateur peut tre consulte avec la mthode getValue().
L'utilisateur peut dfinir et enregistrer des couleurs personnalises
(custom colors) qui peuvent tre rcupres avec la mthode
getCustomColors() qui retourne une liste de couleurs.
Une couleur par dfaut peut tre passe en paramtre au
constructeur de la classe (par dfaut Color.WHITE).

IHM-1 FX10

Jacques BAPST

30

ColorPicker [2]

IHM-1 FX10

Jacques BAPST

31

ColorPicker [3]
Exemple d'utilisation du composant :
. . .
ColorPicker cPicker = new ColorPicker(Color.BLUE);
Ajout du composant
dans le graphe de scne

root.getChildren().add(cPicker);

cPicker.setOnAction(e -> {
Color c = cPicker.getValue();
. . .
//--- Display hexadecimal values (#rrggbbaa)
System.out.println("Selected color: " + c);
// Display decimal values RGB (0.0...1.0)
System.out.println("Selected color = " + c.getRed()
+ ", "
+ c.getGreen() + ", "
+ c.getBlue()
);
. . .
});
. . .

IHM-1 FX10

Jacques BAPST

32