GoXr3Plus GoXr3Plus - 1 year ago 196
Java Question

Implement tags bar in javaFX

Demostration of answer:(answered May 29 at 3:10 am)

Based on the answers and fanstasy this is what i have implemented,it has Drag And Drop and many more options...

enter image description here

Actual Question before answered:(asked May 22 at 19:53)

The title might be not too great but what i want to do is something like this in javaFX:



enter image description here

StackOverFlow(which has and autocomplete):

enter image description here

I don't require to write me the code for that,instead i want to know how i can achieve that using javaFX and some ideas.Thanks for helping!

Answer Source

For the tags you can use a custom styled HBox containing a Text (the tag name) node an a Button (the deletion button (X)). By playing around with the background and the border you can achieve the desired look of the tags.

The onAction handler of the button should remove the tag from it's parent...

For the whole tag bar you can use another HBox. Use the appropriate border for the correct look. In addition to the tags add a TextField with no background as last element and set the Hgrow property of that TextField to Priotity.ALWAYS to cover the rest of the available space.

The onAction handler of this TextField adds new tags and clears the content of the TextField.

You could e.g. use ControlsFX's autocompletion features with the TextField or implement it on your own for a custom look...

public class TagBar extends HBox {

    private final ObservableList<String> tags;
    private final TextField inputTextField;

    public ObservableList<String> getTags() {
        return tags;

    public TagBar() {
        tags = FXCollections.observableArrayList();
        inputTextField = new TextField();
        inputTextField.setOnAction(evt -> {
            String text = inputTextField.getText();
            if (!text.isEmpty() && !tags.contains(text)) {

        HBox.setHgrow(inputTextField, Priority.ALWAYS);

        tags.addListener((ListChangeListener.Change<? extends String> change) -> {
            while (change.next()) {
                if (change.wasPermutated()) {
                    ArrayList<Node> newSublist = new ArrayList<>(change.getTo() - change.getFrom());
                    for (int i = change.getFrom(), end = change.getTo(); i < end; i++) {
                    for (int i = change.getFrom(), end = change.getTo(); i < end; i++) {
                        newSublist.set(change.getPermutation(i), getChildren().get(i));
                    getChildren().subList(change.getFrom(), change.getTo()).clear();
                    getChildren().addAll(change.getFrom(), newSublist);
                } else {
                    if (change.wasRemoved()) {
                        getChildren().subList(change.getFrom(), change.getFrom() + change.getRemovedSize()).clear();
                    if (change.wasAdded()) {
                        getChildren().addAll(change.getFrom(), change.getAddedSubList().stream().map(Tag::new).collect(Collectors.toList()));

    private class Tag extends HBox {

        public Tag(String tag) {
            Button removeButton = new Button("X");
            removeButton.setOnAction((evt) -> tags.remove(tag));
            Text text = new Text(tag);
            HBox.setMargin(text, new Insets(0, 0, 0, 5));
            getChildren().addAll(text, removeButton);



.tag-bar {
    -fx-border-color: blue;
    -fx-spacing: 3;
    -fx-padding: 3;
    -fx-max-height: 30;

.tag-bar .tag {
    -fx-background-color: lightblue;
    -fx-alignment: center;

.tag-bar .tag .button {
    -fx-background-color: transparent;
public void start(Stage primaryStage) {
    Button btn = new Button("Sort");

    StackPane.setAlignment(btn, Pos.BOTTOM_CENTER);

    TagBar tagBar = new TagBar();

    btn.setOnAction((ActionEvent event) -> {

    Button btn2 = new Button("add \"42\"");
    btn2.setOnAction(evt -> {
        if (!tagBar.getTags().contains("42")) {

    VBox root = new VBox();
    root.getChildren().addAll(tagBar, btn, btn2);
    root.setPrefSize(300, 400);

    Scene scene = new Scene(root);

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download