Building UI with Java Swing

Question

How should I go about building this UI using Java Swing without the use of GUI Builders?

I don't need a solution but just some general guidance on how to get started with this. Specifically, cues on selecting the best layout(s) and Swing components to complete the job.

What I have done so far is build a JFrame with label, text field pairs like so:

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

import javax.swing.border.TitledBorder;

class AdminForm {

    AdminForm() {
        JFrame f = new JFrame("Panel Example");
        JPanel gui = new JPanel(new BorderLayout(2,2));

        JPanel labelFields = new JPanel(new BorderLayout(2,2));
        labelFields.setBorder(new TitledBorder("BorderLayout"));

        JPanel labels = new JPanel(new GridLayout(0,2,1,1));
        labels.setBorder(new TitledBorder("GridLayout"));
        JPanel fields = new JPanel(new GridLayout(0,2,1,1));
        fields.setBorder(new TitledBorder("GridLayout"));

        for (int ii=1; ii<8; ii++) {
            labels.add(new JLabel("Label " + ii));
            // if these were of different size, it would be necessary to
            // constrain them using another panel
            labels.add(new JTextField(10));
        }

        labelFields.add(labels, BorderLayout.CENTER);
        //labelFields.add(fields, BorderLayout.EAST);

        gui.add(labelFields, BorderLayout.NORTH);
        //gui.add(guiCenter, BorderLayout.CENTER);

        f.add(gui);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setVisible(true);
    }

    public static void main(String[] args) throws Exception {
        //Create the GUI on the event dispatching thread
        SwingUtilities.invokeLater(new Runnable(){
            @Override
            public void run() {
                new AdminForm();
            }
        });
    }
}

Concerns:

I'm not sure I used the best layout configuration to get the labels and the text fields list in place. A better way to do this?
The panel is shrunk when I run this. I think I need to specify a panel size?
I need another panel to the right of this obviously. How do I introduce a new panel and get this aligned with what I already have?

what exactly is it that won't work, what do you think, what have you tried? — Stultuske
– Stultuske, Commented Jun 20, 2018 at 13:17
If you have already looked into different layouts and all of it you should at least have a starting point on how to design the UI you are desiring. Please include this knowledge (also this references parts of the question edited out after I commented) — Ben
– Ben, Commented Jun 20, 2018 at 13:17
GridBagLayout is the most versatile and tunable layout manager - but it's hard to understand and the learning curve is steep — user330315
– user330315, Commented Jun 20, 2018 at 13:19
@Stultuske I have updated the question with information on what I have done so far — Priyath Gregory
– Priyath Gregory, Commented Jun 20, 2018 at 13:26

Community · Accepted Answer · 2020-06-20 09:12:55Z

As you're using Layout Managers you need to know that you can combine them. You might ask "How can I do that?"

Easy, nest JPanels inside each other, each with their own layout manager.

For your specific case, I see the following structure:

JFrame (The window)
    JPanel (The main pane) - Flow Layout (Default layout of a JPanel)
        JPanel (Left pane) - GridLayout (As your image shows, all labels & fields have the same size)
        JPanel (Right pane) - GridBagLayout (It's a weird accomodation of the buttons, so I did my best to replicate & give a better look)

As you can see, we have 2 nested JPanels inside another one and each of them has different layouts which help to have different accomodations.

The following code produces this output:

import java.awt.Color;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import java.awt.GridLayout;
import java.awt.Insets;

import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;

public class AdminForm {
    private static final String[] labels = {"Car Number", "Car No. Plate", "Model", "Capacity", "Date Purchased",
            "Insurance Status", "Date Insured", "Insurance Expiry Date", "Availability"};
    
    private JFrame frame;
    private JPanel pane;
    private JPanel leftPane;
    private JPanel rightPane;
    private JTextField[] fields;
    private JButton searchButton;
    private JTextField searchField;
    private JButton updateButton;
    private JButton deleteButton;
    private JButton clearButton;
    private JButton nextButton;
    private JButton previousButton;
    
    public static void main(String[] args) {
        SwingUtilities.invokeLater(new AdminForm()::createAndShowGUI);
    }
    
    private void createAndShowGUI() {
        frame = new JFrame();
        pane = new JPanel();
        leftPane = createLeftPane();
        rightPane = createRightPane();
        
        pane.add(leftPane);
        pane.add(rightPane);
        
        frame.add(pane);
        frame.pack();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    
    private JPanel createRightPane() {
        JPanel panel = new JPanel();
        
        searchButton = new JButton("Search");
        searchField = new JTextField(10);
        updateButton = new JButton("Update");
        deleteButton = new JButton("Delete");
        clearButton = new JButton("Clear");
        nextButton = new JButton("Next");
        previousButton = new JButton("Previous");
        
        panel.setLayout(new GridBagLayout());
        
        GridBagConstraints gbc = new GridBagConstraints();
        
        gbc.gridx = 0;
        gbc.gridy = 0;
        gbc.fill = GridBagConstraints.BOTH;
        gbc.insets = new Insets(5, 5, 5, 5);
        
        panel.add(searchButton, gbc);
        
        gbc.gridy++;
        gbc.gridwidth = 2;
        
        panel.add(searchField, gbc);
        
        gbc.gridy++;
        gbc.gridwidth = 1;
        
        panel.add(updateButton, gbc);
        
        gbc.gridy++;
        
        panel.add(deleteButton, gbc);
        
        gbc.gridx++;
        panel.add(clearButton, gbc);
        
        gbc.gridx = 0;
        gbc.gridy++;
        
        panel.add(nextButton, gbc);
        
        gbc.gridy++;
        panel.add(previousButton, gbc);
        
        panel.setBorder(BorderFactory.createLineBorder(Color.GRAY));
        
        return panel;
    }
    
    private JPanel createLeftPane() {
        JPanel panel = new JPanel();
        fields = new JTextField[labels.length];
        
        panel.setLayout(new GridLayout(0, 2, 5, 5));
        
        for (int i = 0; i < fields.length; i++) {
            fields[i] = new JTextField(10);
            
            //This makes text fields not editable for certain ones.
            switch (i) {
                case 4:
                case 6:
                case 7:
                case 8:
                    fields[i].setEditable(false);
                    break;
                default:
                    break;
            }
            
            panel.add(new JLabel(labels[i]));
            panel.add(fields[i]);
        }
        
        //Investigate how to change color of border, etc
        panel.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.GRAY), "Update Data"));
        
        return panel;
    }
}

Just play around with the values to have your desired output.

Side note:

Give your variables better namings, later on you'll ask "What is f"?

JFrame f = new JFrame("Panel Example");

this is brilliant. thank you for the effort and the explanation. I will definitely look into this and learn more!

Collectives™ on Stack Overflow

Building UI with Java Swing

1 Answer 1

Side note:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Side note:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related