TextField avec icône

Version imprimable

15/08/2014, 16h55
win_ubuntu

2 pièce(s) jointe(s)

TextField avec icône
Bonsoir,
j'utilise netbeans 8 et scenebuiler 2.0 pour se familiariser avec JavaFX.
mon application nécessite un composant TextField avec image.
le comportement est le suivant :
1. si la propriété texte contient une chaîne vide l'con 1 est utilisé.
2. sinon l'con 2 qui est utilsé.
j'ai besoin des pistes pour réaliser çà que ce soit avec l'outil scenebuilder, style css, ou avec code JavaFX.

Tu peux partir d'une base FXML (définissant le TextField et l'ImageView et le contrôle englobant) mais il te faudra rajouter un peu de code dans le contrôleur pour gérer le changement d'image.

Soit les éléments suivants :

Code:

1
2
3
4
5
6
7
8
9
10
11
final Image lensIcon = new Image(getClass().getResource("Lens.png").toExternalForm());
final Image crossIcon = new Image(getClass().getResource("Cross.png").toExternalForm());
final ImageView imageView = new ImageView(lensIcon);
imageView.setMouseTransparent(true);        
StackPane.setAlignment(imageView, Pos.CENTER_RIGHT);
final TextField textField = new TextField();
imageView.setOnMouseClicked(mouseEvent -> textField.setText(null));
final StackPane control = new StackPane(textField, imageView);
control.setMinSize(-1, -1);
control.setPrefSize(-1, -1);
control.setMaxSize(-1, -1);

Une première approche simple consiste à mettre un InvalidationListener ou un ChangeListener sur la propriété text du TextField :

Code:

1
2
3
4
5
6
textField.textProperty().addListener(observable -> {
    final String text = textField.getText();
    final Image icon = (text == null || text.isEmpty()) ? lensIcon : crossIcon;
    imageView.setImage(icon);
    imageView.setMouseTransparent(icon == lensIcon);
});

Une seconde approche consiste à utiliser le binding de bas niveau :

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
imageView.imageProperty().bind(new ObjectBinding<Image>() {
    {
        bind(textField.textProperty());
    }
 
    @Override
    public void dispose() {
        unbind(textField.textProperty());
        super.dispose();
    }
 
    @Override
    protected Image computeValue() {
        final String text = textField.getText();
        final Image icon = (text == null || text.isEmpty()) ? lensIcon : crossIcon;
        return icon;
    }
});
imageView.mouseTransparentProperty().bind(new BooleanBinding() {
    {
        bind(imageView.imageProperty());
    }
 
    @Override
    public void dispose() {
        unbind(imageView.imageProperty());
        super.dispose();
    }
 
    @Override
    protected boolean computeValue() {
        return imageView.getImage() == lensIcon;
    }
});

Citation:

Envoyé par bouye

Tu peux partir d'une base FXML (définissant le TextField et l'ImageView et le contrôle englobant) mais il te faudra rajouter un peu de code dans le contrôleur pour gérer le changement d'image.

tout d'abord, je vous remercie infiniment pour cette réponse très utile.
j'ai utilisé votre code et il s'exécute comme il faut. mais j'ai quelques questions à vous poser:
1- à quoi sert les trois lignes suivantes (je ne voie pas leur utilités):
Code:

1 2 3 control.setMinSize(-1, -1); control.setPrefSize(-1, -1); control.setMaxSize(-1, -1);
2- j'ai mis le code dans la méthode initialize du contrôleur:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 public void initialize(URL url, ResourceBundle rb) { final Image lensIcon = new Image(getClass().getResource("lens.png").toExternalForm()); final Image crossIcon = new Image(getClass().getResource("cross.png").toExternalForm()); texte.textProperty().addListener(observable -> { final String text = texte.getText(); final Image icon = (text == null || text.isEmpty()) ? lensIcon : crossIcon; imageView.setImage(icon); imageView.setMouseTransparent(icon == lensIcon); }); }
est ce qu'il existe une autre façon (d'autres méthodes) pour mettre ce code quelque part dans mon contrôleur.
3- si je veux mettre ce code dans la classe Main, comment je puisse accéder aux attributs déclaré avec @FXML: j'ajoute des méthodes public get()? où bien il existe des méthodes prédéfinies permettant de faire çà.
merci d'avance