JGoodies FormLayout Introduction
Often when you start working on SWING, you run into 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 so I decided to talk about the wonderful JGoodies Form Layout library. There will probably be only three articles so far, if I continue to write everything well.
And so the first part is introductory.
In this example, we will look at the basic features of Form Layout. FormLayout is actually a table, only with very flexible settings, thanks to them you can get any interface with minimal cost.
Let's consider a simple task.
We want to make such a window
Solution using FormLayout
1: FormLayout layout = new FormLayout (
2: “pref, 4dlu, 50dlu, 4dlu, min”, // columns
3: “pref, 2dlu, pref, 2dlu, pref”); // line
4:
5: layout.setRowGroups (new int [] [ ] {{ 1, 3, 5}});
6:
7: JPanel panel = new JPanel (layout);
8:
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));
Let's explain this code:
From line 1 to line 3, create a FormLayout object and define the rows and columns of our layout as a sequence of two lines. The value "pref" is defined as the preferred size (preffered size), in other words, the size is determined by the placed component. 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 I won’t cover everything here, a detailed description of them can be found in the library documentation.
Let's go further. In line 5, we indicate that all components in the lines should be the same size. In line 7 we create a socket with our FormLayout and in line 9 we create a CellConstaraints object to arrange the components in the grid of our FormLayout. At the end, we populate our layout with interface elements using CellConstraints. That’s how it all happened in a simple and transparent way.
Next I will show the construction of a more complex interface. :)
The next interface will become more complicated and will look like this
The reader probably had a question about what is complicated in this interface. The first one is center alignment, the second one does not move out when changing inscriptions (+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 coordinates and use the append and nextLine commands instead. In addition to these commands, there is nextColumn, nextRow. Above, I used CellConstraints to determine the position of the component. Here, this method will only complicate the reading of the code, although it is more flexible, but we will get by with the capabilities of our builder. Also, new parameters such as "right: pref", "fill: pref: grow", "left: pref: grow" were added here.
These parameters, you guessed it, are compound and can be used for both columns and rows. These parameters are treated like this alignment: size: resizeBehavior. The translation is obtained as ALIGNMENT: SIZE: SIZE PROCESS. For example, we inserted a button with the name “Search” in the column with the parameters left: pref: grow, and then expanded the table to all columns (builder.append (scrollPane, 5)), since the column has the parameter “grow”, the column increased, but the button remained the same in it.
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 get this window as a result: The
outline of our layout is circled in red, this is a very effective help when debugging the interface. As a result, we get a very clear idea 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, in order 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 talk about the builder.append method (String label, JComponent component). This method of our builder works very cleverly: it inserts a JLabel with the passed inscription in the first column (example: builder.append ("Name", nameField)), then skips one column and inserts the component itself. Such a strange at first glance, the mechanism allows you to quickly throw a business form, as well as save on the manual creation of JLabels.
This concludes the article, the next one will be on Monday.
JGoodies Official Website
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 so I decided to talk about the wonderful JGoodies Form Layout library. There will probably be only three articles so far, if I continue to write everything well.
And so the first part is introductory.
In this example, we will look at the basic features of Form Layout. FormLayout is actually a table, only with very flexible settings, thanks to them you can get any interface with minimal cost.
Let's consider a simple task.
We want to make such a window
Solution using FormLayout
1: FormLayout layout = new FormLayout (
2: “pref, 4dlu, 50dlu, 4dlu, min”, // columns
3: “pref, 2dlu, pref, 2dlu, pref”); // line
4:
5: layout.setRowGroups (new int [] [ ] {{ 1, 3, 5}});
6:
7: JPanel panel = new JPanel (layout);
8:
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));
Let's explain this code:
From line 1 to line 3, create a FormLayout object and define the rows and columns of our layout as a sequence of two lines. The value "pref" is defined as the preferred size (preffered size), in other words, the size is determined by the placed component. 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 I won’t cover everything here, a detailed description of them can be found in the library documentation.
Let's go further. In line 5, we indicate that all components in the lines should be the same size. In line 7 we create a socket with our FormLayout and in line 9 we create a CellConstaraints object to arrange the components in the grid of our FormLayout. At the end, we populate our layout with interface elements using CellConstraints. That’s how it all happened in a simple and transparent way.
Next I will show the construction of a more complex interface. :)
The next interface will become more complicated and will look like this
The reader probably had a question about what is complicated in this interface. The first one is center alignment, the second one does not move out when changing inscriptions (+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 coordinates and use the append and nextLine commands instead. In addition to these commands, there is nextColumn, nextRow. Above, I used CellConstraints to determine the position of the component. Here, this method will only complicate the reading of the code, although it is more flexible, but we will get by with the capabilities of our builder. Also, new parameters such as "right: pref", "fill: pref: grow", "left: pref: grow" were added here.
These parameters, you guessed it, are compound and can be used for both columns and rows. These parameters are treated like this alignment: size: resizeBehavior. The translation is obtained as ALIGNMENT: SIZE: SIZE PROCESS. For example, we inserted a button with the name “Search” in the column with the parameters left: pref: grow, and then expanded the table to all columns (builder.append (scrollPane, 5)), since the column has the parameter “grow”, the column increased, but the button remained the same in it.
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 get this window as a result: The
outline of our layout is circled in red, this is a very effective help when debugging the interface. As a result, we get a very clear idea 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, in order 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 talk about the builder.append method (String label, JComponent component). This method of our builder works very cleverly: it inserts a JLabel with the passed inscription in the first column (example: builder.append ("Name", nameField)), then skips one column and inserts the component itself. Such a strange at first glance, the mechanism allows you to quickly throw a business form, as well as save on the manual creation of JLabels.
This concludes the article, the next one will be on Monday.
JGoodies Official Website