UI/UX: Create 'TagBar' components that making tag UI according to inputed text

Author: Dokyeongyun

src/main/java/root/javafx/CustomView/TagBar.java

@@ -0,0 +1,107 @@
+package root.javafx.CustomView;
+
+import java.util.ArrayList;
+import java.util.stream.Collectors;
+
+import de.jensd.fx.glyphs.fontawesome.FontAwesomeIcon;
+import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView;
+import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
+import javafx.collections.ObservableList;
+import javafx.geometry.Insets;
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.control.TextField;
+import javafx.scene.layout.FlowPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.paint.Paint;
+import javafx.scene.text.Text;
+
+public class TagBar extends FlowPane {
+
+	private final ObservableList<String> tags;
+	private final TextField inputTextField;
+
+	public TagBar() {
+		getStyleClass().setAll("tag-bar");
+		getStylesheets().add(getClass().getResource("/css/javaFx.css").toExternalForm());
+
+		// Initialize
+		tags = FXCollections.observableArrayList();
+		inputTextField = new TextField();
+		
+		// Set on action event on TextField (Add tag to tags and clear TextField text)    
+		inputTextField.setOnAction(e -> {
+			String text = inputTextField.getText();
+			if (!text.isEmpty() && !tags.contains(text)) {
+				tags.add(text);
+				inputTextField.clear();
+			}
+		});
+		getChildren().add(inputTextField);
+
+		// Focusing when mouse click this FlowPane
+		setOnMouseClicked(e -> {
+			inputTextField.requestFocus();
+		});
+		
+		// Change TextField width according to length of input text
+		inputTextField.textProperty().addListener((ob, oldValue, newValue) -> {
+			Text textWrapper = new Text(newValue);
+			textWrapper.setFont(inputTextField.getFont());
+			inputTextField.setPrefWidth(Math.ceil(textWrapper.getLayoutBounds().getWidth()) + 20);
+		});
+
+		// Set ListChangeListener on tags list
+		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()));
+					}
+				}
+			}
+		});
+	}
+
+	public ObservableList<String> getTags() {
+		return tags;
+	}
+
+	private class Tag extends HBox {
+
+		public Tag(String tag) {
+			getStyleClass().setAll("tag");
+			FlowPane.setMargin(this, new Insets(2.5));
+
+			FontAwesomeIconView icon = new FontAwesomeIconView(FontAwesomeIcon.TIMES);
+			icon.setFill(Paint.valueOf("gray"));
+
+			Button removeButton = new Button("", icon);
+			removeButton.setOnAction((e) -> tags.remove(tag));
+
+			Text text = new Text(tag);
+			HBox.setMargin(text, new Insets(0, 0, 0, 5));
+
+			getChildren().addAll(text, removeButton);
+		}
+	}
+
+}

src/main/resources/css/javaFx.css

@@ -298,4 +298,38 @@
 .divider-exist:horizontal > .split-pane-divider {
     -fx-background-color: #dcdcdc;
     -fx-padding:0.5px;
+}
+
+
+/* tag-bar */
+.tag-bar {
+    /*-fx-border-color: rgb(200, 200, 200);*/
+    -fx-border-color: transparent;
+    -fx-spacing: 3.0;
+    -fx-padding: 3.0;
+    -fx-max-height: 30.0;
+}
+
+.tag-bar .text-field {
+	-fx-border-width: 0.0px;
+    -fx-background-color: transparent;
+}
+
+.tag-bar .text-field:focused {
+	-fx-focus-color: transparent;
+	-fx-faint-focus-color: transparent;
+}
+
+.tag-bar .tag {
+	-fx-border-radius: 2.0px;
+	-fx-border-width: 0.3px;
+	-fx-border-color: gray;
+    -fx-background-color: transparent;
+    -fx-alignment: center;
+    -fx-font-family: "Noto Sans Korean Regular";
+}
+
+.tag-bar .tag .button {
+	-fx-font-family: "Noto Sans Korean Regular";
+    -fx-background-color: transparent;
 }