CODEWITHSUNDEEP
javaswinguser-interfaceborderlayout-manager
ziggy
ziggy

Reputation: 15876

Arranging swing components on a Swing panel

I am new to Swing but kind of struggling to achieve what i am trying to do. I would like to build a screen that looks like this:

enter image description here

I am not sure which layout is best for this kind of screen. I tried using BorderLayout but it never comes out right. I got the buttons at the bottom right but the components in the middle prove to be quite challenging. I know how to add the components on to the panel but the area i am struggling is how to align them. Sometimes if i add a text field on a panel with a BORDERLAYOUT, it takes up the full space of the whole panel which i dont want.

I managed to get it to almost work using AbsoluteLayout but i suspect that is not the best option if i want the screen to be fluid. 

setBounds(100, 100, 775, 599);
getContentPane().setLayout(new BorderLayout());
contentPanel.setBackground(SystemColor.control);
contentPanel.setForeground(Color.RED);
contentPanel.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
getContentPane().add(contentPanel, BorderLayout.CENTER);
contentPanel.setLayout(new BorderLayout(0, 0));
{
    JPanel topHeadersPanel = new JPanel();
    contentPanel.add(topHeadersPanel, BorderLayout.NORTH);
    topHeadersPanel.setLayout(new BorderLayout(0, 0));
    {
        JLabel lblSetSourceRecord = new JLabel("Source customer record:");
        lblSetSourceRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetSourceRecord, BorderLayout.WEST);
    }
    {
        JLabel lblSetDestinationRecord = new JLabel("Destination customer record:");
        lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.EAST);
    }

    {
        JLabel lblSetDestinationRecord = new JLabel("Source customer:");
        lblSetDestinationRecord.setFont(new Font("Tahoma", Font.BOLD, 12));
        topHeadersPanel.add(lblSetDestinationRecord, BorderLayout.SOUTH);
    }
}
{
    JPanel buttonPane = new JPanel();
    buttonPane.setBorder(new EtchedBorder(EtchedBorder.LOWERED, null, null));
    buttonPane.setLayout(new FlowLayout(FlowLayout.CENTER));
    getContentPane().add(buttonPane, BorderLayout.SOUTH);
    {
        JPanel panel = new JPanel();
        buttonPane.add(panel);
    }
    {
        JButton okButton = new JButton("OK");
        okButton.setActionCommand("OK");
        buttonPane.add(okButton);
        getRootPane().setDefaultButton(okButton);
    }
    {
        JButton cancelButton = new JButton("Cancel");
        cancelButton.setActionCommand("Cancel");
        buttonPane.add(cancelButton);
    }

Upvotes: 3

Views: 9959

Answers (3)

Daman Singh
Daman Singh

Reputation: 1

I would also use Group Layout as that will help you align the Labels and text boxes.

Upvotes: -1

Dominik Sandjaja
Dominik Sandjaja

Reputation: 6466

Try making the upper part within a GridLayout with 1 row and 2 columns, add that in a BorderLayout as CENTER and the Buttons as BorderLayout.BOTTOM. Within the upper part, use two panels, one for left, one for right.

And here is some code to show this (I couldn't really copy/paste your example):

public class MW extends JFrame {

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                createAndShowUI();
            }
        });
    }

    private static void createAndShowUI() {
        MW x = new MW();

        JPanel mainPanel = new JPanel();
        mainPanel.setLayout(new GridLayout(1, 2));

        JPanel leftPanel = new JPanel();
        JLabel srcLabel = new JLabel("Source record:");
        leftPanel.add(srcLabel);
        JPanel rightPanel = new JPanel();
        JLabel dstLabel = new JLabel("Destination record:");
        rightPanel.add(dstLabel);

        mainPanel.add(leftPanel);
        mainPanel.add(rightPanel);

        JPanel buttonPanel = new JPanel();
        buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
        JButton okButton = new JButton("OK");
        buttonPanel.add(okButton);
        JButton cancelButton = new JButton("Cancel");
        buttonPanel.add(cancelButton);

        x.setSize(400, 400);
        x.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        x.add(mainPanel, BorderLayout.CENTER);
        x.add(buttonPanel, BorderLayout.PAGE_END);
        x.setLocationRelativeTo(null);
        x.setVisible(true);
    }
}

Upvotes: 5

Lee Meador
Lee Meador

Reputation: 12985

Look at this picture where I boxed in the nested components that would do this

enter image description here

At the top level, two brown sections in a vertical box.

Then the upper one of those has either a grid or a horizontal box shown in blue.

Then each of those has a yellowish box layout with appropriate spacing between then.

You next the containers and use the appropriate layouts in each and the final components go inside the container.

There are some tools that make this easier. I used to use NetBeans editor long ago. Then I used the editor in the IBM WSAD/RAD version of eclipse. Now I use the Matisse editor in MyEclipse if I ever need to do such a layout.

Edit

Just noticed @DaDaDom suggested something simlar on the outside, brown level. He likes a border layout with the upper box in the CENTER and the button box in the SOUTH. That would work really well.

Upvotes: 4

Related Questions