Add expand animation to TreeView - javafx

Question

I have this example of TreeView:
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 this can be done?

Answer 1

Take a look at this I found searching online. I found it here, after googling "javafx TreeView animation".
Ok, so after spending a few moments examining the code, I have deduced 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 triggers code that performs the desired animation every time rootItem.expandedProperty() changes, i.e. the user expanded or collapsed the tree.
Every time that something causes expandedProperty to change, it constructs a new Timeline object, which I assume represents the actual steps in a particular animation. The current code is modifying the opacity of the tree, causing rootItem's subtree to 'fade in' over the course of 1 second.
To implement a seperate animation for closing the tree, you can use the method parameters of changed in the listener to differentiate between the two cases.
In order for such an animation to occur with each subtree, such a listener will need to be added to every node in the tree that has children. Enumerating all the elements of a tree is an extremely basic operation you learned when you learned data structures, so I don't need to go into exactly how to accomplish this.
However, if the fade-in animation is not good enough for your application, then I would suggest using a nested accordion, like this question does. From just the sample items you give, an accordion would be a better way to show the employee lists anyway.