JavaFX & Scene Builder

(1)

JavaFX & Scene Builder

Ahcène Bounceur

(2)

JavaFX

•  Bibliothèque Graphique

•  Intégrée dans JRE et JDK

•  Permet de réaliser des interfaces graphiques évoluées :

–  Animations –  Effets

–  3D

–  Audio

–  Vidéo

(3)

JavaFX

•  JavaFX 1.0 : créée en 2008

–  Programmée en Script

•  JavaFX 2.0 : 2011

•  Programmée en Java

•  JavaFX 8.0 : depuis 2014

–  Programmée en Java

•  Swing et AWT ne seront plus mis à jours

–  Mais toujours accessibles –  [Branches mortes]

•  Utilisez JavaFX

2008 2011 2014

Script Java

JavaFX

8

(4)

Premier exemple

•  Une classe JavaFX doit hériter de la classe

Application (javafx.application.Application)

•  Forcer l’utilisation d’un Thread JavaFX

(5)

Premier exemple

import javafx.application.Application;

import javafx.stage.Stage;

public class TestFx extends Application {

@Override

public void start(Stage estrade) { }

}

(6)

Premier exemple

public class TestFx extends Application {

@Override

public void start(Stage estrade) { System.out.println("Bonjour");

}

public static void main(String [] args) { launch(args);

}

} public class TestFx {

public static void main(String [] args) { System.out.println("Bonjour");

} }

(7)

Stage Scene

Node

(8)

L’estrade : Stage

(9)

L’estrade : Stage

•  javafx.stage.Stage

•  Equivalent de Frame (AWT) ou JFrame (Swing)

•  Permet de :

–  Définir la taille de la fenêtre –  Définir le titre de la fenêtre

@Override

public void start(Stage stage) { }

(10)

La Scène : Scene

(11)

La Scène : Scene

•  javafx.scene.Scene

•  Décor où l’on placera les différents instruments,

décoration, lumières, etc.

(12)

Les nœuds : Node

(13)

Les nœuds : Node

•  javafx.scene.Node

•  Node : instruments, décoration, lumières,

musiciens, comédiens, etc.

(14)

Les nœuds : Node

•  javafx.scene.Canvas

•  javafx.scene.ImageView

•  javafx.scene.MediaView

•  javafx.scene.Parent

•  javafx.scene.Shape

•  javafx.scene.Panel

•  javafx.scene.Button

•  javafx.scene.Label

(15)

MA PREMIÈRE FENÊTRE

(16)

Ma première fenêtre

public class MonAppli extends Application {

@Override

public void start(Stage estrade) { }

public static void main(String [] args) { launch(args);

} }

(17)

MÉTHODE 1 :

PROGRAMMATION DIRECTE

(18)

Ma première fenêtre

@Override

public void start(Stage estrade) {

}

(19)

Ma première fenêtre

@Override

estrade.setTitle("Ma première fenêtre");

estrade.setWidth(600);

estrade.setHeight(400);

estrade.show();

}

(20)

Ma première fenêtre

@Override

Pane panneau = new Pane();

Button bouton = new Button("Un Bouton");

bouton.setLayoutX(255); bouton.setLayoutY(187);

panneau.getChildren().add(bouton);

estrade.show();

}

(21)

Ma première fenêtre

@Override

Scene scene = new Scene(panneau);

estrade.setScene(scene);

estrade.show();

}

(22)

Ma première fenêtre

@Override

// Action du bouton

estrade.show();

}

bouton.setOnAction(new EventHandler<ActionEvent>() {

@Override

public void handle(ActionEvent event) { System.out.println("Hello World!");

} });

Op#on 1 : Lambda Expression Stage

Node

Scene

(23)

MÉTHODE 2 : SCENE BUILDER (ACTION PAR LAMBDA

EXPRESSION)

(24)

Ma première fenêtre

@Override

FXMLLoader loader = new FXMLLoader();

loader.setLocation(MonAppli.class.getResource("fenetre.fxml"));

Pane panneau = (Pane) loader.load();

estrade.show();

}

Scene Builder

(25)

Ma première fenêtre

@Override

estrade.show();

}

Scene Builder

(26)

Ma première fenêtre

@Override

Button bouton = (Button) panneau.getChildren().get(0) ;

estrade.show();

}

Scene Builder

(27)

Ma première fenêtre

@Override

Button bouton = (Button) panneau.getChildren().get(0) ; // Action du bouton

estrade.show();

}

Scene Builder

bouton.setOnAction(new EventHandler<ActionEvent>() {

@Override

public void handle(ActionEvent event) { System.out.println("Hello World!");

} });

Op#on 1 : Lambda Expression

(28)

Ma première fenêtre

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.shape.*?>

<?import javafx.scene.control.*?>

<?import java.lang.*?>

<?import javafx.scene.layout.*?>

<Pane

maxHeight="-Infinity"

maxWidth="-Infinity"

minHeight="-Infinity"

minWidth="-Infinity"

prefHeight="400.0"

prefWidth="600.0"

xmlns="http://javafx.com/javafx/8"

xmlns:fx="http://javafx.com/fxml/1">

<children>

<Button layoutX="255.0" layoutY="187.0" mnemonicParsing="false" text="Mon Button" />

</children>

</Pane>

Scene Builder

panneau.

getChildren

().get(0) ; estrade.setWidth

(600);

estrade.setHeight

(400);

fenetre.fxml

bouton.setLayoutX

(255); bouton.setLayoutY

(187);

(29)

MÉTHODE 3 : SCENE BUILDER

(ACTION PAR RÉFÉRENCEMENT

DE MÉTHODE)

(30)

Ma première fenêtre

@Override

Button bouton = (Button) panneau.getChildren().get(0) ; bouton.setOnAction(this::afficher);

estrade.show();

}

@FXML

private void afficher(ActionEvent event) { System.out.println("Bonjour");

}

Scene Builder

(31)

MÉTHODE 4 : SCENE BUILDER

(MVC)

(32)

Ma première fenêtre

@Override

estrade.show();

}

Scene Builder

M

(33)

Ma première fenêtre

public class MonControleur {

@FXML

} }

Scene Builder

C

(34)

Ma première fenêtre

public class MonControleur implements Initializable {

@FXML

}

@Override

public void initialize(URL location, ResourceBundle resources) { }

}

C

(35)

Ma première fenêtre

@FXML

private ComboBox<String> comboBox;

@Override

public void initialize(URL location, ResourceBundle resources) { comboBox.getItems().removeAll(comboBox.getItems());

comboBox.getItems().addAll("A", "B", "C");

comboBox.getSelectionModel().select("A");

} }

C

Ini0a liser un Co mboBo x

(36)

Ma première fenêtre

@FXML

private StackPane pane;

@Override

public void initialize(URL location, ResourceBundle resources) { SwingNode sn = new SwingNode();

JButton bouton = new JButton("OK");

sn.setContent(bouton);

pane.getChildren().add(sn);

}

^Ini0a ^liser ^{un N} ^œud ^Swin C

g

(37)

Ma première fenêtre Scene Builder

V

1

2

(38)

SCENE BUILDER : EXEMPLE

(39)

1. Création du projet Java

•  Créer un projet JavaFx

•  Nommer la classe principale Somme.java

public class Somme extends Application {

@Override

public void start(Stage estrade) throws IOException { estrade.setTitle("Somme");

FXMLLoader loader = new FXMLLoader();

loader.setLocation(Somme.class.getResource("exemple.fxml"));

BorderPane panneau = (BorderPane) loader.load();

Scene scene = new Scene(panneau);

estrade.setScene(scene);

estrade.show();

}

public static void main(String[] args) { launch(args);

} }

(40)

2. Dessiner votre IHM J

(41)

2. Dessiner votre IHM J

(42)

3. Affecter les IDs

•  Affecter les IDs à tous les composants qui seront utilisés dans votre programme

•  Dans l’exemple :

–  Champ A (TextField : aTextField)

•  Pour récupérer la valeur de A

–  Champ B (TextField : bTextFiel)

•  Pour récupérer la valeur de B

–  Label Somme (Label : sommeLabel)

•  Pour afficher la somme de A+B

(43)

3. Affecter les IDs

(44)

4. Créer le contrôleur

public class SommeControleur {

@FXML

private TextField aTextField;

@FXML

private TextField bTextField;

@FXML

private Label sommeLabel;

@FXML

private void somme() {

int x = Integer.parseInt(aTextField.getText());

int y = Integer.parseInt(bTextField.getText());

int z = x + y ;

sommeLabel.setText("Somme = "+z);

} }

(45)

5. Affecter le contrôleur à l’IHM

(46)

6. Affecter les actions des boutons

(47)

7. Sauvegardez, Rafraichissez &

Exécutez

(48)

SCENE BUILDER :

L’INTERFACE

(49)

1. Menu

2. IHM (résultat) - View 5. Composants graphiques

3. Hiérarchie & Contrôleur

4. Propriétés Layout et Code

(50)

1. Le Menu

(51)

1. Le Menu

(52)

1. Le Menu

(53)

1. Le Menu

(54)

1. Le Menu

(55)

1. Le Menu

(56)

1. Le Menu

(57)

1. Le Menu

(58)

1. Le Menu

(59)

1. Le Menu

(60)

2. IHM (Résultat)

(61)

2. IHM (Résultat)

(62)

3.1 La hiérarchie

(63)

3.2 Le contrôleur (lien)

(64)

4.1. Les propriétés

•  Text :

–  Font

–  Couleur

–  Saut de ligne

–  Alignement

–  Affichage (…)

–  Soulignement

–  Interlignes

(65)

4.1. Les propriétés

•  Des propriétés spécifiques peuvent apparaître différemment selon le composant sélectionné

–  Exemple : un bouton marqué différemment des autres

(Default Button) …

(66)

4.1. Les propriétés

Content Display

Content Text Gap Gap

(67)

4.1. Les propriétés

Alignement Ac:va:on Opacité Visibilité Focus Curseur

Effets (ombre, reflets, flous, etc.)

(68)

4.1. Les propriétés

•  JavaFX CSS permet de personnaliser les

composants graphiques

(69)

4.1. Les propriétés

•  Soit en utilisant un fichier style CSS (partie Style

Class, …)

(70)

4.1. Les propriétés

•  Soit en utilisant les styles intégrés (Style)

(71)

4.1. Les propriétés

•  Soit en utilisant les styles intégrés (Style)

–  Cas d’un Label (sans style) :

–  Avec un style :

(72)

4.1. Les propriétés

•  Soit en utilisant les styles intégrés (Style)

–  Avec un style :

(73)

4.1. Les propriétés

-fx-font-size

(74)

4.1. Les propriétés

•  Extras :

(75)

4.2 Le Layout

•  Alignment

•  Margin

•  Padding

•  Spacing

•  Vgap

•  Hgap

(76)

4.2 Le Layout

•  Alignment

–  Tous les objets du layout seront alignés soit de

gauche à droit, soit de droite à gauche, soit au centre

(77)

4.2 Le Layout

•  Margin

–  Concerne les marges externes du composant

Margin du bouton (dans un HBox)

(78)

4.2 Le Layout

•  Padding

–  Concerne les marges internes du composant

Padding du bouton

(79)

4.2 Le Layout

•  Margin & Padding

Margin Padding

Hbox (layout)

(80)

4.2 Le Layout

•  Dimensions :

–  Largeur (Pref Width)

–  Longueur (Pref Height)

(81)

4.2 Le Layout

•  Position du composant dans son layout

158

79

(82)

4.2 Le Layout

•  Transformation : Il est possible modifier la

rotation (tourner) d’un composant en 2D et en 3D

Degrés

Propor8on Zoom

Transla8on

(83)

4.2 Le Layout

(84)

4.3 Code

1.  U8lisez le même nom des IDs dans le contrôleur !

2.  De préférence, meHez tous les noms dans le contrôleurs, ensuite les choisir dans Scene Builder

public class SommeControleur {

@FXML

private TextField aTextField;

@FXML

private TextField bTextField;

@FXML

private Label sommeLabel;

}

(85)

4.3 Code

•  Des parties peuvent s’afficher spécifiquement pour chaque composants

–  Main (OnAction) pour le cas d’un bouton

–  Edit et Closing pour le cas d’un TabedPane

–  …

(86)

4.3 Code

Le Drag & Drop

(87)

4.3 Code

@FXML

private void afficher(KeyEvent evt) { System.out.print(evt.getText());

}

(88)

4.3 Code

@FXML

private void afficher(MouseEvent evt) {

System.out.println(evt.getX()+" "+evt.getY());

}

(89)

4.3 Code

(90)

5. Les composants graphiques

(91)

5. Les composants graphiques

•  Label

(92)

5. Les composants graphiques

•  Pane, StackPane, BorderPane, AnchorPane,

GridPane

(93)

5. Les composants graphiques

•  TextField

(94)

5. Les composants graphiques

•  ProgressBar

(95)

5. Les composants graphiques

•  SplitPane

–  Divider Position : de 0 à 1 (%)

(96)

5. Les composants graphiques

•  ComboBox/ListBox : initialisation

@FXML

private ComboBox<String> comboBox;

@Override

} }

(97)

5. Les composants graphiques

•  ComboBox/ListBox : initialisation

@FXML

private ComboBox<ObjectModel> comboBox;

@Override

} }

(98)

Menus

•  Menu

•  Sous menu

•  Séparateur

•  Menu (radio et radio group)

•  Raccourcis

(99)

COMPLÉMENT

(100)

Boites de dialogue

Alert alert = new Alert(AlertType.INFORMATION);

alert.setTitle("Information");

alert.setHeaderText("Portes");

alert.setContentText("Verrouillage enfant activé!");

alert.showAndWait();

A par:r de JDK 8u40

(101)

Boites de dialogue

Alert alert = new Alert(AlertType.INFORMATION);

alert.setTitle("Information");

alert.setHeaderText(null);

alert.setContentText("Verrouillage enfant activé!");

alert.showAndWait();

(102)

Boites de dialogue

Alert alert = new Alert(AlertType.WARNING);

Alert alert = new Alert(AlertType.ERROR);

(103)

Boites de dialogue

Alert alert = new Alert(AlertType.CONFIRMATION);

alert.setTitle("Confirmation Dialog");

alert.setHeaderText("Look, a Confirmation Dialog");

alert.setContentText("Are you ok with this?");

Optional<ButtonType> result = alert.showAndWait();

if (result.get() == ButtonType.OK){

} else {

}

(104)

Boites de dialogue

Alert alert = new Alert(AlertType.CONFIRMATION);

alert.setTitle("Confirmation Dialog with Custom Actions");

alert.setHeaderText("Look, a Confirmation Dialog with Custom Actions");

alert.setContentText("Choose your option.");

ButtonType buttonTypeOne = new ButtonType("One");

ButtonType buttonTypeTwo = new ButtonType("Two");

ButtonType buttonTypeThree = new ButtonType("Three");

ButtonType buttonTypeCancel = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);

alert.getButtonTypes().setAll(buttonTypeOne, buttonTypeTwo, buttonTypeThree, buttonTypeCancel);

Optional<ButtonType> result = alert.showAndWait();

if (result.get() == buttonTypeOne){

// ... user chose "One"

} else if (result.get() == buttonTypeTwo) { // ... user chose "Two"

} else if (result.get() == buttonTypeThree) { // ... user chose "Three"

} else {

// ... user chose CANCEL or closed the dialog }

(105)

Boites de dialogue

TextInputDialog dialog = new TextInputDialog("walter");

dialog.setTitle("Text Input Dialog");

dialog.setHeaderText("Look, a Text Input Dialog");

dialog.setContentText("Please enter your name:");

Optional<String> result = dialog.showAndWait();

if (result.isPresent()){

System.out.println("Your name: " + result.get());

}

(106)

Tâches/Thread

Lancer un thread :

Thread th = new Thread() { @Override

public void run() { ...

} });

th.start();

(107)

Tâches/Thread

Lancer un thread :

Platform.runLater(new Runnable() {

@Override

public void run() { ...

}

});

(108)

Tâches/Thread

Lancer une tâche :

Task task = new Task<Void>() {

@Override

public Void call() { return null;

} };

new Thread(task).start();

(109)

Tâches/Thread

Lancer une tâche :

Task task = new Task<Integer>() {

@Override

public Integer call() { return 0;

} };

new Thread(task).start();

(110)

Tâches/Thread

Lancer une tâche :

Task task = new Task<Type>() {

@Override

public Type call() {

updateProgress(Double, Double);

updateProgress(Long, Long);

updateMessage(String);

updateTitle(String);

updateValue(Type);

} };

new Thread(task).start();

(111)

Mise à jour d’une propriété

Lancer une tâche :

Task task = new Task<Void>() {

@Override

public Void call() {

for (int i=0; i<=10000; i++) { updateProgress(i, 10000);

}

return null;

} };

progress.progressProperty().bind(task.progressProperty());

new Thread(task).start();

@FXML public

ProgressBar

progress

;

(112)

Mise à jour d’une propriété

Lancer une tâche :

Task task = new Task<Void>() {

@Override

public Void call() {

for (int i=0; i<=10000; i++) { updateProgress(i, 10000);

}

return null;

} };

progress.progressProperty().bind(task.progressProperty());

new Thread(task).start();

@FXML public

ProgressBar

progress

;

(113)

Fichiers (FileChooser)

Ouvrir un fichier

FileChooser fileChooser = new FileChooser();

fileChooser.setTitle("Open file"); 

 

File file = fileChooser.showOpenDialog(stage);

(114)

Fichiers (FileChooser)

Ouvrir un fichier avec spécification des extensions :

Stage stage = new Stage();

FileChooser fileChooser = new FileChooser();

fileChooser.setTitle("Open file"); 

 

fileChooser.getExtensionFilters().add(

**new FileChooser.ExtensionFilter("JPG", "*.jpg")** );

File file = fileChooser.showOpenDialog(stage);

(115)

Fichiers (FileChooser)

Ouvrir un fichier avec spécification des extensions :

FileChooser fileChooser = new FileChooser();

fileChooser.setTitle("Open file"); 

 

fileChooser.getExtensionFilters().addAll(

**new FileChooser.ExtensionFilter("JPG", ".jpg"), new FileChooser.ExtensionFilter("PNG", ".png"),** );

File file = fileChooser.showOpenDialog(stage);

(116)

Fichiers (FileChooser)

Enregistrer un fichier avec spécification des extensions

FileChooser fileChooser = new FileChooser();

fileChooser.setTitle("Save file"); 

 

fileChooser.getExtensionFilters().addAll(

**new FileChooser.ExtensionFilter("JPG", ".jpg"), new FileChooser.ExtensionFilter("PNG", ".png"),** );

File file = fileChooser.showSaveDialog(stage);

(117)

Fichiers (FileChooser)

Choisir un dossier

DirectoryChooser dir = new DirectoryChooser();

dir.setTitle("Dossier");

File file = dir.showDialog(stage);

(118)

Ajouter un événement (code)

obj.setOnMouseClicked(new EventHandler<MouseEvent>() {

@Override

public void handle(MouseEvent event) { }

});

(119)

Sous fenêtre (modale)

•  Faire de même pour la fenêtre principale et :

Stage stage = new Stage();

stage.setTitle("titre");

FXMLLoader loader = new FXMLLoader();

loader.setLocation(SenScriptWindow.class.getResource("nom.fxml"));

BorderPane panneau = (BorderPane) loader.load();

Scene scene = new Scene(panneau);

stage.setScene(scene);

stage.initOwner(stage_principal);

stage.initModality(Modality.APPLICATION_MODAL);

stage.showAndWait();

(120)

JavaFX & Scene Builder