Cours IHM-1

JavaFX
8 - Menus
Choix / Slection
Jacques BAPST
jacques.bapst@hefr.ch

Menus droulants
Menus contextuels
Mnmoniques / Acclrateurs

IHM-1 FX08

Jacques BAPST

Menu [1]
Les menus sont des lments de l'interface permettant l'utilisateur
de choisir des options qui pourront dclencher des actions et/ou
changer l'tat de certaines proprits de l'application.
Le principe du menu est (comme au restaurant) que l'utilisateur
puisse voir et parcourir la liste des options avant de se dcider.
Dans les applications, les menus peuvent prendre diffrentes
formes. Parmi les plus classiques, on trouve :
Les menu droulants (drop-down menu)
Des en-ttes de menus sont placs dans un conteneur sous forme de barre
Un clic sur ces en-ttes "droule" le menu et fait apparatre, dans une
fentre popup, les options de ce menu.

Les menu contextuels (popup menu)

Menus affichs en raction un vnement, gnralement une action de la
souris (clic-droit), l'activation d'une touche ou un geste.
Les options du menu qui sont affiches dpendent de l'endroit o l'on a
cliqu (contexte).

IHM-1 FX08

Jacques BAPST

Menu [2]
Les options des menus peuvent elles-mmes ouvrir d'autres menus.
On parle alors de sous-menus qui peuvent s'ouvrir en cascade (on
peut avoir plusieurs niveaux de sous-menus).
Dans la librairie JavaFX, un certain nombre de composants sont
ddis aux menus et sont utiliss pour les construire :

MenuBar
Menu
MenuItem
CheckMenuItem
RadioMenuItem
CustomMenuItem
SeparatorMenuItem
Contextmenu

IHM-1 FX08

Jacques BAPST

Menu [3]
Les diffrents composants qui interviennent dans la gestion des
menus droulants sont illustrs dans l'exemple suivant :
Menu

MenuBar
CheckMenuItem

SeparatorMenuItem

Menu
MenuItem

RadioMenuItem

IHM-1 FX08

Jacques BAPST

Menu [4]
Pour les menus contextuels, ce sont pratiquement les mmes
composants qui sont utiliss la simple diffrence que :
Le composant MenuBar n'est plus ncessaire.
A la place, c'est le composant ContextMenu qui est utilis pour
rassembler les diffrentes options du menu contextuel.

L'affichage du composant sera dclench par une action de

l'utilisateur (en gnral un clic-droit sur un conteneur ou composant).
Un menu contextuel
peut galement
contenir des sousmenus en cascade.

IHM-1 FX08

Jacques BAPST

Barre de menu [1]

La barre de menus, reprsente par le composant MenuBar, est un
conteneur permettant de rassembler les en-ttes des menus.
Le composant MenuBar doit tre plac dans un conteneur de
l'interface (par exemple en haut d'un BorderPane).

La cration d'une barre de menus s'effectue l'aide des instructions

suivantes :
Cration de la barre de menus :
MenuBar mBar = new MenuBar();

L'ajout des menus (composants de type Menu) dans la barre peut se faire
de manire individuelle (en squence) ou collective :
mBar.getMenus().add(mnuFile);
mBar.getMenus().addAll(mnuFile, mnuOptions, mnuHelp);

La proprit useSystemMenuBar permet d'indiquer que le mcanisme

standard de menu de la plateforme cible doit tre utilis (par exemple
sur MacOS).
IHM-1 FX08

Jacques BAPST

Menu droulant [1]

Le composant Menu reprsente un conteneur d'lments de menu
(options) et peut se prsenter "enroul" (en-tte) ou "droul"
(fentre popup) lorsqu'on clique dessus.
Il peut tre ajout une barre de menus (MenuBar) ou tre insr
comme sous-menu dans un autre composant de type Menu.
Lorsque le composant Menu reprsente un sous-menu, il est
accompagn d'un indicateur visuel (gnralement une flche dirige
vers la droite) qui le distingue d'un lment terminal (option de menu).

Cration et alimentation d'un objet de type Menu :

Cration d'un menu :
Menu mnuFile = new Menu("File");

L'ajout des options de menus (MenuItem, CheckMenuItem, ) dans le menu

peut se faire de manire individuelle (en squence) ou collective :
mnuFile.getItems().add(mniSave);
mnuFile.getItems().addAll(mniSave, mniSaveAs, mniQuit);
IHM-1 FX08

Jacques BAPST

Menu droulant [2]

Un sous-menu est donc simplement cr en ajoutant un composant
de type Menu dans un autre composant du mme type :
Cration d'un menu et d'un sous-menu :
Menu mnuOptions = new Menu("Options");
Menu mnuPrefs
= new Menu("Preferences");

L'ajout du menu comme sous-menu :

mnuOptions.getItems().add(mnuPrefs);

Le nombre de niveaux d'imbrication des sous-menus n'est pas limit

mais on ne dpasse gnralement pas trois niveaux (des exceptions
sont possibles).

IHM-1 FX08

Jacques BAPST

Options de menu [1]

Un menu droulant ou contextuel peut contenir diffrents lments
(appels options de menu) permettant l'utilisateur de dclencher
une action ou d'activer/dsactiver l'lment.
L'option de base est reprsente par le composant MenuItem qui
agit, du point de vue de l'utilisateur, comme un bouton.
Lors de la cration d'une option de menu, on peut lui assigner un
texte et optionnellement un composant complmentaire (graphic)
qui ne devrait pas dpasser 16x16 pixels.
Cration d'une option de menu :
MenuItem

mniSave

= new MenuItem("Save");

ImageView

image

= new ImageView(. . .);

MenuItem

mniPrefs

= new MenuItem("Preferences", image);

Ajout d'un graphique :

mniSave.setGraphic(new Circle(0, 0, 5, Color.RED));
IHM-1 FX08

Jacques BAPST

10

Options de menu [2]

Pour le traitement de l'action dclenche par le composant
MenuItem on peut utiliser la mthode utilitaire setOnAction().
Exemple :
. . .
//--- Traitement de l'action des options de menu
mniQuit.setOnAction(event -> {
Platform.exit();
});
mniAbout.setOnAction(event -> {
System.out.println("About MenuItem Activated");
});
. . .

IHM-1 FX08

Jacques BAPST

11

Options de menu [3]

Comme option de menu, on peut aussi utiliser le composant
CheckMenuItem qui agit comme une case cocher place dans un
menu droulant ou contextuel (l'aspect visuel dpend du thme).
La proprit selected indique si l'option est slectionne ou non.

La proprit graphic permet d'ajouter au libell un composant

complmentaire (gnralement un graphique de petite taille).
Cration d'une option de menu de type case cocher :
CheckMenuItem

cmiSound

= new CheckMenuItem("Sound");

ImageView

image

= new ImageView(. . .);

CheckMenuItem

cmiNotify = new CheckMenuItem("Notify", image);

Ajout d'un graphique :

cmiSound.setGraphic(new Rectangle(8, 8, Color.GREEN));

IHM-1 FX08

Jacques BAPST

12

Options de menu [4]

Comme pour le composant MenuItem, on peut traiter l'vnement
du composant CheckMenuItem en invoquant la mthode utilitaire
setOnAction().
Parfois, on ne ragit pas directement au clic sur une telle option
mais on prend en compte l'tat (slectionn ou non-slectionn)
dans le traitement d'autres vnements (ceux dclenchs par des
boutons ou des options de menu de type MenuItem par exemple).
Il est galement possible de lier (binding) la proprit selected de
ce composant une proprit du modle. Ainsi, le modle de
l'application reflte de manire synchrone l'tat de cette proprit
sans qu'il soit ncessaire de grer des vnements.

IHM-1 FX08

Jacques BAPST

13

Options de menu [5]

Le composant RadioMenuItem qui est une sous-classe de MenuItem
peut galement tre utilis comme option dans un menu. Il agit
comme un bouton radio plac dans un menu droulant et permet la
slection d'une option parmi plusieurs.
Pour avoir ce comportement de slection mutuellement exclusive, le
composant doit tre plac dans un ToggleGroup (comme c'est le cas
pour le RadioButton).
La proprit selected indique si l'option est slectionne ou non.

La proprit graphic permet d'ajouter au libell un composant

complmentaire (gnralement un graphique de petite taille).
Cration d'une option de menu de type radio :
RadioMenuItem

rmiDock

= new RadioMenuItem("Docking");

ImageView

image

= new ImageView(. . .);

RadioMenuItem

rmiFloat = new RadioMenuItem("Floating", image);

IHM-1 FX08

Jacques BAPST

14

Options de menu [6]

Le composant RadioMenuItem ne devrait jamais tre utilis seul
mais faire partie d'un groupe (comme pour les boutons radios).
Toutes les options qui font partie du mme groupe doivent tre
places dans un objet commun de type ToggleGroup (toggleGroup
est une proprit du composant RadioMenuItem).
ToggleGroup tgGroup = new ToggleGroup();
rmiDock.setToggleGroup(tgGroup);
rmiFloat.setToggleGroup(tgGroup);

Pour le traitement des vnements, toutes les indications et

remarques formules pour le composant CheckMenuItem (voir pages
prcdentes) s'appliquent aussi au composant RadioMenuItem.

IHM-1 FX08

Jacques BAPST

15

Options de menu [7]

Le composant CustomMenuItem permet de traiter n'importe quel
nud (Node) d'un graphe de scne comme un lment de menu.
Exemple d'un curseur (Slider) plac dans un menu :
Slider slrSpeed = new Slider(0, 100, 30);
CustomMenuItem cmiSlider = new CustomMenuItem(slrSpeed);
cmiSlider.setHideOnClick(false);
mnuOptions.getItems().add(cmiSlider);

La proprit hideOnClick permet d'indiquer

si le composant et toutes les autres options
visibles doivent tre masques lorsqu'on
clique sur cet lment (true par dfaut).
Les vnements du composant insr dans
le menu doivent naturellement tre grs.
IHM-1 FX08

Jacques BAPST

16

Options de menu [8]

Il est possible de grouper visuellement les options de menu en
sparant les diffrents groupes d'options par une ligne horizontale.
Le composant SeparatorMenuItem (qui est une sous-classe de
CustomMenuItem) permet de crer un tel sparateur.

Pour chaque sparateur, il faut crer un nouvel objet (on ne peut pas
ajouter plusieurs fois un mme sparateur).
private SeparatorMenuItem sep1
= new SeparatorMenuItem();
private SeparatorMenuItem sep1
= new SeparatorMenuItem();
mnuPrefs.getItems().addAll(mniFont, mniSize, sep1,
rmiDock, rmiFloat, sep2,
. . .
);

IHM-1 FX08

Jacques BAPST

17

Menu contextuel [1]

Les menus contextuels (popup menu) se construisent de la mme
manire que les menus droulants mais les diffrents options du
menu sont assembles dans un composant ContextMenu (au lieu de
crer des en-ttes de menus et de les ajouter dans un MenuBar).
Instructions pour grer un menu contextuel :
Cration du menu contextuel :
ContextMenu ctxMenuIm

= new ContextMenu();

L'ajout des options de menus peut se faire de manire individuelle

(en squence) ou collective :
ctxMenuIm.getItems().add(mniWeb);
ctxMenuIm.getItems().addAll(mniCopy, mniSave, mniResize);

Des sous-menus peuvent galement tre crs dans un menu

contextuel en imbriquant des composants de type Menu (de la mme
manire que pour les menus droulants).
IHM-1 FX08

Jacques BAPST

18

Menu contextuel [2]

L'association des menus contextuels aux composants peut se faire
de deux manires.
Pour les composants qui sont des sous-classes de Control, le plus
simple est d'utiliser la proprit contextMenu.
ContextMenu ctxMenuIm = new ContextMenu();
ctxMenuIm.getItems().addAll(mniCopy, mniSave, mniResize);
lblImage.setContextMenu(ctxMenuIm);

Pour les autres composants et notamment les conteneurs (sous-classes

de Pane), il faut grer l'vnement provoqu par le clic-droit de la souris
et utiliser la mthode show() pour afficher le menu ( la position du clic).
root.setOnMousePressed(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent ev) {
if (ev.isSecondaryButtonDown()) {
ctxMenuIm.show(root, ev.getScreenX(), ev.getScreenY());
}
}
});
IHM-1 FX08

Jacques BAPST

19

Raccourcis clavier
Il est souvent souhaitable que certaines actions que l'on peut
dclencher avec la souris puissent tre galement dclenches
l'aide du clavier.
C'est le rle des raccourcis clavier qui existent sous deux formes
principales :
Les mnmoniques
Activation du composant en pressant sur une touche spcifique qui dpend
de la plateforme (touche Alt sur Windows) associe un autre caractre
(gnralement alphanumrique).
Les mnmoniques sont associs des composants qui possde un libell et
le caractre associ au mnmonique est gnralement soulign.

Les acclrateurs

Activation de l'action associe une option de menu par une combinaison

unique de touches du clavier.

IHM-1 FX08

Jacques BAPST

20

Mnmonique
Des mnmoniques peuvent tre associs tous les composants
possdant un libell (sous-classes de Labeled) ainsi qu'aux menus et
aux diffrentes options de menus.
Pour ces composants, la proprit boolenne mnemonicParsing
indique si le caractre soulign '_' dans le libell du composant
doit tre considr comme l'annonce d'un mnmonique pour le
caractre suivant.
Menu

mnuFile

Menu

mnuOptions = new Menu("_Options");

Button btnOk

= new Menu("_File");

= new Button("O_K");

La proprit mnemonicParsing est true par

dfaut pour la plupart des composants.

IHM-1 FX08

Jacques BAPST

21

Acclrateur [1]
Des acclrateurs peuvent tre associs tous les composants de
type Menu (c'est rarement utile) et aux diffrentes options de menus
MenuItem, CheckMenuItem,
Pour ces composants, la proprit accelerator, qui est de type
KeyCombination indique la combinaison de touches qui permet de
dclencher l'action associe.
Il existe diffrentes manires de crer des objets de type
KeyCombination. Une des plus simples est d'utiliser la mthode
statique keyCombination("key-pattern") qui prend en paramtre
une chane de caractres qui sera interprte.
Cette chane de caractres comprendra un ou plusieurs modificateurs
et un caractre spars par le symbole plus '+'
Modificateurs possibles : Shift, Ctrl, Alt, Meta, Shortcut
Exemples : "Shift+A", "Ctrl+S", "Alt+Ctrl+M"
IHM-1 FX08

Jacques BAPST

22

Acclrateur [2]
Pour les touches spciales (Enter, Home, Page_Up, ), la classe
KeyCode dfinit des constantes numres reprsentant les
diffrentes touches du clavier. Le nom de ces constantes peut
gnralement tre utilis dans la chane de caractres passe la
mthode keyCombination().
La classe KeyCodeCombination peut
galement tre utilise pour crer des
combinaisons de touches (voir exemple).
Exemples de cration d'acclrateurs
sur des options de menu :
mniSave.setAccelerator(KeyCombination.keyCombination("Ctrl+S"));
mniAbout.setAccelerator(KeyCombination.keyCombination("Shift+Ctrl+A"));
mniQuit.setAccelerator(KeyCombination.keyCombination("Ctrl+Home"));
mnuOpt.setAccelerator(KeyCombination.keyCombination("Alt+Shift+Ctrl+O"));
mniSize.setAccelerator(new KeyCodeCombination(
KeyCode.S, KeyCombination.ALT_DOWN, KeyCombination.SHIFT_DOWN));
IHM-1 FX08

Jacques BAPST

23

MenuButton / SplitMenuButton
ChoiceBox / ComboBox
ListView / Spinner

IHM-1 FX08

Jacques BAPST

24

MenuButton
Le composant MenuButton est un bouton qui affiche un menu popup
lorsqu'il est cliqu ( la manire d'un menu contextuel).
C'est une sous-classe de ButtonBase
et son API est trs proche de celle du
composant Menu.
La proprit popupSide permet de
dfinir de quel ct doit s'ouvrir le
menu popup.
Exemple (extrait du code) :
MenuButton mbnOptions = new MenuButton("Options");
mnuSubOpt.getItems().addAll(mniSkin, mniSize, mniColor); // Sous-menu
mbnOptions.setPopupSide(Side.LEFT);
bnOptions.getItems().addAll(mniSave, mniQuit, mnuSubOpt, mniFont);

IHM-1 FX08

Jacques BAPST

25

SplitMenuButton
Le composant SplitMenuButton est une sorte de combinaison du
composant Button et du composant
MenuButton (dont il est une sous-classe).
La zone du bouton est divise en 2 parties :
Une zone avec un libell qui agit comme un
bouton ordinaire en dclenchant une action
lorsqu'on clique sur cette partie (code
associ la mthode setOnAction()).
Une zone de menu qui peut tre active en
cliquant dessus ou en utilisant les touches
"curseurs" du clavier et qui fonctionne
comme le composant MenuButton en
ouvrant un menu dans une fentre popup.

La dernire slection qui a t effectue

dans le menu n'est pas automatiquement
associe l'action du bouton.
IHM-1 FX08

Jacques BAPST

26

ChoiceBox [1]
Le composant ChoiceBox permet de prsenter l'utilisateur une
liste d'lments dans laquelle il peut en slectionner un.
Le composant se prsente au dpart sous la forme d'un bouton et,
lorsqu'on clique dessus, les lments sont affichs sous la forme
d'une liste droulante.
L'lment actuellement slectionn est affich en libell lorsque la
liste est ferme (enroule).
Ce composant est rserver pour la slection de listes relativement
courtes car il n'y a pas de scrolling possible.
Par dfaut, il n'y a pas d'lment slectionn au dpart.
Le type du composant est gnrique ChoiceBox<T>, T tant le type
des lments de la liste.

IHM-1 FX08

Jacques BAPST

27

ChoiceBox [2]
Quelques proprits du composant ChoiceBox :
Liste des lments afficher. Un objet de type
ObservableList<T> que l'on peut galement passer au
items
constructeur. La liste des lments peut tre modifie
dynamiquement (ajout, suppression, ).
Modle de slection des lments de la liste.
Type SingleSelectionModel<T>.
selectionModel
On ne change gnralement pas le modle de slection par
dfaut.
value
Valeur de l'lment slectionn. Type <T>.
showing
Boolen qui indique si la liste des lments est affiche ou non.
Convertisseur qui indique comment l'lment est reprsent.
Ce convertisseur (StringConverter<T>) est utilis pour convertir
converter
les lments de type T en String (et inversement). Par dfaut,
c'est la mthode toString() de l'lment qui est utilise.

IHM-1 FX08

Jacques BAPST

28

ChoiceBox [3]
Exemple avec une liste de chanes de caractres (choix d'une langue).
ChoiceBox<String> cbxLang = new ChoiceBox<String>();
cbxLang.getItems().addAll("Deutsch", "English", "Franais", "Italiano");
cbxLang.getSelectionModel().select(1); // ou cbxLang.setValue("English");
root.getChildren().add(cbxLang);

IHM-1 FX08

Jacques BAPST

29

ChoiceBox [4]
Si l'on souhaite effectuer une action lors d'un changement de
slection, il faut enregistrer un gestionnaire d'vnement sur le
modle de slection (proprit selectedItem ou selectedIndex).
cbxLang.getSelectionModel().selectedItemProperty()
.addListener(new ChangeListener<String>() {
@Override
public void changed(ObservableValue<? extends String> ov,
String s1, String s2)
{
System.out.println(s1+", "+s2); // Display old and new values
System.out.println(cbxLang.getSelectionModel().getSelectedIndex());
}
});

Identique mais avec une expression lambda :

cbxLang.getSelectionModel().selectedItemProperty()
.addListener((ov, s1, s2) -> {
System.out.println(s1+", "+s2); // Display old and new values
System.out.println(cbxLang.getSelectionModel().getSelectedIndex());
});
IHM-1 FX08

Jacques BAPST

30

ComboBox [1]
Le composant ComboBox<T> est assez similaire au composant
ChoiceBox et permet de prsenter l'utilisateur une liste d'lments
(de type T) dans laquelle il pourra en slectionner un.
Une des diffrences rside dans le fait que ComboBox permet de
limiter le nombre de choix affichs et offre automatiquement une
barre de dfilement (ascenseur) pour naviguer dans la liste.
Une autre diffrence est qu'un ComboBox peut tre ditable
(l'utilisateur peut saisir une valeur qui ne figure pas dans la liste).
ComboBox est une sous-classe de ComboBoxBase qui offre des

proprits et fonctionnalits de base au composant.

La proprit onAction permet d'enregistrer un gestionnaire
d'vnement qui sera excut lorsque la valeur slectionne change.

La fonction de saisie automatique (autocompltion) n'est pas

disponible par dfaut et doit tre code si elle est souhaite.
IHM-1 FX08

Jacques BAPST

31

ComboBox [2]
Quelques proprits du composant ComboBox :
Liste des lments afficher. Un objet de type
ObservableList<T> que l'on peut galement passer au
items
constructeur. La liste des lments peut tre modifie
dynamiquement (ajout, suppression, ).
Modle de slection des lments SingleSelectionModel<T>
selectionModel
(un seul lment peut tre slectionn).
value
Valeur de l'lment slectionn. Type <T>.
showing
Boolen qui indique si la liste des lments est affiche ou non.
Convertisseur qui indique comment l'lment est reprsent et,
s'il est ditable, comment traduire la chane de caractres en
converter
objet de type T.
Ce convertisseur (StringConverter<T>) est donc utilis pour
convertir les lments de type T en String et inversement.
Boolen qui indique si le ComboBox est ditable, c'est--dire que
editable
l'utilisateur peut saisir une valeur qui n'est pas dans la liste des
lments.
IHM-1 FX08

Jacques BAPST

32

ComboBox [3]
Nombre maximal de lignes affiches dans la liste droulante
visibleRowCount (Integer). Si ce nombre est dpass, une barre de dfilement
permet l'utilisateur de parcourir la liste (scrolling)
Traitement de l'vnement dclench lors du changement de la
onAction
valeur slectionne (value).
onShowing
onShown
onHiding
onHidden
promptText

placeholder

IHM-1 FX08

Traitement des vnements associs l'ouverture et la

fermeture du menu droulant (juste avant et juste aprs
l'ouverture et la fermeture de la fentre popup).
Texte affich si le composant n'est pas ditable et qu'aucun
lment n'est slectionn.
Par exemple l'tat initial ou aprs annulation de la slection
(setValue(null);).
Composant (de type Node) afficher si la liste des lments est
vide.

Jacques BAPST

33

ComboBox [4]
ComboBox<String> cbbCountry = new ComboBox<String>();
cbbCountry.getItems().addAll("Allemagne", "Angleterre", "Belgique",
"Espagne",
"France",
"Italie",
"Pays-Bas", "Portugal",
"Suisse");

cbbCountry.setPromptText("Select a Country...");
cbbCountry.setVisibleRowCount(5);
// Max 5 lments visibles
cbbCountry.setOnAction(event -> {
System.out.println(cbbCountry.getValue());
});

IHM-1 FX08

Jacques BAPST

34

ListView [1]
Le composant ListView<T> permet d'afficher un ensemble
d'lments (de type T) sous la forme d'une liste scrollable.
Les lments de la liste peuvent tre affichs verticalement (par
dfaut) ou horizontalement.

L'utilisateur peut slectionner les lments (slection simple par

dfaut, mais slection multiple possible) ou interagir avec eux.
Comme pour les ComboBox, les lments sont enregistrs en interne
dans une collection de type ObservableList (modle du composant)
qui informe le composant ListView des changements intervenus.
Les lments de la liste peuvent potentiellement tre dits par
l'utilisateur (pour cela, la proprit cellFactory doit avoir t redfinie).
Le nombre d'lments affichs dpend de la taille prfre du
composant (prefWidth, prefHeight). Si ncessaire des barres de
dfilement (ascenseurs) apparatront pour permettre le scrolling.
IHM-1 FX08

Jacques BAPST

35

ListView [2]
Le peuplement de la liste peut tre effectu en ajoutant les
lments avec les mthodes add() ou addAll() de la proprit
items (comme dans les exemples pour ChoiceBox et ComboBox).
Une autre manire de faire (courante) est d'utiliser des mthodes
statiques de la classe FXCollections pour crer des objets de type
ObservableList<T> qui seront assigns au composant ListView
avec la mthode setItems() ou alors passs en paramtre son
constructeur.
ListView<String> livCountry = new ListView<String>();
ObservableList<String> countries = FXCollections.observableArrayList(
"Allemagne", "Angleterre", "Belgique",
"Espagne",
"France",
"Italie",
"Pays-Bas", "Portugal",
"Suisse"
);

livCountry.setItems(countries);

IHM-1 FX08

Jacques BAPST

36

ListView [3]
Quelques proprits du composant ListView :
Liste des lments afficher dans la liste. Un objet de type
ObservableList<T> que l'on peut galement passer au
items
constructeur. La liste des lments peut tre modifie
dynamiquement (ajout, suppression, ).
Modle de slection des lments MultipleSelectionModel<T>.
selectionModel - Unique : setSelectionMode(SelectionMode.SINGLE)
- Multiple : setSelectionMode(SelectionMode.MULTIPLE)
orientation
Orientation de la liste. Type Orientation.
Boolen qui indique si la ListView est ditable. Cela implique que
editable
les lments (ListCell) doivent galement tre ditables ce qui
ncessite de redfinir la proprit cellFactory.
Composant (de type Node) afficher si la liste des lments est
placeholder
vide.

IHM-1 FX08

Jacques BAPST

37

ListView [4]
fixedCellSize

cellFactory

focusModel

onScrollTo
onEditStart
onEditCommit
onEditCancel

IHM-1 FX08

Valeur Double qui dfinit une hauteur (ou largeur si horizontal)

fixe pour tous les lments de la liste (calcule sinon pour chacun
des lments). Acclre l'affichage pour les longues listes.
Dfinition d'une fabrique d'lments (factory) permettant de
personnaliser totalement les lments de la liste.
Type Callback<ListView<T>,ListCell<T>>
Modle permettant de connatre l'lment de la liste qui possde
le focus (ou son index).
Dfinition de l'action excuter lorsque la mthode scrollTo()
a t invoque.
Dfinition des actions excuter lors des diffrentes phases de
l'dition des lments (s'ils sont ditables).

Jacques BAPST

38

ListView [5]
Mthodes pour grer la visibilit des lments de ListView :
Fait dfiler la liste (scroll), si ncessaire, pour que l'lment
correspondant l'indice pass en paramtre soit visible.
Fait dfiler la liste (scroll), si ncessaire, pour que l'lment
scrollTo(object)
correspondant l'objet pass en paramtre soit visible.
scrollTo(index)

Les lments de la liste peuvent tre quelconques et sont

reprsents par des objets de type ListCell.
Il existe quelques sous-classes prdfinies de ListCell qui
permettent de crer facilement des listes ditables dont les
lments correspondent des composants connus.
CheckBoxListCell

: lments de type CheckBox

ChoiceBoxListCell : Elements de type ChoiceBox

ComboBoxListCell

: Elements de type ComboBox

TextFieldListCell : Elements de type TextField
IHM-1 FX08

Jacques BAPST

39

ListView [6]
Exemple d'utilisation d'un composant ListView pour permettre
l'utilisateur de slectionner des pays (slection multiple) et affichage
sur la console de la slection courante ( chaque changement).
ListView<String> livCountry = new ListView<String>();
ObservableList<String> countries = FXCollections.observableArrayList(
"Allemagne", "Angleterre", "Belgique",
"Espagne",
"France",
"Italie",
"Pays-Bas", "Portugal",
"Suisse"
);

livCountry.setItems(countries);
livCountry.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
livCountry.setFixedCellSize(22);
livCountry.setPrefSize(200, 180);
livCountry.setOnMouseClicked(event -> {
System.out.println(livCountry.getSelectionModel().getSelectedItems());
});

IHM-1 FX08

Jacques BAPST

40

ListView [7]
Excution de l'application :

Affichage sur la console

[Angleterre]
[Angleterre, Belgique]
[Angleterre, Belgique, Italie]
[Espagne]

IHM-1 FX08

Jacques BAPST

41

ListView [8]
Exemple d'utilisation d'un composant ListView en plaant une liste
droulante (ComboBox) comme lment ditable de la liste.
ObservableList<String> candidates = FXCollections.observableArrayList();
ObservableList<String> top10
= FXCollections.observableArrayList();
ListView<String> listView = new ListView<String>(top10);
listView.setPrefSize(180, 235);
listView.setEditable(true);

lments de la
ComboBox

candidates.addAll("Mommy", "Interstallar", "Gone Girl", "Her",

"Boyhood", "Le sel de la terre", "Dragon 2",
"Night Call", "Les combattants", "The Raid 2",
"12 Years a Slave", "Pride", "Timbuktu", "R",
"Winter Sleep", "Philomena", "Nebraska"
);
for (int i = 1; i <= 10; i++) {
top10.add("Select Position " + i + "...");
}

// Valeurs initiales
ComboBox comme ListCell

listView.setItems(top10);
listView.setCellFactory(ComboBoxListCell.forListView(candidates));

IHM-1 FX08

Jacques BAPST

42

ListView [9]
L'utilisateur peut cliquer sur un des lments de la liste et faire
apparatre un composant qui s'apparente un ComboBox qui lui
permet de choisir dans la liste droulante.
La valeur slectionne dans la liste droulante devient la valeur de
l'lment de la ListView.

IHM-1 FX08

Jacques BAPST

43

Spinner [1]
Le composant Spinner<T> permet l'utilisateur de slectionner une
valeur dans une liste d'lments ordonns (de type T).
Seule la valeur de l'lment slectionn est affiche dans un champ
texte interne (TextField) nomm diteur (proprit Editor).

Deux boutons permettent l'utilisateur de faire dfiler les valeurs

successives de la liste dans l'ordre croissant et dcroissant.
Les valeurs slectionnables sont dfinies dans le modle du
composant qui est de type SpinnerValueFactory<T>.
Trois modles sont proposs par dfaut (classes internes) :

IntegerSpinnerValueFactory
DoubleSpinnerValueFactory
ListSpinnerValueFactory

Il est possible de rendre la zone de texte ditable. L'utilisateur doit

alors saisir des valeurs valides (en fonction du modle interne choisi)
sinon la valeur sera adapte [min, max] ou une exception sera
gnre.
IHM-1 FX08

Jacques BAPST

44

Spinner [2]
Le dfilement des valeurs peut tre rendu circulaire (wrapping).
L'emplacement des boutons de dfilement est configurable en
changeant le style CSS associ la classe du composant.
En plus du style par dfaut (right vertical), cinq styles sont dfinis par
des constantes de la classe Spinner.
Spinner<Integer>
Spinner<Double>

sprI
sprD

= new Spinner<>(-20, 20, 0, 5);

= new Spinner<>(1.0, 6.0, 4.0, 0.25);

sprI.getStyleClass().add(Spinner.STYLE_CLASS_SPLIT_ARROWS_VERTICAL);
sprD.getStyleClass().add(Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL);

IHM-1 FX08

Jacques BAPST

45

Spinner [3]
Diffrents constructeurs permettent de crer le composant Spinner
en dfinissant simultanment le type et les valeurs enregistres dans
le modle interne.
Pour les modles numriques, les valeurs minimales, maximales,
initiales ainsi que les incrments (step) peuvent tre dfinis.
Exemples :
Spinner<Integer> sprTemp

= new Spinner<>(-20, 20, 0, 5);

Spinner<Double>

sprGrades = new Spinner<>(1.0, 6.0, 4.0, 0.25);

Spinner<String>

sprDays

= new Spinner<>(
FXCollections.observableArrayList(
"Monday",
"Tuesday",
Modle de type
"Wednesday",
ListSpinnerValueFactory
"Thursday",
"Friday",
"Saturday",
"Sunday"
));

IHM-1 FX08

Jacques BAPST

46