A Simple Example

The following code creates the simple TableLayout shown below.

package example; import java.awt.*; import java.awt.event.*; import layout.TableLayout; public class Simple { public static void main (String args[]) { // Create a frame Frame frame = new Frame("Example of TableLayout"); frame.setBounds (100, 100, 300, 300); // Create a TableLayout for the frame double border = 10; double size[][] = {{border, 0.10, 20, TableLayout.FILL, 20, 0.20, border}, // Columns {border, 0.20, 20, TableLayout.FILL, 20, 0.20, border}}; // Rows frame.setLayout (new TableLayout(size)); // Create some buttons String label[] = {"Top", "Bottom", "Left", "Right", "Center", "Overlap"}; Button button[] = new Button[label.length]; for (int i = 0; i < label.length; i++) button[i] = new Button(label[i]); // Add buttons frame.add (button[0], "1, 1, 5, 1"); // Top frame.add (button[1], "1, 5, 5, 5"); // Bottom frame.add (button[2], "1, 3 "); // Left frame.add (button[3], "5, 3 "); // Right frame.add (button[4], "3, 3, c, c"); // Center frame.add (button[5], "3, 3, 3, 5"); // Overlap // Allow user to close the window to terminate the program frame.addWindowListener (new WindowAdapter() { public void windowClosing (WindowEvent e) { System.exit (0); } } ); // Show frame frame.show(); } }

The image on the far left is a snapshot of the frame created with the above program. The image on the near left is the snapshot with lines added to show where the row and column border are. The column widths are shown on the bottom, and the row heights are shown on the right.

As you can see, this example uses TableLayout to create a border of b pixels around the controls. This is an effective technique to create a "insets" in a container that has none. Since b is just a double with a non-negative integer value, the border can be made any size.

This example also shows how to put spaces between components. In this case, a space of 20 pixels horizontally and vertically separates most of the buttons. Some layout managers require the use of "padding" components to accomodate blankspace. With TableLayout, you need only specify a row or column size and place no component in that row or column.

The left and right buttons occupy a single cell and are always the same size as the cell. The top and bottom buttons each span five cells. It is just as easy to make the top and bottom buttons single celled and the left and right buttons multicelled. TableLayout can be used anywhere you would use BorderLayout by creating a grid similar to the one shown in this example. Furthermore, you will have more flexibility with TableLayout.

The button labeled "center" is both in the center cell and is center justified. For this reason, the button is allocated it's preferred size. If the frame is made very small, the "center" button will shrink. But it will never be larger than it's preferred size, no matter how large the frame is.

The button labeled "overlap" is partly obscured by the center button and the bottom button. Since the overlap button was added last, it is on the bottom of the z-order.

Due to the column and row sizes specified, the top button will always have the same area as the bottom button, and the right button will always be exactly twice the size of the left button.