JGoodies: Better way to design clean swing layout

A new and clean way to design a swing screens.

The advantages I found using it over swing layout:
1) Less code
2) Easy to design
3) Any complex design possible
4) Very fast to learn. (even if you are designing layout for the first time)

Lets start with designing a simple screen:

JGoodies layout are pretty much similar to GridBag Layout.
1) Keep a preview of screen.
2) Divide the screens into number of rows and columns. The screen becomes like a matrix and now we will try to have components in each cell.

For above screen shot I will preview my design as:

The screen is divided into 7 columns and 15 rows. Note the space between a Jlabel and a Jtextfield is also considered as a cell and hence a columns. Similarily space between two rows is also consider as space and counted.

The code for the designing the screen:

public class MainFrame extends JDialog{
	JTextField txt1 = new JTextField();
	JTextField txt2 = new JTextField();
	JTextField txt3 = new JTextField();
	JTextField txt4 = new JTextField();
	JTextField txt5 = new JTextField();
	JTextField txt6 = new JTextField();
	JTextField txt7 = new JTextField();
	JTextField txt8 = new JTextField();
	JTextField txt9 = new JTextField();
	JTextField txt10 = new JTextField();
	public MainFrame(){
	private void init(){
		setTitle("Jgoodies layout");
		FormLayout layout = new FormLayout("pref, 4dlu, 75dlu, 7dlu, pref, 4dlu, 75dlu","p, 2dlu, p, 3dlu, p, 3dlu, p, 7dlu,p, 2dlu, p, 3dlu, p, 3dlu, p");
		PanelBuilder builder = new PanelBuilder(layout);
		CellConstraints cc = new CellConstraints();
		builder.add(new JLabel("Segment"), cc.xyw(1, 1, 7));
		builder.add(new JLabel("Identifier"), cc.xy (1, 3));
		builder.add(txt1, cc.xy (3, 3));
		builder.add(new JLabel("PTI [kW]"), cc.xy (1, 5));
		builder.add(txt9, cc.xy (3, 5));
		builder.add(new JLabel("Power [kW]"), cc.xy (5, 5));
		builder.add(txt2, cc.xy (7, 5));
		builder.add(new JLabel("len [mm]"), cc.xy (1, 7));
		builder.add(txt3, cc.xy (3, 7));
		builder.add(new JLabel("Diameters"), cc.xyw(1, 9, 7));
		builder.add(new JLabel("da [mm]"), cc.xy (1, 11));
		builder.add(txt4, cc.xy (3, 11));
		builder.add(new JLabel("di [mm]"), cc.xy (5, 11));
		builder.add(txt5, cc.xy (7, 11));
		builder.add(new JLabel("da2 [mm]"), cc.xy (1, 13));
		builder.add(txt6, cc.xy (3, 13));
		builder.add(new JLabel("di2 [mm]"), cc.xy (5, 13));
		builder.add(txt7, cc.xy (7, 13));
		builder.add(new JLabel("R [mm]"), cc.xy (1, 15));
		builder.add(txt8, cc.xy (3, 15));
		builder.add(new JLabel("D [mm]"), cc.xy (5, 15));
		builder.add(txt10, cc.xy (7, 15));
	public static void main(String args[]){
		new MainFrame();

About code:
1) class FormLayout is used to tell the panel about the number of rows and columns
a. The constructor takes no of columns and rows as arguments.
b. Note in the constructor by the size of columns and row is defined in dlu unit. ‘p’ or ‘pref’ is used to let the layout choose a preferred size on its own. It basically takes the largest size among all components in that row or column.
2) class PanelBuilder is used to create the panel and add Components to it.
3) class Cellconstraints tells the Panelbuilder where to place to components.

Advance Features:

• Sometimes it gets tough to understand where to place the the components.
Class FormDebugPanel helps in displaying the design of the screen with red lines. This helps in understanding how the layout is present and where the components are placed.
Just change the following lines and you can see the image 2 as shown above:
PanelBulder builder = new PanelBulder (layout);
FormDebugPanel builder = new FormDebugPanel(layout);

• Single component like text box can also be spanned across multiple columns and/or rows
Instead of using cc.xy try to play with cc.xywh().
• Also the components can be center, right, left etc aligned . The values are passed in
cc.xy() or cc.xywh() .
Eg. cc.xy(2,2,CellConstraints.RIGHT, CellConstraints.CENTER)

• If you want to add the rows dynamically to the panel.
Construct the object of FormLayout as :

FormLayout layout = new FormLayout(
“pref, 4dlu, 80dlu, 7dlu,pref, 4dlu, 80dlu”, “”); // add rows dynamically

DefaultFormBuilder builder = new DefaultFormBuilder(layout);
builder.append(“Identifier”, new JTextField(“10000”));
builder.append(“PTI [kW]”, new JTextField(“10000”));
builder.append(“Power [kW]”, new JTextField(“10000”));
builder.append(“len [mm]”, new JTextField(“10000”));

Each new component is added to the next alternate column. IF the column exceeds it goes to the next row and start adding from the 1st column. When I say alternate column, in the above example components are added to 1st, 3rd,5th,7th column.

• Sometimes it is required that the size of components are increased or decreased if the panel is resizable.
new FormLayout(“right:pref, 10px,pref:grow”,””);

Here the 1st column is right aligned by default and 3rd column is set to resizable by setting it as “grow”. Only the 3rd column will be resized and not the 1st column.


7 thoughts on “JGoodies: Better way to design clean swing layout

  1. Nice way to design GUI. But I was wondering if you were referring to the same JGoodies that we all know or this is just another project of yours which happens to have the same name?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s