Layout
The layout defines how controls are arranged as they are created.
Arena has 3 types of layout:
- VerticalLayout (default)
- HorizontalLayout
- ColumnLayout
Vertical Layout
In vertical layout every new control is located one below the other.
All subclasses and implementations of SimpleWindow use this layout by default.
Useful for: side panels, simple windows, etc.
Example
val aPanel = new Panel(parentPanel)
aPanel.layout = new VerticalLayout // no need to do this, it's the default
Or in Java syntax:
Panel aPanel = new Panel(parentPanel);
aPanel.setLayout(new VerticalLayout()); // no need to do this, it's the default
Horizontal Layout
In vertical layout every new control is located next to the other.
Useful for: button groups, windows with columns of different size, etc.
Example
def void createGridActions(Panel mainPanel) {
val actionsPanel = new Panel(mainPanel) // mainPanel is the parent panel / container
actionsPanel.layout = new HorizontalLayout
new Button(actionsPanel)
// ... etc.
Column Layout
In Column Layout you must specify column size. Every time you create a control, it is located next to the other until the row is complete, and a new row is created. See example below:
Useful for: form panels. Columns are equally sized.
Example
override def void createFormPanel(Panel mainPanel) {
val searchFormPanel = new Panel(mainPanel)
searchFormPanel.setLayout(new ColumnLayout(2))
val labelNumber = new Label(searchFormPanel)
// etc.
Mixing layouts
When working with a complex form, one layout is not quite enough. Let's see this kind of view:
- it seems to be two columns of different size in the main window, so we can handle it with a Horizontal Layout
- in the first column we have a List and a New Button. We must create a new container and put this controls inside this new container, because they need a Vertical Layout.
- second column has three sections, we can use another container with a Vertical Layout. Inside this container
- we have a form with two columns equally sized. So, let's create a container 2-Column Layout.
- then a grid control (no need to create another container, it inherits the vertical layout)
- and finally the button group needs a horizontal layout, to put one button next to the other.
Here's the final solution:
- orange containers have horizontal layout
- blue containers have vertical layout
- green containers have column layout (blue lines separate rows and columns)
This diagram shows the object graph with same colour convention: