JAVA FX

20/03/2022
PROGRAMMATION ORIENTE OBJET

Sous la supervision de :

Dr BILONG IV
Année scolaire :2021/2022
Table des matières
I. INTRODUCTION..............................................................................................................................2
II. DEFINITION ET UTILISATION...........................................................................................................2
1. DEFINITION.................................................................................................................................2
2. UTILISATION...............................................................................................................................2
III. HISTORIQUES..............................................................................................................................3
IV. COMMENT L’INTEGRER DANS UN PROJET..................................................................................4
1. AVEC NETBEANS.........................................................................................................................5
2. AVEC INTELLIJ.............................................................................................................................9
3. AVEC ECLIPSE............................................................................................................................11
V. PRESENTATION DE JAVAFX...........................................................................................................12
1. LE STRUCTURE GENERALE........................................................................................................12
2. MEMBRES DU GROUPE :
LES WIDGETS........................................................................................................................14
PRESENTATION D’UN DJIALA
A. WIDGETSMARC ISAMEL
(CAS D’UN BOUTON)..........................................................14
DJOUNDO MICHELLE
B. EXEMPLE D’INTERFACE.........................................................................................................16
FOHOM TAKALA BEAUREL
VI. MENRA ROMIAL
JAVAFX AVEC SCENEBUILDER...................................................................................................17
VII. TCHEUHA FANDIO ANTHONY
DEMONSTRATION.....................................................................................................................18
YEMKWA EMMANUEL MESNER
VIII. RECOMMADATIONS.................................................................................................................18
AVANTAGES......................................................................................................................................18
IX. CONCLUSION............................................................................................................................19
X. BIBLIOGRAPHIE.............................................................................................................................20

1
 I. INTRODUCTION

Depuis l’avènement de Windows 1.0 lancé le 20 Novembre 1985, que Bill Gates avait
annoncé en 1983 comme étant une « surcouche graphique », les interfaces utilisateur ont fait
leur apparition dans les Tics, facilitant ainsi la vie à de nombreux utilisateurs dans le monde.
Ainsi, de nos jours, presque toutes les applications destinées utilisateur sont munis d’une
interface graphique. Or la grande majorité des applications sont développées par Java et Java
fx est le Framework le plus évolué de Java pour les interfaces graphiques. Ainsi, il sera
question pour nous dans ce devoir de présenter un bref aperçu de JavaFX : son historique,
comment l’intégrer dans un projet, avec une petite démonstration à l’appui, et enfin les
recommandations nécessaires pour pouvoir l’utiliser à bon escient.

II. DEFINITION ET UTILISATION

1. DEFINITION

JavaFX est un Framework de Java pour les interfaces graphiques. C’est une plate-forme
logicielle permettant de créer et de fournir des applications de bureau, ainsi que des
applications Web riches pouvant s'exécuter sur une grande variété d'appareils.

2. UTILISATION

JavaFX est utilisé principalement pour :

 Pour développer des applications côté client avec des fonctionnalités riches, les
programmeurs dépendaient de diverses bibliothèques pour ajouter des fonctionnalités
telles que les médias, les contrôles de l'interface utilisateur, le Web, la 2D et la 3D,
etc. JavaFX inclut toutes ces fonctionnalités dans une seule bibliothèque. En plus de
cela, les développeurs peuvent également accéder aux fonctionnalités existantes d'une
bibliothèque Java telle que Swing.
 JavaFX fournit un riche ensemble d'API graphiques et multimédias et exploite l'unité
de traitement graphique moderne grâce à des graphiques accélérés par le matériel.
JavaFX fournit également des interfaces à l'aide desquelles les développeurs peuvent
combiner l'animation graphique et le contrôle de l'interface utilisateur.
 On peut utiliser JavaFX avec des technologies basées sur JVM telles que Java, Groovy
et JRuby. Si les développeurs optent pour JavaFX, il n'est pas nécessaire d'apprendre
des technologies supplémentaires, car une connaissance préalable de l'une des
technologies mentionnées ci-dessus sera suffisante pour développer des RIA à l'aide
de JavaFX.

2
III. HISTORIQUES

Java FX a été initialement développé par Chris Oliver chez SeeBeyond et s'appelait F3 (Form
Follows Function). F3 était un langage de script Java pour développer facilement des
applications GUI. Il offrait une syntaxe déclarative, un typage statique, une inférence de type,
une liaison de données, une animation, des graphiques 2D et des composants Swing.
SeeBeyond a été racheté par Sun Microsystems et F3 a été renommé Java FX en 2007. Oracle
a acquis Sun Microsystems en 2010. Oracle a ensuite ouvert JavaFX en 2013.
À ses débuts, les développeurs devaient utiliser le langage de script JavaFX Script pour
pouvoir décrire une interface utilisateur et la bibliothèque ne permettait de concevoir que des
applications internet riches.
Depuis la version 2.0, il s'agit d'une véritable API qui est proposé sous la forme d'une
bibliothèque tierce et qui plus est, devient open source2.
Avec l'apparition de la version 8 de Java (en mars 2014), JavaFX devient la bibliothèque de
création d'interface graphique officielle du langage Java, le développement de son
prédécesseur Swing (avec AWT) étant abandonné, excepté pour les corrections de bogues.
Depuis la version 11 de Java, le projet est dissocié du JDK, pour suivre son propre processus
de développement. Toutefois, le numéro de version de JavaFX concorde avec celui du JDK
pour indiquer sa compatibilité (car toute application JavaFX est basé sur le JDK).
Le tableau ci-après présente une brève historique détaillée de JavaFx
Date de mise sur le marché Version Commentaires
4e trimestre 2008 Java FX 1.0 C'était la version initiale de Java FX. Il a
utilisé un langage de déclaration appelé Java
FX Script pour écrire le code Java FX.
Deuxième Trimestre, 2009 Java FX 1.2

Deuxième Trimestre, 2010 Java FX 1.3

Troisième Trimestre, 2010 Java FX

1.3.1

4e trimestre 2011 Java FX 2.0 La prise en charge du script Java FX a été

abandonnée. Il a utilisé le langage Java pour
écrire le code Java FX. La prise en charge de
Java FX Mobile a été abandonnée.

Trimestre 2, 2012 Java FX 2.1 La prise en charge de Mac OS pour ordinateur

3
 de bureau uniquement a été introduite.

Trimestre 3, 2012 Java FX 2.2

1er trimestre 2014 Java FX 8.0 La version de Java FX est passée de 2.2 à 8.0.
Les versions Java FX et Java SE
correspondront à partir de Java 8.

IV. COMMENT L’INTEGRER DANS UN PROJET

NB : cette démarche est utilisée pour des JDK supérieur ou egale a la version 11. Pour les
versions anterieures JavaFX était déjà intégré.
Quelques soit l’IDE utilisée nous devons tout d’abord télécharger le SDK javaFX approprie
de votre système. le lien suivant nous permet de le télécharger
https://gluonhq.com/products/javafx/ une fois sur la page en descendant vous aurez cette
image :

Télécharger la version qui vous arrange c’est-à-dire en choisissez la version javaFX de votre
système et l’extraire.
Une fois terminé en fonction de votre IDE voici des étapes à suivre pour l’intégrer dans un
projet.

1. AVEC NETBEANS

4
 Tout d’abord créer une nouvelle librairie. Pour se faire aller dans Tools -> Libraries -
> New Library. Nommez-le et incluez les jars (SDK JavaFX) sous le dossier de
JavaFX.
Bien vouloir suivre cette séquence d’image qui indique comment procéder.

Après avoir cliqué sur Librairies cette fenêtre apparaitra cliquer sur nouveau

Juste après avoir cliqué sur New Library la fenêtre ci-dessous apparaitra :

5
 Comme nom de librairie vous pouvez donner JavaFX comme mentionné plus haut.
Ensuite après avoir cliqué sur ok cliquer sur le bouton Add JAR/Folder juste à droite
de l’image ci-dessus vous devriez obtenir l’image ci-après :

Ici vous devez vous rendre dans le dossier contenant le SDK JavaFX que vous avez
telecharger. Une fois dans ce dossier entrez dans le dossier que vous avez extrait et
allez à lib faites un CRTL+A pour sélectionner tous les éléments qui s’y trouvent et
enfin cliquer sur le bouton Add JAR/Folder juste à l’extrême droite en bas. Ensuite
cliquez sur Ok
 Une fois la librairie JavaFX crée, créer un nouveau projet

6
 Appuyer sur Next donner lui un nom. Une fois cela fait rassurez-vous que le projet
s’exécute avec un JDK 11 ou une version plus récente. Pour vérifier aller dans
Properties -> Libraries -> Java Platform

 Apres vérification allez dans Properties -> Libraries -> Compile -> Classpath -> + -
> Add Library et ajouter la librairie JavaFX que nous crée plus haut.

Cliquer sur le bouton Add Library juste après avoir sélectionner la librairie JavaFX
que nous avons créé.

7
 Ensuite allez dans Properties -> Libraries -> Run -> Modulepath -> + -> Add
Library et ajoutez-y également la librairie Java FX crée.

 Enfin allez dans Properties -> Run et ajoutez-y la VM option suivante :

Sous Windows --add-modules javafx.controls,javafx.fxml ou --module-path
"chemin absolu du dossier lib contenu dans le dossier extrait " --add-modules
javafx.controls,javafx.fxml exemple de chemin absolu de lib : C:\Users\
BeaurelFohom\Downloads\Compressed\Java\javafx-sdk-17.0.1\lib. Sous l’Unix
ajouter la VM option suivante : --module-path chemin absolu du dossier lib
contenu dans le dossier extrait --add-modules javafx.controls,javafx.fxml
NB : Entre path et " y’a une barre d’espace. Il en est de même pour « --add.

 Créer un fichier JavaFX Main Class

 Enfin exécuter le projet.

2. AVEC INTELLIJ

8
 Tout d’abord créer un nouveau projet. Rassurez-vous que le projet s’exécute avec un
JDK 11 ou une version plus récente. Ensuite cliquez sur le bouton Next donner un
nom nom à votre projet puis cliquer sur Finish.

Une fois le Project crée vous devriez avoir cet aperçu présentant de nombreuses
erreurs.

 Allez dans File -> ProjetStructure -> Librairies -> +

 Cliquez sur le bouton + une fenêtre s’affichera, cherchez et sélectionner le dossier lib
qui se trouve dans le dossier que nous avons extrait .

9
 Cliquez sur le bouton Ok une autre ensuite cliquez sur le bouton Apply puis Ok

Après ces serie d’opération les erreurs devraient disparaitre.

 Ensuite allez dans Run -> Edit Configurations puis ajoutez-y la VM option :
Sous Windows --module-path "chemin absolu du dossier lib contenu dans le
dossier extrait " --add-modules javafx.controls,javafx.fxml exemple de chemin
absolu de lib : C:\Users\BeaurelFohom\Downloads\Compressed\Java\javafx-sdk-
17.0.1\lib. Sous lunix ajouter la VM option suivante : --module-path chemin absolu
du dossier lib contenu dans le dossier extrait --add-modules
javafx.controls,javafx.fxml.
NB : Entre path et " y’a une barre d’espace. Il en est de même pour « --add.

Cliquez sur Apply puis sur

OK.

 Enfin exécuter le projet.

10
3. AVEC ECLIPSE

 Tout d’abord télécharger e(fx)clipse . Pour se faire aller a Help->Eclipse

Marketplace puis taper fx dans la barre de recherche et télécharger e(fx)clipse.

 Après l’installation éclipse redémarrera

 Ensuite créer un nouveau projet . Pour se faire allez a File->New->Other puis
sélectionner JavaFX project et donner lui un nom

Puis rendez-vous dans Windows->Preferences. Une nouvelle fenêtre s’affichera dans

celle-ci taper user et sélectionner user Librairies ensuite appuyez sur New et donner
un nom à la librairie que vous allez créer de préférence JavaFX ensuite cliquez sur
ADD External JARs Une fenêtre apparaitra et vous devez vous rendre dans le dossier
contenant le SDK JavaFX que vous avez télécharger. Une fois dans ce dossier entrez
dans le dossier que vous avez extrait et allez à lib faites un CRTL+A pour
sélectionner tous les éléments qui s’y trouvent et enfin cliquer sur Apply and Close

11
  Après cela effectuer un clic droit sur droit sur votre dossier JavaFX projet allez dans
Build Path->Configure Build Path. Une fois là-bas aller à Librairies->ClassPath-
>Add Library sélectionnez user Librairies (Librairies que vous venez de créer)
sélectionner JavaFX crée plus haut et cliquez sur Apply

 Rendez-vous dans Run configurations sélectionnez votre class JavaFX puis allez
dans Arguments et enfin ajouter la même VM arguments --module-path "chemin
absolu du dossier lib contenu dans le dossier extrait " --add-modules
javafx.controls,javafx.fxml et cliquez sur Run.

Ce lien nous montre comment procéder https://www.youtube.com/watch?v=bk28ytggz7E

V. PRESENTATION DE JAVAFX
1. LE STRUCTURE GENERALE

L'application est codée en créant une sous-classe d’Application. La fenêtre principale d'une
application est représentée par un objet de type Stage qui est fourni par le système au
lancement de l'application.

12
 L'interface est représentée par un objet de type Scene qu'il faut créer et associer à la fenêtre
(Stage).
La scène est composée des différents éléments de l'interface graphique (composants de
l'interface graphique) qui sont des objets de type Node. Tous les éléments contenus dans un
graphe de scène sont des objets qui ont pour classe parente la classe Node. La classe Node
comporte de nombreuses sous-classes (voir Fig.1)
La méthode start() construit le tout.

Structure générale d’une application JavaFX Fig.1

Pour mieux appréhender le mécanisme de lancement d’une application de JavaFX

considérons le bout de code suivant :

Un certain nombre d'importations doivent être effectuées (on y retrouve les classes principales
Application, Stage, Scene ainsi que les composants BorderPane et Button) :

13
En temps normal l’IDE s’en charge automatiquement.
Dans cet exemple, la méthode main() lance uniquement la méthode statique launch() (qui est
héritée de Application). Dans une application un peu plus complexe, elle pourrait effectuer
d'autres opérations d'initialisation avant l'invoquer launch().
Le point d'entrée d'une application JavaFX est constitué de l'instance de la classe Application
(généralement une sous-classe). Lors du lancement d'une application par la méthode statique
Application.launch() le runtime JavaFX effectue les opérations suivantes :
 Crée une instance de la classe qui hérite d’Application
 Appelle la méthode init()
 Appelle la méthode start() et lui passe en paramètre une instance de Stage (qui
représente la fenêtre principale primary stage(voir bout de code))
 Attend ensuite que l'application se termine
 Appelle la méthode stop()
Ce schéma illustre ces opérations :

2. LES WIDGETS

En JavaFX plusieurs Widgets sont utilisés notament : Les Labels, Button, Radio
Button,Toogle Buttons, CheckBox, Choice Box, Text Field, ScrollPane,
TableView, ListView, Combo Box et bien d’autres . Nous avons utilisés nombreux
d’entre eux et bien d’autres ne figurant pas dans cette liste.
A. PRESENTATION D’UN WIDGETS (CAS D’UN BOUTON)

Tout d’abord nous devons importer la classe Button via import javafx.scene .control.button ;
 La creation d’un bouton en JavaFX se fait grace au bout de code suivant :
 Button button1 = new Button();
 Button button2 = new Button("Accept");
 Image imageOk = new Image(getClass().getResourceAsStream("ok.png"Button
button3 = new Button("Accept", new ImageView(imageOk));

14
 La premiere sysntaxe crée un bouton sans contenir c’est a dire ni texte ni image .
La deuxieme syntaxe cree un bouton avec un text « Accept »
La derniere syntaxe crée un bouton avec un image.
 Lorsque nous utilisons un bouton nous produit une action lors d’un clic sur celui-ci . et
pour cela nous utilisons la methode setOnAction de la classe bouton.
Exemple :
button2.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent e) {
label.setText("Accepted");
}
});
ActionEvent un type d’evenement qui est traité par EventHandler. L’objet EventHandler
fournit la methode handler de sorte que quand l’utilisateur appuie sur le button2 le label
affichera « Accepted »
 JavaFX nous offre la possible d’appliquer le CSS a ses widgets grace a la methode
setStyle .
Exemple :
button1.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");
Dans cette exemple le texte du button1 sera en arial et de taille 22 et un couleur par
defaut #b6e7c9 .
Notez qu’on crée un fichier CSS a part dans le lequel on definit les differents style et
l’appeler plus tard sur notre conteneur.
Exemple :
.tooltip {
-fx-background-color: linear-gradient(#e2ecfe, #99bcfd);
}
.page-corner {
-fx-background-color: linear-gradient(from 0% 0% to 50%
50%,#3278fa,#99bcfd);
}

B. EXEMPLE D’INTERFACE

Code :

15
Ici les widgets tels que les Combo Box Button et TextArea
Résultat de ce bout de code :
16
VI. JAVAFX AVEC SCENEBUILDER

JavaFX Scene Builder est un outil de présentation visuelle qui permet aux utilisateurs de
concevoir rapidement des interfaces utilisateur d'application JavaFX, sans codage. Les
utilisateurs peuvent faire glisser et déposer les composants de l'interface utilisateur dans une
zone de travail, modifier leurs propriétés, appliquer des feuilles de style et le code FXML de
la mise en page qu'ils créent est automatiquement généré en arrière-plan. Le résultat est un
fichier FXML qui peut ensuite être combiné avec un projet Java en liant l'interface utilisateur
à la logique de l'application.
Dans une perspective MVC (Model View Controller):
 Le fichier FXML, contenant la description de l'interface utilisateur, est la vue.
 Le contrôleur est une classe Java, implémentant éventuellement la classe
Initializable, qui est déclarée en tant que contrôleur pour le fichier FXML.
 Le modèle se compose d'objets de domaine, définis du côté Java, pouvant être
connectés à la vue via le contrôleur.
L’utilisation de sceneBuilder avec JavaFX seront expliqués lors de la présentation de la
démonstration avec un exemple concret.

VII. DEMONSTRATION

Cette partie est purement pratique : Il était question pour chacun de nous les apprenants de
faire travailler notre imagination et de ressortir chacun avec une interface graphique qui
illustre tout ce qui a été dit plus haut. L’image ci-dessous montre un aperçu de notre
application réalisée à partir de JavaFX et SceneBuilder. Il s’agit d’une petite interface sur sur
le devoir proposés par M ; BILONG IV sur les employés nous avons utilisés une base de
données pour stocker les informations un formulaire d’ajout d’employé ainsi qu’un tableau
pour afficher les differents employés .

17
18
VIII. RECOMMADATIONS
AVANTAGES

 API Java. Java FX est une bibliothèque Java composée de classes et d'interfaces
écrites en code Java natif. Les API sont conçues pour être une alternative conviviale
aux langages Java Virtual Machine (Java VM), tels que JRuby et Scala.
 FXML et constructeur de scène. FXML est un langage de balisage déclaratif basé
sur XML pour la construction d'une interface utilisateur d'application Java FX. Un
concepteur peut coder en FXML ou utiliser Java FX Scene Builder pour concevoir de
manière interactive l'interface utilisateur graphique (GUI). Scene Builder génère un
balisage FXML qui peut être porté sur un IDE où un développeur peut ajouter la
logique métier.
 WebView. Un composant Web qui utilise la technologie WebKitHTML pour
permettre d'intégrer des pages Web dans une application Java FX. JavaScript
s'exécutant dans WebView peut appeler des API Java, et les API Java peuvent appeler
JavaScript s'exécutant dans WebView.
 Interopérabilité de la balançoire. Les applications Swing existantes peuvent être
mises à jour avec de nouvelles fonctionnalités Java FX, telles que la lecture de médias
graphiques riches et le contenu Web intégré.

19
  Contrôles d'interface utilisateur intégrés et CSS. Java FX fournit tous les
principaux contrôles d'interface utilisateur nécessaires pour développer une application
complète. Les composants peuvent être skinnés avec des technologies Web standard
telles que CSS
 API de canevas. L'API Canvas permet de dessiner directement dans une zone de la
scène Java FX constituée d'un élément graphique (nœud).
 Prise en charge multipoint. Java FX prend en charge les opérations multitouch, en
fonction des capacités de la plate-forme sous-jacente.
 Pipeline graphique accéléré par le matériel. Les graphiques Java FX sont basés sur
le pipeline de rendu graphique (Prism). Java FX offre des graphismes fluides qui
s'affichent rapidement via Prism lorsqu'il est utilisé avec une carte graphique ou une
unité de traitement graphique (GPU) prise en charge. Si un système ne comporte pas
l'un des GPU recommandés pris en charge par Java FX, Prism utilise par défaut la pile
logicielle Java 2D.
 Moteur multimédia hautes performances. Le pipeline multimédia prend en charge
la lecture de contenu multimédia Web. Il fournit un cadre multimédia stable et à faible
latence basé sur le cadre multimédia GStreamer.
 Modèle de déploiement d'applications autonome. Les packages d'application
autonomes disposent de toutes les ressources d'application et d'une copie privée des
runtimes Java et Java FX. Ils sont distribués sous forme de packages installables natifs
et offrent la même expérience d'installation et de lancement que les applications
natives pour ce système d'exploitation. Voir le document Déploiement d'applications
Java FX.

IX. CONCLUSION
Parvenus au terme de ce devoir, il est important de rappeler que nous travaillions sur Java Fx.
Il en ressort donc clairement que Java Fx qui est rendu à sa version 8.0 est le meilleur
Framework de Java pour les interfaces graphiques. Nous avons également présenté une brève
historique de Java Fx ainsi que quelques recommandations pour son utilisation. Le tout avec
une belle demonstration appuyée avec SceneBuilder. Enfin, nous sortons avec cette belle
citation de Chris Oliver: "When it comes to integrating people into business processes, you
need graphical user interfaces for them to interact with, so there was a use case for graphics in
the enterprise application space, and there was an interest at SeeBeyond in having richer user
interfaces."

20
X. BIBLIOGRAPHIE

 https://docs.oracle.com/javafx/2/overview/jfxpub-overview.htm#:~:text=JavaFX%20is
%20a%20set%20of,operate%20consistently%20across%20diverse%20platforms.
Consulté le 20 Mars 2022
 ihm1_fx_03_man.pdf
 https://oracle-patches.com/en/coding/what-is-javafx#:~:text=History%20of
%20JavaFX,2D%20graphics%2C%20and%20Swing%20components. Consulté le 20
Mars 2022
 https://www.oreilly.com/library/view/javafx-essentials/9781784398026/ch01s03.html
consulté le 20 Mars 2022
 https://openjfx.io/ consulté le 20 Mars 2022
 https://www.tutorialspoint.com/javafx/javafx_overview.htm consulté le 20 Mars 2022
 https://camposha.info/javafx-examples/javafx-a-brief-history-and-first-project/
consulté le 20 Mars 2022
 https://subscription.packtpub.com/book/web-development/9781784398026/1/
ch01lvl1sec10/javafx-history consulté le 20 Mars 2022
 https://what-when-how.com/javafx-2/a-brief-history-of-javafx-getting-a-jump-start-in-
javafx/ consulté le 20 Mars 2022
 https://openjfx.io/openjfx-docs/ consulté le 21 Mars 2022.

21