Discussion :

[Yolteotl]

Bonjour à tous !

Je travaille actuellement sur une application JavaFX et, ayant débuté récemment mon utilisation de ce toolkit, je suis à la recherche d'information concernant les transitions.

J'utilise FXML pour créer mon interface associé avec un fichier Css.
J'ai associé à mon fichier FXML un contrôleur qui doit se charger de gérer les animations. Je veux donc rajouter des transitions et les appliquer à l'ouverture et à la fermeture de mon menu.

Le problème que je rencontre, si je ne me trompe pas, est que je n'arrive pas à obtenir le ContextMenu qui me permettrait d'utiliser les listeners associés (onCloseRequest, onAutoHide...) car je reçois null avec MenuButton.getContextMenu();

Code :

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
@FXML MenuButton leftMenu;
@FXML MenuButton rightMenu;
 
@FXML Pane leftMenuItem;
@FXML Pane rightMenuItem;
 
@Override
public void initialize(URL url, ResourceBundle ressource) {
	[...]
	ContextMenu leftContextMenu = leftMenu.getContextMenu();
	leftContextMenu.setOnShowing((event)->{
		openingParallel.setNode(leftMenuItem);
		openingParallel.play();
	});
 
	leftContextMenu.setOnAutoHide((event)->{
		System.out.println("AutoHide");
	});
 
	leftContextMenu.setOnCloseRequest((event)->{
		System.out.println("CloseRequest");
	});
}

De plus, je souhaiterai savoir si il est possible d'obtenir un effet sur l'ouverture du menu (TranslateTransition etc...) permettant de dépasser légèrement la destination voulue et de revenir en place facilement (avec une variation de la vitesse de l'animation) facilement sans avoir à passer par une SequentialTransition assez lourde à utiliser niveau code.

Merci d'avance pour vos réponses !

[bouye]

Bonjour,
une question similaire a déjà été postée récemment : [Débutant] Menu progressif en JavaFX

[Yolteotl]

(Je me suis permis d'effacer ma première réponse, étant parti sur une autre piste plus convaincante)

Ce post m'a donc été très utile pour progresser sur une mise en place simple d'animations.
J'ai donc commencé par implémenter un CustomMenuButtonSkin étendant MenuButtonSkin, ce qui me permet d'accéder au ContextMenu que je cherchais à l'origine.
Après plusieurs essais, il s'est avéré qu'il était possible, mais pas de manière propre, d'implémenter une animation de fermeture (cas de l'autoHide posant problème).

Je suis donc parti sur l'idée d'implémenter mon propre CustomContextMenu étendant ContextMenu. En partant du code actuel, j'ai Override la fonction hide() ce qui me permet de réaliser la transition comme je le souhaitais.

CustomMenuButtonSkin.java :

Code :

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
import javafx.scene.control.MenuButton;
 
import com.sun.javafx.scene.control.skin.MenuButtonSkin;
 
/**
 * CustomMenuButtonSkin<br>
 * <br>
 * Etends le skin normal des MenuButton afin d'y intégrer nos propres animations d'ouverture et
 * de fermeture. 
 * 
 * 
 * 
 * @author Valentin
 *
 */
public class CustomMenuButtonSkin extends MenuButtonSkin {
 
	/**
         * Constructor
         * 
         * @param menuButton
         */
	public CustomMenuButtonSkin(final MenuButton menuButton) {
		super(menuButton);
 
		//On remplace le ContextMenu normal par notre implémentation
		CustomContextMenu customPopup = new CustomContextMenu();
		customPopup.getItems().clear();
		customPopup.getItems().addAll(getSkinnable().getItems());
		customPopup.initTransition();
 
		popup = customPopup;
 
	}
}

CustomContextMenu.java :

Code :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.TranslateTransition;
import javafx.event.Event;
import javafx.scene.control.ContextMenu;
import javafx.scene.control.Menu;
import javafx.util.Duration;
 
/**
 * CustomContextMenu<br>
 * <br>
 * Etends ContextMenu afin d'implémenter les animations souhaitées pour l'application
 * 
 * @author Valentin
 *
 */
public class CustomContextMenu extends ContextMenu {
 
	private static final int DURATION = 200;
 
	private ParallelTransition openingParallel;
	private ParallelTransition closingParallel;
 
	/**
         * Constructor
         */
	public CustomContextMenu(){
		super();
 
	}
 
	/**
         * A appeler après avoir mis à jour la liste des items
         */
	void initTransition(){
		//On crée les animations d'apparition/disparition
		TranslateTransition translation = new TranslateTransition(Duration.millis(DURATION)); 
		translation.setFromY(250);
		translation.setToY(0);
 
		ScaleTransition scale = new ScaleTransition(Duration.millis(DURATION));
		scale.setFromX(0);
		scale.setFromY(0);
		scale.setToX(1);
		scale.setToY(1);
 
		openingParallel = new ParallelTransition();
		openingParallel.getChildren().addAll(scale, translation);
		openingParallel.setAutoReverse(true);
		//TODO : Trouver un moyen plus propre de récupérer notre node
		openingParallel.setNode(this.getItems().get(0).getGraphic());
 
		translation = new TranslateTransition(Duration.millis(DURATION)); 
		translation.setFromY(0);
		translation.setToY(250);
 
		scale = new ScaleTransition(Duration.millis(DURATION));
		scale.setFromX(1);
		scale.setFromY(1);
		scale.setToX(0);
		scale.setToY(0);
		closingParallel = new ParallelTransition();
		closingParallel.getChildren().addAll(scale, translation);
		closingParallel.setAutoReverse(true);	
		closingParallel.setCycleCount(1);
		//TODO : Trouver un moyen plus propre de récupérer notre node
		closingParallel.setNode(this.getItems().get(0).getGraphic());
 
		closingParallel.setOnFinished((event)->{
			super.hide();
		});
 
		this.setOnShown((event)->openingParallel.play());
	}
	@Override
	public void hide(){
		if (!isShowing()) 
			return;
 
		Event.fireEvent(this, new Event(Menu.ON_HIDING));
 
		closingParallel.play();
 
		Event.fireEvent(this, new Event(Menu.ON_HIDDEN));
	}
 
}

Ceci est presque parfait. Il me manque encore une dernière chose, et je pense qu'il y a une histoire de focus de fenêtre.

Mon application dispose de 2 MenuButton. Si le premier est ouvert, et que je clique sur le bouton du second, le premier se referme correctement, mais le second ne s'ouvre pas. En fait, il semblerait qu'il faille un clique pour perdre le focus du premier menu (fermeture), un clique pour gagner le focus sur le second bouton, et un troisième clique pour ouvrir le menu.

Une idée de comment remédier à ce problème ?