JavaFX TilePane - order of drawing children - javafx

Question

I have a JavaFX 2.2 TilePane with several items (children). I've added css so that on mouse hover, the scale of the item is set to 1.2. By default, the order of children defines what node is drawn first and what last. Is there a way to make hovering item be above all others, without resorting to toFront() and making it be the last item (moving it to the end). This question is similar to https://stackoverflow.com/questions/13893514/scaling-children-in-a-flowpane-makes-the-children-clip-eachother (still unanswered).
Screenshot of the issue is located at: http://vladeck.files.wordpress.com/2013/03/javafx_tilepane.png?w=640

Answer 1

Solution / Workaround
Use a GridPane instead of a TilePane.
When the user clicks on an item in the grid, call toFront on the item.
Sample Code
I added the following code to a calculator which is based on a grid layout which looks similar to the tiled layout in your sample screenshot. With the modified application, I experienced no overlapping of buttons of the calculator. Surprising to me, though they looked a little weird, the scaled buttons made the calculator easier to use...
button.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
button.toFront();
button.setScaleX(1.6); button.setScaleY(1.6);
}
});
button.setOnMouseExited(new EventHandler<MouseEvent>() {
#Override public void handle(MouseEvent mouseEvent) {
button.setScaleX(1); button.setScaleY(1);
}
});
Background
As you note, the overlapping issue is unresolvable in some stock Panes like TilePane. This is because the z-order as well as the relative layout position of a node are both defined by the relative position of the node in the TilePane's child list. In such Panes, you cannot change the z-order and bring it to the front without also moving the node to the last layout position in the TilePane.
A GridPane does not suffer from the same issues as a TilePane because it's child node list order only defines the z-order of it's child nodes, not the layout positioning of those child nodes.
Is there a way (a hack?) to implement my own code of retrieving the children order for drawing when JavaFX repaints TilePanel?
Yes, you could hack the TilePane code if you have the skills.