Université Cadi Ayyad

Ecole Supérieure de Technologie - Safi

JavaFX
FXML et Scene Builder
Encadré par:
M. SAID EL ABDELLAOUI

Réalisé par:
LEBDAOUI Meryam, ELOUAZZANI Nihad, ZOHARI Rkia
 Sommaire
Introduction

FXML

• Définition de FXML
• Application

Scene Builder

• Définition de Scene Builder

• Différence entre FXML et Scene Builder
• Relation entre Scene Builder et CSS
• Application
JavaFX et la base de données

• Relation entre JAVAFX et JDBC

• Configuration de JDBC
• La connexion avec la base de données
• L’ajout à la base de données
• Application
Conclusion
INTRODUCTION

3
 Introduction
Les caractéristiques de javaFX:

Utilisation des deux modes Scene Builder

Utilisation des feuilles de CSS Web, Graphiques 2D/3D et Médias.

4
FXML

5
 FXML
La structure d’un projet javaFX:

6
 FXML
Définition:

• FXML est un format de données textuelles, dérivé du format XML, qui permet de décrire une interface

utilisateur pour des applications conçus avec JavaFX.

• Pour faciliter la manipulation de ce format de données, le logiciel Scene Builder a été développé

par Oracle, permettant ainsi de décrire rapidement des interfaces.

7
 FXML
Fichier FXML

=> Sample.fxml: Il s’agit du fichier source FXML dans lequel vous définissez l’interface utilisateur.

1-Entête: la version et encoding 2-Imports: une série d'imports de packages

3-Racine:
xmlns:fx est la description des propriétés du nœud
fx:controller qui définit le nom long (package + nom de classe) de la
classe du contrôleur
8
 FXML
Application.css

Les propriétés sont précédés par -fx Intégrer le css dans le fichier.fxml

9
 FXML
SampleController.java

=> SampleController.java: Il s’agit du fichier contrôleur permettant de gérer les entrées souris et clavier.

@FXML annotation
est utilisée pour
baliser les champs de
membre de contrôleur
non publics et les
méthodes de gestion à
utiliser par le balisage.

10
 FXML
Main.java

Charger le nom du
fichier FXML

Charger le nom du
fichier css

11
Application

12
Scene Builder

13
 Scene Builder
Définition:

• Scene Builder est un outil interactif de conception d'interface graphique pour JavaFx,

créé par Oracle.

• Il permet de construire rapidement des interfaces utilisateurs sans avoir besoin de coder.
Le logiciel s'utilise avec la technique du glisser/déposer(Drag and drop)

• Les interfaces sont enregistrés dans des fichiers au format FXML, qui sont ensuite lus et
chargés en mémoire par le programme, puis affichés à l'écran.

14
 Scene Builder
L’ouverture du Scene Builder

15
 Scene Builder
Un panneau latéral situé à gauche de la fenêtre
permet à l'utilisateur de sélectionner et positionner
un composant dans la hiérarchie des composants
ou sur la vue centrale affichant le rendu.
Un panneau latéral positionné à droite de la fenêtre
permet quant à lui de définir les caractéristiques du
composant sélectionné par l'utilisateur.
16
 Scene Builder
Différence entre FXML et Scene Builder

16
 Scene Builder
Relation entre Scene Builder et CSS

Pour ajouter du code css, il faut déclarer le fichier dans le Scene Builder:

1. Ouvrez le fichier Sample.fxml avec Scene Builder .

2. Sélectionnez la racine AnchorPane et définissez application.css dans le groupe Properties en

tant que feuille de style.

3. Le fond est encore blanc, ajoutez encore la classe de style background à la

racine AnchorPane .

18
 Exercice

AnchorPane
fx:controller

button
fx:id="btn" 
onAction="#cliquer"

Label
fx:id="lab"

19
Application

20
 Application
1 ére
partie du tp:

Réalisation du formulaire avec Scene Builder

5-ImageView 6-Text

2-HBox
1-AnchorPane
3-AnchronePane

4-TextField

7-Button

21
JAVAFX et la base de données

22
 JAVAFX et la base de données
JAVAFX et JDBC

• JDBC(Java Database Connectivity )  est désignée comme une API pour permettre un accès
aux bases de données avec avec Java

• JDBC un driver fournit des outils pour traiter les BD

23
 JAVAFX et la base de données
Etape 1:La configuration de JDBC avec Eclipse:

23
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
Etape 2: Création de la base de données

25
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
Etape 3: Etablir une connexion

DriverManager

getConnection()

Connection

• Chargement pilote JDBC : Class.forName("com.mysql.jdbc.Driver");

• Ouverture d’une connexion avec la base de données :

On fournit l’url de la base , le nom d’utilisateur et le mot de passe.

connection=DriverManager.getConnection("jdbc:mysql://localhost/"+dbName,userName,password);

26
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
EXEMPLE:

27
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
Etape 4: Exécuter la requête
DriverManager

getConnection()

Connection

createStatement()

Statement Statement Statement executeUpdate ()

• Exécuter d’une requête :

Pour réaliser des requêtes, on utilise un objet statement de type Statement.

Statement statement=connection.createStatement();

Le résultat d’une requête est récupéré par un String.

String sql="INSERT INTO USER VALUES('"+textField.getText()+"')";

28
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
Etape 5: Manipuler le résultat

• Manipuler le résultat :
La mise à jour d'une base de données peut être effectuée par une requête SQL de type INSERT,
UPDATE ou DELETE à travers la méthode executeUpdate("Requête") sur un objet de type Statement.

Les Sélection depuis d’une base de données être effectuée par la méthode executeQuery("Requête")

statement.executeUpdate(sql);

statement.executeQuery(sql);

29
 JAVAFX
JAVAFXetetlalabase
basede
dedonnées
données
EXEMPLE:

30
Application

31
Conclusion et perspectives

32
Merci pour votre attention!

33