Table Layout


This extension provides developers with ULC's complement to Clearthought's well-known TableLayout. The ULCTableLayoutPane is easy to use but still provides maximum flexibility for complex GUIs. Its API is very close to the TableLayout and makes migration from Swing GUIs using the TableLayout very simple.

The TableLayout is considered to be even more powerful than the GridBagLayout, as can be read in an Article from the Swing Connection.

How to use

We first have to define the dimension of our spreadsheet-like grid. We can define each cell's width and height as an absolute width, as a relative width, or as a special width (preferred, minimum, and fill).

There are several ways how we can add components to the ULCTableLayoutPane and specify their layout constraints. We can add a component and specify its constraints using a TableLayoutConstraints object or a String object. As an alternative, we can add the component and specify its constraints in two separate steps. Note that we can also modify the constraints for a component that is already uploaded and visible. In the example below, we define a grid of 3 columns by 2 rows and add 2 components to the first row and 1 component to the second row which spans 3 columns.


ULCTableLayoutPane pane = new ULCTableLayoutPane(); pane.setColumns(new double[]{50, TableLayoutConstraints.FILL, .3}); pane.setRows(new double[]{TableLayoutConstraints.PREFERRED, TableLayoutConstraints.FILL});

TableLayoutConstraints constraints = new TableLayoutConstraints();

ULCButton button = new ULCButton("1"); constraints.fCol1 = 0; constraints.fRow1 = 0; constraints.fCol2 = 0; constraints.fRow2 = 0; constraints.fhAlign = TableLayoutConstraints.FULL; constraints.fvAlign = TableLayoutConstraints.TOP; pane.setConstraints(button, constraints); pane.add(button);

button = new ULCButton("2"); constraints.fCol1 = 2; constraints.fRow1 = 0; constraints.fCol2 = 2; constraints.fRow2 = 0; constraints.fhAlign = TableLayoutConstraints.FULL; constraints.fvAlign = TableLayoutConstraints.BOTTOM; pane.add(button, constraints);

button = new ULCButton("3"); pane.add(button, "0 1 2 1 FULL FULL");

ulcFrame.add(pane); ...

Using the ULCXmlConstraintBuilder class, we can also read the layout definition from an XML file.

How it is implemented

The UITableLayoutPane class serves as a proxy to the ULCTableLayoutPane class. It uses Clearthought's TableLayout to arrange the components in a JPanel. The client-side and server-side class inherit from UIAbstractLayoutPane and ULCAbstractLayoutPane respectively.