TreeView avec deux colonnes JavaFX 8

Question

J'ai besoin d'une liste de valeurs de clé emboîtable extensible dans JavaFX 8. Cette fonctionnalité est similaire à TreeTableView, mais elle est orientée verticalement, pas horizontalement. En d'autres termes, les lignes seraient les en-têtes et non les colonnes d'une table d'axes inversés XY. En raison de la limitation de TreeTableView étant horizontale, j'ai commencé à explorer les options de TreeView. TreeView fonctionne bien mais n'a qu'une seule colonne où j'ai besoin d'une paire de valeurs de clé dans chaque ligne. Ce que je vraiment besoin de quelque chose comme ci-dessous:

Notez le foo et bar peut être unique.

Comment puis-je ajouter une deuxième colonne à un TreeView?

Answer 1

Il s'agit d'une idée basée sur une fabrique de cellules personnalisée pour TreeView qui crée des cellules de type ligne. Une cellule personnalisée est créée qui contient 2 étiquettes dans une grille et certains paramètres de comportement de redimensionnement.

public class CustomTree extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     TreeView<String[]> tree = new TreeView<>(); 

     tree.setCellFactory(cell -> new TreeCell<String[]>() { 

      private GridPane pane = new GridPane(); 
      private Label keyLabel = new Label(); 
      private Label valueLabel = new Label(); 
      private Border keyBorder = new Border(
        new BorderStroke(Color.BLACK, BorderStrokeStyle.SOLID, null, new BorderWidths(0.5, 0.5, 0.5, 1))); 
      private Border valueBorder = new Border(
        new BorderStroke(Color.BLACK, BorderStrokeStyle.SOLID, null, new BorderWidths(0.5, 1, 0.5, 0.5))); 

      { 
       pane.getChildren().addAll(keyLabel, valueLabel); 
       GridPane.setConstraints(keyLabel, 0, 0); 
       GridPane.setConstraints(valueLabel, 1, 0); 

       ColumnConstraints column1 = new ColumnConstraints(); 
       column1.setPercentWidth(50); 
       ColumnConstraints column2 = new ColumnConstraints(); 
       column2.setPercentWidth(50); 
       pane.getColumnConstraints().addAll(column1, column2); 

       keyLabel.setBorder(keyBorder); 
       valueLabel.setBorder(valueBorder); 
       keyLabel.setMaxWidth(Double.MAX_VALUE); 
       valueLabel.setMaxWidth(Double.MAX_VALUE); 

       setPadding(Insets.EMPTY); 
      } 

      @Override 
      public void updateItem(String[] name, boolean empty) { 
       super.updateItem(name, empty); 
       if (empty || name == null) { 
        setText(null); 
        setGraphic(null); 
       } else { 
        keyLabel.setText(name[0]); 
        valueLabel.setText(name[1]); 
        setGraphic(pane); 
       } 
      } 
     }); 

     TreeItem<String[]> root = new TreeItem<>(new String[] { "", "" }); 
     TreeItem<String[]> sub1 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     TreeItem<String[]> sub2 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     TreeItem<String[]> sub3 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     TreeItem<String[]> sub4 = new TreeItem<>(new String[] { "Foo", "" }); 
     TreeItem<String[]> sub5 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     TreeItem<String[]> sub41 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     TreeItem<String[]> sub42 = new TreeItem<>(new String[] { "Foo", "Bar" }); 
     root.getChildren().addAll(sub1, sub2, sub3, sub4, sub5); 
     sub4.getChildren().addAll(sub41, sub42); 

     tree.setRoot(root); 

     Scene scene = new Scene(tree); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    public static void main(String[] args) { 
     Application.launch(args); 
    } 
} 

Notez que la racine doit également utiliser ce type de cellules, mais il est possible de cacher la racine complètement à l'aide tree.setShowRoot(false);. Deux inconvénients de cette approche sont que chaque cellule se comporte comme une unité - il n'y a pas de concept de colonnes, et que les valeurs de la cellule sont données comme un tableau, perdant ainsi la sécurité du type. Vous pouvez développer cet exemple vous-même.

Il est possible, bien que beaucoup plus de travail, d'utiliser une approche (générique) TableView ou TreeTableView.