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
Related
//Attributes
//Stats GUI components
JLabel hp = new JLabel();
JLabel hpPoints = new JLabel("TEST");
JLabel chakra = new JLabel();
JLabel chakraPoints = new JLabel("TEST");
JLabel ryo = new JLabel();
JLabel ryoPoints = new JLabel("TEST");
//Output & Input GUI components
JTextField input = new JTextField();
JTextArea output = new JTextArea(1000, 300);
JPanel statsPanel = new JPanel();
JPanel outputPanel = new JPanel();
JPanel inputPanel = new JPanel();
//Constructor
public Terminal() {
setTitle("Shinobi Shinso");
setSize(1000, 600);
//setResizable(false);
setLocation(400, 100);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container panneau = getContentPane();
panneau.setLayout(new GridLayout(0, 1));
statsPanel.setLayout(new GridLayout(1, 3));
//Output & input
//Add outputPanel to the panneau
panneau.add(outputPanel);
//Add output to outputPanel
outputPanel.add(output);
//Add input to outputPanel
outputPanel.add(input);
input.setColumns(98);
output.setRows(15);
output.setEditable(false);
output.setBackground(Color.BLACK);
output.setForeground(Color.WHITE);
//Add stats panel
panneau.add(statsPanel);
//Statistics
//Health
hp.setIcon(new ImageIcon(new ImageIcon("D:\\eclipse-workspace\\Shinobi Shinso\\images\\scroll-hp.png").getImage().
getScaledInstance(300, 150, Image.SCALE_DEFAULT)));
hp.setHorizontalAlignment(JLabel.CENTER);
statsPanel.add(hp);
hpPoints.setBounds(100, 25, 100, 100);
hp.add(hpPoints);
setVisible(true);
}
Here's how it appears :
I tried to use a JScrollPanel and a lot of obscure coding witchcraft to no avail. I can't seem to find a way to reduce the height of the JPanel containing the pictures.
I deleted 2 of the scrolls in the picture, but I don't think that it will change anything.
I can't seem to find a way to reduce the height of the JPanel containing the pictures.
Don't use a GridLayout as the parent layout manager. The GridLayout makes all components the same size.
I would suggest you don't change the layout manager of the content pane. Leave it as the default BorderLayout.
Then use:
panneau.add(outputPanel, BorderLayout.CENTER);
panneau.add(statsPanel, BorderLayout.PAGE_END);
Also, your creation of the JTextArea is incorrect:
JTextArea output = new JTextArea(1000, 300);
The parameters are for rows/columns, not width/height.
So you should use something like:
JTextArea output = new JTextArea(15, 40);
and a text area is usually added to a JScrollPane so scrollbars can appear when needed.
Read the Swing tutorial for Swing basics. There are section on:
Layout managers
How to Use Text Areas
that should help.
I am making a Java application with tabbed pane, I want some panes to have the same panel layout and structure, I don't want to clutter my code by writing the same code over and over again, so I created a method that returns a JPanel with a structure I want the pane to have.
I am initialising new variables and taking them to the method . My problem is that after I create a panel I can not do anything else in it because it doesn't show up. I can not add labels etc, etc (although if I add the label in the method it does show).
My question is it possible to somehow change the code I've written to make it possible to change it after the panel is returned?
JPanel panel2 = panel2(); // this code bit is in the constructor
JPanel mainPanel = new JPanel(); //Variables needed to create a panel
JPanel LeftPanel = new JPanel();
JPanel RightPanel = new JPanel();
JSplitPane splitPaneH = new JSplitPane();
JPanel panelTop = new JPanel();
JPanel panelBottom = new JPanel();
private JPanel panel2() {
JPanel newPanel = new JPanel();
CreateAPanel(newPanel, LeftPanel,RightPanel,splitPaneH, panelTop,panelBottom);
JLabel label = new JLabel ("lalala");
LeftPanel.add(label,BorderLayout.CENTER);
return newPanel;
}
private JPanel CreateAPanel(JPanel mainPanel, JPanel LeftPanel,JPanel RightPanel, JSplitPane splitPaneH, JPanel panelTop, JPanel panelBottom){
mainPanel.setPreferredSize(new Dimension(1100, 630));
mainPanel.setLayout(new BorderLayout());
LeftPanel = new JPanel();
RightPanel = new JPanel();
splitPaneH = new JSplitPane(JSplitPane.VERTICAL_SPLIT);
panelTop = new JPanel();
panelBottom = new JPanel();
splitPaneH.setTopComponent(panelTop);
splitPaneH.setBottomComponent(panelBottom);
splitPaneH.setDividerLocation(300);
splitPaneH.setPreferredSize(new Dimension(800,630));
mainPanel.add(LeftPanel, BorderLayout.WEST);
mainPanel.add(RightPanel,BorderLayout.EAST);
LeftPanel.setBackground(Color.RED);
LeftPanel.setPreferredSize(new Dimension (300,630));
RightPanel.add(splitPaneH);
return mainPanel;
}
you do not use your return value...
your method CreateAPanel(...) creates the desired panel but you just don't use it
you should adjust your method panel2() in like this:
private JPanel panel2()
{
//JPanel newPanel = new JPanel(); don't create a new panel!
//CreateAPanel(newPanel, LeftPanel,RightPanel,splitPaneH, panelTop,panelBottom);
//instead do this:
JPanel newPanel = CreateAPanel(newPanel, LeftPanel,RightPanel,splitPaneH, panelTop,panelBottom);
JLabel label = new JLabel ("lalala");
LeftPanel.add(label,BorderLayout.CENTER);
return newPanel;
}
It's totally possible to add components to the Panel object afterwards. The only mistake that you have made is that "inside the method body you create new JPanel instances to replace with original param references" so when the method returns there is no effect on the original objects. I suggest doing something different as this:
private JPanel[] CreateAPanel(JPanel mainPanel)
{
mainPanel.setPreferredSize(new Dimension(1100, 630));
mainPanel.setLayout(new BorderLayout());
JPanel leftPanel = new JPanel();
JPanel rightPanel = new JPanel();
JSplitPane splitPaneH = new JSplitPane(JSplitPane.VERTICAL_SPLIT);
JPanel panelTop = new JPanel();
JPanel panelBottom = new JPanel();
splitPaneH.setTopComponent(panelTop);
splitPaneH.setBottomComponent(panelBottom);
splitPaneH.setDividerLocation(300);
splitPaneH.setPreferredSize(new Dimension(800,630));
mainPanel.add(leftPanel, BorderLayout.WEST);
mainPanel.add(rightPanel,BorderLayout.EAST);
leftPanel.setBackground(Color.RED);
leftPanel.setPreferredSize(new Dimension (300,630));
rightPanel.add(splitPaneH);
return new JPanel[]{mainPanel, leftPanel, rightPanel, panelTop, panelBottom};
}
If you want to change or add some more components inside result JPanel you get you can set names to all your components when you create them:
JPanel newPanel = new JPanel();
newPanel .setName("leftPanel");
resultPanel.add(newPanel, BorderLayout.WEST);
Then when you get resultPanel you can get it's components:
Component[] componentList = resultPanel.getContentPane().getComponents();
JPanel leftPanel = null;
for (Component component: componentList) {
if (Objects.equals(component.getName(), "leftPanel")) {
leftPanel = (JPanel) component;
}
}
if (leftPanel != null) {
// do something
}
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
I have this code written to make a database connection and add a client:
//adding the left panel
JPanel left = new JPanel();
left.setPreferredSize(new Dimension(250, 500));
left.setLayout(new BoxLayout(left, BoxLayout.Y_AXIS));
add(left);
//adding the right panel
JPanel right = new JPanel();
right.setPreferredSize(new Dimension(250, 500));
right.setLayout(new BoxLayout(right, BoxLayout.Y_AXIS));
add(right);
//adding the jlabel title to the left panel
JLabel leftTitle = new JLabel("Add a client");
leftTitle.setAlignmentX(CENTER_ALIGNMENT);
left.add(leftTitle);
//adding the jlabel title to the right panel
JLabel rightTitle = new JLabel("Make a reservation");
rightTitle.setAlignmentX(CENTER_ALIGNMENT);
right.add(rightTitle);
//adding the jlabel "name"
JLabel nameL = new JLabel("Name:");
left.add(nameL);
and I want to move this JLabel here:
I've tried doing nameL.setAlignmentX(LEFT_ALIGNMENT); but it's still not working
Your problem is that you've used a BoxLayout.
left.setLayout(new BoxLayout(left, BoxLayout.Y_AXIS));
^^^^^^^^^
Your BoxLayout is set to align things centered along the y-axis, so no amount of setting alignment is going to change that. In order to fix your problem, you need a different layout manager like GroupLayout or CardLayout.
When I run this program, the window blocks out the buttons in panel2 when I use setSize to determine window size.
In addition, if I use frame.pack() instead of setSize(), all components are on one horizontal line but I'm trying to get them so that panel1 components are on one line and panel2 components are on a line below them.
Could someone explain in detail the answers to both of these problems?
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Exercise16_4 extends JFrame{
// FlowLayout components of top portion of calculator
private JLabel jlbNum1 = new JLabel("Number 1");
private JTextField jtfNum1 = new JTextField(4);
private JLabel jlNum2 = new JLabel("Number 2");
private JTextField jtfNum2 = new JTextField(4);
private JLabel jlbResult = new JLabel("Result");
private JTextField jtfResult = new JTextField(8);
// FlowLayout Components of bottom portion of calculator
private JButton jbtAdd = new JButton("Add");
private JButton jbtSubtract = new JButton("Subtract");
private JButton jbtMultiply = new JButton("Multiply");
private JButton jbtDivide = new JButton("Divide");
public Exercise16_4(){
JPanel panel1 = new JPanel();
panel1.setLayout(new FlowLayout(FlowLayout.CENTER, 3, 3));
panel1.add(jlbNum1);
panel1.add(jtfNum1);
panel1.add(jlNum2);
panel1.add(jtfNum2);
panel1.add(jlbResult);
panel1.add(jtfResult);
JPanel panel2 = new JPanel();
panel2.setLayout(new FlowLayout(FlowLayout.CENTER, 3, 10));
panel1.add(jbtAdd);
panel1.add(jbtSubtract);
panel1.add(jbtMultiply);
panel1.add(jbtDivide);
add(panel1, BorderLayout.NORTH);
add(panel2, BorderLayout.CENTER);
}
public static void main(String[] args){
Exercise16_4 frame = new Exercise16_4();
frame.setTitle("Caculator");
frame.setSize(400, 200);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//frame.setResizable(false);
frame.setVisible(true);
}
}
You're problem is likely a typographical error in that you're adding all components to panel1 and none to panel2:
// you create panel2 just fine
JPanel panel2 = new JPanel();
panel2.setLayout(new FlowLayout(FlowLayout.CENTER, 3, 10));
// but you don't use it! Change below to panel2.
panel1.add(jbtAdd);
panel1.add(jbtSubtract);
panel1.add(jbtMultiply);
panel1.add(jbtDivide);
Add the buttons to panel2, and then call pack() before setVisible(true). Do not set the size of the GUI.