Labels

Saturday, 17 August 2013

JavaFX 2 - Mastering the TreeView

JavaFX 2 - Mastering the TreeView
The TreeView is a rely good component for presenting a tree structure, but it can be a bit tricky to get the different part worked out.

In this post we will create a demo which let us:
  • Lazy loading the children of the nodes in the tree.
  • Using the a ChangeListener to print the of the selected nodes text.
  • Adding new nodes to the tree.

The simple demo which we will create:



First out, creating the components which is used in the demo

view plaincopy to clipboardprint?
  1. /** Create and setup all the components used in this demo. */  
  2.  private void initComponents() {  
  3.   LazyTreeItem rootItem = new LazyTreeItem("Root", 0);  
  4.   rootItem.setExpanded(true);  
  5.   treeView = new TreeView<string>(rootItem);  
  6.   treeView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);  
  7.   treeView.getSelectionModel().selectedItemProperty().addListener(this);  
  8.     
  9.   labelSelectedItem = new Label("Selected:");  
  10.     
  11.   labelErrorText = new Label("Error: ");  
  12.     
  13.   inputNewItem = new TextField();  
  14.     
  15.   buttonNewItem = new Button("Insert item");  
  16.   buttonNewItem.setOnAction(this);  
  17.  }  
Row 3: we start by creating a root node which we will be using as the root in our tree. The node is a class which we will be creating to be able to load the children of the node on request (lazy).

Row 4: Making the root node expanded will render the root expanded with all children visible.

Row 5: Creating the TreeView with our root node as the root for the tree.

Row 6: By using the trees selection model we set the tree to only support one selected node at each time. This can be configured to be multiple nodes, but in this demo we are only interested in one node at time.

Row 7: By adding a ChangeListener to the selection model we can track when we change the selected node in the tree. More on the ChangeListener later. For now just notice how we add the listener to the tree.

Row 9 and on is the other components which are used in the demo. Nothing fancy about them.

Laying out the demo

view plaincopy to clipboardprint?
  1. @Override  
  2.   public void start(Stage stage) throws Exception {  
  3.   initComponents();  
  4.     
  5.   stage.setTitle("Demo of TreeView");  
  6.     
  7.   BorderPane mainPane = new BorderPane();  
  8.     
  9.   mainPane.setLeft(treeView);  
  10.     
  11.   VBox centerPane = new VBox();  
  12.   centerPane.setSpacing(3);  
  13.   centerPane.setPadding(new Insets(3));  
  14.   centerPane.getChildren().addAll(labelSelectedItem, labelErrorText, inputNewItem, buttonNewItem);  
  15.   mainPane.setCenter(centerPane);  
  16.     
  17.   Scene scene = new Scene(mainPane, 600, 400);  
  18.     
  19.   stage.setScene(scene);  
  20.   stage.sizeToScene();  
  21.   stage.show();    
  22.  }  

We are using a simple BorderPane where we place the TreeView to the left, and the rest of the components within a VBox in the center section.

Creating lazy loading of the children in the tree

So far things has been straight forward and without any fancy stuff. However to solve the lazy loading of the child nodes we need to dig into the TreeItem a bit. The idea of the lazy loading is to only load the child nodes when we need them and this is made by creating a class which we extend with TreeItem and overload some functions.

view plaincopy to clipboardprint?
  1. private class LazyTreeItem extends TreeItem<String> {  
  2.   /** The depth of this tree item in the {@link TreeView}. */  
  3.   private final int depth;  
  4.   /** Control if the children of this tree item has been loaded. */  
  5.   private boolean hasLoadedChildren = false;  
  6.     
  7.   public LazyTreeItem(String itemText, int depth) {  
  8.    super(itemText);  
  9.    this.depth = depth;  
  10.   }  
  11.     
  12.   @Override  
  13.   public ObservableList<TreeItem<String>> getChildren() {  
  14.    if (hasLoadedChildren == false) {  
  15.     loadChildren();  
  16.    }  
  17.    return super.getChildren();  
  18.   }  
  19.     
  20.   @Override  
  21.   public boolean isLeaf() {  
  22.    if (hasLoadedChildren == false) {  
  23.     loadChildren();  
  24.    }  
  25.    return super.getChildren().isEmpty();  
  26.   }  
  27.     
  28.   /** Create some dummy children for this item. */  
  29.   @SuppressWarnings("unchecked") // Safe to ignore since we know that the types are correct.  
  30.   private void loadChildren() {  
  31.    hasLoadedChildren = true;  
  32.    int localDeepth = depth + 1;  
  33.    LazyTreeItem child1 = new LazyTreeItem("Child 1 (deepth = " + localDeepth + ")",  
  34. localDeepth);  
  35.    LazyTreeItem child2 = new LazyTreeItem("Child 2 (deepth = " + localDeepth + ")",  
  36. localDeepth);  
  37.    super.getChildren().setAll(child1, child2);  
  38.   }  
  39.     
  40.   /** Return the depth of this item within the {@link TreeView}.*/  
  41.   public int getDepth() {  
  42.    return depth;  
  43.   }  
  44.  }  

Row 1: Extending the TreeItem otherwise we will not be able to put our item in the TreeView.

Row 12-18: Overriding the getChildren method will provide us the ability to load the children lazy since the method is first called when the parent node is expanded. Since we can not populate the children in the constructor of the node we need to populate the children now. Populating the children in the constructor would not make the node lazy since all children would be loaded when a new instance of the node is created.

Row 20-26: Overriding the isLeaf method is necessary since it is called when the node is rendered. If we would not load the children when the function is called it would always return true, and the node would be rendered as a leaf without the ability to show any potential children.

Row 28-37: Here is where we would load our real node if this was something else then a demo. For now we are satisfied by creating two dummy children for this node.

Row 36: Using the setAll method will remove all existing children of the node and add the new children instead. If we would like to add more children to the node we instead should use addAll. More on this later when we implement a function to add new nodes to the tree.

Showing the selected item's text

When a user click on a node in the tree we like to show the text in the 'Selected' label. This is achived by using the ChangeListener which we atached to the selection model when we created the TreeView.

view plaincopy to clipboardprint?
  1. ... implements EventHandler<ActionEvent>, ChangeListener<TreeItem<String>>  
  2.   
  3. ...  
  4.   
  5. treeView.getSelectionModel().selectedItemProperty().addListener(this);  
  6.   
  7. ...  
  8.   
  9. /** Handles change event from the {@link TreeView}. */  
  10.  @Override  
  11.  public void changed(ObservableValue<? extends TreeItem<String>> observableValue, TreeItem<String> oldItem, TreeItem<String> newItem) {  
  12.   labelSelectedItem.setText("Selected: " + newItem.getValue());  
  13.  }  

Row 1: On the class we implement the ChangeListener interface.

Row 5: We assign our listener to the selection model of the tree.

Row 11-13: This is where we implement the action we like to do when a change to the selection in the tree has happen. For this demo we are pleased with just printing the text of the node in our label.

Adding a new node to the tree

 In the last part of this demo we add a function for adding a new node to the tree. By using a text input field and a button this is achieved together with the selected node in the tree. When the user click the button we take the text from the text field and create a new node in the tree.

view plaincopy to clipboardprint?
  1. /** Handles the action which is triggered by the button. */  
  2.  @Override  
  3.  public void handle(ActionEvent event) {  
  4.   LazyTreeItem selectedItem = (LazyTreeItem) treeView.getSelectionModel().getSelectedItem();  
  5.  selectedItem.getChildren().add(new LazyTreeItem(inputNewItem.getText(), selectedItem.getDepth()));  
  6.  }  

Row 3: By implementing the interface EventHandler and connect the button to our handler.

Row 4: Using the selection model of the TreeView to get the selected item.

Row 5: Adding a new node to the tree is simple. Get the children list and insert the new node by using the add function. Remember that using the set function will remove all old children from the node.

Summary

In this demo we have learn how to use the TreeView to load the children of the nodes lazy, how we can get the information from the selected node, and how to add new nodes to the tree.

The complete source code can be fetched from: http://files.loop81.com/rest/download/6643f32b-c6d8-4816-9a3d-d062ee8ce57e.
Source: http://www.loop81.com/2011/11/javafx-20-mastering-treeview.html
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)