rect_with_child.sh

# here we create associative array, where we will be storing all values for our components. 
# It's not mandatory so you could do it other way
declare -A _rect_with_child_obj
# $1 - object name
# $2 - child component name
# Creates new component
function rect_with_child.new() {
    _rect_with_child_obj["$1"]=1
    _rect_with_child_obj["$1:child"]=$2
    # We say, that object with name, passed as first argument, should be accessed via with child class
    # So any component now can call abstract object functions like object.draw, and it will link them to, for example, rect_with_child.draw
    register_object $1 rect_with_child
    _label_obj["$1:style"]=1
    # We initialize style class with same name as our component, you can use any name
    style.new $1
    # Create rectangle that will act as our border
    rect.new ".rect_with_child_$1"
    rect.get_layout ".rect_with_child_$1" ".rect_with_child_${1}_layout"
}

# $1 - object name
# Deletes components
function rect_with_child.delete() {

    unset _rect_with_child_obj["$1"]
    unset _rect_with_child_obj["$1:child"]
    # Free that name, meaning that passed value $1 will no longer link to rect_with_child
    unregister_object $1
    # Delete style
    style.delete $1
    # Delete rect
    rect.delete ".rect_with_child_$1"
}

# $1 - object name
# $2 - layout
# Draws components within given layout
function rect_with_child.draw() {
    # We get sizes of given to ours layout
    local start_x start_y end_x end_y
    layout.get_rect $2 start_x start_y end_x end_y

    # Every 'pixel' in our layout will show "0" as symbol 
    buffer.insert_rect "0" $start_x $start_y $end_x $end_y
    # Apply style for all pixels in our layout
    style.apply_rect $1 $start_x $start_y $end_x $end_y
    # Draw our child rect
    rect.draw ".rect_with_child_$1" $2

    # We dont know what type a given component is. So we draw it with object abstraction
    object.draw ${_rect_with_child_obj["$1:child"]} ".rect_with_child_${1}_layout"

}

# $1 - object name
# $2 - layout within object will calculate its size
# $3 - variable name for x size
# $4 - variable name for y size
# Calculates minimal size inside given layout 
function rect_with_child.get_minimal_size() {
    # We export minimal size of our components. Lets say it will be 5x5
    export "$3=5" 
    export "$4=5"
}

# $1 - object name
# $2, $3, ... - names of properties to enable, see SYMBOL_MODIFIERS for more style.set_style
# Sets style for object
function rect_with_child.set_style() {
    # Pass style params to style class
    style.set_style $1 "${@:2}"
}