+
Java FX
PiDev 3A – Sprint
java
1
2
L’API JavaFX
A partir de Mars 2014, c’est l’outil
officiel de création d’interfaces
graphiques (GUI)
Création de médias : audio et
vidéos
Création des animations 2D/3D
+
+ 3
MVC : Model View Controller
Model: La structure logique des
données
View: Les interfaces utilisateurs
contenant des éléments
graphiques
Controller: Assurer la
communication entre les Vues et
les Modèles
4
Stage VS Scene
Stage: Conteneur principal,
habituellement une fenêtre.
Scene: Conteneur des UI
+ elements, associé à un Stage.
+ GUI Java FX
5
XML Avec Java
Button btn = new Button();
<Button id="valider"
fx:id="btn” layoutX="405” [Link]("Say 'Hello World");
layoutY="274”
text="Valider”>
<font>
<Font size="14.0" />
</font>
</Button>
Dans un fichier “.java”
Dans un fichier “.fxml”
+
Hello World
Téléchargez SceneBuilder de :
[Link]
source/scene-builder/
6
+ 7
IntelliJ
NB: Vous devez télécharger la dernière version de l’IDE IntelliJ
File-> Settings -> Languages & Frameworks
Spécifiez le chemin d’installation vers le logiciel « SceneBuilder »
Ouvrez le fichier « [Link] » de votre projet.
Faites un clic droit sur le fichier et sélectionnez l'option « Generate …»
dans le menu contextuel.
+ 8
IntelliJ
- Choisissez « Dependency » dans la liste des options. Cela ouvrira
une fenêtre intitulée « Maven Artifact Search ».
- Dans l'onglet « Search For Artifact », saisissez
«[Link]:javafx-fxml» et choisissez la dernière version
disponible.
- Dans l'onglet « Search For Artifact », saisissez
«[Link]:javafx-controls» et choisissez la dernière version
disponible.
- Appuyez sur le bouton « Load Maven Changes » pour
télécharger et installer automatiquement la bibliothèque dans
votre projet.
+ 9
IntelliJ
Faites un clic droit sur le le dossier « Resources », et créez un
nouveau fichier fxml
Faites un clic droit sur le fichier fxml, et choisissez l’option « Open in
Scene Builder »
+ 10
IntelliJ
Exécution:
Ajoutez ce code dans votre fichier « [Link] »
<build>
<plugins>
<plugin>
<groupId>[Link]</groupId>
<artifactId>javafx-maven-plugin</artifactId>
<version>0.0.8</version>
<configuration>
<mainClass>[Link]</mainClass>
</configuration>
</plugin>
</plugins>
Remplacez « MainFX » par le nom de votre classe principale
</build>
Appuyez sur le bouton « Load Maven Changes » pour télécharger et installer
automatiquement la bibliothèque dans votre projet.
+ 11
IntelliJ
View -> Tool Windows -> Maven
Plugins -> javafx -> javafx:run
+ 12
Scene Builder
13
Dans le fichier .fxml :
Vous avez
cliqué
Dans le contrôleur (une classe .java) :
public class MyController {
......
@FXML
public void initialize() {
[Link](e->{
[Link](“Vous avez cliqué");
});
}}
+
Navigation
14
15
@FXML
public void naviguerVersAjout(ActionEvent event){
try {
Parent root =
[Link](getClass().getResource("/
[Link]");
[Link]().setRoot(root);
} catch (IOException ex) {
[Link]([Link]());
}
});
+
Insertion
dans la 16
+ 17
[Link](event -> {
Personne p = new Personne([Link](),
[Link]());
PersonneService ps = new PersonneService();
[Link](p);
}
+ Les alertes - Dialogs
18
Information Dialog :
Alert alert = new Alert([Link]);
[Link]("Information Dialog");
[Link]("Personne insérée avec
succés!");
[Link]();
+
TableView
ObservalbleList
19
+ Les Collections javaFX
20
ObsevableList
[i]
Observable [c]
FXCollections
Classe utilitaire :
[i]
ObservableList<E •
> observableArrayList
()
•
observableHashMa
p()
• ObservalbleList : Une liste qui permet aux
listeners de détécter les changements en temp
réel
21
TableView 22
@FXML
private TableView<Personne> personsTable;
@FXML
private TableColumn<Personne, String> NomColonne;
@FXML
private TableColumn<Personne, String> PrenomColonne;
@FXML
public void initialize() {
PersonneService ps = new PersonneService();
ObservableList<Personne> observableList =
[Link]([Link]);
[Link](observableList);
// Remplir les colonnes :
[Link](cell -> new PropertyValueFactory<>("nom"));
[Link](cell ->new
PropertyValueFactory<>("prenom");
}
+
CSS javaFX
[Link]
/jdk1.8.x/jre/lib/ext/[Link]
com/sun/javafx/scene/control/skin/modena/
23
24
Ajouter un fichier .css
Deux exemples de fichier .css :
• [Link]
• [Link]
+
Graphes
PieChart
25
26
