Ecole Normale Supérieure de l'Enseignement Technique
(ENSET)
Les interfaces
graphiques avec JavaFX
Abdelmajid BOUSSELHAM
Email: bousselham@[Link]
Researchgate : [Link]
Google Scholar: [Link]
Scopus: [Link]
Linkedin: [Link]
1
JavaFX
• JavaFx est la dernière version de bibliothèques qui permet de créer des
interfaces graphiques de qualité pour les applications Java Desktob, Mobile et
Web.
• Avec l’apparition de Java 8 en mars 2014, JavaFX devient la bibliothèque de
création de l’interface graphique officielle du langage Java .
• Le développement de son précédent SWING étant abandonné (Sauf pour les
correction du bogues ) .
2
Structure d’une application JavaFX
• Une application JavaFX se compose d’une hiérarchie de composants :
▪ Un composant Stage qui représente la fenêtre principale de l’application. à un instant
donné, le composant Stage affiche une scène.
▪ Le composant Scene qui permet d’afficher tout ce qui devrait apparaitre dans l’application.
L’objet Scene contient des composants graphiques organisés d’une manière hiérarchique.
▪ Les composants graphiques sont des objets qui peuvent être de différents types :
o Des éléments de contrôles utilisateur : Label, TextField, ListView.
o Des formes graphiques : Circle, Rectangle, Line …
o Des médias : ImageView, MediaView, etc…
o Les Layouts pour grouper les éléments pour assurer les mises en page: BorderPane,
Hbox, Vbox, GridPane,…
3
Structure d’une application JavaFX
Stage Scene BorderPane HBox VBox GridPane HBox
Label TextField Button
Label TextField
Label CheckBox
Label ComboBox Button
ListView TableView ImageView
Footer
4
Layout – Gestionnaire de la mise en page
• Un layout ou gestionnaire de mise en page est un nœud graphique qui hérite
de la classe [Link].
• Il s'agit d'une entité qui contient d'autres nœuds et qui est chargée de les
déplacer, de les disposer, voire de les redimensionner de manière à changer la
présentation de cet ensemble de nœuds et à les rendre utilisables dans une
interface graphique.
• Un layout (organisation) est une classe de l’API Graphique permettant
d’organiser les objets graphiques dans la fenêtre.
5
Layout – Gestionnaire de la mise en page
• En JavaFX, il existe huit types de layouts :
▪ BorderPane : est un conteneur (container), qui est divisé en 5 zones distinctes (Top, Bottom, Left,
Right), chacune des zones peut contenir un sous-composant.
6
Layout – Gestionnaire de la mise en page
▪ Hbox : est un conteneur, qui arrange les éléments graphiques d’une manière horizontale.
▪ VBox : est un conteneur, qui arrange les éléments graphiques d’une manière verticale.
▪ StackPane : est un conteneur , qui permet de ranger les éléments de façon à ce que chaque
nouvel élément inséré apparaisse au-dessus de tous les autres.
▪ GridPane : permet de créer une grille d'éléments organisés en lignes et en colonnes.
▪ FlowPane : permet de ranger des éléments de façon à ce qu'ils se positionnent
automatiquement en fonction de leur taille et de celle du layout.
▪ TilePane : est similaire au FlowPane, chacune de ses cellules fait la même taille.
▪ AnchorPane : permet de fixer un élément graphique par rapport à un des bords de la
fenêtre : top, bottom, right et left.
7
Structure d’une application JavaFX
8
Exemple d’une application JavaFX
9
Exemple d’une application JavaFX
10
Exemple d’une application JavaFX
11
Exemple d’une application JavaFX
12
Méthode basée sur FXML
• JavaFX offre la possibilité de déclarer la structure des composants de
l’interface graphique dans un fichier XML.
• Le fichier FXML représente la vue de l’application.
• Au démarrage de l’application, le fichier XML est lu, les composants sont
instanciés et l’interface graphique s’affiche.
• Pour programmer les réponses aux événements produits dans les composants,
on crée un Contrôleur associé à la vue FXML.
13
Méthode basée sur FXML
<?import [Link]?>
<BorderPane xmlns="[Link]
xmlns:fx="[Link] fx:controller="[Link]">
<top>
<HBox spacing="10">
<padding>
<Insets top="10" right="10" left="10" bottom="10"></Insets>
</padding>
<children>
<Label text="Nom : "> </Label>
<TextField fx:id="textFieldNom" style="-fx-background-color: yellow"></TextField>
<Button text="Ajouter" > </children>
</HBox>
</top>
<center>
<VBox spacing="10">
<padding>
<Insets top="10" right="10" left="10" bottom="10"></Insets>
</padding>
<ListView fx:id="listView1">
<items>
<FXCollections fx:factory="observableArrayList">
<String fx:value="BMW"></String>
<String fx:value="DACIA"></String>
</FXCollections>
</items>
</ListView>
</VBox>
</center>
</BorderPane>
14
Méthode basée sur FXML
• Le contrôleur VoitureController :
15
Méthode basée sur FXML
• Le contrôleur VoitureController (Suite):
16
Méthode basée sur FXML
• Le code de l’application JAVA :
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class JavaFXApp4 extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) throws Exception {
BorderPane borderPaneRoot= [Link](getClass().getResource("[Link]"));
Scene scene=new Scene(borderPaneRoot,400,400);
[Link]().add(getClass().getResource("[Link]").toString());
[Link](scene);
[Link]();
}
}
17
Méthode basée sur FXML
• Style Css:
/* [Link] */
.root {
-fx-font-family: 'Arial';
-fx-background-color: #f0f0f0;
}
.button {
-fx-background-color: #4CAF50;
-fx-text-fill: white;
-fx-padding: 10px 20px;
-fx-font-size: 16px;
-fx-border-radius: 5px;
}
.button:hover {
-fx-background-color: #45a049;
}
.label {
-fx-font-size: 18px;
-fx-text-fill: #333;
}
18
