Sunday, May 11, 2008

Layout use in Java

Setting the right layout is one of the major concerns in Java Programming. Swing Package provides number of classes and API's for setting border and layout but using the right one will make our UI lively and error free. First of all, when we are worrying about Layout just worry for Panel and content Panes nothing else.
Now here we will check some of the common Layout style and difference between them. Default Layout for JPanel is FlowLayout but what I use most commonly is GridLayout and BorderLayout. Lets first talk about the grid layout. Here is a simple code:

import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;

public class LayoutCheck extends JPanel {

public LayoutCheck() {
JButton button1 = new JButton("Button 1");
JButton button2 = new JButton("Button 2");
JButton button3 = new JButton("Button 3");
JButton button4 = new JButton("Button 4");
add(button1);
add(button2);
add(button3);
add(button4);

setLayout(new GridLayout(2, 2));
setBorder(new TitledBorder(new EtchedBorder(EtchedBorder.LOWERED), "All Buttons"));
}
public static void main(String[] args) {
LayoutCheck lc = new LayoutCheck();
JFrame frame = new JFrame("Checking Layouts");
frame.setContentPane(lc);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
}
}

So, 4 buttons with grid layout of 2 X 2. Output will be definitely like this:



Playing on these 2 lines will tell us more:

setLayout(new GridLayout(2, 2));
setBorder(new TitledBorder(new EtchedBorder(EtchedBorder.LOWERED), "All Buttons"));

is place of (2,2) if we do (4,1) or (1,4) it will give vertical and horizontal look. What if we want to put some gaps in between the buttons. We need to use:

setLayout(new GridLayout(2, 2, 5, 5));

It will provide horizontal and vertical gap of 5. Second line in code is setting the recgaular box around the buttons "All Buttons". There are some options in EtcherBorder, please check the API page for more detail.

GridLayout divides the whole panel into grid, so maximizing or minimizing will going to increase or decrease the size of button, unlike other layout.

From Sun Java Document, I am just copying that in which case which layout need to be used. Follow this religiously, we can make a rich UI based application:

Scenario: You need to display a component in as much space as it can get. If it is the only component in its container, use GridLayout or BorderLayout. Otherwise, BorderLayout or GridBagLayout might be a good match. If you use BorderLayout, you will need to put the space-hungry component in the center. With GridBagLayout, you will need to set the constraints for the component so that fill=GridBagConstraints.BOTH. Another possibility is to use BoxLayout, making the space-hungry component specify very large preferred and maximum sizes.

Scenario: You need to display a few components in a compact row at their natural size. Consider using a JPanel to group the components and using either the JPanel's default FlowLayout manager or the BoxLayout manager. SpringLayout is also good for this.

Scenario: You need to display a few components of the same size in rows and columns. GridLayout is perfect for this.

Scenario: You need to display a few components in a row or column, possibly with varying amounts of space between them, custom alignment, or custom component sizes. BoxLayout is perfect for this.

Scenario: You need to display aligned columns, as in a form-like interface where a column of labels is used to describe text fields in an adjacent column. SpringLayout is a natural choice for this. The SpringUtilities class used by several Tutorial examples defines a makeCompactGrid method that lets you easily align multiple rows and columns of components.

Scenario: You have a complex layout with many components. Consider either using a very flexible layout manager such as GridBagLayout or SpringLayout, or grouping the components into one or more JPanels to simplify layout. If you take the latter approach, each JPanel might use a different layout manager.

We will talk about some of the common scenario in our next blog session.

2 comments:

Unknown said...

How do you change the shape of the button? I've seen examples where the button is square, like in your example. When I run the same code on my machine, the buttons come out with rounded corners.

Anonymous said...

What layout manager do i use in creating form and how do i do that?