JGoodies FormLayout Introduction

Often when you start working on SWING you encounter the problem of understanding Layout.
The idea itself is very good, but for people who work only in visual environments this becomes a big problem. A person cannot understand why it is faster to write code than to throw it in a GUI designer. I myself have been working closely with swing for about 2 years and now I decided to tell you about the wonderful JGoodies Form Layout library. There will probably be only three articles so far, if I’m going to write well.

And so the first part of the introductory.

In this example, we will look at the basic features of the Form Layout. FormLayout is actually a table, only with very flexible settings, thanks to them you can get any interface with minimal cost.

Consider a simple task
We want to make this window

')
FormLayout Solution
1: FormLayout layout = new FormLayout (
2: “pref, 4dlu, 50dlu, 4dlu, min”, // columns
3: “pref, 2dlu, pref, 2dlu, pref”); // lines
four:
5: layout.setRowGroups (new int [] [] {{1, 3, 5}});
6:
7: JPanel panel = new JPanel (layout);
eight:
9: CellConstraints cc = new CellConstraints ();
10: panel.add (new JLabel (“Label1”), cc.xy (1, 1));
11: panel.add (textField1, cc.xyw (3, 1, 3));
12: panel.add (new JLabel (“Label2”), cc.xy (1, 3));
13: panel.add (textField2, cc.xy (3, 3));
14: panel.add (new JLabel (“Label3”), cc.xy (1, 5));
15: panel.add (textField3, cc.xy (3, 5));
16: panel.add (detailsButton, cc.xy (5, 5));


Explain this code:
From 1 to 3 rows, we create a FormLayout object and define rows and columns of our layout with a sequence of two rows. The value of "pref" is defined as the preferred size (preffered size), in other words, the size is determined by the component being placed. The value “min” is defined as the minimum size, and the last parameter “dlu” is a unit of size depending on the font size. In fact, there are many sets of values ​​for almost any occasion, but here I will not cover everything, a detailed description of them can be found in the documentation for the library.
Let's go further. In line 5, we indicate that all components in the lines must be the same size. In line 7, we create a socket with our FormLayout and in line 9 we create a CellConstaraints object to position the components in the grid of our FormLayout. At the end, we fill our layout with interface elements using CellConstraints. That's how everything is simple and transparent with us.

Next, I will show the construction of a more complex interface. :)

The next interface will be complicated and will look like this

The reader probably had a question that in this interface is complicated. The first is the alignment in the center, the second when the label changes, the interface does not move down (+1 to localization).

And so take a look at the code:

import com.jgoodies.forms.builder.DefaultFormBuilder;
import com.jgoodies.forms.layout.FormLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.JTextField;
import javax.swing.ListSelectionModel;

/ **
*
* author Greg
* /
public class PlaceboSearchDialog extends JFrame {

private JTextField nameField;
private JTextField surnameField;
private JTextField nickName;
private JButton searchButton;
private String [] columnNames = {“Nickname”, “Name”, “Surname”, “Phone”};
private Object [] [] data = {{"Vincent", "Andrew", "Gos", "+1 400 789 00 78"},
{"Kitty", "Kate", "Philler", "+1 421 567 89 09"}};
private JTable searchTable;

public PlaceboSearchDialog () {
init ();
buildFrame ();
}

public void init () {
nameField = new JTextField ();
surnameField = new JTextField ();
nickName = new JTextField ();
searchButton = new JButton ("Search");
searchTable = new JTable (data, columnNames);

}

public void buildFrame () {
this.setTitle ("Placebo Phonebook");
this.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);

searchTable.setSelectionMode (ListSelectionModel.SINGLE_SELECTION);
searchTable.getColumn ("Phone"). setMinWidth (100);
JScrollPane scrollPane = new JScrollPane (searchTable);
FormLayout layout = new FormLayout (
“Right: pref, 3dlu, 70dlu, 3dlu, left: pref: grow”,
“2 * (pref, 3dlu), fill: pref: grow, 3dlu”);
DefaultFormBuilder builder = new DefaultFormBuilder (layout);
builder.setDefaultDialogBorder ();
builder.append ("Name", nameField);
builder.nextLine ();
builder.nextLine ();
builder.append ("Surname", surnameField);
builder.append (searchButton);
builder.nextLine ();
builder.nextLine ();
builder.append (scrollPane, 5);
this.add (builder.getPanel ());
this.setSize (400, 530);
this.setVisible (true);

}

public static void main (String [] args) {
new PlaceboSearchDialog ();
}
}

To build this interface, I used such a useful thing as DefaultFormBuilder. This builder allows you to renounce the coordinates and use the append and nextLine commands instead. In addition to these commands, there is nextColumn, nextRow. Above, I used CellConstraints to locate a component. Here this method will only complicate the reading of the code, although it is more flexible, but we will also manage with the capabilities of our builder. Also, new parameters such as “right: pref”, “fill: pref: grow”, “left: pref: grow” were added here.

These parameters, as you already guessed, are complex and can be used both for columns and for rows. These parameters are interpreted as follows: alignment: size: resizeBehavior. The translation is obtained as an alignment: size: the process of changing the size. For example, we inserted a button with the name “Search” into the left: pref: grow parameters, and then extended the table to all the columns (builder.append (scrollPane, 5)) in the row below, since the column has the “grow” parameter, the increased, but the button remained in it the same size.

By the way, to check my words, you can replace the string DefaultFormBuilder builder = new DefaultFormBuilder (layout) with DefaultFormBuilder builder = new DefaultFormBuilder (layout, new FormDebugPanel ()). You should have the result of this window:


The red grid of our layout is red, it is a very effective help when debugging the interface. As a result, we get a very visual representation of how the elements will be located on the screen.
It often happens that we want to make several columns or rows of the same type. For example, we need 5 sets of such columns “3dlu, 40dlu, 3dlu”, for this not to write the same set 5 times we can write such an expression
“5 * (3dlu, 40dlu, 3dlu)” is so simple and beautiful.

Now let's touch the builder.append method (String label, JComponent component). This method of our builder works very cunningly, it inserts a JLabel with the transferred text into the first column (example: builder.append ("Name", nameField)), then skips one column and inserts the component itself. Such a strange at first glance mechanism allows you to quickly add business forms, as well as save on the manual creation of JLabel.

At this point I finish the article, the next one will be on Monday.
JGoodies official website