5 - JavaFX PDF

JavaFX & Scene Builder
Ahcène Bounceur
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
JavaFX
JavaFX
8
•  JavaFX 1.0 : créée en 2008

–  Programmée en Script
•  JavaFX 2.0 : 2011
Script Java
•  Programmée en Java
•  JavaFX 8.0 : depuis 2014
2008 2011 2014
–  Programmée en Java
•  Swing et AWT ne seront plus mis à jours
–  Mais toujours accessibles
–  [Branches mortes]
•  Utilisez JavaFX
Premier exemple
•  Une classe JavaFX doit hériter de la classe
Application (javafx.application.Application)
•  Forcer l’utilisation d’un Thread JavaFX
Premier exemple
import javafx.application.Application;
import javafx.stage.Stage;
public class TestFx extends Application {
@Override
public void start(Stage estrade) {
}
Premier exemple
public class TestFx extends Application {
@Override
System.out.println("Bonjour");
}
public static void main(String [] args) {

launch(args);
}
public class TestFx {

} public static void main(String [] args) {
}
}
Stage
Scene
Node
L’estrade : Stage
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) {
}
La Scène : Scene
La Scène : Scene
•  javafx.scene.Scene
•  Décor où l’on placera les différents instruments,
décoration, lumières, etc.
Les nœuds : Node
Les nœuds : Node
•  javafx.scene.Node
•  Node : instruments, décoration, lumières,
musiciens, comédiens, etc.
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
MA PREMIÈRE FENÊTRE
Ma première fenêtre
public class MonAppli extends Application {
@Override
public static void main(String [] args) {

launch(args);
}
}
MÉTHODE 1 :
PROGRAMMATION DIRECTE
@Override
}
@Override
estrade.setTitle("Ma première fenêtre");
estrade.setWidth(600);
estrade.setHeight(400);
estrade.show();
}
@Override
Pane panneau = new Pane();
Button bouton = new Button("Un Bouton");
bouton.setLayoutX(255); bouton.setLayoutY(187);
panneau.getChildren().add(bouton);
estrade.show();
}
@Override
Scene scene = new Scene(panneau);
estrade.setScene(scene);
estrade.show();
}
Stage
@Override
Node
Scene
// Action du bouton
Op#on 1 : Lambda Expression
estrade.setScene(scene); bouton.setOnAction(new EventHandler<ActionEvent>() {
estrade.show(); @Override
public void handle(ActionEvent event) {
} System.out.println("Hello World!");
}
});
MÉTHODE 2 : SCENE BUILDER
(ACTION PAR LAMBDA
EXPRESSION)
@Override
Scene Builder
FXMLLoader loader = new FXMLLoader();
loader.setLocation(MonAppli.class.getResource("fenetre.fxml"));
Pane panneau = (Pane) loader.load();

estrade.show();
}
@Override
Scene Builder


estrade.show();
}
@Override
Scene Builder

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

estrade.show();
}
@Override
Scene Builder

// Action du bouton

estrade.setScene(scene); Op#on 1 : Lambda Expression
estrade.show(); bouton.setOnAction(new EventHandler<ActionEvent>() {
} @Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}
});
fenetre.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?> Scene Builder
<?import javafx.scene.layout.*?>
( 6 0 0);
t W i dth (400);
<Pane
a d e .se Height
t
maxHeight="-Infinity" estr ade.se
maxWidth="-Infinity"
estr
minHeight="-Infinity"
minWidth="-Infinity"
prefHeight="400.0" pann
eau.
prefWidth="600.0" getC
hild
xmlns="http://javafx.com/javafx/8" r e n(
).ge
xmlns:fx="http://javafx.com/fxml/1"> t(0)
;
<children>
<Button layoutX="255.0" layoutY="187.0" mnemonicParsing="false" text="Mon Button" />
</children>
</Pane> tLayout Y( 1 8 7 ) ;
55); b outon.se
y o u t X( 2
bout on.setLa
(ACTION PAR RÉFÉRENCEMENT
DE MÉTHODE)
@Override
Scene Builder
bouton.setOnAction(this::afficher);
estrade.show();
}
@FXML
private void afficher(ActionEvent event) {
}
(MVC)
@Override
Scene Builder
estrade.show();
}
M
public class MonControleur {
@FXML
Scene Builder
}
}
C
public class MonControleur implements Initializable {
@FXML
}
@Override
public void initialize(URL location, ResourceBundle resources) {
}
}
C
@FXML
private ComboBox<String> comboBox;
@Override
comboBox.getItems().removeAll(comboBox.getItems());
comboBox.getItems().addAll("A", "B", "C");
comboBox.getSelectionModel().select("A");
}
Bo x
}
o mbo
n C
C
lis e r u
a
Ini0
@FXML
private StackPane pane;
@Override
SwingNode sn = new SwingNode();
JButton bouton = new JButton("OK");
sn.setContent(bouton);
pane.getChildren().add(sn);
w in g
} S ud
N œ
C
}
iser u n
al
Ini0
Ma première fenêtre Scene Builder
2
1
V
SCENE BUILDER : EXEMPLE
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");
loader.setLocation(Somme.class.getResource("exemple.fxml"));
BorderPane panneau = (BorderPane) loader.load();
estrade.show();
}
public static void main(String[] args) {
launch(args);
}
}
2. Dessiner votre IHM J
2. Dessiner votre IHM J
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
3. Affecter les IDs
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);
}
}
5. Affecter le contrôleur à l’IHM
6. Affecter les actions des boutons
7. Sauvegardez, Rafraichissez &
Exécutez
SCENE BUILDER :
L’INTERFACE
1. Menu
5. Composants graphiques
4.
Propriétés
Layout et Code
3. Hiérarchie
& Contrôleur
2. IHM (résultat) - View

1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
1. Le Menu
2. IHM (Résultat)
2. IHM (Résultat)
3.1 La hiérarchie
3.2 Le contrôleur (lien)
4.1. Les propriétés
•  Text :
–  Font
–  Couleur
–  Saut de ligne
–  Alignement
–  Affichage (…)
–  Soulignement
–  Interlignes
•  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) …
Content Display
Content Text Gap Gap

Alignement

Ac:va:on

Opacité

Visibilité

Focus

Curseur

Effets (ombre, reflets, flous, etc.)
•  JavaFX CSS permet de personnaliser les
composants graphiques
•  Soit en utilisant un fichier style CSS (partie Style
Class, …)
•  Soit en utilisant les styles intégrés (Style)
–  Cas d’un Label (sans style) :
–  Avec un style :
–  Avec un style :
-fx-font-size
•  Extras :
4.2 Le Layout
•  Alignment
•  Margin
•  Padding
•  Spacing
•  Vgap
•  Hgap
4.2 Le Layout
•  Alignment
–  Tous les objets du layout seront alignés soit de
gauche à droit, soit de droite à gauche, soit au centre
4.2 Le Layout
•  Margin
–  Concerne les marges externes du composant
Margin du bouton (dans un HBox)
Margin du bouton (dans un HBox)

4.2 Le Layout
•  Padding
–  Concerne les marges internes du composant
Padding du bouton
4.2 Le Layout
•  Margin & Padding
Hbox (layout)
Margin Padding
4.2 Le Layout
•  Dimensions :
–  Largeur (Pref Width)
–  Longueur (Pref Height)
4.2 Le Layout
•  Position du composant dans son layout
79
158
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
4.2 Le Layout
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;
}
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
–  …
4.3 Code
Le Drag & Drop

4.3 Code
@FXML
private void afficher(KeyEvent evt) {
System.out.print(evt.getText());
}
4.3 Code
@FXML
private void afficher(MouseEvent evt) {
System.out.println(evt.getX()+" "+evt.getY());
}
4.3 Code
5. Les composants graphiques
•  Label
•  Pane, StackPane, BorderPane, AnchorPane,
GridPane
•  TextField
•  ProgressBar
•  SplitPane
–  Divider Position : de 0 à 1 (%)
•  ComboBox/ListBox : initialisation
@FXML
private ComboBox<String> comboBox;
@Override
}
}
•  ComboBox/ListBox : initialisation
@FXML
private ComboBox<ObjectModel> comboBox;
@Override
}
}
Menus
•  Menu
•  Sous menu
•  Séparateur
•  Menu (radio et radio group)
•  Raccourcis
COMPLÉMENT
Boites de dialogue
A par:r de JDK 8u40
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information");
alert.setHeaderText("Portes");
alert.setContentText("Verrouillage enfant activé!");
alert.showAndWait();
Boites de dialogue
Alert alert = new Alert(AlertType.INFORMATION);
alert.setTitle("Information");
alert.setHeaderText(null);
alert.setContentText("Verrouillage enfant activé!");
alert.showAndWait();
Boites de dialogue
Alert alert = new Alert(AlertType.WARNING);
Alert alert = new Alert(AlertType.ERROR);
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 {
}
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
}
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());
}
Tâches/Thread
Lancer un thread :
Thread th = new Thread() {

@Override
public void run() {
...
}
});
th.start();
Tâches/Thread
Lancer un thread :
Platform.runLater(new Runnable() {
@Override
public void run() {
...
}
});
Tâches/Thread
Lancer une tâche :
Task task = new Task<Void>() {

@Override
public Void call() {
return null;
}
};
new Thread(task).start();
Tâches/Thread
Lancer une tâche :
Task task = new Task<Integer>() {

@Override
public Integer call() {
return 0;
}
};
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);
}
};
Mise à jour d’une propriété
Lancer une tâche : @FX
M
pub L
lic
Pro
Task task = new Task<Void>() { gre
ssB
ar
@Override pro
gre
ss;
for (int i=0; i<=10000; i++) {
updateProgress(i, 10000);
}
return null;
}
};
progress.progressProperty().bind(task.progressProperty());
Mise à jour d’une propriété
Lancer une tâche : @FX
M
pub L
lic
Pro
Task task = new Task<Void>() { gre
ssB
ar
@Override pro
gre
ss;
for (int i=0; i<=10000; i++) {
updateProgress(i, 10000);
}
return null;
}
};
progress.progressProperty().bind(task.progressProperty());
Fichiers (FileChooser)
Ouvrir un fichier
FileChooser fileChooser = new FileChooser();
fileChooser.setTitle("Open file"); 
 
File file = fileChooser.showOpenDialog(stage);
Ouvrir un fichier avec spécification des extensions :
Stage stage = new Stage();
 
fileChooser.getExtensionFilters().add(
new FileChooser.ExtensionFilter("JPG", "*.jpg")
);

Ouvrir un fichier avec spécification des extensions :
 
fileChooser.getExtensionFilters().addAll(
new FileChooser.ExtensionFilter("JPG", "*.jpg"),
new FileChooser.ExtensionFilter("PNG", "*.png"),
);

Enregistrer un fichier avec spécification des extensions
fileChooser.setTitle("Save file"); 
 
fileChooser.getExtensionFilters().addAll(
new FileChooser.ExtensionFilter("JPG", "*.jpg"),
new FileChooser.ExtensionFilter("PNG", "*.png"),
);
File file = fileChooser.showSaveDialog(stage);

Choisir un dossier
DirectoryChooser dir = new DirectoryChooser();
dir.setTitle("Dossier");
File file = dir.showDialog(stage);

Ajouter un événement (code)
obj.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
}
});
Sous fenêtre (modale)
•  Faire de même pour la fenêtre principale et :
Stage stage = new Stage();

stage.setTitle("titre");
loader.setLocation(SenScriptWindow.class.getResource("nom.fxml"));
BorderPane panneau = (BorderPane) loader.load();
stage.setScene(scene);
stage.initOwner(stage_principal);
stage.initModality(Modality.APPLICATION_MODAL);
stage.showAndWait();
JavaFX & Scene Builder
Merci
Ahcène Bounceur

5 - JavaFX PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

5 - JavaFX PDF

Transféré par

Droits d'auteur :

Formats disponibles

JavaFX & Scene Builder

• JavaFX 1.0 : créée en 2008

public class TestFx extends Application {

public class TestFx extends Application {

public static void main(String [] args) {

public class TestFx {

public class MonAppli extends Application {

public static void main(String [] args) {

Scene scene = new Scene(panneau);

FXMLLoader loader = new FXMLLoader();

Scene scene = new Scene(panneau);

FXMLLoader loader = new FXMLLoader();

Scene scene = new Scene(panneau);

FXMLLoader loader = new FXMLLoader();

Scene scene = new Scene(panneau);

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

2. IHM (résultat) - View

Content Text Gap Gap

Margin du bouton (dans un HBox)

Margin du bouton (dans un HBox)

Le Drag & Drop

public class MonControleur implements Initializable {

public class MonControleur implements Initializable {

Alert alert = new Alert(AlertType.INFORMATION);

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

ButtonType buttonTypeOne = new ButtonType("One");

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

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

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

Thread th = new Thread() {

Task task = new Task<Void>() {

Task task = new Task<Integer>() {

Task task = new Task<Type>() {

FileChooser fileChooser = new FileChooser();

FileChooser fileChooser = new FileChooser();

File file = fileChooser.showOpenDialog(stage);

FileChooser fileChooser = new FileChooser();

File file = fileChooser.showOpenDialog(stage);

FileChooser fileChooser = new FileChooser();

File file = fileChooser.showSaveDialog(stage);

DirectoryChooser dir = new DirectoryChooser();

File file = dir.showDialog(stage);

Stage stage = new Stage();

Vous aimerez peut-être aussi

•  JavaFX 1.0 : créée en 2008