Digital Edition

Lesson 12: An Introduction to Graphical User Interfaces with Swing - Part I
Everything is a little better, faster, and more convenient in Swing

This may not be the best-looking calculator, but it'll give us a chance to learn how to add components and display a window. In the next section we'll try make it look better with the help of layout managers.

Layout Managers
Some old-fashioned programming languages force you to set exact coordinates and sizes of each window component. This works fine if you know the screen settings (resolution) of all users of your program. Java has layout managers that help you arrange components on the screen without assigning strict positions to the window controls. Layout managers will ensure that their screen will look nice regardless of the window size.

Swing offers the following layout managers:

  • FlowLayout
  • GridLayout
  • BoxLayout
  • BorderLayout
  • CardLayout
  • SpringLayout
  • GridBagLayout
To use any layout manager, a program needs to instantiate it, and then assign this object to a container , for example to a panel as in the class SimpleCalculator.

Flow Layout
This layout arranges components in a window row by row. For example, labels, text fields and buttons will be added to the first imaginary row until there is room there. When the current row is filled, the rest of the components will go to the next row, and so on. If a user changes the size of the window, it may mess up the picture. Just grab the corner of our calculator window and resize it. Watch how the manager java.awt.FlowLayout rearranges controls as the size of the window changes.

In the next code sample, the keyword this represents an instance of the object SimpleCalculator.

FlowLayout fl = new FlowLayout();

Well, the FlowLayout is not the best choice for our calculator. Let's try something different now.

Grid Layout
The class java.awt.GridLayout allows you to arrange components as rows and columns in a grid. You'll be adding components to imaginary cells of this grid. If the screen gets resized, grid cells may become bigger, but the relative positions of window components will stay the same. Our calculator has seven components - three labels, three text fields and a button. We may arrange them as a grid of four rows and two columns (one cell stays empty):

GridLayout gr = new GridLayout(4,2);

You can also assign some horizontal and vertical space gaps between the cells, for example five pixels:

GridLayout gr = new GridLayout(4,2,5,5);

After minor changes in our calculator (they are highlighted below), our calculator will look a lot prettier. Create and compile a new class SimpleCalculatorGrid in the project My Calculator.

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

public class SimpleCalculatorGrid {
public static void main(String[] args) {
// Create a panel
JPanel windowContent= new JPanel();

// Set the layout manager for this panel
GridLayout gl = new GridLayout(4,2);

// Create controls in memory

JLabel label1 = new JLabel("Number 1:");
JTextField field1 = new JTextField(10);
JLabel label2 = new JLabel("Number 2:");
JTextField field2 = new JTextField(10);
JLabel label3 = new JLabel("Sum:");
JTextField result = new JTextField(10);
JButton go = new JButton("Add");

// Add controls to the panel

// Create the frame and add the panel to it
JFrame frame = new JFrame(
"My First Calculator");

// set the size and display the window
Run the program SimpleCalculatorGrid, and you'll see this window:

About Yakov Fain
Yakov Fain is a Java Champion and a co-founder of the IT consultancy Farata Systems and the product company SuranceBay. He wrote a thousand blogs ( and several books about software development. Yakov authored and co-authored such books as "Angular 2 Development with TypeScript", "Java 24-Hour Trainer", and "Enterprise Web Development". His Twitter tag is @yfain

In order to post a comment you need to be registered and logged in.

Register | Sign-in

Reader Feedback: Page 1 of 1

Subscribe to the World's Most Powerful Newsletters


DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held Novemb...
Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will ...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, ...
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing w...
@DevOpsSummit New York 2018, colocated with CloudEXPO | DXWorldEXPO New York 2018 will be held Novem...
The dynamic nature of the cloud means that change is a constant when it comes to modern cloud-based ...
DXWorldEXPO LLC announced today that Dez Blanchfield joined the faculty of CloudEXPO's "10-Year Anni...
As DevOps methodologies expand their reach across the enterprise, organizations face the daunting ch...
The standardization of container runtimes and images has sparked the creation of an almost overwhelm...
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As au...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO an...
"We started a Master of Science in business analytics - that's the hot topic. We serve the business ...
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news an...
As you move to the cloud, your network should be efficient, secure, and easy to manage. An enterpris...
There is a huge demand for responsive, real-time mobile and web experiences, but current architectur...
DXWorldEXPO LLC announced today that "Miami Blockchain Event by FinTechEXPO" has announced that its ...
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to ...
"NetApp is known as a data management leader but we do a lot more than just data management on-prem ...
We call it DevOps but much of the time there’s a lot more discussion about the needs and concerns of...
"Since we launched LinuxONE we learned a lot from our customers. More than anything what they respon...