2

I'm trying to make a customized TreeView using CellFactory and Css.

This is what I have so far:

What I have so far

I want to center the arrow so that it points to the middle of the TreeCell.

Problem is, I don't know how. I have tried padding, but this only scales the icon.

It might be worth mentioning that the arrow is not part of the HBox I load in to represent the treeCell.

Here's my CSS:

.tree-cell{
-fx-content-display: CENTER;
-fx-position-shape: true;
-fx-background-color: linear-gradient(#c9e9d1 20%, #9dbda5 80%);
}
.tree-cell .tree-disclosure-node .arrow {
    -fx-background-color: #facf46;
    -fx-padding: 0.666666em; /* 4 */
    -fx-shape: "M 0 -4 L 4 0 L 0 4 z";
    -fx-content-display: center;
}

.tree-cell:expanded .tree-disclosure-node .arrow {
    -fx-content-display: center;
    -fx-background-color: #facf46,


    -fx-rotate: 90;
}

.tree-cell:hover {
    -fx-background-color: #dfffe7;
}

.tree-cell:selected{
    -fx-background-color: #4f88da;
}

In these two links, there's code for how I represent TreCells by HBox:

Customizing TreeCells using cell factory JavaFX TreeView: setGraphic() for different levels of treeItem

Community
  • 1
  • 1
AnagramOfJoans
  • 153
  • 10
  • Can you share your code? – Fahad Hasan Nov 05 '14 at 16:07
  • Have edited to include some code. – AnagramOfJoans Nov 05 '14 at 16:13
  • One way using which you can vertically center all the elements is to set `display: table` on the parent container which I believe is `.tree-cell` and then set `display: table-cell, vertical-align: niddle` on all of its child-elements. Anyways, is it available to be viewed on some website so that the CSS can be debugged? – Fahad Hasan Nov 05 '14 at 16:22
  • 1
    THanks for the tips, but I don't think it's possible to apply all the normal CSS commands to .tree-cell or other components in JavaFX. I do have an ugly solution now that I can post soon. Unfortunately, I do not have this on a website, but thanks for replying all the same. – AnagramOfJoans Nov 05 '14 at 16:54
  • I see that it's pretty much the same problem, yes. – AnagramOfJoans Nov 05 '14 at 21:21

1 Answers1

1

The solution I've found for this requires knowing the height of the hbox. Let's say we set its pref height to 80px.

First, right after showing the scene on the start() method, we look for the node with the arrow, which is a StackPane, and set its properties:

public void start(Stage primaryStage) {
    ...
    primaryStage.show();

    StackPane sp=(StackPane)tree.lookup(".tree-disclosure-node");
    sp.setPrefSize(80,80);
    sp.setAlignment(Pos.CENTER);
    sp.setPadding(new Insets(20));
}

This is not enough, since on the updateItem() method of the custom cell, after adding the hbox, the cell contains also a StackPane that is overriden everytime this method is called, so we need to get this stack pane and set the same properties again:

@Override
public void updateItem(String item, boolean empty) {
    super.updateItem(item, empty);
    if (item != null) {
        if (getTreeView().getTreeItemLevel(getTreeItem())==1) {
            setGraphic(this.hBox);
        }else if (getTreeView().getTreeItemLevel(getTreeItem())==2){
            setGraphic(this.hBoxLeaf);
        }
        // look for the StackPane
        this.getChildrenUnmodifiable().stream().filter(StackPane.class::isInstance)
                .forEach(p->{
                    StackPane sp=(StackPane)p;
                    sp.setPrefSize(80,80);
                    sp.setAlignment(Pos.CENTER);
                    sp.setPadding(new Insets(20));
                });
    } else {
        setGraphic(null);
    }
}

We don't need any extra css properties, so this is enough:

.tree-cell{
    -fx-background-color: linear-gradient(#c9e9d1 20%, #9dbda5 80%);
}

.tree-cell .tree-disclosure-node .arrow {
    -fx-background-color: #facf46;
    -fx-shape: "M 0 -4 L 4 0 L 0 4 z";
}

.tree-cell:expanded .tree-disclosure-node .arrow {
    -fx-rotate: 90;
}
.tree-cell:hover {
    -fx-background-color: #dfffe7;
}
.tree-cell:selected{
    -fx-background-color: #4f88da;
}

Finally, we get something like this:

Centered arrow on custom cell

José Pereda
  • 44,311
  • 7
  • 104
  • 132