Develop Reference

Swing GridBagLayout: centering a button on the second row

I have this code that displays a label, a textfield and a button:
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class Form extends JFrame implements ActionListener {
private JLabel label = new JLabel("What's your name:");
private JTextField field = new JTextField(15);
private JButton button = new JButton("Send");
public Form() {
setTitle("Name Form");
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.insets = new Insets(10, 10, 10, 1);
gbc.anchor = GridBagConstraints.LINE_END;
gbc.gridx = 0;
gbc.gridy = 0;
add(label, gbc);
gbc = new GridBagConstraints();
gbc.insets = new Insets(10, 10, 10, 10);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.gridx = 1;
gbc.gridy = 0;
add(field, gbc);
gbc = new GridBagConstraints();
gbc.insets = new Insets(10, 10, 10, 10);
gbc.anchor = GridBagConstraints.LINE_END;
gbc.gridx = 0;
gbc.gridy = 1;
add(button, gbc);
}
#Override
public void actionPerformed(ActionEvent event) {
}
public static void main(String[] args) {
Form myFrame = new Form();
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myFrame.pack();
myFrame.setVisible(true);
}
}
It shows this:
I need the button to be horizontally centered like this:
How do I do this with GridBagLayout? I tried different values for anchor but nothing worked.
EDIT:
Adding gbc.gridwidth = 2 showed this:

The button needs to stretch over the two columns, so set the gridwidth.
gbc.gridwidth = 2;
(Btw, you don't need to create a new GridBagConstraints for each component. Just reuse the say one and only change the properties that are different.)

How to add and remove components from particular coordinates in GridBagLayout?

I am new to swing, am trying to make a form in which you can navigate to different panels by the click of buttons on the left-hand side, to fill out forms(panels) appearing on the right-hand side, and I am using the GridBagLayout for the purpose. I am trying to remove the current panel on the click of the JButton and then add the corresponding panels I created by extending JPanel to classes. For ex., if I click on the accountDetailsButton, I wish to open up the accountDetails Panel, somewhat like switching tabs. I want to replace whichever panel is open on that position with the accountDetails Panel, and since any tab may be open, I need to exchange the panel on the basis of coordinates instead of the component name. I don't know how to go about it as I want to remove and add components on the basis of coordinates on the frame, and the name of the components may not be known. Here's the code.
Thanks a lot in advance!
import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
public class FormWindow {
private CustomerProfile customerProfile;
private AccountDetails accountDetails;
private LoanDetails loanDetails;
private DocumentUpload documentUpload;
private JPanel mainPanel;
private JLabel logo;
private JButton customerProfileButton;
private JButton accountDetailsButton;
private JButton loanDetailsButton;
private JButton documentUploadButton;
private JPanel bufferPanel;
public static void main(String[] args) {
JFrame frame = new JFrame("FormWindow");
frame.setContentPane(new FormWindow().mainPanel);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
FormWindow() {
mainPanel = new JPanel();
bufferPanel = new JPanel();
mainPanel.setLayout(new GridBagLayout());
customerProfile = new CustomerProfile();
accountDetails = new AccountDetails();
loanDetails = new LoanDetails();
documentUpload = new DocumentUpload();
// fieldForm.setLayout(new GridBagLayout());
GridBagConstraints gbc;
gbc = new GridBagConstraints();
gbc.gridx = 1;
gbc.gridy = 0;
gbc.gridheight = 5;
gbc.fill = GridBagConstraints.BOTH;
bufferPanel.add(customerProfile);
mainPanel.add(bufferPanel, gbc);
final GridBagConstraints gbcForms = gbc;
logo = new JLabel();
logo.setText("LOGO");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.insets = new Insets(5, 5, 10, 5);
mainPanel.add(logo, gbc);
customerProfileButton = new JButton();
customerProfileButton.setText("Customer Profile");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 1;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.insets = new Insets(5, 5, 5, 5);
mainPanel.add(customerProfileButton, gbc);
accountDetailsButton = new JButton();
accountDetailsButton.setText("Account Details");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 2;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.insets = new Insets(5, 5, 5, 5);
mainPanel.add(accountDetailsButton, gbc);
loanDetailsButton = new JButton();
loanDetailsButton.setText("Loan Details");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 3;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.insets = new Insets(5, 5, 5, 5);
mainPanel.add(loanDetailsButton, gbc);
documentUploadButton = new JButton();
documentUploadButton.setText("Document Upload");
gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 4;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.insets = new Insets(5, 5, 5, 5);
mainPanel.add(documentUploadButton, gbc);
//adding action listeners to buttons
customerProfileButton.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent ae) {
}
});
accountDetailsButton.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent ae) {
}
});
loanDetailsButton.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent ae) {
}
});
documentUploadButton.addActionListener(new ActionListener() {
#Override
public void actionPerformed(ActionEvent ae) {
}
});
}
}
I wish to display the corresponding panel on the right-hand side of the frame when the corresponding button is clicked. For ex., if I click the accountDetailsButton, I want to replace the previously visible panel with the accountDetails panel (the code for accountDetails has the accountDetails class extending JPanel). This is done to get the feel of switching between tabs in a way.

Variable not found even though it's in the class above

So I have a GUI class which contains the JButtons, and then I have an actionPerformed class below which shows what will happen if I press the button. Now, when I do the if(e.getSource()==search) the search comes up red and says the variable cannot be found in the class GUI. Even though it's in that very class.
I need some help with this.
package crimedata;
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.sql.*;
class GUI extends JFrame implements ActionListener {
Connection con = null;
GUI() {
JPanel p = new JPanel();
JFrame f = new JFrame("Crime Data");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setSize(600, 600);
f.setResizable(true);
f.setLocationRelativeTo(null);
GridBagConstraints gbc = new GridBagConstraints();
getContentPane().setLayout(new GridBagLayout());
gbc.insets = new Insets(5, 5, 5, 5);
JLabel LongLabel = new JLabel("Enter Longitude here");
LongLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 1;
getContentPane().add(LongLabel, gbc);
JTextField LongText = new JTextField(20);
getContentPane().add(LongText, gbc);
JLabel LatLabel = new JLabel("Enter Latitude here");
LatLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 2;
getContentPane().add(LatLabel, gbc);
JTextField LatText = new JTextField(20);
getContentPane().add(LatText, gbc);
JLabel LSOANameLabel = new JLabel("Enter LSOA Name here");
LSOANameLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 3;
getContentPane().add(LSOANameLabel, gbc);
JTextField LSOANameText = new JTextField(20);
getContentPane().add(LSOANameText, gbc);
JButton search = new JButton("Search");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(search, gbc);
search.addActionListener(this);
JButton exportnoid = new JButton("Export No Crime ID");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(exportnoid, gbc);
JButton exportdup = new JButton("Export Duplicate ID");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(exportdup, gbc);
f.add(getContentPane());
pack();
f.setVisible(true);
}
#Override
public void actionPerformed(ActionEvent e) {
if(e.getSource()==search){
System.out.println("");
} else {
}
}
}
class GUIHandler {
public static void main(String[] args) {
GUI a = new GUI();
}
}

search variable is not an instance variable, its scope is limited to the constructor, so you cannot use it outside of it.
Declare JButton search variable after Connection con = null;.
Also note that have empty 'else' statement in actionPerformed method.

No, there is no variable search in the scope of your class GUI.
There is a local variable search in the constructor of your class GUI.
The only instance variable I see so far, is the variable con of type Connection.
You should declare search as an instance variable of GUI, just like con, if you want to use it in another method. My suggestion is, you make it private.
Alternatively you could use setActionCommand(String cmd) to set an action command name for your JButton. Then you can use getActionCommand() of your ActionEvent to retrieve the name of the action and react accordingly. But I do not like this approach, since in this case the compiler cannot help you much to detect name clashes.

class GUI extends JFrame implements ActionListener {
Connection con = null;
JButton search;
GUI() {
JPanel p = new JPanel();
JFrame f = new JFrame("Crime Data");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setSize(600, 600);
f.setResizable(true);
f.setLocationRelativeTo(null);
GridBagConstraints gbc = new GridBagConstraints();
getContentPane().setLayout(new GridBagLayout());
gbc.insets = new Insets(5, 5, 5, 5);
JLabel LongLabel = new JLabel("Enter Longitude here");
LongLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 1;
getContentPane().add(LongLabel, gbc);
JTextField LongText = new JTextField(20);
getContentPane().add(LongText, gbc);
JLabel LatLabel = new JLabel("Enter Latitude here");
LatLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 2;
getContentPane().add(LatLabel, gbc);
JTextField LatText = new JTextField(20);
getContentPane().add(LatText, gbc);
JLabel LSOANameLabel = new JLabel("Enter LSOA Name here");
LSOANameLabel.setForeground(Color.gray);
gbc.gridx = 0;
gbc.gridy = 3;
getContentPane().add(LSOANameLabel, gbc);
JTextField LSOANameText = new JTextField(20);
getContentPane().add(LSOANameText, gbc);
search = new JButton("Search");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(search, gbc);
search.addActionListener(this);
JButton exportnoid = new JButton("Export No Crime ID");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(exportnoid, gbc);
JButton exportdup = new JButton("Export Duplicate ID");
gbc.gridx = 0;
gbc.gridy = -1;
getContentPane().add(exportdup, gbc);
f.add(getContentPane());
pack();
f.setVisible(true);
}
}

how to add a TiltledBorder in a GridBagLayout?

I am trying to make an UI with Swing using only one Container with the GridBagLayout !
My problem is that I want to regroup some JtextFields and Jlabels under one title (TitledBorder) in my interface, is there a way to add the border directly in my container, or should I create another JPanel to regroup my components and then add the hole Panel to my GridBagLayout ?

Based on the pic you provided, the typical solution would be to have 2 separate panels, each with their own TitledBorder, and then place both of these panels on a third outer panel.
However, you could create a similar effect on a single panel by replacing the TitledBorders with a combination of a JLabel followed by a JSeparator.
The difference is that the logical "group" of fields is now only defined by title that isn't surrounding the whole group. Some people prefer this, others do not.
Here's a sample of your pic to give you the idea:
import java.awt.*;
import javax.swing.*;
public class Test implements Runnable
{
private JTextField firstName;
private JTextField lastName;
private JTextField title;
private JTextField nickname;
private JComboBox format;
public static void main(String[] args)
{
SwingUtilities.invokeLater(new Test());
}
public Test()
{
firstName = new JTextField(20);
lastName = new JTextField(20);
title = new JTextField(20);
nickname = new JTextField(20);
format = new JComboBox();
}
public void run()
{
JFrame frame = new JFrame();
frame.getContentPane().add(createPanel());
frame.pack();
frame.setVisible(true);
}
private JPanel createPanel()
{
JPanel p = new JPanel(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.insets = new Insets(4,4,4,4);
gbc.ipadx = 1;
gbc.ipady = 1;
gbc.anchor = GridBagConstraints.WEST;
JLabel nameHeader = new JLabel("Name:");
nameHeader.setForeground(Color.RED.darker());
p.add(nameHeader, gbc);
gbc.gridx = 1;
gbc.gridwidth = 3;
gbc.fill = GridBagConstraints.HORIZONTAL;
p.add(new JSeparator(JSeparator.HORIZONTAL), gbc);
gbc.gridx = 0;
gbc.gridy = 1;
gbc.gridwidth = 1;
gbc.fill = GridBagConstraints.NONE;
p.add(new JLabel("First Name"), gbc);
gbc.gridx = 1;
p.add(firstName, gbc);
gbc.gridx = 2;
p.add(new JLabel("Last Name"), gbc);
gbc.gridx = 3;
p.add(lastName, gbc);
gbc.gridx = 0;
gbc.gridy = 2;
p.add(new JLabel("Title"), gbc);
gbc.gridx = 1;
p.add(title, gbc);
gbc.gridx = 2;
p.add(new JLabel("Nickname"), gbc);
gbc.gridx = 3;
p.add(nickname, gbc);
gbc.gridx = 0;
gbc.gridy = 3;
p.add(new JLabel("Format"), gbc);
gbc.gridx = 1;
gbc.gridwidth = 3;
gbc.fill = GridBagConstraints.HORIZONTAL;
p.add(format, gbc);
return p;
}
}
You could play with the constraints to polish this up a bit, but you get the idea.
An upside to this approach is that when adding more fields for the Email section, you can get them to line up with the fields in the Name section. With separate panels, this would be more difficult (you could use a bunch of Box.createHorizontalStrut(...) for this).
The downside to this approach is that you now have a large panel with many fields, and it could get a bit unwieldy to maintain if you need to add more fields.

Try This :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.*;
class SwingLayoutDemo {
private JFrame mainFrame;
private JLabel headerLabel;
private JLabel statusLabel;
private JPanel controlPanel;
private JLabel msglabel;
public SwingLayoutDemo(){
prepareGUI();
}
public static void main(String[] args){
SwingLayoutDemo swingLayoutDemo = new SwingLayoutDemo();
swingLayoutDemo.showGridBagLayoutDemo();
}
private void prepareGUI(){
mainFrame = new JFrame("Java SWING Examples");
mainFrame.setSize(400,400);
mainFrame.setLayout(new GridLayout(3, 1));
headerLabel = new JLabel("",JLabel.CENTER );
statusLabel = new JLabel("",JLabel.CENTER);
statusLabel.setSize(350,100);
mainFrame.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent windowEvent){
System.exit(0);
}
});
controlPanel = new JPanel();
controlPanel.setBorder(new TitledBorder (
new LineBorder (Color.black, 5),
"Title String"));
controlPanel.add(new JLabel("TitledBorder using LineBorder"));
controlPanel.setLayout(new FlowLayout());
mainFrame.add(headerLabel);
mainFrame.add(controlPanel);
mainFrame.add(statusLabel);
mainFrame.setVisible(true);
}
private void showGridBagLayoutDemo(){
headerLabel.setText("Layout in action: GridBagLayout");
JPanel panel = new JPanel();
panel.setBackground(Color.darkGray);
panel.setSize(300,300);
GridBagLayout layout = new GridBagLayout();
panel.setLayout(layout);
GridBagConstraints gbc = new GridBagConstraints();
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.gridx = 0;
gbc.gridy = 0;
panel.add(new JButton("Button 1"),gbc);
gbc.gridx = 1;
gbc.gridy = 0;
panel.add(new JButton("Button 2"),gbc);
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.ipady = 20;
gbc.gridx = 0;
gbc.gridy = 1;
panel.add(new JButton("Button 3"),gbc);
gbc.gridx = 1;
gbc.gridy = 1;
panel.add(new JButton("Button 4"),gbc);
gbc.gridx = 0;
gbc.gridy = 2;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.gridwidth = 2;
panel.add(new JButton("Button 5"),gbc);
controlPanel.add(panel);
mainFrame.setVisible(true);
}
}

Multiple Panels Below Each Other

Is it possible i can have a top panel for a login. Then a middle and bottom panel underneath.
I'm using gridbaglayout and i have assigned 2 panels. One panel has components linked to it for login details and the other panel has other components linked to it. However, it's not going occurring to plan.
Ive tried using Box/Borderlayout to do this, but then i'm not able to create the spacing i want.
Here is a sketch of what i want.
public class GUI extends JFrame{
private JPanel myTopPL, myTopPL2;
private JTextField myUsernameTF;
private JTextField myPasswordTF;
private JTextField myMessageTF;
private JLabel myUsernameLBL;
private JLabel myPasswordLBL;
private JLabel myItemsLBL;
private JTextArea myMainTA;
private JButton myLoginBN;
private JButton myConnectBN;
private JButton mySendBN;
private JComboBox myItemsCB;
public GUI () {
super("GUI ");
setLayout(new GridBagLayout());
myTopPL = new JPanel();
myTopPL2 = new JPanel();
myTopPL.setLayout(new GridBagLayout());
myTopPL2.setLayout(new GridBagLayout());
GridBagConstraints myTopPLGBC = new GridBagConstraints();
myTopPLGBC.weightx = 1;
myTopPLGBC.weighty = 1;
GridBagConstraints myTopPLGBC2 = new GridBagConstraints();
myTopPLGBC.weightx = 2;
myTopPLGBC.weighty = 2;
myUsernameLBL = new JLabel("Username: ");
myUsernameLBL.setFont(new Font("Arial", Font.BOLD, 13));
myTopPLGBC.gridx = 1;
myTopPLGBC.gridy = 1;
myTopPLGBC.insets = new Insets(5,5,5,5);
myTopPL.add(myUsernameLBL, myTopPLGBC);
myUsernameTF = new JTextField(10);
myTopPLGBC.gridx = 2;
myTopPLGBC.gridy = 1;
myTopPLGBC.insets = new Insets(5,5,5,5);
myTopPL.add(myUsernameTF,myTopPLGBC);
myPasswordLBL = new JLabel("Password: ");
myPasswordLBL.setFont(new Font("Arial", Font.BOLD, 13));
myTopPLGBC.gridx = 3;
myTopPLGBC.gridy = 1;
myTopPLGBC.insets = new Insets(5,5,5,5);
myTopPL.add(myPasswordLBL, myTopPLGBC);
myPasswordTF = new JTextField(10);
myTopPLGBC.gridx = 4;
myTopPLGBC.gridy = 1;
myTopPLGBC.insets = new Insets(5,5,5,5);
myTopPL.add(myPasswordTF,myTopPLGBC);
myLoginBN = new JButton("Login");
myTopPLGBC.gridx = 5;
myTopPLGBC.gridy = 1;
myTopPLGBC.insets = new Insets(5,5,5,5);
myTopPL.add(myLoginBN,myTopPLGBC);
myItemsLBL = new JLabel("Items: ");
myItemsLBL.setFont(new Font("Arial", Font.BOLD, 13));
myTopPLGBC2.gridx = 1;
myTopPLGBC2.gridy = 3;
myTopPLGBC2.insets = new Insets(5,5,5,5);
myTopPL2.add(myItemsLBL, myTopPLGBC2);
myItemsCB = new JComboBox();
myItemsCB.addItem(" Select an Item ");
myTopPLGBC2.gridx = 1;
myTopPLGBC2.gridy = 4;
myTopPLGBC2.insets = new Insets(5,5,5,5);
myTopPL2.add(myItemsCB, myTopPLGBC2);
myConnectBN = new JButton("Connect");
myTopPLGBC2.gridx = 2;
myTopPLGBC2.gridy = 4;
myTopPLGBC2.insets = new Insets (5,5,5,5);
myTopPL2.add(myConnectBN, myTopPLGBC2);
GridBagConstraints GBC = new GridBagConstraints();
GBC.anchor = GridBagConstraints.NORTHWEST;
GBC.weightx = 1;
GBC.weighty = 1;
this.add(myTopPL,GBC);
GridBagConstraints GBC2 = new GridBagConstraints();
GBC2.anchor = GridBagConstraints.NORTHWEST;
GBC2.weightx = 2;
GBC2.weighty = 2;
this.add(myTopPL2,GBC2);
}
public static void main(String[] args) {
GUI GUI = new GUI ();
GUI .setDefaultCloseOperation(RMIAuctionHouse.EXIT_ON_CLOSE);
GUI .setSize(750,500);
GUI .setVisible(true);
}
}

I'd break down the application into it's individual areas of responsibilities and focus on creating the UI elements to support it. This will allow you to focus on the needs of each section of your application, it also allows you the opportunity to change around the layout as you need
public class TestLayout15 {
public static void main(String[] args) {
new TestLayout15();
}
public TestLayout15() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
}
JFrame frame = new JFrame("Test");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLayout(new BorderLayout());
frame.add(new MainPane());
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class MainPane extends JPanel {
private JTextField messageField;
private JButton sendButton;
public MainPane() {
setBorder(new EmptyBorder(4, 4, 4, 4));
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.weightx = 1;
gbc.fill = GridBagConstraints.HORIZONTAL;
gbc.gridwidth = GridBagConstraints.REMAINDER;
add(new LoginPane(), gbc);
gbc.gridy++;
add(new ConnectPane(), gbc);
gbc.gridy++;
gbc.weighty = 1;
gbc.fill = GridBagConstraints.BOTH;
add(new JScrollPane(new JTextArea(5, 20)), gbc);
gbc.gridwidth = 1;
messageField = new JTextField(10);
sendButton = new JButton("Send");
gbc.gridy++;
gbc.weighty = 0;
gbc.fill = GridBagConstraints.HORIZONTAL;
add(messageField, gbc);
gbc.gridx++;
gbc.weightx = 0;
add(sendButton, gbc);
}
}
public class ConnectPane extends JPanel {
private JComboBox comboBox;
private JButton connectButton;
public ConnectPane() {
comboBox = new JComboBox();
connectButton = new JButton("Connect");
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(comboBox, gbc);
gbc.gridx++;
gbc.weightx = 1;
add(connectButton, gbc);
}
}
public class LoginPane extends JPanel {
private JTextField userNameField;
private JPasswordField passwordField;
private JButton loginButton;
public LoginPane() {
userNameField = new JTextField(10);
passwordField = new JPasswordField(10);
loginButton = new JButton("Login");
setLayout(new GridBagLayout());
GridBagConstraints gbc = new GridBagConstraints();
gbc.gridx = 0;
gbc.gridy = 0;
gbc.anchor = GridBagConstraints.WEST;
add(new JLabel("User name:"), gbc);
gbc.gridx++;
add(userNameField, gbc);
gbc.gridx++;
add(new JLabel("Password:"), gbc);
gbc.gridx++;
add(passwordField, gbc);
gbc.gridx++;
gbc.weightx = 1;
add(loginButton, gbc);
}
}
}

To start with, replace the call to GUI.setSize(750,500) with GUI.pack(). That will size the window to fit your content. After doing that you'll see the second panel is appearing to the right of the first. This is because you did not set gridx/gridy on GBC2 so it defaults to putting myTopPL2 to the right of myTopPL1, not below it.
I rarely explicitly set the gridx/gridy when using GridBagLayout. For your first row of the display, I would use default values for all but myLoginBN where I would set gridwidth to GridBagConstraints.REMAINDER. That tells GridBagLayout that nothing else goes on this row. The next item added with a default gbc will be placed at the start of the second row.
Minor nits:
Use standard Java capitalization:
Class name are camelcase with a leading uppercase character. So, "Gui", not "GUI".
Instance names are camelcase with a leading lowercase character. So, "gbc1" not "GBC1"
Use SwingUtilities.InvokeLater to start the Gui on the EDT
SwingUtilities.invokeLater(new Runnable() {
public void run() {
GUI GUI = new GUI ();
GUI .setDefaultCloseOperation(RMIAuctionHouse.EXIT_ON_CLOSE);
GUI .setSize(750,500);
GUI .setVisible(true);
}});

Seems you are not familiar with Java layouts, so i recomend you to try null(absolute) Layout:
setLayout(null);
...
component.setBounds( x, y, width, heigh );
add(component);
Here example
package gui;
import java.awt.Font;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
public class GUI extends JFrame{
private JTextField myUsernameTF;
private JLabel myUsernameLBL;
public GUI() {
super("GUI ");
setLayout(null);
myUsernameLBL = new JLabel("Username: ");
myUsernameLBL.setFont(new Font("Arial", Font.BOLD, 13));
myUsernameLBL.setBounds(50,30,80,20);
add(myUsernameLBL);
myUsernameTF = new JTextField(10);
myUsernameTF.setBounds(190,30,80,20);
add(myUsernameTF);
// and so on ...
}
public static void main(String[] args) {
GUI frame = new GUI();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(750,500);
frame.setVisible(true);
}
}
Good luck on thorny way to handle java swing =)