Wednesday, 15 September 2010

css - Customizing Treecell: Placement of Arrow Icon -



css - Customizing Treecell: Placement of Arrow Icon -

this question has reply here:

javafx8 treetableview customize collapse root item 2 answers

i'm trying create customized treeview using cellfactory , css.

this have far:

i want center arrow points middle of treecell.

problem is, don't know how. have tried padding, scales icon.

it might worth mentioning arrow not part of hbox load in represent treecell.

here's 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 2 links, there's code how represent trecells hbox:

customizing treecells using cell factory javafx treeview: setgraphic() different levels of treeitem

the solution i've found requires knowing height of hbox. let's set pref height 80px.

first, right after showing scene on start() method, node arrow, stackpane, , set 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 not enough, since on updateitem() method of custom cell, after adding hbox, cell contains stackpane overriden everytime method called, need stack pane , set 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); } // 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 css properties, 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, this:

css javafx treeview

No comments:

Post a Comment