Discussion :

[Phoste]

Bonjour,

Je cherche à créer des boutons à ma façon en java fx, un truc plus joli qu'avec le constructeur par défaut...

J'ai tout d'abord pensé à créer ma classe CustomButton qui hérite de Button en dessinant bêtement des Shape dedans pour rendre cela plus beau (et par la suite faire bouger les Shape lorsqu'on passe la souris au dessus ou autre) mais cela ne marche pas, j'ai toujours la forme dégueulasse du bouton par défaut.

Je pensais utiliser la classe abstraite ButtonBase, mais la le texte ne s'affiche plus

Le constructeur Button(String str, Node graphic) permet-il de faire ce que je veux ? Ou alors avez vous une meilleure solution ?

Merci d'avance

[esired]

Bonsoir. Si tu n'es pas trop pressé, regarde ceci.

[bouye]

Tu peux mettre n'importe quoi dans le graphic d'un bouton en effet. Après, nous on a aucune idée de ce que tu appelle un bouton "beau", donc ça serait bien de montrer un dessin, un prototype ou de bien décrire ce que tu veux faire. Ou meme du code de ce que tu as tente de faire jusqu’à présent (on est pas devin).

Il y a mille et une manière de créer des nouveaux types de bouton, en passant par le graphic (avec ou sans FXML), les skins, les CSS (ou la encore il y a une foultitude de techniques : selecteur, pseudo-class, attributs, 9-slicing, etc.) ou encore une simple Region (qui peut bien mieux faire l'affaire que ButtonBase) donc soit plus précis dans ta demande.

[Phoste]

Bonsoir,

Voici le style de bouton que j'aimerais réaliser :



Les éléments graphiques en haut à gauche et en bas à droite bougent légèrement lorsqu'on clique (en maintenant appuyé) et partent chacun de leur coté lorsqu'on relâche le click.
Niveau code je n'ai fait que créer une nouvelle classe qui étendait Button en ajoutant des Line pour dessiner au mieux ce qui est sur le png mais à l'affichage je n'obtiens qu'un bouton classique.

Peut-on faire des choses animées en CSS ?

Merci pour votre temps

[bouye]

Quelques chose comme cela peut-etre ?

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
88
89
90
public class CornerButton extends Button {
 
    private static final String STYLE_CLASS = "corner-button";
    private final ImageView topLeft = new ImageView();
    private final ImageView bottomRight = new ImageView();
 
    public CornerButton() {
        super();
        setup();
    }
 
    public CornerButton(String text) {
        super(text);
        setup();
    }
 
    public CornerButton(String text, Node graphic) {
        super(text, graphic);
        setup();
    }
 
    private final void setup() {
        topLeft.setId("topLeft");
        topLeft.getStyleClass().add("top-left");
        bottomRight.setId("bottomRight");
        bottomRight.getStyleClass().add("bottom-right");
        getStyleClass().add(STYLE_CLASS);
        getStylesheets().add(getClass().getResource("cornerbutton.css").toExternalForm());
        // Permet de laisser setOnMousePressed() disponible pour une utilisation externe.
        addEventFilter(MouseEvent.MOUSE_PRESSED, mouseEvent -> animateIn());
        // Permet de laisser setOnMouseReleased() disponible pour une utilisation externe.
        addEventFilter(MouseEvent.MOUSE_RELEASED, mouseEvent -> animateOut());
    }
 
    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        if (!getChildren().contains(topLeft)) {
            getChildren().addAll(topLeft, bottomRight);
        }
        final double width = getWidth();
        final double height = getHeight();
        //
        final double topLeftWidth = topLeft.getBoundsInLocal().getWidth();
        final double topLeftHeight = topLeft.getBoundsInLocal().getHeight();
        layoutInArea(topLeft, 0, 0, topLeftWidth, topLeftHeight, 0, HPos.LEFT, VPos.TOP);
        //
        final double bottomRightWidth = bottomRight.getBoundsInLocal().getWidth();
        final double bottonRightHeight = bottomRight.getBoundsInLocal().getHeight();
        layoutInArea(bottomRight, width - bottomRightWidth, height - bottonRightHeight, bottomRightWidth, bottonRightHeight, 0, HPos.LEFT, VPos.TOP);
    }
 
    private static final int CORNER_OFFSET = 10;
    private static final Duration CORNER_ANIMATION_DURATION = Duration.millis(150);
    private final ParallelTransition cornersAnimation = new ParallelTransition();
 
    private void animateIn() {
        if (cornersAnimation != null) {
            cornersAnimation.stop();
            cornersAnimation.getChildren().clear();
        }
        final TranslateTransition moveTopLeft = new TranslateTransition(CORNER_ANIMATION_DURATION, topLeft);
        moveTopLeft.setToX(CORNER_OFFSET);
        moveTopLeft.setToY(CORNER_OFFSET);
        //
        final TranslateTransition moveBottomRight = new TranslateTransition(CORNER_ANIMATION_DURATION, bottomRight);
        moveBottomRight.setToX(-CORNER_OFFSET);
        moveBottomRight.setToY(-CORNER_OFFSET);
        //
        cornersAnimation.getChildren().setAll(moveTopLeft, moveBottomRight);
        cornersAnimation.playFromStart();
    }
 
    private void animateOut() {
        if (cornersAnimation != null) {
            cornersAnimation.stop();
            cornersAnimation.getChildren().clear();
        }
        final TranslateTransition moveTopLeft = new TranslateTransition(CORNER_ANIMATION_DURATION, topLeft);
        moveTopLeft.setToX(0);
        moveTopLeft.setToY(0);
        //
        final TranslateTransition moveBottomRight = new TranslateTransition(CORNER_ANIMATION_DURATION, bottomRight);
        moveBottomRight.setToX(0);
        moveBottomRight.setToY(0);
        //
        cornersAnimation.getChildren().setAll(moveTopLeft, moveBottomRight);
        cornersAnimation.playFromStart();
    }
}

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.corner-button {
    -fx-font-size: 2.5em;
    -fx-text-fill: white;
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-padding: 30 25 30 25;
}
.corner-button > .top-left {
    -fx-image: url("topleft.png");
}
.corner-button > .bottom-right {
    -fx-image: url("bottomright.png");
}

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
public class Test_CornerButton  extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final Button button = new CornerButton("contre l'ordinateur");
        final StackPane root = new StackPane();
        root.setBackground(Background.EMPTY);
        root.getChildren().add(button);
        final Scene scene = new Scene(root, 300, 250);
        scene.setFill(Color.DARKBLUE);
        primaryStage.setTitle("Test");
        primaryStage.setScene(scene);
        primaryStage.show();
//        ScenicViewBooter.show(scene);
    }
 
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

Ici, j'ai utilisé ImageView pour les coins car en utilisant une Region skinnée avec une image de fond ça me laissait une trace blanche visible lors de l'animation.

Non, actuellement on ne peut pas faire d'animation via CSS. C'est prévu pour plus tard mais pas tout de suite (je pencherai pour le JDK9).

[Phoste]

Oui c'est niquel comme ça !
Merci beaucoup, je découvre des choses ^^
La méthode layoutChildren() est appelée lors de la construction de l'objet ?

[bouye]

Non, à chaque mise en page.