2

I am using ControlsFX's CustomTextField. When I click on one of the autocomplete options, I need to clear the TextField and create a Tag so I can add it to a FlowPane. How do I set up an OnClick or OnSelectionChange listener or override the current OnClick?

enter image description here

SedJ601
  • 12,173
  • 3
  • 41
  • 59

1 Answers1

4

I took a look at the CustomTextField documentation and I can't find a clear way of doing what you want. So I will guess you have to implement it yourself or to find a workaround. In case you decide to choose the second choice here is something that I believe works very well :

import java.util.ArrayList;

import org.controlsfx.control.textfield.CustomTextField;
import org.controlsfx.control.textfield.TextFields;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TestApplication extends Application {

    private boolean addedBySelection = false;
    private ArrayList<String> tagList = new ArrayList<>();
    private FlowPane tagPane;

    @Override
    public void start(Stage primaryStage) throws Exception {

        VBox mainPane = new VBox(10);
        mainPane.setStyle("-fx-background-color : white");
        mainPane.setPadding(new Insets(15));
        mainPane.setAlignment(Pos.CENTER);

        tagPane = new FlowPane(15, 10);
        tagPane.setPrefHeight(50);

        CustomTextField field = new CustomTextField() {
            @Override
            public void paste() {
                super.paste();
                addedBySelection = false;
            }
        };

        field.setOnKeyPressed(e -> {
            addedBySelection = false;
        });

        field.setOnKeyReleased(e -> {
            addedBySelection = true;
        });

        field.textProperty().addListener(e -> {
            if (addedBySelection) {
                System.out.println("Text Changed from the suggession list ");
                addTag(field.getText());

                addedBySelection = false;
                field.clear();
                addedBySelection = true;
            } else {
                System.out.println("User Input (Mouse paste, or typing) ");
            }
        });

        TextFields.bindAutoCompletion(field, new String[] { "Java", "C++", "C#", "Python", "Haskell" });

        mainPane.getChildren().addAll(field, tagPane);

        Scene scene = new Scene(mainPane, 200, 100);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void addTag(String tag) {
        if (!tagList.contains(tag)) {
            tagList.add(tag);
            Label tagLabel = new Label(tag);
            tagLabel.setStyle("-fx-background-color : #E1ECF4; -fx-text-fill : #6A739D;");
            tagPane.getChildren().add(tagLabel);
        }
    }

    public static void main(String[] args) {
        launch(args);
    }

}

I tried to keep it a simple as it could. The code above is doing exactly what you are after. The logic is to set a listener on the textProperty ( cause we can't set one on selection with the mouse from the autocomplete list ) and somehow find out if the user actually triggers the event using the autocomplete list or not. Thus I have a flag looking for user inputs (ex. key press) and 'releasing' the flag each time the keys are released. We have to catch the paste action as well in order to avoid mistakes if the user pastes a text on the field. One more last thing is the way we clear the field. We have to set our flag to false because the field.clear() will trigger an event as well and we don't want to fall into an event loop.

Note : With the current workaround, you will see that you are able to make a selection from the autocomplete list by pressing the enter key as well.

JKostikiadis
  • 2,847
  • 2
  • 22
  • 34