tondeurh

IL est assez facile de réaliser des fenêtres transparente sous JavaFX, et ainsi de placer une image de fond permettant de donner une forme quelconque a la fenêtre de notre application.
comme l’exemple simple ci dessous, qui a donner à notre fenêtre applicative la forme d’un nuage dans lequel est placé un bouton, un label et une croix rouge qui permettra de remplacer notre croix rouge habituelle que l’on trouve sur le bord haut et à droite du cadre de la fenêtre, celle ci permettra de quitter l’application proprement.




Comment cela fonction ?

Il faut dans un premier temps faire en sorte que l’ensemble des couches de notre application soient transparentes, c’est à dire la couleur de notre AnchorPane, de notre objet Scene et e notre objet Stage.

Rendre transparent l’objet « Stage », c’est assez simple puisque la classe Stage contient une méthode nommé « initStyle » qui prend en paramètre une constante de la classe StageStyle, et notamment StageStype.TRANSPARENCY.
Rendre l’objet « Scene » transparent est également assez simple, ceci se met en place lors de l’instanciation de cet objet en utilisant le constructeur « Scene(Parent root, double width, double height, Paint fill) » ou le paramètre fill peut prendre une couleur transparent en lui passant la constante de la classe Color transparent dont la valeur est #00000000.
Rendre l’objet AnchorPane transparent, ceci demande de passer par du CSS, en effet il faut passer a la méthode setStyle le style -fxBackground-color comme ceci root.setStyle(« -fx-background-color:transparent »), ce qui permet d’imposer au panneau AnchorPane une couleur de fond transparente.

Il nous reste plus qu’a placer une image de fond sur notre page FXML et les UI au dessus de cette image de fond, associer une classe contrôleur, et mettre en place l’événement « setMouseDrag » sur l’objet root (AnchorPane).

nb : on utilise ici une lambda expression pour mettre en place l’évènement (MouseEvent).

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
root.setOnMouseDragged((MouseEvent me) -> {
stage.setX(me.getScreenX());
stage.setY(me.getScreenY());
});

source FXML

Code xml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<?xml version="1.0" encoding="UTF-8"?>
 
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
 
<AnchorPane id= »AnchorPane » prefHeight= »171.0″ prefWidth= »320″ style= »-fx-background-color: #000000; » xmlns= »http://javafx.com/javafx/8″ xmlns:fx= »http://javafx.com/fxml/1″ fx:controller= »javafxwinspec.FXMLWinSpecController »>
<children>
<ImageView fitHeight= »200.0″ fitWidth= »320.0″ pickOnBounds= »true » preserveRatio= »true »>
<image>
<Image url= »@nuage.png » />
</image>
</ImageView>
<Button fx:id= »button » layoutX= »134.0″ layoutY= »69.0″ onAction= »#handleButtonAction » text= »Click Me! » />
<Label fx:id= »label » layoutX= »126.0″ layoutY= »48.0″ minHeight= »16″ minWidth= »69″ prefHeight= »17.0″ prefWidth= »83.0″ textAlignment= »CENTER » />
<ImageView fx:id= »btnClose » fitHeight= »32.0″ fitWidth= »32.0″ layoutX= »274.0″ layoutY= »53.0″ onMouseClicked= »#hClose » pickOnBounds= »true » preserveRatio= »true »>
<image>
<Image url= »@fermer.png » />
</image>
</ImageView>
</children>
</AnchorPane>

Source du controleur

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
package javafxwinspec;
 
import java.net.URL;
import java.util.ResourceBundle;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
 
public class FXMLWinSpecController implements Initializable {
 
@FXML
private Label label;
@FXML
private Button button;
@FXML
private ImageView btnClose;
 
@FXML
private void handleButtonAction(ActionEvent event) {
label.setText(« Hello World! »);
}
 
@Override
public void initialize(URL url, ResourceBundle rb) {
}
 
@FXML
private void hClose(MouseEvent event) {
Platform.exit();
}
 
}

Source de l’application

Code java :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
package javafxwinspec;
 
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
 
public class JavaFXWinSpec extends Application {
 
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource(« FXMLWinSpec.fxml »));
 
//rendre transparent l’AnchorPane
root.setStyle(« -fx-background-color:transparent »);
 
//permet de déplacer la fenêtre
root.setOnMouseDragged((MouseEvent me) -> {
stage.setX(me.getScreenX());
stage.setY(me.getScreenY());
});
 
//rendre transparent la scene
Scene scene = new Scene(root,320, 170, Color.TRANSPARENT);
 
stage.setScene(scene);
//rentre transparent le Stage
stage.initStyle(StageStyle.TRANSPARENT);
stage.show();
}
}

On se retrouve avec une fenêtre qui peut prendre n'importe qu'elle forme et donner une allure sympathique a vos applications Java avec l'api JavaFX.

FIN