App Manager



Contact Us

Get Xito at Fast, secure and Free Open Source software downloads

GetJava Download Button


Dialog Project
Download Latest
Discussion Forum

For engineers that work on Java client user interfaces using Swing, one of the first complaints is the complexity of Layout Managers. It is often the case that engineers coming from a web HTML back ground have difficulty laying out components in a Swing UI.

After all shouldn't it be just as easy to layout components using Swing as it is to layout components on a web page. This is why TableLayout was created. TableLayout provides the same easy to use layout concept that HTML pages use, namely HTML Table Tags.

The TableLayout allows UI designers to create HTML tables and position components in HTML table definitions and then use that HTML definitions at runtime, in their Java applications. This allows designers to use a common tool, a Web Browser, to visualize how there UI will be laid out.

To use the TableLayout the steps are:

  1. Create an html file that contains a table definition to layout components
  2. In Java create an instance of the TableLayout that uses the html file for input
  3. Place Java Components in the panel that is using the table layout

Quick Example

The following example walks you through this process of: creating the html, checking the display of the html in your browser, and finally writting the java code that will use your html table layout. A few things to note:

You can name component cells any name you wish. The name is placed between the <td> tags. If you prefer you can also use the id attribute of the <td> to name the cell.

Also, if you would like a component to take up the enter space of a cell you need to use the align="full" attribute of the <td> tag.


    <table width="100%" height="100%" >
        <tr height="20"></tr>
            <td width="20"></td>
            <td align="right">firstname_lbl</td>
            <td align="full" width="100%">firstname_fld</td>
            <td width="20"></td>
        <tr height="8"></tr>
            <td align="right">lastname_lbl</td>
            <td align="full" width="100%">lastname_fld</td>
        <tr height="20"></tr>


HTML Layout

The following table shows how your components will be laid out:

firstname_lbl firstname_fld
lastname_lbl lastname_fld

Java Code

        //Create the Panel using a TableLayout
        //Note: The URL can be a resource in your application such as
        JPanel panel = new JPanel(new TableLayout([URL to html]));

        panel.add("firstname_lbl", new JLabel("First Name:"));

        JTextField firstNameTF = new JTextField();
        panel.add("firstname_fld", firstNameTF);

        panel.add("lastname_lbl", new JLabel("Last Name:"));

        JTextField lastNameTF = new JTextField();
        panel.add("lastname_fld", lastNameTF);


Rendered UI


Too see additional html table layout samples visit the table layout gallery.

License: Xito Dialog is licensed under the Apache 2.0 License. view