TP IHM

TP1 : Organisation et affichage des composants de l’interface

License 3eme année

 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).

JavaFX contient des outils très divers, notamment pour les médias audio et
vidéo, le graphisme 2D et 3D, la programmation Web, etc.

Le SDK de JavaFX étant désormais intégré au JDK standard Java SE,

JavaFX retirée du JDK Java à partir de la version 11 ( sep 2018)

https://gluonhq.com/products/javafx/
https://www.oracle.com/java/technologies/javase-jdk11-downloads.html
 Introduction à javafx
les créateurs de JavaFX ont choisi des terminologies provenant du théâtre.
 Introduction à javafx

Java FX : une pièce de théâtre

Une Application JavaFX etend la classe
`javafx.application.Application'
Elle repose sur un théâtre (`javafx.stage.Stage')
sur lequel se déroule des scènes (`javafx.scene.Scene')
qui contiennent des groupes d'acteurs (`javafx.scene.Group')
ces acteurs sont des composants (`shape')
cercle (`javafx.scene.shape.Circle')
Rectangle, Ligne, arcs de cercles, elipse, . . .
qui peuvent s'animer selon une chronologie
(`javafx.animation.Timeline')
 Introduction à javafx

Un SceneGraph (littéralement, graphe de scène) est une arborescence d'objets

graphiques, des nœuds graphiques.

Chaque nœud disposant de ses propres propriétés graphiques (couleur, forme,

position, etc.).

Stocker ainsi les éléments à afficher permet de détecter plus facilement les zones
de l’écran qui sont activées et doivent être rafraichies en cas de modification
(déplacement, changement de couleur, etc. ) d'un noeud ou d'un groupe de nœuds
 Introduction à javafx

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 (javafx.stage.Stage)
• Attend l'achèvement de l'application,
• Appelle la méthode stop ()

Seule la méthode de démarrage (start) doit être implémentée ,

Elle recoit l’objet javafx.stage.Stage qui représente la fenêtre principale de
notre application.

Les méthodes d'initialisation (init) et d'arrêt (stop) ont des implémentations

concrètes qui ne font rien.
 Introduction à javafx
import javafx.application.Application;
import javafx.stage.Stage;

public class javafxapp extends Application {

@Override
public void start(Stage arg0) throws Exception {
// TODO Auto-generated method stub
}

public static void main(String[] args){

launch(args);
}

}
La méthode static main() ( point d’entrée de toute application Java )
appelle la méthode launch() de la classe Application

Le mot clé Override est utilisé pour définir une méthode qui est héritée de
la classe parente
 Layout – Gestionnaire de la mise en page
(Gestionnaire de placement)

Un layout (organisation) est une classe de l’API Graphique permettant

d’organiser les objets graphiques dans la fenêtre

Un layout ou gestionnaire de mise en page est un noeud graphique qui hérite

de la classe javafx.scene.layout.Pane

Il s'agit d'une entité qui contient d'autres noeuds 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 noeuds et à les rendre utilisables dans
une interface graphique.
 Gestionnaires de Placement ( StackPane)

Il existe plusieurs types de pane (sous-classes de la classe pane):

1/ StackPane : Les éléments sont « empilés » les uns sur les autres
 Gestionnaires de Placement ( StackPane) Exemple
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ButtonInPane extends Application {

public void start(Stage primaryStage) {

@Override
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
pane.getChildren().add(new Button("OK"));
Scene scene = new Scene(pane, 400, 100);
primaryStage.setTitle("Button in a pane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
launch(args);
}
}
Gestionnaires de Placement ( StackPane) Exemple
 Gestionnaires de Placement ( FlowPane)
2/ FlowPane : les éléments sont placés de gauche à droite et de haut en
bas
Avec un FlowPane, les composants sont ajoutés les uns après les autres sur la même ligne
et quand il n'y a plus de place sur la ligne courante les composants sont ajoutés sur la ligne
suivante
 Gestionnaires de Placement ( FlowPane) Exemple

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class EXP3 extends Application {

@Override
public static void main(String[] args ) {

launch(args);
}
 Gestionnaires de Placement ( FlowPane) Exemple
@Override
public void start(Stage stage1) throws Exception {

FlowPane pane = new FlowPane();

pane.setPadding(new Insets(10, 10, 10, 10));
pane.setHgap(5);
pane.setVgap(5);
// Place nodes in the pane
Label lb1= new Label("First Name");
TextField t1 = new TextField();
Label lb2= new Label("Last Name");
TextField t2 = new TextField();
pane.getChildren().addAll(lb1,t1,lb2,t2);
// Create a scene and place it in the stage
Scene scene = new Scene(pane, 500, 300);
stage1.setTitle("Show FlowPane");
stage1.setScene(scene);
stage1.show();
}
}
Gestionnaires de Placement ( FlowPane) Exemple
 Gestionnaires de Placement ( TilePane)

3/ TilePane : les éléments sont alignés de gauche à droite et de haut en

bas avec des espaces égaux
 Gestionnaires de Placement ( TilePane)Exemple

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.TilePane;
import javafx.stage.Stage;

public class EXP4 extends Application {

public static void main(String[] args) {

launch(args);
}
 Gestionnaires de Placement ( TilePane)Exemple

@Override
public void start(Stage stage4) throws Exception {
TilePane root = new TilePane();
root.setPadding(new Insets(10,10,10,10));
root.setHgap(20); root.setVgap(30);
Button button = new Button("Java");
Button button1 = new Button("C/C++");
button1.setPrefSize(70, 50);
Button button2 = new Button("C#");
Button button3 = new Button("Objective C");
Button button4 = new Button("Swift");
root.getChildren().addAll(button,button1,button2,button3,button4);
Scene scene = new Scene(root, 500, 300);
stage4.setTitle("Show TilePanel Layout");
stage4.setScene(scene);

stage4.show();
}
}
Gestionnaires de Placement ( TilePane)Exemple
 Gestionnaires de Placement ( HBOX et VBOX)

4/ HBox et VBox :
A- HBox : Les éléments sont disposés dans un container horizontal de gauche à
droite
 Gestionnaires de Placement ( HBOX et VBOX)

B- Vbox : Les éléments sont disposés dans un container vertical de haut en bas
 Gestionnaires de Placement ( Exemple HBOX )
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class javafxHB extends Application{

@Override
public void start(Stage stage) throws Exception {
TextField val1=new TextField();
val1.setPrefSize(60,10);
TextField val2=new TextField();
val2.setPrefSize(60,10);
TextField val3=new TextField();
val3.setPrefSize(60,10);
TextField val4=new TextField();
val4.setPrefSize(60,10);

Label label1=new Label("Valeurs : ");

 Gestionnaires de Placement ( Exemple HBOX )

//création et initialisation du layout (root)

HBox root = new HBox();
root.setPadding(new Insets(10));
root.setSpacing(10);
root.setAlignment(Pos.CENTER);
root.getChildren().addAll(label1, val1,val2,val3,val4);
Scene scene = new Scene(root,400,100);
stage.setScene(scene);
stage.setTitle("Exemple HBOX");
stage.show();

}
public static void main(String[] args) {

launch(args);
}

}
Gestionnaires de Placement ( Exemple HBOX )
 Gestionnaires de Placement ( BorderPane)
5/ BorderPane : Les éléments sont disposés selon 4 directions et un centre.
Le conteneur est divisé en 5 zones : nord, sud, est , ouest, et le centre. Il ne
peut donc pas contenir plus de 5 composants. Les composants sont placés en
fonction de leur taille préférée et leur alignement peut être modifié avec la
méthode setAlignement(). Si aucun composant n'est associé à une zone, alors
cette zone est de taille nulle. Les composants sont séparés horizontalement et
verticalement par des espaces, qui peuvent être modifiés par la méthode
setMargin()
 Gestionnaires de Placement ( BorderPane)Exemple
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class ExpBorderPane extends Application{

@Override
public void start(Stage stage) throws Exception {

BorderPane border = new BorderPane();

Button b1 = new Button("TOP");
Button b2 = new Button("LEFT");
Button b3 = new Button("CENTER");
Button b4 = new Button("RIGHT");
Button b5 = new Button("BOTTOM");
 Gestionnaires de Placement ( BorderPane)Exemple
BorderPane.setAlignment(b1,Pos.CENTER);
border.setMargin(b1,new Insets(10, 10, 10, 10));
BorderPane.setAlignment(b2,Pos.TOP_CENTER);
border.setMargin(b2,new Insets(10, 10, 10, 10));
BorderPane.setAlignment(b3,Pos.CENTER);
border.setMargin(b3,new Insets(10, 10, 10, 10));
BorderPane.setAlignment(b4,Pos.BOTTOM_CENTER);
border.setMargin(b4,new Insets(10, 10, 10, 10));
BorderPane.setAlignment(b5,Pos.CENTER);
border.setMargin(b5,new Insets(10, 10, 10, 10));
border.setTop(b1);border.setLeft(b2);
border.setCenter(b3);border.setRight(b4);border.setBottom(b5);
Scene scene = new Scene(border,300,200);
stage.setScene(scene);
stage.setTitle("Exemple de BorderPane");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Gestionnaires de Placement ( BorderPane)Exemple
 Gestionnaires de Placement ( GridPane)

6/ GridPane : les éléments sont disposés selon une grille avec des indices (colonne,
ligne)
 Gestionnaires de Placement ( GridPane)Exemple
public class EXP5 extends Application {

@Override
public void start(Stage primaryStage) throws Exception {
// TODO Auto-generated method stub
GridPane pane = new GridPane();
pane.setAlignment(Pos.CENTER); //affiche le pane en position centree H et V dans la
scene
pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
pane.setHgap(5.5);
pane.setVgap(5.5);
// Place nodes in the pane
pane.add(new Label("First Name:"), 0, 0);
pane.add(new TextField(), 1, 0);
pane.add(new Label("MI:"), 0, 1);
pane.add(new TextField(), 1, 1);
pane.add(new Label("Last Name:"), 0, 2);
pane.add(new TextField(), 1, 2);
 Gestionnaires de Placement ( GridPane)Exemple

Button btAdd = new Button("Add Name");

pane.add(btAdd, 1, 3);
GridPane.setHalignment(btAdd, HPos.RIGHT);

// Create a scene and place it in the stage

Scene scene = new Scene(pane);
primaryStage.setTitle("ShowGridPane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage

}
public static void main(String[] args){

launch(args);
}
Gestionnaires de Placement ( GridPane)Exemple
 Autre méthode de grouper des noeuds (Group)

Utiliser un objet de type javafx.Scene.Group

JavaFX Group est un conteneur, il est un composant qui n'applique pas la

mise en page (Layout) pour ses éléments enfants. Tous les éléments
d'enfants sont été placés 0,0. Le but de Groupe est de rassembler des
contrôles et d'effectuer une certaine tâche
( Group) Exemple
( Group)Exemple
 Group(Exemple)
public class Exemple_Group extends Application{

public static void main(String[] args) {

launch(args);
}
@Override
public void start(Stage stage) throws Exception {
// définit la largeur et la hauteur de la fenêtre
// en pixels, le (0, 0) se situe en haut à gauche de la fenêtre
stage.setWidth(800);
stage.setHeight(600);
// met un titre dans la fenêtre
stage.setTitle("Joli décor!");

// la racine du sceneGraph est le root

Group root = new Group();
Scene scene = new Scene(root);
scene.setFill(Color.SKYBLUE);

// création du soleil
Circle sun = new Circle(60, Color.web("yellow", 0.8));
sun.setCenterX(600);
sun.setCenterY(100);
 Group(Exemple)
// création du sol
Rectangle ground = new Rectangle(0, 400,800,200);
ground.setFill(Color.GREEN);

// création d'un élément plus complexe, le panneau

Group sign = new Group();
sign.setTranslateX(150);
sign.setTranslateY(200);
// Attention les coordonnées sont celles du panneau, pas de la scène
Text text = new Text( 10,30,"Hello world!");
text.setFont(new Font(80));
text.setFill(Color.WHITE);
// le repère utilisé est celui du panneau
Rectangle panel = new Rectangle(0,-50, 500, 110);
panel.setFill(Color.DARKBLUE);
// composer l'élément plus complexe
sign.getChildren().add(panel);
sign.getChildren().add(text);
// ajout de tous les éléments de la scène
root.getChildren().addAll(sun,ground,sign);
stage.setScene(scene);
stage.show();
}
}
 Travail A Faire

Exercice 1
Ecrire le programme qui permet d’obtenir l’interface suivante :

Avec CSS Sans CSS

 Travail A Faire

Exercice 2 : En utilisant le gestionnaire de mise en page GridPane , Ecrire le

programme qui permet d’obtenir l’interface suivante :
 Travail A Faire
Exercice 3 : Ecrire le programme qui permet d’obtenir l’interface suivante :