Layout Design

Deciding Layouts

Deciding the layout is a very important step in Java GUI programming, just like solving an algorithm in normal programming. Layout decides how the components like labels, buttons, text fields etc are going to be displayed on a frame or window.

Some GUI can be designed using single panel with a single simple layout. Some GUI need to be broken down into smaller panels which have to be added to an outer panel. Each smaller panel can have its own layout.

The simplest layout is the flow layout. Flow layout produces output as a single row. So go for flow layout if you have only 3 or lesser components or if you want all the components in a single row.

Next is grid layout. As long as you can determine the rows and columns, you can use this layout. It is possible to use grid layout for most of the applications which you want to develop with a single panel. You can always use filler labels to occupy the empty spaces. So grid layout works fine in such cases.

But if you want to have a very neat GUI with very good layout, you need to go for more than 1 panel. In that case, grid, flow, and border are all used together.

The development of a GUI depends on the type of problem. There are 2 types of GUI problems:

1. Problems which just specify that you need to do certain things. In this case, the layout of GUI is totally in your hands.

2. Problems where you are given a rough drawing on how GUI needs to look.

Type 1:

In case 1, you need to start with a paper and pencil.

- Read the problem and identify what needs to be displayed to the user

- Depending on that, draw a simple diagram on how you want your GUI to look

- Then start deciding on the layout

For example, consider the problem below:

Write a GUI java program that takes 2 numbers from the user, adds them, and displays the sum.

Solution:

1. For this, you need 2 text fields to read 2 inputs. 2 labels to tell what to enter in the text fields.

2. 1 button to initiate calculation.

3. 1 text field to display result, and 1 label to address the text field.

4. The rough diagram will be

5. For the above diagram, if you are going to use a single panel, then grid layout is the best choice. To decide the layout, dissect the diagram as shown below. As long as you can divide it into rows and columns, you can use grid layout. Otherwise, you need to go for more than 1 panel.

Since I am able to dissect the above diagram into 3 rows and 3 columns, I can use grid layout. In places where there are no components, I can use invisible filler labels.

Type 2:

- In this case, the developer need not draw a diagram because it is already provided.

- Print the diagram, take a pencil, and dissect the diagram.

- Decide the layout.

For example, consider the problem below:

Develop the following GUI:

The GUI must