Modification de DatePicker avec des boutons flèches

Version imprimable

10/05/2017, 15h16
Daydreamer067

3 pièce(s) jointe(s)

Modification de DatePicker avec des boutons flèches

bonjour
J'ai un DatePicker que je veux transformer :
Pièce jointe 273754

Je l'ai modifié avec css et j'obtiens ceci :
Pièce jointe 273759

Je souhaite le modifier pour qu'il ressemble à ceci :
Pièce jointe 273761

Mon problème est de mettre les deux boutons de chaque côté sans créer un nouveau composant fxml.
J'ai trouvé que la classe DatePickerSkin peut être utilisée pour modifier le DatePicker mais je ne sais pas comment.

Merci Pour votre aide.
11/05/2017, 06h03
bouye
Alors quand je lis le code de DatePickerSkin, il apparait que le problème est un peu plus complexe que pour le menu popup. Cette classe hérite de ComboBoxPopupControl qui hérite elle-même de ComboBoxBaseSkin. Et c'est dans la méthode layoutChildren(final double x, final double y, final double w, final double h) de cette classe qu'a lieu la mise en page. Le code apparemment se contente juste de positionner l’éditeur et le bouton qui fait surgir le menu popup.

Pour pour faire ce que tu veux faire, il faudra:
1. Hériter de DatePickerSkin avec le soucis bien sur que cette classe n'est pas actuellement publique.
2. Dans ton constructeur, ajouter deux boutons (les flèches de par et d'autre de l’éditeur) et les listeners qui vont bien pour les faire fonctionner (oublie le behavior, il n'est pas publique et ne le sera pas dans le JDK 9).
3. Surcharger le layoutChildren(x, y, h, w) pour faire une mise en page correcte. Au choix :
  - Faire tous les calculs de taille de de positionnement a mano.
  - Introduire une HBox dans le constructeur et recopier tout dedans pour faire une mise en page automatique.
Le seul soucis mon bon monsieur, c'est que arrowButton est protected mais displayNode est private. Du coup il va falloir invoquer getDisplayNode() a la place (pas bien dur).
Bon ça, c'est la méthode si tu veux reskinner un DatePicker.

Sinon la méthode la plus simple c'est tout simplement de créer un nouveau contrôle qui utilise une HBox, un DatePicker et deux boutons et de le rendre utilisable par SceneBuilder / ton FXML et basta.
11/05/2017, 09h45
Daydreamer067

Merci pour ta réponse.
Je vais regarder tout ça.
15/05/2017, 12h06
Daydreamer067
Citation:

Sinon la méthode la plus simple c'est tout simplement de créer un nouveau contrôle qui utilise une HBox, un DatePicker et deux boutons et de le rendre utilisable par SceneBuilder / ton FXML et basta

Je suis nouveau dans javafx et je ne vois pas comment je dois faire.
il doit y avoir ça :
Code:

1 2 3 4 HBox hboxDatePicker = new HBox(); Button leftArrowButton = new Button(); Button rightArrowButton = new Button(); DatePicker datePicker;
Mais je ne sais pas quoi en faire.
Tu peux m'indiquer le code.
Merci.

Non en fait le datepickerskin est la solution mais je suis bloqué.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class EPSDatePickerSkin extends DatePickerSkin{
	Button leftArrowButton = new Button();
	Button rightArrowButton = new Button();
 
	public EPSDatePickerSkin(DatePicker dp){
		super(dp);
 
		Image imageLeft = new Image("/icons/compo/generic/arrowbutton/arrow_left.png");
		ImageView iconLeft = new ImageView(imageLeft);
		leftArrowButton.setGraphic(iconLeft);
 
		Image imageRight = new Image("/icons/compo/generic/arrowbutton/arrow_right.png");
		ImageView iconRight = new ImageView(imageRight);
		rightArrowButton.setGraphic(iconRight);
 
 
 
		getChildren().addAll(leftArrowButton, dp, rightArrowButton);
	}
}

Je cherche à remplacé ce qu'il y a dans un DatePickerSkin, c'est à dire le textfield et le bouton, pour mettre à la place un bouton, un datepicker et un bouton.
Je ne sais pas comment faire.

1 pièce(s) jointe(s)

Un petit exemple :

Pièce jointe 275816

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.root {
    -fx-spacing: 6px;
    -fx-padding: 6px;
}
.eps-date-picker {
    -fx-skin: "datepickerskin.EPSDatePickerSkin";
}
.eps-date-picker .left-arrow-button .arrow {    
    -fx-padding: 3px 4px 3px 4px;
    -fx-shape: "m 4.9949292,1045.3622 -3,3 3,3";
    -fx-scale-shape: true;
    -fx-border-color: derive(black, 33%);
    -fx-border-width: 1.5px;
}
.eps-date-picker .right-arrow-button .arrow {
    -fx-padding: 3px 4px 3px 4px;
    -fx-shape: "m 2,1045.3622 3,3 -3,3";
    -fx-scale-shape: true;
    -fx-border-color: derive(black, 33%);
    -fx-border-width: 1.5px;
}

Code:

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
package datepickerskin;
 
import com.sun.javafx.scene.control.skin.DatePickerSkin;
import javafx.scene.control.Button;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.Region;
 
public class EPSDatePickerSkin extends DatePickerSkin {
 
    final Button leftArrowButton = new Button();
    final Button rightArrowButton = new Button();
 
    public EPSDatePickerSkin(DatePicker dp) {
        super(dp);
        //
        final Region leftArrow = new Region();
        leftArrow.setId("arrow");
        leftArrow.getStyleClass().add("arrow");
        leftArrowButton.setId("left-arrow-button");
        leftArrowButton.getStyleClass().add("left-arrow-button");
        leftArrowButton.setGraphic(leftArrow);
        //
        final Region rightArrow = new Region();
        rightArrow.setId("arrow");
        rightArrow.getStyleClass().add("arrow");
        rightArrowButton.setId("right-arrow-button");
        rightArrowButton.getStyleClass().add("right-arrow-button");
        rightArrowButton.setGraphic(rightArrow);
        getChildren().add(0, leftArrowButton);
        getChildren().add(rightArrowButton);
    }
 
    @Override
    protected void layoutChildren(double x, double y, double w, double h) {
        final double prefLW = snapSize(leftArrowButton.prefWidth(-1));
        final double prefRW = snapSize(rightArrowButton.prefWidth(-1));
        leftArrowButton.resizeRelocate(x, y, prefLW, h);
        rightArrowButton.resizeRelocate(x + w - prefRW, y, prefRW, h);
        final double pickerX = x + prefLW;
        final double pickerY = y;
        final double pickerW = Math.max(0, w - (prefLW + prefRW));
        final double pickerH = h;
        super.layoutChildren(pickerX, pickerY, pickerW, pickerH);
    }
}

Code:

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
package datepickerskin;
 
import java.net.URL;
import java.util.Optional;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import org.scenicview.ScenicView;
 
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final DatePicker datePicker1 = new DatePicker();
        final DatePicker datePicker2 = new DatePicker();
        datePicker2.getStyleClass().add("eps-date-picker");
        final VBox root = new VBox();
        root.getChildren().setAll(datePicker1, datePicker2);
        final Scene scene = new Scene(root, 500, 500);        
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("test.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
        ScenicView.show(scene);
    }
 
    public static void main(String[] args) {
        launch(args);
    }   
}

16/05/2017, 09h44
Daydreamer067

Merci mon sauveur :D
Ca marche parfaitement.
C'est quand même dommage qu'il n'y ait pas de doc là dessus.
16/05/2017, 09h53
bouye

Oui mais pour le moment elles sont privées les skins, elles ne seront publiques que dans le JDK9 (mais je ne m'attends guère à plus de doc). Et puis ainsi l'apparence pêche un peu avec la bordure du picker qui englobe aussi les boutons de part et d'autre.