Java Technology Home Page
Downloads, APIs, Documentation
Java Developer Connection
Docs, Tutorials, Tech Articles, Training
Online Support
Community Discussion
News & Events from Everywhere
Products from Everywhere
How Java Technology is Used Worldwide

TSC Contents
Front Page
Article Index

Related Links
JFC Home
Download J2SE
J2SE 1.4 Release
Notes for Swing
Java Tutorial
Java Web Start
Swing Sightings

Sign up for email


 Article Table of Contents 
  What is TableLayout? 
  Creating a TableLayout 
 Column and Row Sizes 
  Absolute and Scalable Space 
  Order of Allocation 
  Rounding Considerations 
  Adding Components 
  Multiple Cells 
 Final Theory 
  Dynamic Rows and Columns 
  Preferred Layout Size 
  GridLayout Comparison 
  GridBagLayout Comparison 
 A Typical GUI 
  Preferred Rows and Columns 
  A RAD Tool 
 API Reference 
Help pagesA-Z Index

The Source for Java Technology


A Typical GUI

The following code creates a sample GUI with a variety of components.

package example;

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import layout.TableLayout;

public class TypicalGui extends JFrame
    public static void main (String args[])
        new TypicalGui();
    public TypicalGui ()
        super ("A Typical GUI");
        Container pane = getContentPane();
        double b = 10;
        double f = TableLayout.FILL;
        double p = TableLayout.PREFERRED;
        double size[][] = {{b, f, 5, p, 5, p, b}, {p, b, f, 10, p, b}};
        TableLayout layout = new TableLayout(size);
        pane.setLayout (layout);
        addCommandButtons(pane, layout);
        addColorBoxes(pane, layout);
        addTextArea(pane, layout);
        setSize (640, 480);
    public void addMenu (Container pane)
        JMenuBar menuBar = new JMenuBar();
        String menuText[] = {"File", "Edit", "View", "Help"};
        String itemText[][] =
            {{"New", "Open", "Save", "Print", "Exit"},
             {"Cut", "Copy", "Paste"},
             {"Zoom in", "Zoom out"},
             {"About", "Index", "Search"}};

        for (int i = 0; i < menuText.length; i++)
            JMenu menu = new JMenu(menuText[i]);
            menuBar.add (menu);
            for (int j = 0; j < itemText[i].length; j++)
                JMenuItem item = new JMenuItem(itemText[i][j]);
                menu.add (item);
        pane.add (menuBar, "0, 0, 6, 0");


    public void addCommandButtons (Container pane, TableLayout layout)
        JPanel buttonPanel = new JPanel();
        pane.add (buttonPanel, "1, 4, 5, 4");
        for (int i = 1; i <= 5; i++)
            JButton button = new JButton("Button " + i);
            buttonPanel.add (button);
    public void addColorBoxes (Container pane, TableLayout layout)
        Color color[][] =
             {, Color.yellow},
             {Color.magenta, Color.cyan}};
        for (int i = 0; i < color.length; i++)
            // Add a row for spacing and a row for the color boxes
            layout.insertRow (2, TableLayout.PREFERRED);
            layout.insertRow (2, 5);
            // Add color boxes
            pane.add (new ColorBox(color[i][0]), "3, 3");
            pane.add (new ColorBox(color[i][1]), "5, 3");
        // Remove the unnecessary leading space
        layout.deleteRow (2);
    public void addTextArea (Container pane, TableLayout layout)
        int numRow = layout.getRow().length;
        JTextPane textArea = new JTextPane();
        pane.add (textArea, "1, 2, 1, " + (numRow - 4));
    public void allowClosing ()
            (new WindowAdapter()
                    public void windowClosing (WindowEvent e)
                        System.exit (0);
    //*** Inner classes                                                      ***
    protected class ColorBox extends Component
        protected Color color;
        protected ColorBox (Color color)
            this.color = color;
        public void update (Graphics g)
            paint (g);
        public void paint (Graphics g)
            Dimension d = getSize();
            g.setColor (;
            g.drawRect (0, 0, d.width - 1, d.height - 1);
            g.setColor (color);
            g.fillRect (1, 1, d.width - 1, d.height - 1);
        public Dimension getPreferredSize ()
            return new Dimension(40, 20);;


This GUI is composed of thirteen top-level components: ten colored boxes, one JMenuBar, one JTextPane, and one JPanel that is used to hold several JButtons. The code illustrates that rows can be added at runtime, thus making the GUI construction dynamic. Each pair of color boxes is added with two rows: one to contain the boxes and one to be used as a blank space.

This GUI also makes used of a menu bar outside of the border. The menu bar's row is a preferred row since the menu bar should not be resized and the height of the menu bar should not be hard-coded. TableLayout will make the row the right size for the menu bar regardless of what font or images are used.

Typically in a frame there is only one component that needs to be scaled. Although that component may contain a split pane or a scroll panel, it is still one component. This example shows a single, scalable component, a JTextPane. That JTextPane occupies many cells because it needs to be aligned with all the color boxes. But only one fill row and only one fill column is needed since only one component needs to be scaled.

Although not necessary, this example uses a panel to contain the buttons. The layout could be accomplished without using a nested container simply by adding more columns. However, the proper way of constructing the GUI is to use nested containers when some controls should be laid out independently of the other controls in the outer container. In this example, the buttons on the bottom are position independent of the JTextPane, the number of color boxes, or even the number of columns of color boxes. Conceptionally, the buttons are laid out independently, so they should be in their own container. Other examples of this include scroll panels, split panes, and group boxes.

Previous | Next