Tags for javaFX not wrapping

[David Go]

Hey all I need some assistance in getting my tag app working as it should. Currently it displays values like this:


However, I am wanting it to wrap the tags instead of continuing to go horizontal. I changed all the HBox's to FlowPane's but that made it look all weird and didn't work well. I also tried doing VBox's but it still messes it up.

What I am wanting it to look like is this:


The current code:

    package application;
    	
    import java.util.ArrayList;
    import java.util.LinkedList;
    import java.util.List;
    import java.util.stream.Collectors;
    
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.collections.ListChangeListener;
    import javafx.collections.ObservableList;
    import javafx.collections.ObservableSet;
    import javafx.geometry.Insets;
    import javafx.geometry.Pos;
    import javafx.geometry.Side;
    import javafx.stage.Stage;
    import javafx.scene.Node;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.control.ContextMenu;
    import javafx.scene.control.CustomMenuItem;
    import javafx.scene.control.TextField;
    import javafx.scene.image.Image;
    import javafx.scene.image.ImageView;
    import javafx.scene.input.KeyCode;
    import javafx.scene.layout.HBox;
    import javafx.scene.layout.Priority;
    import javafx.scene.layout.VBox;
    import javafx.scene.paint.Color;
    import javafx.scene.text.Font;
    import javafx.scene.text.FontWeight;
    import javafx.scene.text.Text;
    import javafx.scene.text.TextFlow;
    
    public class Main3 extends Application{
    	Color txtColor;
    	
        @Override
        public void start(Stage primaryStage) throws Exception {
        	 primaryStage.setTitle("TagInputFx Demo");
    
             VBox root = new VBox();
             AutocompleteMultiSelectionBox tagInput = new AutocompleteMultiSelectionBox();         
             ObservableSet<String> sug = FXCollections.observableSet();         
             String[] listOfDBCalls = "Integrated Security=, user=, password=, pwd=, Database=, Encrypt=".split(",");
             
             for (String call : listOfDBCalls) {
            	 sug.add(call);
             }         
             
             tagInput.setSuggestions(sug);
             tagInput.setTextColor(Color.BLACK);         
             
             Text header = new Text("Tags:");
             root.getChildren().addAll(header, tagInput);
             Scene scene = new Scene(root, 600, 250);
             primaryStage.setScene(scene);
             primaryStage.show();        
        }
        
    
        public static void main3(String[] args) {
            launch(args);
        }
        
        public class AutocompleteMultiSelectionBox extends HBox {
            private final ObservableList<String> tags;
            private final ObservableSet<String> suggestions;
            private ContextMenu entriesPopup;
            private static final int MAX_ENTRIES = 15;
            private final TextField inputTextField;
    
            public AutocompleteMultiSelectionBox() {
                getStyleClass().setAll("tag-bar");
                getStylesheets().add(getClass().getResource("application.css").toExternalForm());
                
                tags = FXCollections.observableArrayList();
                suggestions = FXCollections.observableSet();
                inputTextField = new TextField();
                
                this.entriesPopup = new ContextMenu();
                
                setListner();
                
                inputTextField.setOnKeyPressed(event -> {
                    if (event.getCode().equals(KeyCode.BACK_SPACE) && !tags.isEmpty() && inputTextField.getText().isEmpty()) {
                        String last = tags.get(tags.size() - 1);
                        String orgTag = last.split("=")[0] + "=";
                        	
                        if (orgTag.length() > 2) {
    	                    suggestions.add(orgTag);
    	                    tags.remove(last);
                        }
                    } else if (event.getCode().toString() == "ENTER" || event.getCode().toString() == "TAB" && !inputTextField.getText().isEmpty()) {
                        String newTag = inputTextField.getText();
                        String orgTag = newTag.split("=")[0] + "=";
    
                        if (orgTag.length() > 2) {
                        	suggestions.add(newTag);
                            tags.add(newTag);
                            inputTextField.setText("");
                            suggestions.remove(orgTag);
                            suggestions.remove(newTag);
                        }
                    } else if (event.getCode().toString() == "ESCAPE") {
                    	inputTextField.clear();
                    } else if (event.getCode().toString() == "DOWN" || event.getCode().toString() == "UP") {
                    	entriesPopup.getSkin().getNode().lookup(".menu-item").requestFocus();
                    }
                    
                    System.out.println(event.getCode().toString());                    
                });
    
                inputTextField.prefHeightProperty().bind(this.heightProperty());
                HBox.setHgrow(inputTextField, Priority.ALWAYS);
                inputTextField.setBackground(null);
    
                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++) {
                                newSublist.add(null);
                            }
                            
                            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()));
                            }
                        }
                    }
                });
                
                getChildren().add(inputTextField);
            }
    
            private TextFlow buildTextFlow(String text, String filter) {
                int filterIndex = text.toLowerCase().indexOf(filter.toLowerCase());
                Text textBefore = new Text(text.substring(0, filterIndex));
                Text textAfter = new Text(text.substring(filterIndex + filter.length()));
                Text textFilter = new Text(text.substring(filterIndex, filterIndex + filter.length()));
                
                textFilter.setFill(Color.ORANGE);
                textFilter.setFont(Font.font("Helvetica", FontWeight.BOLD, 12));
                
                return new TextFlow(textBefore, textFilter, textAfter);
            }
    
            private void setListner() {
                inputTextField.textProperty().addListener((observable, oldValue, newValue) -> {
                    if (newValue.isEmpty()) {
                        entriesPopup.hide();
                    } else {
                        List<String> filteredEntries = suggestions
                        		.stream()
                                .filter(e -> e.toLowerCase().contains(newValue.toLowerCase()))
                                .collect(Collectors.toList());
    
                        if (!filteredEntries.isEmpty()) {
                            populatePopup(filteredEntries, newValue);
                            
                            if (!entriesPopup.isShowing()) {
                                entriesPopup.show(this, Side.BOTTOM, 0, 0);
                            }
                        } else {
                            entriesPopup.hide();
                        }
                    }
                });
    
                focusedProperty().addListener((observableValue, oldValue, newValue) -> entriesPopup.hide());
            }
    
            private void populatePopup(List<String> searchResult, String searchRequest) {
                List<CustomMenuItem> menuItems = new LinkedList<>();
                
                searchResult.stream()
                        .limit(MAX_ENTRIES)
                        .forEach(result -> {
                            TextFlow textFlow = buildTextFlow(result, searchRequest);
                            textFlow.prefWidthProperty().bind(AutocompleteMultiSelectionBox.this.widthProperty());
                            CustomMenuItem item = new CustomMenuItem(textFlow, true);
                            
                            menuItems.add(item);
    
                            item.setOnAction(actionEvent -> {
                            	if (result.endsWith("=")) {
                            		//Dont close it yet.. keep typing
                            		inputTextField.setText(result);
                            		inputTextField.requestFocus();
                            		inputTextField.end();
                            	} else {
                            		//It has values on both sides of the =
                            		//so lets add it to the tag list
    	                            tags.add(result);
    	                            suggestions.remove(result);
    	                            inputTextField.clear();
    	                            entriesPopup.hide();
                            	}
                            });
                        });
    
                entriesPopup.getItems().clear();
                entriesPopup.getItems().addAll(menuItems);
            }
    
            public final ObservableList<String> getTags() {
                return tags;
            }
    
            public final ObservableSet<String> getSuggestions() {
                return suggestions;
            }
            
            public final void setTextColor(Color c) {
                txtColor = c;
            }
    
            public final void setSuggestions(ObservableSet<String> suggestions) {
                this.suggestions.clear();
                this.suggestions.addAll(suggestions);
            }
    
            private class Tag extends HBox {
                Tag(String tag) {
                    Button removeButton = new Button();
                    Image img = new Image(getClass().getResource("delete.png").toExternalForm());
                    ImageView view = new ImageView(img);
                    
                    view.setFitHeight(16);
                    view.setPreserveRatio(true);
                    
                    getStyleClass().add("tag");
                    
                    removeButton.setBackground(null);
                    removeButton.setOnAction(event -> {
                        tags.remove(tag);
                        suggestions.add(tag);
                        inputTextField.requestFocus();
                    });
    
                    Text text = new Text(tag);
                    
                    text.setFill(txtColor);
                    text.setFont(Font.font(text.getFont().getFamily(), FontWeight.BOLD, text.getFont().getSize()));
    
                    setAlignment(Pos.CENTER);
                    setSpacing(2);
                    setPadding(new Insets(0, 0, 0, 5));
    
                    removeButton.setGraphic(view);
                    
                    getChildren().addAll(text, removeButton);
                }
            }
        }
    }

Is there a way of doing this with the hbox?

Using the code for the FlowPane this is what the output looks like:

[Lou Hamers]

I'll have a look at it! I haven't actually used FlowPane before but I imagine that'd be your best container.

What's probably happening is just the automatic sizing of your containers isn't defaulting to decent values, so we probably just need to set some specific max/min/preferred sizes.

If you want to drop your css in here I'll use that to get a more similar look. But regardless I'll take a look at the code here...

[David Go]

Lou Hamers wrote:I'll have a look at it! I haven't actually used FlowPane before but I imagine that'd be your best container.

What's probably happening is just the automatic sizing of your containers isn't defaulting to decent values, so we probably just need to set some specific max/min/preferred sizes.

If you want to drop your css in here I'll use that to get a more similar look. But regardless I'll take a look at the code here...

Much appreciated, Lou

/* JavaFX CSS - Leave this comment until you have at least create one rule which uses -fx-Property */
.tag-bar {
    -fx-border-color: #dbdae7;
    -fx-spacing: 1;
    -fx-padding: 1;
    -fx-max-height: 30;
}

.tag-bar .tag {
	-fx-border-color: b7b5cf;
    -fx-background-color: #dbdae7;
    -fx-border-radius: 10;
    -fx-background-radius: 10;
}

.tag-bar .tag {
    -fx-text-fill: #000;
}

.tag-bar #tagText {
    -fx-text-fill: orange;
    -fx-font-weight: bold;
}

[Lou Hamers]

No problem - it'll take a little bit to go through the code to figure out what it's doing.

A quick test in Scene Builder to see how a FlowPane reacts to TextInput children seems to indicate that it does do what you want "by default". The problems look like 1) styling (solvable for sure) and 2) automatic width sizing of the TextInput (this could be tricky with that component).



This code does make it act strange big time though. Every letter I type in a new tag makes the tag heights grow, but then they right-size again. And row 2+ TextInput heights kind of go crazy. So yeah, I'll take a closer look...

[Lou Hamers]

Try removing this line at 115:

inputTextField.prefHeightProperty().bind(this.heightProperty());

And line 67, go back to FlowPane:

public class AutocompleteMultiSelectionBox extends FlowPane {

Still testing but I was surprised to see that it looks like it's pretty close to reasonable behavior (I didn't think it would be that easy to get such a result).

[Lou Hamers]

What was happening with the bind() line is the tags (InputFields) had their preferred height following the overall container itself. Which I'm pretty sure you don't want to do.

Not sure if this is exactly what you have in mind, but it does seem functional:

[David Go]

Lou Hamers wrote:What was happening with the bind() line is the tags (InputFields) had their preferred height following the overall container itself. Which I'm pretty sure you don't want to do.

Not sure if this is exactly what you have in mind, but it does seem functional:

Yep that did the trick! Thanks very much for helping me out with that Lou!