1

I am trying to make a basic login menu following this mock up :

enter image description here

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 :

enter image description here

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?

c0der
  • 18,467
  • 6
  • 33
  • 65
IlyD
  • 11
  • 1
  • 1
    When you have code that doesn't work consider putting up a [mcve] for that. – GhostCat Nov 18 '17 at 13:35
  • 1
    See this answer as for how to handle layout design: https://stackoverflow.com/a/47121349/3992939 – c0der Nov 18 '17 at 14:42
  • `I tried to use a gridboxlayout` - there is no such layout. Use proper class names so people know what you are talking about. Read the Swing tutorial on [Layout Managers](https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html) for working examples to get you started. You can also nest panels with different layout managers if required to achieve you layout. – camickr Nov 18 '17 at 15:58

1 Answers1

3

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:

enter image description here

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

c0der
  • 18,467
  • 6
  • 33
  • 65