Introduction controls et layout Hello World CSS FXML Animation Dessin
GUI avec JavaFX 8+
Cours Java - F. Michel
1 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Plan
1 Introduction
2 Principaux composants : controls et layout
3 Hello World version JavaFX
4 Styles avec CSS
5 FXML
6 Animation et effets visuels
7 Dessins personnalisés
Cours Java - F. Michel
2 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
JavaFX en quelques points-clés
Pour faire quoi ?
Desktop applications
RIAs (Rich Internet Applications)
Philosophie
C’est une API Java ⇒ peut utiliser toute API Java
Sépare apparence/style et code métier ⇒ FXML + Java
Disponibilité
Intégrée aux JDKs 8 à 10. Module indépendant depuis Java 11
APIs séparées JavaFX 8 API JavaFX 17 API
Cours Java - F. Michel
4 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Principales caractéristiques de JavaFX
Basée sur des librairies éprouvées
Multimédia : utilise le framework GStreamer
WebView : basé sur WebKitHTML ⇒ JS, HTML 5, etc.
Rendu graphique : moteur PRISM (fonctions GPU avancées)
Cours Java - F. Michel
5 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Principales caractéristiques de JavaFX
Facilités
single JavaFX application thread approach
Nombreux composants d’UI + CSS optionnel pour le style
MVC simplifié (observable lists and maps)
3D natif (contrairement à Swing)
Canvas API (≈ Swing) : fonctions de dessin
Printing / Hi-DPI / Rich text / Multitouch / déploiement autonome
Interopérable avec Swing
Disponibilité d’un outil WYSIWYG : Scene Builder plus d’information
Cours Java - F. Michel
6 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Architecture JavaFX
Scene Graph : arbre de noeuds représentant la hiérarchie des
éléments visuels
Cours Java - F. Michel
7 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Exemples de [Link]
plus d’information
Cours Java - F. Michel
9 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Exemples de [Link]
Gestionnaires de mise en page des noeuds
BorderPane : top, bottom, right, left, or center region.
HBox arranges nodes horizontally in a single row.
VBox arranges nodes vertically in a single column.
StackPane : nodes in a back-to-front single stack.
GridPane : grid of rows and columns in which to lay out nodes.
FlowPane : nodes in either a horizontal or vertical ”flow,” using
specified boundaries.
TilePane : nodes in uniformly sized layout cells or tiles
AnchorPane : create anchor nodes to the top, bottom, left side,
or center of the layout.
plus d’information
Cours Java - F. Michel
10 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Code source pour Hello World
[Link]
p u b l i c c l a s s HelloWorldFX extends j a v a f x . a p p l i c a t i o n . A p p l i c a t i o n {
@Override
p u b l i c v o i d s t a r t ( Stage primaryStage ) { / / main e n t r y p o i n t
B u t t o n b t n = new B u t t o n ( ) ;
b t n . s e t T e x t ( " Say ’ H e l l o World ’ " ) ;
b t n . setOnAction ( new EventHandler < ActionEvent > ( ) {
@Override
p u b l i c v o i d handle ( A c t i o n E v e n t event ) {
System . o u t . p r i n t l n ( " H e l l o World ! " ) ;
}
});
StackPane r o o t = new StackPane ( ) ; / / r o o t node , r e s i z a b l e w r t . t h e scene
r o o t . g e t C h i l d r e n ( ) . add ( b t n ) ;
Scene scene = new Scene ( r o o t , 300 , 2 5 0 ) ; / / c o n t a i n e r f o r a l l c o n t e n t ( window )
primaryStage . s e t T i t l e ( " H e l l o World ! " ) ;
primaryStage . setScene ( scene ) ;
primaryStage . show ( ) ;
}
/ / n o t n e c e s s a r i l y r e q u i r e d , i . e . i f t h e app i s c r e a t e d by t h e JavaFX Packager t o o l
p u b l i c s t a t i c v o i d main ( S t r i n g [ ] args ) {
launch ( args ) ;
}
}
Cours Java - F. Michel
12 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Scene graph pour Hello World
plus d’information
Cours Java - F. Michel
13 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Un formulaire
[Link]
p u b l i c v o i d s t a r t ( Stage primaryStage ) {
primaryStage . s e t T i t l e ( " JavaFX Welcome " ) ;
GridPane g r i d = new GridPane ( ) ; g r i d . s e t A l i g n m e n t ( Pos .CENTER ) ;
g r i d . setHgap ( 1 0 ) ; g r i d . setVgap ( 1 0 ) ; g r i d . setPadding ( new I n s e t s ( 2 5 , 25 , 25 , 2 5 ) ) ;
Text s c e n e t i t l e = new Text ( " Welcome " ) ;
s c e n e t i t l e . s e t F o n t ( Font . f o n t ( " Tahoma " , FontWeight .NORMAL, 2 0 ) ) ;
g r i d . add ( s c e n e t i t l e , 0 , 0 , 2 , 1 ) ;
Label userName = new Label ( " User Name : " ) ; g r i d . add ( userName , 0 , 1 ) ;
T e x t F i e l d u s e r T e x t F i e l d = new T e x t F i e l d ( ) ; g r i d . add ( u s e r T e x t F i e l d , 1 , 1 ) ;
Label pw = new Label ( " Password : " ) ; g r i d . add ( pw , 0 , 2 ) ;
PasswordField pwBox = new PasswordField ( ) ; g r i d . add ( pwBox , 1 , 2 ) ;
B u t t o n b t n = new B u t t o n ( " Sign i n " ) ; HBox hbBtn = new HBox ( 1 0 ) ;
hbBtn . s e t A l i g n m e n t ( Pos . BOTTOM_RIGHT ) ;
hbBtn . g e t C h i l d r e n ( ) . add ( b t n ) ; g r i d . add ( hbBtn , 1 , 4 ) ;
f i n a l Text a c t i o n t a r g e t = new Text ( ) ;
g r i d . add ( a c t i o n t a r g e t , 1 , 6 ) ;
b t n . setOnAction ( new EventHandler < ActionEvent > ( ) {
@Override
p u b l i c v o i d handle ( A c t i o n E v e n t e ) {
a c t i o n t a r g e t . s e t F i l l ( C o l o r . FIREBRICK ) ;
a c t i o n t a r g e t . s e t T e x t ( " Sign i n b u t t o n pressed " ) ;
}
});
Scene scene = new Scene ( g r i d , 300 , 2 7 5 ) ;
primaryStage . setScene ( scene ) ; primaryStage . show ( ) ;
}
Cours Java - F. Michel
14 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Rendu
plus d’information
Cours Java - F. Michel
15 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Styles avec CSS
Principes
La décoration d’une scene sera définie par un fichier CSS
⇒ enlève les lignes de mise en forme du code Java
Ajout d’un style à une scene
[Link]()
.add([Link]("[Link]")
.toExternalForm());
plus d’information
Cours Java - F. Michel
17 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Définition de styles globaux pour la scene
[Link] affecte tous ces composants
. root {
− f x −background −image : u r l ( " background . j p g " ) ;
}
. label {
− f x − f o n t − s i z e : 12px ;
−fx −font −weight : bold ;
− f x − t e x t − f i l l : #333333;
− f x − e f f e c t : dropshadow ( gaussian , rgba ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) , 0 , 0 , 0 , 1 ) ;
}
. button {
−fx − text − f i l l : white ;
− f x − f o n t − f a m i l y : " A r i a l Narrow " ;
−fx −font −weight : bold ;
− f x −background − c o l o r : l i n e a r − g r a d i e n t (#61 a2b1 , #2A5058 ) ;
− f x − e f f e c t : dropshadow ( t h r e e −pass −box , rgba ( 0 , 0 , 0 , 0 . 6 ) , 5 , 0 . 0 , 0 , 1 ) ;
}
. b u t t o n : hover {
− f x −background − c o l o r : l i n e a r − g r a d i e n t (#2 A5058 , #61a2b1 ) ;
}
Cours Java - F. Michel
18 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Styles pour des composants identifiés
[Link] : définition des id des composants
. . .
s c e n e t i t l e . s e t I d ( " welcome− t e x t " ) ;
. . .
actiontarget . setId ( " actiontarget " ) ;
[Link] styles des composants identifiés
/ * i d du composant * /
#welcome− t e x t {
− f x − f o n t − s i z e : 32px ;
− f x − f o n t − f a m i l y : " A r i a l Black " ;
− f x − f i l l : #818181;
− f x − e f f e c t : innershadow ( t h r e e −pass −box , rgba ( 0 , 0 , 0 , 0 . 7 ) , 6 , 0 . 0 , 0 , 2 ) ;
}
/ * i d du composant * /
#actiontarget {
− f x − f i l l : FIREBRICK ;
−fx −font −weight : bold ;
− f x − e f f e c t : dropshadow ( gaussian , rgba ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 5 ) , 0 , 0 , 0 , 1 ) ;
}
Cours Java - F. Michel
19 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Rendu
plus d’information
Cours Java - F. Michel
20 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Création d’UI avec FXML
Principes
L’ensemble des composants d’une scene sera défini en FXML
⇒ enlève les éléments d’UI du code Java
Chargement du graphe de composants de la scene
Parent root = [Link](
getClass().getResource("fxml_example.fxml") );
Scene scene = new Scene(root, 300, 275);
plus d’information
Cours Java - F. Michel
22 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Définition de la scene en FXML 1/3
fxml_example.fxml en-tête et import
<?xml v e r s i o n = " 1 . 0 " encoding= "UTF−8 " ?>
<? i m p o r t java . net .*? >
<? i m p o r t j a v a f x . geometry . * ? >
<? i m p o r t j a v a f x . scene . c o n t r o l . * ? >
<? i m p o r t j a v a f x . scene . l a y o u t . * ? >
<? i m p o r t j a v a f x . scene . t e x t . * ? >
Cours Java - F. Michel
23 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Définition de la scene en FXML 2/3
fxml_example.fxml définition de la scene
<GridPane f x : c o n t r o l l e r = " f x m l . FXMLExampleController "
xmlns : f x = " h t t p : / / j a v a f x . com / f x m l " a l i g n m e n t = " c e n t e r " hgap= " 10 " vgap= " 10 " >
<padding >< I n s e t s t o p = " 25 " r i g h t = " 25 " bottom= " 10 " l e f t = " 25 " / > </ padding >
<Text t e x t = " Welcome "
GridPane . columnIndex= " 0 " GridPane . rowIndex= " 0 "
GridPane . columnSpan= " 2 " / >
<Label t e x t = " User Name : "
GridPane . columnIndex= " 0 " GridPane . rowIndex= " 1 " / >
<TextField
GridPane . columnIndex= " 1 " GridPane . rowIndex= " 1 " / >
<Label t e x t = " Password : "
GridPane . columnIndex= " 0 " GridPane . rowIndex= " 2 " / >
<PasswordField f x : i d = " passwordField "
GridPane . columnIndex= " 1 " GridPane . rowIndex= " 2 " / >
. . .
Cours Java - F. Michel
24 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Définition de la scene en FXML 3/3
fxml_example.fxml définition de la scene
. . .
<HBox spacing = " 10 " a l i g n m e n t = " b o t t o m _ r i g h t "
GridPane . columnIndex= " 1 " GridPane . rowIndex= " 4 " >
< B u t t o n t e x t = " Sign I n "
o n A c t i o n = " # h a n d l e S u b m i t B u t t o n A c t i o n " / > / / t r i g g e r c o n t r o l l e r ’ s method
</HBox>
<Text
fx : id=" actiontarget "
GridPane . columnIndex= " 0 "
GridPane . columnSpan= " 2 "
GridPane . h a li g n m e nt = " RIGHT "
GridPane . rowIndex= " 6 " / >
</ GridPane >
Cours Java - F. Michel
25 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Définition du contrôleur pour les
événements
[Link]
i m p o r t j a v a f x . event . A c t i o n E v e n t ;
i m p o r t j a v a f x . f x m l . FXML ;
i m p o r t j a v a f x . scene . t e x t . Text ;
p u b l i c c l a s s FXMLExampleController {
/ / a n n o t a t i o n used t o t a g n o n p u b l i c member f i e l d s and h a n d l e r methods
/ / f o r use by FXML markup
@FXML
p r i v a t e Text a c t i o n t a r g e t ;
@FXML
p r o t e c t e d v o i d h a n d l e S u b m i t B u t t o n A c t i o n ( A c t i o n E v e n t event ) {
a c t i o n t a r g e t . s e t T e x t ( " Sign i n b u t t o n pressed " ) ;
}
Cours Java - F. Michel
26 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Chargement du graphe de composants de la
scene
[Link]
p u b l i c c l a s s FXMLExample extends A p p l i c a t i o n {
@Override
p u b l i c v o i d s t a r t ( Stage stage ) throws E x c e p ti o n {
Parent r o o t = FXMLLoader . l o a d ( g e t C l a s s ( ) . getResource ( " fxml_example . f x m l " ) ) ;
Scene scene = new Scene ( r o o t , 300 , 2 7 5 ) ;
stage . s e t T i t l e ( "FXML Welcome " ) ;
stage . setScene ( scene ) ;
stage . show ( ) ;
}
p u b l i c s t a t i c v o i d main ( S t r i n g [ ] args ) {
launch ( args ) ;
}
}
Cours Java - F. Michel
27 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Rendu : il manque la CSS
Cours Java - F. Michel
28 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Ajout de la CSS dans le FXML
fxml_example.fxml : style / id / css loading
. . .
<GridPane f x : c o n t r o l l e r = " fxmlexample . FXMLExampleController "
xmlns : f x = " h t t p : / / j a v a f x . com / f x m l " a l i g n m e n t = " c e n t e r " hgap= " 10 " vgap= " 10 "
styleClass=" root ">
. . .
<Text i d = " welcome− t e x t " t e x t = " Welcome "
GridPane . columnIndex= " 0 " GridPane . rowIndex= " 0 "
GridPane . columnSpan= " 2 " / >
. . .
<stylesheets >
<URL v a l u e = " @Login . css " / >
</ s t y l e s h e e t s >
/ * The @ symbol b e f o r e t h e name o f t h e s t y l e sheet i n t h e URL
i n d i c a t e s t h a t t h e s t y l e sheet i s i n t h e same d i r e c t o r y as t h e FXML f i l e . * /
</ GridPane >
Cours Java - F. Michel
29 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Rendu
Cours Java - F. Michel
30 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
JavaFX Scene Builder
Cours Java - F. Michel
31 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
L’application Colorful Circles
[Link]
Cours Java - F. Michel
33 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Graphe de l’application Colorful Circles
Cours Java - F. Michel
34 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Animation avec KeyFrame et KeyValue
Extrait de start() de [Link]
T i m e l i n e t i m e l i n e = new T i m e l i n e ( ) ;
f o r ( Node c i r c l e : c i r c l e s . g e t C h i l d r e n ( ) ) {
t i m e l i n e . getKeyFrames ( ) . a d d A l l (
new KeyFrame ( D u r a t i o n .ZERO, / / s e t s t a r t p o s i t i o n a t 0
new KeyValue ( c i r c l e . t r a n s l a t e X P r o p e r t y ( ) , random ( ) * 800) ,
new KeyValue ( c i r c l e . t r a n s l a t e Y P r o p e r t y ( ) , random ( ) * 600)
),
new KeyFrame ( new D u r a t i o n ( 4 0 0 0 0 ) , / / s e t end p o s i t i o n a t 40s
new KeyValue ( c i r c l e . t r a n s l a t e X P r o p e r t y ( ) , random ( ) * 800) ,
new KeyValue ( c i r c l e . t r a n s l a t e Y P r o p e r t y ( ) , random ( ) * 600)
)
);
}
/ / p l a y 40s o f a n i m a t i o n
t i m e l i n e . play ( ) ;
Cours Java - F. Michel
35 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Dessins personnalisés
[Link]
Noeud correspondant à une "feuille blanche" pour le dessin :
Canvas c = new Canvas();
[Link](512);
[Link](512);
GraphicsContext gc = c.getGraphicsContext2D();
[Link]
Objet "pinceau", utilisé pour dessiner, e.g. sur un Canvas
[Link]([Link]("ff0000"));//remplissage
[Link](100, 100, 200, 200);
[Link]([Link]("0000ff"));//ligne
[Link](200, 200, 200, 200);
Cours Java - F. Michel
37 / 38
Introduction controls et layout Hello World CSS FXML Animation Dessin
Aller plus loin
Tuto et exemples de code
JavaFX ensemble 8 : 100 exemples de projets illustratifs Jakob Jenkov’s JavaFX Tutorial
20 exemples d’applications professionnelles réalisées avec JavaFx
Quelques librairies et outils additionnels
Plus de controls et de fonctionnalités : ControlsFX JFXtras
SceneBuilder : Gluon
Liste exhaustive de ressources
Awesome JavaFX
Ce cours est basé sur le tutoriel JavaFX par Oracle :
Oracle JavaFX Tutorial
Cours Java - F. Michel
38 / 38
