We Keep Coding

Which Swing layout manager to get my desired layout?

I am trying to make a basic login menu following this mock up :
I decided to put this whole menu into a JPanel so I can switch to another panel once the connexion is successful.
So I decided to use a Borderlayout to have the title in north area and the connect button in the south area .
I made the center of the borderlayout a panel itself . I decided to make it a gridlayout to both have the labels(login,password) but also the textfield in which the user will put his id.
The result is very ugly and very far from what I expected :
Here is the code of the menu :
public class EcranAccueil extends JPanel {
private JLabel labelTitre;
private JPanel PanelConnexion;
private JButton boutonConnexion;
private JLabel labelLogin;
private JLabel labelMotDepasse;
private JTextField loginUser;
private JTextField MotDepasseUser;
EcranAccueil(EcranGestion EcranPrincipale){
PanelConnexion = new JPanel();
this.setLayout(new BorderLayout());
PanelConnexion.setLayout(new GridLayout(2,2));
loginUser = new JTextField("User");
loginUser.setMinimumSize(new Dimension(20,20));
loginUser.setMaximumSize(new Dimension(20,20));
MotDepasseUser = new JTextField("Password");
boutonConnexion = new JButton("Connect");
boutonConnexion.setMinimumSize(new Dimension(200,200));
boutonConnexion.setMaximumSize(new Dimension(200,200));
labelTitre= new JLabel("ApplicationName");
labelLogin= new JLabel("Login");
labelMotDepasse = new JLabel("Password");
PanelConnexion.add(labelLogin);
PanelConnexion.add(loginUser);
PanelConnexion.add(labelMotDepasse);
PanelConnexion.add(MotDepasseUser);
this.add(labelTitre, BorderLayout.NORTH);
this.add(PanelConnexion, BorderLayout.CENTER);
this.add(boutonConnexion, BorderLayout.SOUTH);
} }
I tried to use a gridboxlayout but I completely failed at using it and it did not compile. Does anyone have advices or suggestion?

A common strategy to solve complex computing tasks, is to break them into small, well defined manageable tasks. Divide and conquer.
This also applies to gui: break the design into small, easy to layout containers.
In this case, for example start by dividing the design into 3 areas:
Each such area is implemented by a nested panel.
As you can see in the code, mainPanel is further divided into two nested panels, to ease and improve layout:
class EcranAccueil extends JPanel {
EcranAccueil(){
//Set layout (JPanel uses Flowlayout by default)
setLayout(new BorderLayout(5,5));
// a nested panel for application label
JPanel topPanel = new JPanel();
add(topPanel, BorderLayout.NORTH);
topPanel.setLayout(new FlowLayout(FlowLayout.LEADING));//set
JLabel labelTitre= new JLabel("ApplicationName");
topPanel.add(labelTitre);
// a nested panel for login and password, having two rows
JPanel mainPanel = new JPanel(new GridLayout(2, 1));
add(mainPanel, BorderLayout.CENTER);
JPanel loginPanel = new JPanel();
loginPanel.setLayout(new FlowLayout(FlowLayout.TRAILING));
mainPanel.add(loginPanel);
JLabel labelLogin = new JLabel("Login");
loginPanel.add(labelLogin);
JTextField loginUser = new JTextField("User");
loginUser.setColumns(10);
loginPanel.add(loginUser);
JPanel passwordPanel = new JPanel();
passwordPanel.setLayout(new FlowLayout(FlowLayout.TRAILING));
mainPanel.add(passwordPanel);
JLabel labelMotDepasse = new JLabel("Password");
passwordPanel.add(labelMotDepasse);
JTextField motDepasseUser = new JTextField("Password");
motDepasseUser.setColumns(10);
passwordPanel.add(motDepasseUser);
JPanel buttonPanel = new JPanel();
buttonPanel.setLayout(new FlowLayout(FlowLayout.CENTER));
add(buttonPanel,BorderLayout.SOUTH);
JButton boutonConnexion = new JButton("Connect");
buttonPanel.add(boutonConnexion);
}
}
Once you get the basic idea, the layout and its responsiveness can be further improved.
More examples of applying this strategy: 1 2 and 3

JButtons only appear on JFrame if in BorderLayout.CENTER, not SOUTH or NORTH

So I'm trying to create a gui, I've tinkered with gui's before in java but I'm still new to them. So my issued here is that my JLabels (butLabel & cbLabel) are filled with buttons and checkboxes. Sadly my JFrame will only show whichever is set to the BorderLayout.CENTER. NORTH & SOUTH don't ever show, even if I only set the butLabel to SOUTH and don't even use the cbLabel. What am I overlooking?? It's much appreciated, thanks!
public class mainWindow
{
JFrame frame = new JFrame("Main Window");
JLabel butLabel = new JLabel();
JLabel cbLabel = new JLabel();
JButton showBut = new JButton("Show");
JButton exitBut = new JButton("Exit");
JButton addBut = new JButton("Add");
JButton remBut = new JButton("Remove");
JCheckBox aCB = new JCheckBox("Airplane");
JCheckBox bCB = new JCheckBox("Boat");
JCheckBox cCB = new JCheckBox("Clock");
public mainWindow()
{
frame.setLayout(new BorderLayout()); //I know this is set by default to BorderLayout but I just did it when I was out of options to try.
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setMinimumSize(new Dimension(360, 480));
butLabel.setLayout(new GridLayout(1,4));
cbLabel.setLayout(new GridLayout(2, 2));
butLabel.add(showBut);
butLabel.add(exitBut);
butLabel.add(addBut);
butLabel.add(remBut);
cbLabel.add(aCB);
cbLabel.add(bCB);
cbLabel.add(cCB);
frame.add(butLabel, BorderLayout.CENTER);
frame.add(cbLabel, BorderLayout.NORTH);
}
public void setVisible()
{
butLabel.setVisible(true);//Didn't think I needed butLabel.setVisible or the cbLabel.setVisible but
cbLabel.setVisible(true);//again I was trying things that I thought might make sense.
frame.setVisible(true);
}
}

do not use Label for grouping elements, use JPanel instead
I have tried replace all
Label
with
Panel
it works

How to arrange the labels in a JFrame?

I am facing problem in arranging my labels in the frame;
I just want someone to guide me in the right direction.
What i want to do is to create a JButton and place it the left half of the frame, while the right half will have JTextField in the north and 12 JButtonsat the bottom of the JTextField like the calculator.
this is my code
import java.awt.*;
import javax.swing.*;
public class Code {
JFrame f = new JFrame("The Front View of a Microwave Oven");
JPanel p1 = new JPanel(new BorderLayout());
JPanel p2 = new JPanel();
JPanel p3 = new JPanel(new GridLayout(4,3));
JPanel p4 = new JPanel(new BorderLayout());
JTextField text = new JTextField("Time to be displayed here");
JButton b = new JButton("Food to be placed here");
JButton b1 = new JButton("1");
JButton b2 = new JButton("2");
JButton b3 = new JButton("3");
JButton b4 = new JButton("4");
JButton b5 = new JButton("5");
JButton b6 = new JButton("6");
JButton b7 = new JButton("7");
JButton b8 = new JButton("8");
JButton b9 = new JButton("9");
JButton b0 = new JButton("0");
JButton start = new JButton("Start");
JButton stop = new JButton ("Stop");
public void ui(){
p2.add(text, BorderLayout.NORTH);
p2.add(p3, BorderLayout.CENTER);
p4.add(b, BorderLayout.WEST);
p4.add(p2, BorderLayout.EAST);
p3.add(b1);
p3.add(b2);
p3.add(b3);
p3.add(b4);
p3.add(b5);
p3.add(b6);
p3.add(b7);
p3.add(b8);
p3.add(b9);
p3.add(b0);
p3.add(start);
p3.add(stop);
f.add(p4);
f.setSize(370, 300);
f.setVisible(true);
f.setLayout(new BorderLayout());
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
it shows me the big button on the right correctly .. but how can i place the 12 buttons with the JTextField on the right of the JFrame?

LayOut Managers are the way to go for these issues. you can also look at this beginner program and you can also look at this Stackoverflow Post - just the code posted in question

Also you can set layout as null like panel.setLayout(null) and label.setBounds(10,10,20,100) to adjust position anywhere you want using x,y coordinates and hight and width. It is a simple way to do it.
But Layout Manager are mostly used and saves you from playing with pixels.

how to align Jbuttons within JPanel within JScrollPane within JPanel

I am trying to encapsulate JTextPane within JButtons, within JPanel, within JScrollPane & within JPanel again, where the entire panel is returned. The following is my code, however it displays buttons horizontally. How and where can I make those buttons fit into the panel? Answer may seem obvious but I still cannot get it right.
JTextPane tp = new JTextPane();
JScrollPane sp = new JScrollPane();
SimpleAttributeSet attribs = new SimpleAttributeSet();
StyleConstants.setAlignment(attribs , StyleConstants.ALIGN_CENTER);
tp.setParagraphAttributes(attribs,true);
tp.setEditable(false);
tp.setOpaque(false);
tp.setPreferredSize(new Dimension (100,100));
JButton jb = new JButton();
jb.setPreferredSize(new Dimension(100, 100));
//jb.setHorizontalAlignment(SwingConstants.CENTER);
tp.setText(food_Name);
jb.add(tp);
panel1.add(sp);
sp.add(panel2);
panel2.add(jb);

As has been suggested you need to use a layout manager.
FlowLayout -placed left–to–right then top–to–bottom (default)
BorderLayout -five fixed positions, north, south, east, west, centre
BoxLayout - in a single row or column
GridLayout -within cells of a grid with standard sized rows and columns
example code for border layout - check out layout manager on Java API for others
public MySupportPanel () { // constructor
setLayout( new BorderLayout() );
JButton b1 = new JButton("Button 1");
JButton b2 = new JButton("Button 2");
JButton b3 = new JButton("Button 3");
JButton b4 = new JButton("Button 4");
JButton b5 = new JButton("Button 5");
add(b1, BorderLayout.CENTER);
add(b2, BorderLayout.NORTH);
add(b3, BorderLayout.SOUTH);
add(b4, BorderLayout.EAST);
add(b5, BorderLayout.WEST);
}

Java Swing Layout

I would like the following lay out...
JButtons on top along side eachother.
The JTextArea should be under the buttons.
The JTextArea should also have a scrollbar.
...for the code below.
JPanel jp = new JPanel();
One = new JButton("One");
Two = new JButton("Two");
TestOutput = new JTextArea();
jp.add(One);
jp.add(Two);
jp.add(TestOutput);

Use a nested layout: To a JPanel having BorderLayout,
add a JPanel having FlowLayout for the buttons to the NORTH
and a JScrollPane for the JTextArea to the CENTER.

The keyword is layering - having JPanel on JPanel.

Use a GridBagLayout
See this for more help : How to Use GridBagLayout
Now note that the JTextarea to have a scrollbar have nothing to do with layouts.
See this for more help in that context : How to Use Scroll Panes

The FlowLayout in a JPanel for the JButton instances is one way to go. You might also use a JToolBar for the buttons.
import java.awt.*;
import javax.swing.*;
class ButtonsAndTextAreaLayout {
ButtonsAndTextAreaLayout() {
JPanel gui = new JPanel(new BorderLayout(5,5));
// use a toolbar for the buttons
JToolBar tools = new JToolBar();
// use firstWordLowerCase for attribute/method names.
JButton one = new JButton("One");
JButton two = new JButton("Two");
tools.add(one);
tools.add(two);
// provide hints as to how large the text area should be
JTextArea testOutput = new JTextArea(5,20);
gui.add(tools, BorderLayout.NORTH);
gui.add(new JScrollPane(testOutput), BorderLayout.CENTER);
JOptionPane.showMessageDialog(null, gui);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
new ButtonsAndTextAreaLayout();
}
});
}
}

You can either use a GridBagLayout as suggested, or nest multiple layout managers such as:
JFrame frame = new JFrame();
frame.setLayout(new BorderLayout());
JPanel buttonPanel = new JPanel();
JButton oneButton = new JButton("One");
JButton twoButton = new JButton("Two");
buttonPanel.add(oneButton);
buttonPanel.add(twoButton);
JTextArea output = new JTextArea();
JScrollPane scrollPane = new JScrollPane(output);
frame.add(buttonPanel, BorderLayout.NORTH);
frame.add(scrollPane);
frame.pack();
frame.setVisible(true);