TableLayout

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

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.

HTML Code

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

    

HTML Layout

Java Code

        //Create the Panel using a TableLayout
        //Note: The URL can be a resource in your application such as
        //MyClass.class.getResource("layout.html")
        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

Samples

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

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