One of the simplest containers for GUI elements is the Grid element. This takes multiple other elements and arranges them in a grid. This is an incredibly versatile yet basic functionality that allows for more complex GUIs to be built up from the individual element "building block".

1. Creating a Grid
2. Adding Elements
3. Number of Columns
4. Element Sizing
5. Variable Column Count
6. Toolbar Buttons

Top ↑

Creating a Grid element, just like all others, is done by instantiating a Grid object:

Java

Grid grid = new Grid("Title");

Kotlin

var grid = Grid("Title")

Python

grid = Grid("Title")

Then, just like all GUI elements, the Grid can be shown in its own window by use of:

grid.show();

Top ↑

As a Container element, adding elements to the Grid can simply be done by using the add(...) and addAll(...) methods. For example:

Java

Grid  grid  = new Grid("Title");
Plot  plot  = new Plot("Plot Title", "X", "Y");
Table table = new Table("Table Title");

grid.add(plot);
grid.add(table);
// == or ==
grid.addAll(plot, table);

grid.show();

Kotlin

var grid  = Grid("Title")
var plot  = Plot("Plot Title", "X", "Y")
var table = Table("Table Title")

grid.add(plot)
grid.add(table)
// == or ==
grid.addAll(plot, table)

Python

grid  = Grid("Title")
plot  = Plot("Plot Title", "X", "Y")
table = Table("Table Title")

grid.add(plot)
grid.add(table)
# == or ==
grid.addAll([plot, table])

grid.show()

You can also add elements to a Grid when instantiating:

Java

Plot  plot  = new Plot("Plot", "X", "Y");
Table table = new Table("Table");
Grid  grid  = new Grid("Title", plot, table);
grid.show();

Kotlin

var plot  = Plot("Plot", "X", "Y")
var table = Table("Table")
var grid  = Grid("Title", plot, table)
grid.show()

Python

plot  = Plot("Plot", "X", "Y")
table = Table("Table")
grid  = Grid("Title", [plot, table])
grid.show()

Each element will be added starting from left to right, starting a new row based on how many columns the grid is set to have.

Whichever way it is done, the above code would produce the following:

Top ↑

By default, a Grid arranges elements in 3 columns, like so:

This number can be changed by use of:

grid.setNumColumns(int numColumns);

for example, to set 4 columns:

grid.setNumColumns(4);

leaving us with:

or:

grid.setNumColumns(2);

You can also specify the number of columns as part of the constructor:

Java

Grid grid = new Grid("Title", 2, plot, table);

Kotlin

var grid = Grid("Title", 2, plot, table)

Python

grid = Grid("Title", 2, [plot, table])

Top ↑

You can also configure how elements are sized in the grid. Specifically, you can set whether elements grow to fill space in the horizontal and vertical directions. This is done by using the setGrowth(...) method:

grid.setGrowth(boolean horizontal, boolean vertical);

For example, to make the elements grow to fill space only in the vertical direction:

grid.setGrowth(false, true);

alternatively, growth only horizontally:

grid.setGrowth(true, false);

no growth:

grid.setGrowth(false, false);

or, full growth:

grid.setGrowth(true, true);

Top ↑

If you want to create a layout where one row has more columns than another, then you might envisage a problem. However, Container objects are also counted as Elements themselves, so you can actually add a Grid to a Grid. Therefore, if you wanted a row with three elements followed by a row with only 2 you could do something like this:

Java

Fields params1 = new Fields("Element 1");
Fields params2 = new Fields("Element 2");
Fields params3 = new Fields("Element 3");
Grid   row1    = new Grid("", 3, params1, params2, params3);

Plot   plot1   = new Plot("Element 4", "X", "Y");
Plot   plot2   = new Plot("Element 5", "X", "Y");
Grid   row2    = new Grid("", 2, plot1, plot2);

Grid   grid    = new Grid("Main Window", 1, row1, row2);

grid.show();

Kotlin

val params1 = Fields("Element 1");
val params2 = Fields("Element 2");
val params3 = Fields("Element 3");
val row1    = Grid("", 3, params1, params2, params3);

val plot1   = Plot("Element 4", "X", "Y");
val plot2   = Plot("Element 5", "X", "Y");
val row2    = Grid("", 2, plot1, plot2);

val grid    = Grid("Main Window", 1, row1, row2);

grid.show();

Python

params1 = Fields("Element 1")
params2 = Fields("Element 2")
params3 = Fields("Element 3")
row1    = Grid("", 3, [params1, params2, params3])

plot1   = Plot("Element 4", "X", "Y")
plot2   = Plot("Element 5", "X", "Y")
row2    = Grid("", 2, [plot1, plot2])

grid    = Grid("Main Window", 1, [row1, row2])

grid.show()

This will result in:

Top ↑

You can add buttons to a toolbar at the top of a Grid by use of the addToolbarButton(...) method. When doing so you will need to provide the text to show in the button as well as what should happen when it is clicked. For example:

Java, using lambda expression

grid.addToolbarButton("Click Me", () -> {
    System.out.println("Clicked!");
    GUI.infoAlert("Clicked", "Button Clicked", "The button was clicked!");
});

Java, using method reference

public class Main {

    public static void main(String[] args) {
        ...
        grid.addToolbarButton("Click Me", Main::clicked);
    }

    public static void clicked() {
        System.out.println("Clicked!");
        GUI.infoAlert("Clicked", "Button Clicked", "The button was clicked!");
    }

}

Kotlin, using lambda expression

grid.addToolbarButton("Click Me") {
    println("Clicked!")
    GUI.infoAlert("Clicked", "Button Clicked", "The button was clicked!")
}

Kotlin using method reference

fun main() {
    ...
    grid.addToolbarButton("Click Me", ::clicked)
}

fun clicked() {
    println("Clicked!")
    GUI.infoAlert("Clicked", "Button Clicked", "The button was clicked!")
}

Python, using method reference

def clicked():
    print("Clicked!")
    GUI.infoAlert("Clicked", "Button Clicked", "The button was clicked!")

def main():
    ...
    grid.addToolbarButton("Click Me", clicked)

main()

This results in:

and when the button is clicked: