使用Java Swing构建UI

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?

Answer 1

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");