Créer un composant ClearableTextField

Version imprimable

02/04/2015, 19h40
win_ubuntu

Créer un composant ClearableTextField
Bonsoir tout le monde,
j'aimerais coder un TextField avec un icon qui doit être visible lorsque l'utilisateur tape un caractère, sinon il est invisible. l'icon, lorsqu’il est visible, permet de supprimer le texte écrit par l’utilisateur.
Code:

1 2 3 class ClearableTextField extends ???{ // }
une idée s'il vous plait.
merci d'avance.

Have fun!

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
package test;
 
import java.net.URL;
import javafx.beans.binding.Bindings;
import javafx.geometry.HPos;
import javafx.geometry.Insets;
import javafx.geometry.VPos;
import javafx.scene.Cursor;
import javafx.scene.control.TextField;
import javafx.scene.layout.Region;
 
public final class ClearableTextField extends TextField {
 
    private final Region clearButton = new Region() {
        {
            setId("clearButton");
            getStyleClass().add("clear-button");
            setPrefWidth(16);
            setPrefHeight(16);
            setMouseTransparent(false);
            setCursor(Cursor.DEFAULT);
            setPickOnBounds(true);
        }
    };
 
    public ClearableTextField() {
        super();
        initClearButton();
    }
 
    public ClearableTextField(final String text) {
        super(text);
        initClearButton();
    }
 
    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        clearButton.toFront();
        final double width = getWidth();
        final double height = getHeight();
        final Insets insets = getInsets();
        final double clearW = clearButton.getPrefWidth();
        final double clearH = clearButton.getPrefHeight();
        // @todo make that offset a configurable CSS property.
        final double clearX = width - insets.getRight() - 2 - clearW;
        final double clearY = insets.getTop() + (height - insets.getTop() - insets.getBottom() - clearH) / 2.0;
        layoutInArea(clearButton, clearX, clearY, clearW, clearH, 0, HPos.LEFT, VPos.TOP);
    }
 
    private void initClearButton() {
        clearButton.setOnMousePressed(actionEvent -> setText(""));
        clearButton.visibleProperty().bind(Bindings.length(textProperty()).greaterThan(0));
        getChildren().add(clearButton);
    }
 
    @Override
    public String getUserAgentStylesheet() {
        final URL cssURL = getClass().getResource("ClearableTextField.css");
        return (cssURL == null) ? null : cssURL.toExternalForm();
    }
}

Le css ClearableTextField.css associé pour avoir l'apparence de base du contrôle.
La forme est décrite au format SVG et a été dessinée dans Inkscape.

Code:

1
2
3
4
.text-field .clear-button {
    -fx-background-color: lightgray;
    -fx-shape: "M 8 0 A 8 8 0 0 0 0 8 A 8 8 0 0 0 8 16 A 8 8 0 0 0 16 8 A 8 8 0 0 0 8 0 z M 4.4648438 3.0507812 L 8 6.5859375 L 11.535156 3.0507812 L 12.949219 4.4648438 L 9.4140625 8 L 12.949219 11.535156 L 11.535156 12.949219 L 8 9.4140625 L 4.4648438 12.949219 L 3.0507812 11.535156 L 6.5859375 8 L 3.0507812 4.4648438 L 4.4648438 3.0507812 z "
}

Comme tu peux le voir, c'est super simple à faire :)

03/04/2015, 02h00
win_ubuntu

merci infiniment pour votre réponse.
j'ai testé la classe ClearableTextField dans mon programme. il fonctionne comme il faut avec un seul issue. cette classe laisse l'utilisateur taper des caractères au dessous du button "clearButton". peut être il faut configurer la propriété padding ou la propriété Margin?. il me reste à décoder le programme pour que je puisse ,au futur, créer des composants similaires.
merci encore
03/04/2015, 02h08
bouye

Si tu veux rester simple probablement (car nous sommes partis sur une solution simple ici). MAIS il faudra toucher un peu au code de positionnement du bouton (car les valeurs du padding se retrouvent inclues dans les valeur de l'objet Insets).

Si tu veux bien faire, mais ça sera plus complexe : plutôt qu'étendre un TextField, il faut faire comme font Spinner, ComboBox et DatePicker. Il faut créer un nouveau contrôle : étendre Region (avec décorations), contenir et déléguer l'édition à un TextField (sans décoration), avoir le bouton pour tout effacer et faire la mise en page appropriée lorsque le bouton s'affiche (le champs d'édition et le bouton sont adjacents) ou pas (le champs d'édition prend toute la largeur).