Introduction à JavaFX
JavaFX est une technologie créée par Sun Microsystems qui appartient désormais à Oracle.
Avec l'apparition de Java 8 en mars 2014, JavaFX devient la bibliothèque de création
d'interface graphique officielle du langage Java, pour toutes les sortes d'application
(applications mobiles, applications sur poste de travail, applications Web), le développement
de son prédécesseur Swing étant abandonné (sauf pour les corrections de bogues).
JavaFX contient des outils très divers, notamment pour les médias audio et vidéo, le
graphisme 2D et 3D, la programmation Web, la programmation multi-fils etc.
Le SDK de JavaFX étant désormais intégré au JDK standard Java SE,
Main
Le point d'entrée pour les applications JavaFX est la classe Application. JavaFX exécute dans
l'ordre, chaque fois qu'une application est lancée, les actions suivantes :
Construit une instance de la classe Application spécifiée
Appelle la méthode init ()
Appelle la méthode start ([Link])
Attend l'achèvement de l'application,
Appelle la méthode stop ()
Notez que la méthode de démarrage (start) est abstraite et doit être surchargée. Les méthodes
d'initialisation (init) et d'arrêt (stop) ont des implémentations concrètes qui ne font rien.
L’exécution du code suivant montre que l’exécution de la méthode init n’est pas faite par le
même fil d’exécution (thread) que l’appel au constructeur par défaut et l’exécution de la
méthode start.
public class MainJavaFX extends Application {
private Button button;
private StackPane root;
private Scene scene;
public MainJavaFX() {
[Link]([Link]().getName());
[Link](" appelle le constructeur de la Classe MainJavaFX");
button = new Button("Salut le monde !");
[Link](new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
[Link]("Hello World!");
}} );
// Nœud racine.
root = new StackPane();
[Link]().setAll(button);
// Configuration de la scène.
scene = new Scene(root);
}
Introduction à JavaFX – version V1 1
@Override
public void init() throws Exception {
[Link]();
// Faire des initialisations ici.
[Link]([Link]().getName());
[Link]("execute la méthode init de la classe MainJavaFX");
}
@Override
public void start(Stage primaryStage) {
[Link]([Link]().getName());
[Link](" execute la méthode start de la classe MainJavaFX");
// Configuration de la fenêtre.
[Link](scene);
[Link]("Ma première application");
[Link](350);
[Link](300);
[Link]();
}
public static void main(String[] args) { launch(args); }
}
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.
Extrait de la page [Link] qui contient
des exemples et informations sur les layouts de JavaFX.
Les layout fonctionnent donc de manière similaire aux layouts de AWT/Swing à ceci près
qu'il ne s'agit pas ici de classes utilitaires, mais d'instances de la classe Region qui sont
directement placées dans la scène. Un gestionnaire est un nœud graphique et peut donc être
positionné et manipulé, ou subir des transformations et effets comme n'importe quel autre
nœud de SceneGraph.
Les différences importantes entre Panel (panneau) et Group (groupe) sont :
• Un panneau peut avoir sa propre taille et être redimensionnable, par contre un groupe prend
les limites collectives de ses enfants et n'est pas directement redimensionnable.
• Le panneau doit être utilisé lorsque vous souhaitez positionner ses noeuds en position
absolue.
Un layout (organisation) est une classe de l’API Graphique permettant d’organiser les objets
graphiques dans la fenêtre. En JavaFX, il existe huit types de layouts :
1. Le BorderPane qui vous permet de diviser une zone graphique en cinq parties : top,
down, right, left et center.
2. La Hbox qui vous permet d'aligner horizontalement vos éléments graphiques.
3. La VBox qui vous permet d'aligner verticalement vos éléments graphiques.
4. Le StackPane qui vous permet de ranger vos éléments de façon à ce que chaque nouvel
élément inséré apparaisse au-dessus de tous les autres.
5. Le GridPane permet de créer une grille d'éléments organisés en lignes et en colonnes
Introduction à JavaFX – version V1 2
6. Le 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.
7. Le TilePane est similaire au FlowPane, chacune de ses cellules fait la même taille.
8. L'AnchorPane permet de fixer un élément graphique par rapport à un des bords de la
fenêtre : top, bottom, right et left.
Les évènements – source : documentation oracle
Dans les applications JavaFX, les événements signifient que quelque chose s'est produit : un
utilisateur a cliqué sur un bouton, appuie sur une touche, déplace une souris ou effectue
d'autres actions, …
Dans JavaFX, un événement est une instance de la classe [Link] ou de toute
sous-classe d'Event.
JavaFX fournit plusieurs sous-classe d'Event, notamment DragEvent, KeyEvent,
MouseEvent, ScrollEvent et d'autres.
Vous pouvez définir votre propre sous-classe d'Event en étendant la classe Event.
Chaque événement inclut les informations suivantes : Event Type, Source and Target.
La hiérarchie des évènements :
Le type d'événement de niveau supérieur dans la hiérarchie est [Link], qui est
équivalent à [Link].
Dans les sous-types, le type d'événement ANY est utilisé pour désigner n'importe quel type
d'événement dans la classe d'événements. Par exemple, pour fournir la même réponse à
n'importe quel type d'événement de type « touche », utilisez [Link] comme type
d'événement pour le filtre d'événements ou le gestionnaire d'événements.
Pour répondre uniquement lorsque la touche est libérée, utilisez le type d'événement
KeyEvent.KEY_RELEASED pour le filtre ou le gestionnaire
Introduction à JavaFX – version V1 3
Les gestionnaires d'événements (EventHandler) vous permettent de gérer les événements.
Un nœud peut avoir un ou plusieurs gestionnaires pour gérer un événement.
Un seul gestionnaire peut être utilisé pour plusieurs nœuds et plusieurs types d'événements.
Enregistrement d'un gestionnaire d'événements
Pour traiter un événement, un nœud doit enregistrer un gestionnaire d'événements. Un
gestionnaire d'événements est une implémentation de l'interface EventHandler. La méthode
handle () de cette interface fournit le code qui est exécuté lorsque l'événement associé au
gestionnaire est reçu par le noeud qui a enregistré le gestionnaire.
Pour enregistrer un gestionnaire, utilisez la méthode addEventHandler de la classe
[Link]. Cette méthode prend le type d'événement et le gestionnaire comme
arguments :
public final <T extends Event> void addEventHandler(EventType<T> eventType,
EventHandler<? super T> eventHandler).
// Register the same handler for two different nodes
[Link](DragEvent.DRAG_EXITED, handler);
[Link](DragEvent.DRAG_EXITED, handler);
// Register the handler for another event type
[Link](MouseEvent.MOUSE_DRAGGED, handler);
La méthode pratique d'enregistrement d'un seul gestionnaire de type « ActionEvent » est:
setOnAction(EventHandler<ActionEvent> value).
Introduction à JavaFX – version V1 4
Correction de l’exercice « Beep » du cours d’Arnaud Pêcher en utilisant API JavaFX
/*
* Prof. Janice T. Searleman, University of clarkson
* modified by C. Johnen
*/
public class Beeper extends Application implements EventHandler<ActionEvent> {
StackPane root ;
public Beeper() { root = new StackPane(); }
@Override
public void start(Stage primaryStage) {
[Link]("Beeper - Johnen");
Scene scene = new Scene(root,200,100);
[Link](scene);
[Link](); }
@Override
public void handle(ActionEvent e) {
//[Link]().beep();
[Link]("Aie!!!"); }
@Override
public void init(){
Button btn = new Button("Ding!");
[Link]("-fx-font: 42 arial; -fx-base: #b6e7c9;");
// handle the button clicked event
[Link](this);
[Link]().add(btn);
}
public static void main(String[] args) {launch(args);}
}
Introduction à JavaFX – version V1 5
Correction de l’exercice « KeyAdapter » du cours d’Arnaud Pêcher en utilisant API
JavaFX
public class KeyAdapter extends Application implements EventHandler<KeyEvent> {
Rectangle r;
Group root;
public KeyAdapter() {
r = new Rectangle();
root = new Group();
[Link](50); [Link](50);
[Link](10); [Link](10);
[Link]([Link]);
[Link]().add(r);
}
@Override
public void start(Stage primaryStage) throws Exception {
[Link]("KeyAdapter - Johnen");
Scene scene = new Scene(root,200,100);
[Link](this);
[Link](scene);
[Link](); }
@Override
public void handle(KeyEvent event) {
[Link]("Handle keypress "+[Link]());
switch ([Link]()) {
case UP: [Link]([Link]()-10); break;
case DOWN: [Link]([Link]()+10); break;
case LEFT: [Link]([Link]()-10); break;
case RIGHT: [Link]([Link]()+10); break;
case P: [Link]([Link]()-10); break;
case N: [Link]([Link]()+10); break;
case B: [Link]([Link]()-10); break;
case F: [Link]([Link]()+10); break;
default: break;
} }
public static void main(String[] args) { launch(args);}
}
Introduction à JavaFX – version V1 6
Correction de l’exercice « Ellipse » du cours d’Arnaud Pêcher en utilisant JavaFX
public class MainEllipse extends Application {
private Ellipse ellipse;
public static void main(String[] args) { launch(args); }
public void FenetreVide(Stage stage,String titre, int hauteur, int largeur)
{ [Link](largeur); [Link](hauteur);
[Link](titre); }
public HBox creerLigneBoutton() {
HBox hbox = new HBox(10);
[Link]("-fx-background-color: BEIGE;");
[Link]([Link]);
Button buttonPlus = new Button("BLUE");
[Link](50, 10);
[Link](new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
[Link]([Link]); }});
Button buttonMoins = new Button("RED");
[Link](50, 10);
[Link](new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
[Link]([Link]);
}});
[Link]().addAll(buttonPlus, buttonMoins);
return hbox;
}
public BorderPane creerContenu (){
BorderPane border = new BorderPane();
[Link](creerLigneBoutton());
ellipse = new Ellipse( 50,50, 10, 40);
[Link]([Link]);
[Link](ellipse);
return border;
}
Introduction à JavaFX – version V1 7
public void layout(Stage stage) {
FenetreVide(stage, "Ellipse - Johnen",100,270);
BorderPane border = creerContenu();
Scene scene = new Scene(border);
[Link](scene);
[Link](); }
@Override
public void start(Stage stage){ layout(stage); }
Plusieurs écouteurs sur le même bouton
Usage de la classe GridPane avec deux colonnes de la même taille.
Exemple d’usage de la méthode setStyle.
Deux actions sont réalisées lorsque l’on clique sur l’un des boutons ; lequel ?
public class MultiEcoute extends Application implements EventHandler<ActionEvent>
{
private Button aButton, bButton;
private TextArea righTextArea, leftTextArea;
private Label rightLabel, leftLabel;
Introduction à JavaFX – version V1 8
public MultiEcoute() {
aButton = new Button("bonjour Alice"); [Link](this);
[Link]("-fx-font: 14 arial; -fx-border-color: burlywood;
-fx-border-width: 5px; -fx-text-fill: #0000ff");
bButton = new Button("bonjour Bob"); [Link](this);
[Link]("-fx-font: 14 arial; -fx-border-color: burlywood;
-fx-border-width: 5px;-fx-text-fill: #0000ff");
EventHandler<ActionEvent> handler2 = new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
String st = ((Button) [Link]()).getText()+"\n";
[Link](st); }};
[Link]([Link], handler2);
righTextArea = new TextArea(); [Link](200);
[Link](10); [Link](false);
leftTextArea = new TextArea(); [Link](false);
rightLabel = new Label("listener hears");
[Link]("-fx-font: 16 arial;");
leftLabel = new Label("NOSY listener hears");
[Link]("-fx-font: 16 arial;-fx-text-fill: red;
-fx-font-weight: bold;");
}
@Override
public void handle(ActionEvent ev) {
String st = ((Button) [Link]()).getText()+"\n";
[Link](st); }
public Pane miseEnplace() {
GridPane pane = new GridPane();
ColumnConstraints col1 = new ColumnConstraints(); [Link](50);
ColumnConstraints col2 = new ColumnConstraints(); [Link](50);
[Link]().addAll(col1,col2);
[Link](10);
[Link](rightLabel, 0, 0); [Link](righTextArea, 0,1);
[Link](leftLabel, 1, 0); [Link](leftTextArea, 1,1);
[Link](aButton, 0, 2); [Link](bButton, 1, 2);
return pane; }
@Override
public void start(Stage stage) throws Exception {
[Link](400); [Link](350);
[Link]("Multiplexeur Johnen");
Pane pane = miseEnplace();
Scene scene = new Scene(pane);
[Link](scene);
[Link](); }
public static void main(String[] args) { launch(args); }
Introduction à JavaFX – version V1 9
Questions :
1. Ajouter un intervenant supplémentaire « Claude » (une colonne) ; les trois colonnes
doivent s’ajuster à la largeur de la fenêtre ;
2. La colonne « Alice » doit être deux fois plus large que la colonne « Bob » et que celle
de « Claude » ;
3. Modifier le style des labels (font, couleur, gras, … ) ;
4. Modifier la couleur du fond de rightTextAera.
Introduction à JavaFX – version V1 10
Propriétés en JavaFX et le patron de conception « Observable/Observer »
L’API Observer/Observable de Java est incompatible avec JavaFX.
La solution est d’utiliser les « propriétés » avec les interfaces ObservableValue<T> et
ChangeListener<T>.
public class Personn {
private final IntegerProperty age = new SimpleIntegerProperty(0);
public Personn () { }
public final int getAge() { return [Link](); }
public final void setAge(int value) { [Link](value); }
// Accès à la propriété.
public final IntegerProperty ageProperty() { return age; }
public void addListenerAge(ChangeListener<Number> cl) {[Link](cl);}
}
public class Main {
public static void main(String[] args) {
Personn prs = new Personn();
// Adding a change listener with anonymous inner class
[Link](new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> arg0,
Number oldVal, Number newVal) {
[Link]("\n old age: "+oldVal);
[Link](" new age: "+newVal);
} });
// Adding a change listener with anonymous inner class
[Link](new ChangeListener<Number>() {
@Override
public void changed(ObservableValue<? extends Number> arg0,
Number oldVal, Number newVal) {
if ((Integer)newVal < 18)
[Link]("tu es mineur, tu as "+newVal+" ans");
if ((Integer)newVal > 65)
[Link]("tu es vieux, tu as "+newVal+" ans");
} });
[Link](9) ; [Link](25) ; [Link](67) ;
}
}
XXXProperty implements ObservableValue<Number>
[Link] - permet de stocker des valeurs booléennes ;
[Link] - permet de stocker des valeurs entières ;
[Link] - permet de stocker des valeurs entières longues ;
[Link] - permet de stocker des valeurs flottantes ;
[Link] - permet de stocker des valeurs flottantes en
précision double ;
[Link] - permet de stocker des chaines de caractères.
C. Johnen Introduction à JavaFX – version V1 11
Il n'existe pas de stockage dédié pour les « byte », « char » et « short ». Il faudra donc utiliser
des IntegerProperty ou un ObjectProperty (voir plus bas) pour stocker de telles valeurs.
Chacun de ces types dispose de classes parentes qui ne permettent que la lecture seule (ex :
ReadOnlyIntegerProperty) et de classes concrètes filles prêtes à l'emploi permettant la lecture-
écriture (ex : SimpleIntegerProperty).
<<interface>>
<<abstract>>
ObservableValue < Number>
XXXProperty
+addListener(listener : ChangeListener<? super Number>: void
+ removeListener(listener : ChangeListener<? super Number>: void
SimpleXXXProperty + getValue() : Integer
<<use>>
<<interface>>
ChangeListener <<Number>
+changed(observable : ObservableValue<? super Number>oldValue : Number, newValue : Number) : void
C. Johnen Introduction à JavaFX – version V1 12
