Add extension animation to TreeView

Question

I have a TreeView example:

import java.util.Arrays; import java.util.List; import javafx.application.Application; import javafx.beans.property.SimpleStringProperty; import javafx.event.EventHandler; import javafx.scene.Scene; import javafx.scene.control.TextField; import javafx.scene.control.TreeCell; import javafx.scene.control.TreeItem; import javafx.scene.control.TreeView; import javafx.scene.input.KeyCode; import javafx.scene.input.KeyEvent; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.stage.Stage; import javafx.util.Callback; public class MainApp extends Application { //private final Node rootIcon = new ImageView(new Image(getClass().getResourceAsStream("picture.png"))); //private final Image depIcon = new Image(getClass().getResourceAsStream("picture.png")); List<Employee> employees = Arrays.<Employee>asList( new Employee("Ethan Williams", "Sales Department"), new Employee("Emma Jones", "Sales Department"), new Employee("Michael Brown", "Sales Department"), new Employee("Anna Black", "Sales Department"), new Employee("Rodger York", "Sales Department"), new Employee("Susan Collins", "Sales Department"), new Employee("Mike Graham", "IT Support"), new Employee("Judy Mayer", "IT Support"), new Employee("Gregory Smith", "IT Support"), new Employee("Jacob Smith", "Accounts Department"), new Employee("Isabella Johnson", "Accounts Department")); TreeItem<String> rootNode = new TreeItem<>("MyCompany Human Resources");//, rootIcon); // Set picture public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { rootNode.setExpanded(true); for (Employee employee : employees) { TreeItem<String> empLeaf = new TreeItem<>(employee.getName()); boolean found = false; for (TreeItem<String> depNode : rootNode.getChildren()) { if (depNode.getValue().contentEquals(employee.getDepartment())) { depNode.getChildren().add(empLeaf); found = true; break; } } if (!found) { TreeItem<String> depNode = new TreeItem<>( employee.getDepartment()//,new ImageView(depIcon) // Set picture ); rootNode.getChildren().add(depNode); depNode.getChildren().add(empLeaf); } } stage.setTitle("Tree View Sample"); VBox box = new VBox(); final Scene scene = new Scene(box, 400, 300); scene.setFill(Color.LIGHTGRAY); TreeView<String> treeView = new TreeView<>(rootNode); //treeView.setEditable(true); treeView.setCellFactory(new Callback<TreeView<String>, TreeCell<String>>() { @Override public TreeCell<String> call(TreeView<String> p) { return new TextFieldTreeCellImpl(); } }); box.getChildren().add(treeView); stage.setScene(scene); stage.show(); } private final class TextFieldTreeCellImpl extends TreeCell<String> { private TextField textField; public TextFieldTreeCellImpl() { } @Override public void startEdit() { super.startEdit(); if (textField == null) { createTextField(); } setText(null); setGraphic(textField); textField.selectAll(); } @Override public void cancelEdit() { super.cancelEdit(); setText((String) getItem()); setGraphic(getTreeItem().getGraphic()); } @Override public void updateItem(String item, boolean empty) { super.updateItem(item, empty); if (empty) { setText(null); setGraphic(null); } else { if (isEditing()) { if (textField != null) { textField.setText(getString()); } setText(null); setGraphic(textField); } else { setText(getString()); setGraphic(getTreeItem().getGraphic()); } } } private void createTextField() { textField = new TextField(getString()); textField.setOnKeyReleased(new EventHandler<KeyEvent>() { @Override public void handle(KeyEvent t) { if (t.getCode() == KeyCode.ENTER) { commitEdit(textField.getText()); } else if (t.getCode() == KeyCode.ESCAPE) { cancelEdit(); } } }); } private String getString() { return getItem() == null ? "" : getItem().toString(); } } public static class Employee { private final SimpleStringProperty name; private final SimpleStringProperty department; private Employee(String name, String department) { this.name = new SimpleStringProperty(name); this.department = new SimpleStringProperty(department); } public String getName() { return name.get(); } public void setName(String fName) { name.set(fName); } public String getDepartment() { return department.get(); } public void setDepartment(String fName) { department.set(fName); } } } 

I want to add animation when I expand the tree. How can I do that?

Answer 1

Take a look at this; I found a search on the Internet. I found here after googling "javafx TreeView animation".

Well, therefore, after spending several minutes studying the code, I realized that the important part of the code is this:

 rootItem.expandedProperty().addListener(new ChangeListener<Boolean>() { public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) { new Timeline( new KeyFrame(Duration.seconds(0), new KeyValue(tree.opacityProperty(), 0)), new KeyFrame(Duration.seconds(1), new KeyValue(tree.opacityProperty(), 1.0)) ).play(); } }); 

This code adds a listener that runs code that executes the required animation every time rootItem.expandedProperty() changes, i.e. the user expands or collapses the tree.

Each time something triggers a change in expandedProperty , it creates a new Timeline object, which I assume is the actual steps in a particular animation. The current code changes the opacity of the tree, causing the rootItem subtree rootItem “disappear” for 1 second.

To implement a separate animation to close the tree, you can use the parameters of the changed method in the listener to distinguish between two cases.

For such an animation to occur with each subtree, such a listener must be added to each node in the tree with children. Enumerating all the elements of a tree is an extremely simple operation that you learned when you studied data structures, so I don’t need to understand exactly how to do this.

However, if the fade animation is not good enough for your application, I would suggest using a nested accordion, for example this question . Of the only elements you give, an accordion will be the best way to show staff lists anyway.