Height of a Tile (or orther container) not changed after inserting nodes

Question

Hi,
I am a javafx beginner and I'm struggeling with the size of the containers. Here is what I try to do:
I am making a photo gallery in which an Album can contain subalbums and photos through which a user can scroll. The Album objects are stored in a Tile, the Photo objects in another Tile. These Tiles I want to display vertically in a VBox, which is in turn placed on a Clipview. Now my problem is: the height of the Tile is not changing when I insert Photos or Albums in the Tiles. And I need these heights (or that of the VBox) to do calculations for my scrollbar. When I print the bounds for the album Tile before inserting Album objects everything is 0, which is correct. But when I print the bounds after insertion of 10 Albums the height is given as the height of only 1 Album, even without hgap and vgap. The height of the VBox is also equal to this height of 1 node.
What am I missing here? How can I get the correct height to use for my scrollbar calculations?
I hope you can help me out, because it's hunting me for days now :-)
Thanx,
RedMary

Answer 1

Well, that's one of the mysteries of JavaFX: the initialization order... :-)
When you create the custom node, it is not yet in layout, so the tile isn't laid out either, and its dimensions aren't final.
If I add a button to the scene to dump the data, you can see the final dimensions.
I also tried a trick this week-end, to override doLayout to know when a node have been laid out. A quick test shown mixed results, but perhaps it can be a starting point.
class Gallery extends CustomNode {
    var albumList = Tile {
        width: 1000
        vgap: 25
        hgap:25
        content: []
    var photoList = Tile {
        width: 1000
        vgap: 25
        hgap:25
        content: []
    var box = VBox {
        spacing: 50
        content: [albumList,photoList]
        override function doLayout(): Void
            super.doLayout();
            ShowData("After B layout");
    public override function create(): Node {
        ShowData("Before insertion:");
        for (i in [1..10]) {
             var rect = Rectangle {
                 width: 100;
                 height: 100;
                 fill: Color.RED;
             insert rect into albumList.content;
         for (i in [1..15]) {
             var rect = Rectangle {
                 width: 100;
                 height: 100;
                 fill: Color.WHITE;
             insert rect into photoList.content;
        ShowData("After insertion:");
        var group = Group {
            content:[box]
            override function doLayout(): Void
                super.doLayout();
                ShowData("After G layout");
        return(group)
    function ShowData(msg: String): Void {
        println("==> {msg}");
        println("albumList LayoutBounds:{albumList.layoutBounds}");
        println("albumList BoundsInLocal:{albumList.boundsInLocal}");
        println("albumList BoundsInParent:{albumList.boundsInParent}");
        println("box LayoutBounds:{box.layoutBounds}");
        println("box BoundsInLocal:{box.boundsInLocal}");
        println("box BoundsInParent:{box.boundsInParent}");
Stage {
    title: "Application title"
    width: 1000
    height: 800
    var gallery = Gallery {}
    scene: Scene {
        width: 1000
        height: 800
        fill: Color.BLACK;
        content: [
            gallery,
            Button {
                text: "D"
                action: function (): Void {
                    gallery.ShowData("On button click");
}