(0.0.0) Named Children - JujuAdams/Bento GitHub Wiki

Consider the previous example: what if we want to adjust the width of the yellow box? We can probably find the yellow box by searching through the child arrays:

var _yellow_box = box.children[0].children[0].children[1];
_yellow_box.properties.width = "30%";

The order that an element appears in the children[] array can change for any number of reasons so this method is brittle and easy to break. The code itself is also hard to read. Instead, Bento offers the option of using named children to easily find and access specific elements.

//Define our base box
box = bento_box_region(20, 20, room_width-20, room_height-20);
with(box) //Go into the scope of the box element
{
    set_name("box"); //Not strictly needed
    
    //Create a child
    with(bento_box("90%", "90%")) //Now go into the child's scope
    {
        set_name("red"); //Set this element's name to "red"
        place("5%", "5%");
        style.fill.color = c_red;
        
        //And another child
        with(bento_box("90%", "90%")) //Scope change again
        {
            set_name("green"); //Set this element's name to "green"
            place("5%", "5%");
            style.fill.color = c_lime;
            
            //Add two more children!
            with(bento_box("40%", "40%"))
            {
                set_name("blue"); //Set this element's name to "blue"
                place("5%", "5%");
                style.fill.color = c_blue;
            }
            
            with(bento_box("40%", "40%"))
            {
                set_name("yellow"); //Set this element's name to "yellow"
                place("55%", "55%");
                style.fill.color = c_yellow;
            }
        }
    }
}

We can now find the yellow square more easily by using dot notation:

var _yellow_box = box.red.green.yellow;
_yellow_box.properties.width = "30%";