Arrange the Label with its respective field Swing

Question

I need to align all the fields with the respective labels,

enter image description here

here is my code :

     public class Progress extends JPanel implements ActionListener {

 public JLabel ClientIP; JTextField ip;
 JLabel ClientPassword; JTextField pass;
 JLabel Videoname; JTextField vname;
 JLabel perccomplete; JTextField percent;
 JLabel PacketsSent; JTextField pacsent;
 JLabel Connectiontype; JTextField conntype;
 JLabel noofvideossent; JTextField videosend;
 JButton disconnect; JButton refresh;
 JButton ok;

 public Progress() {
 ClientIP = new JLabel("Client's IP:");
 ClientPassword = new JLabel("Clients Password:");
 Videoname = new JLabel("Video being Transfered:");
 perccomplete = new JLabel("% of transfer Complete:");
 PacketsSent = new JLabel("No of Packets sent:");
 Connectiontype = new JLabel("Connection Type:");
 noofvideossent = new JLabel("No of Videos Sent:");
 String Ipad,Ipass,Iselvid;
 if(ClientIPAddr==null || ClientIPAddr.equals("")){
     Ipad="Not Connected";
 }else Ipad=ClientIPAddr.toString();
 if(vFilePassword ==null || vFilePassword.equals("")){
     Ipass="No Password";
 }else Ipass=vFilePassword;
 if(selected_video==null || selected_video.equals("")){
     Iselvid="Not Selected";
 }else Iselvid=selected_video;

 ip = new JTextField(Ipad);
 ip.setColumns(20);
 pass = new JTextField(Ipass);
 pass.setColumns(20);
 vname = new JTextField(Iselvid);
 vname.setColumns(20);
 percent = new JTextField("10%");
 percent.setColumns(20);
 pacsent =new JTextField(String.valueOf(RTSPSeqNb));
 pacsent.setColumns(20);
 String c;
 if(clientConnected==true)
     c="TCP";
 else c="not Connected";
 conntype = new JTextField(c);
 conntype.setColumns(20);
 videosend = new JTextField(String.valueOf(videocount));
 videosend.setColumns(20);

     //Tell accessibility tools about label/textfield pairs.
 ClientIP.setLabelFor(ip);
 ClientPassword.setLabelFor(pass);
 Videoname.setLabelFor(vname);
 perccomplete.setLabelFor(percent);
 PacketsSent.setLabelFor(pacsent);
 Connectiontype.setLabelFor(conntype);
 noofvideossent.setLabelFor(videosend);

 //Lay out the labels in a panel.
    JPanel labelPane = new JPanel(new GridLayout(0,1));
    labelPane.add(ClientIP);
    labelPane.add(ClientPassword);
    labelPane.add(Videoname);
    labelPane.add(perccomplete);
    labelPane.add(PacketsSent);
    labelPane.add(Connectiontype);
    labelPane.add(noofvideossent);

     //Layout the text fields in a panel.
    JPanel fieldPane = new JPanel(new GridLayout(0,1));
    fieldPane.add(ip);
    fieldPane.add(pass);
    fieldPane.add(vname);
    fieldPane.add(percent);
    fieldPane.add(pacsent);
    fieldPane.add(conntype);
    fieldPane.add(videosend);
    //Put the panels in this panel, labels on left,
    //text fields on right.
    //setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20));


    JPanel buttonPane = new JPanel(new GridLayout(0,1));
    disconnect = new JButton("Disconnect Client");
    disconnect.setActionCommand("Disconnect");
    disconnect.addActionListener(this);
    refresh = new JButton("Refresh Details");
    refresh.setActionCommand("refresh");
    refresh.addActionListener(this);
    ok = new JButton("OK");
    ok.setActionCommand("ok");
    ok.addActionListener(this);
    buttonPane.add(refresh);
    buttonPane.add(disconnect);
    buttonPane.add(ok);
    add(labelPane, BorderLayout.CENTER);
    add(fieldPane, BorderLayout.LINE_END);
    add(buttonPane, BorderLayout.AFTER_LAST_LINE);
 }


  private void createAndShowGUI() {
    //Create and set up the window.
    frame = new JFrame("Connected Client's Details");
    //frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);


    //Add contents to the window.
    frame.add(new Progress());
    //Display the window.
    frame.pack();
    frame.setVisible(true);
}

I tried going it by referencing it but it was not working, any suggestions ?

Can someone suggest any other framework in which it can be simpler? — Learner, Apr 17 '13 at 22:59
Use [layout managers](http://docs.oracle.com/javase/tutorial/uiswing/layout/using.html) or a GUI designer. (Both the NetBeans and IntelliJ ones are excellent.) — millimoose, Apr 17 '13 at 23:31

score 2 · Answer 1 · answered Apr 17 '13 at 22:23

2

Look at the example given for GroupLayout (picture from the link):

enter image description here

Your code should closely resemble the code from the link.

answered Apr 17 '13 at 22:23

syb0rg

8,057
9
41
81

1

@syb0rg do you mean a `GroupLayout` ? – Salah Eddine Taouririt Apr 17 '13 at 22:27
1

Handcoding `GroupLayout` is a fairly insane proposition. It's better used with the NetBeans GUI designer. I doubt it's feasible to hand-code a `GroupLayout` that can't be done easier with a `GridBagLayout`. – millimoose Apr 17 '13 at 23:31
@millimoose: I share your reservations, but also consider this [example](http://stackoverflow.com/a/14858272/230513) that adds labeled fields in a loop. – trashgod Apr 18 '13 at 01:32
@trashgod I admit I was being a bit hyperbolic. To put it more fairly: I agree it's a **very** powerful layout manager, but it's also a conceptual heavyweight. The terms in which I think of a layout ("which control aligns with what on which edge?") don't map straightforwardly to group membership. Even fairly simple layouts have a require a degree of up-front planning which, if undocumented, means the code ends up write-only - since it's even harder to look at `GroupLayout` code and say what it does than going the other way around. – millimoose Apr 18 '13 at 08:17

score 1 · Answer 2 · answered Apr 17 '13 at 23:27

As a rule of thumb, Never extends the JPanel/JFrameunless you are really extending their functionality, always favour composition over inheritance.

For a swing layout manager, I highly recommend miglayout, simple and easy to get started with, you have to download the jar and add it to your CLASSPATH.

The complete code for prototyping this GUI

enter image description here

Will be just as simple as :

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JTextField;
import net.miginfocom.swing.MigLayout;

/**
 * Hello world!
 *
 */
public class App {

    private JPanel panel;

    private JLabel cilentIPLabel= new JLabel();
    private JLabel clientPWLabel= new JLabel();
    private JTextField clientIPTextField= new JTextField();
    private JTextField clientPWTextField= new JTextField();
    private JButton printButton = new JButton();

    public App() {
        initComponents();
    }


    private void initComponents() {
        cilentIPLabel.setText("Client IP :");
        clientPWLabel.setText("Client Password :");
        printButton.setText("print");
        printButton.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent e) {        
                System.out.println("The ID of the clinet is " + clientIPTextField.getText());
            }
        });
    }

    public JPanel getPanel() {

        if (panel == null) {
            panel= new JPanel(new MigLayout("gap 10","[100]10[100, left, fill, grow]","[][]20[]"));
            panel.add(cilentIPLabel);
            panel.add(clientIPTextField, "wrap");
            panel.add(clientPWLabel);
            panel.add(clientPWTextField, "wrap");
            panel.add(printButton, "skip, tag apply");
        }
        return panel;       
    }


    public static void main(String[] args) {
        JFrame frame= new JFrame("SO demo");
        frame.setSize(400, 150);
        frame.setContentPane(new App().getPanel());
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);

    }
}

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

Several options:

GroupLayout, illustrated here and here.
BoxLayout, shown here.
JTable, discussed here.

edited May 23 '17 at 12:17

Community

1
1

answered Apr 18 '13 at 08:56

trashgod

203,806
29
246
1,045

score 0 · Answer 4 · answered Apr 18 '13 at 10:51

Thanks a lot for you help. I modified the code as follows and it worked..

GroupLayout layout = new GroupLayout(getContentPane());
         getContentPane().setLayout(layout);
         layout.setAutoCreateGaps(true);
         layout.setAutoCreateContainerGaps(true);

         // Turn on automatically creating gaps between components that touch
         // the edge of the container and the container.
         layout.setAutoCreateContainerGaps(true);

         GroupLayout.SequentialGroup hGroup = layout.createSequentialGroup();
         hGroup.addGroup(layout.createParallelGroup(Alignment.LEADING).
                 addComponent(ClientIP).addComponent(ClientPassword).addComponent(Videoname).addComponent(perccomplete).addComponent(PacketsSent).addComponent(Connectiontype).addComponent(noofvideossent));

         hGroup.addGroup(layout.createParallelGroup(Alignment.LEADING).
                 addComponent(ip).addComponent(pass).addComponent(vname).addComponent(percent).
                 addComponent(pacsent).addComponent(conntype).addComponent(videosend).addComponent(disconnect).addComponent(refresh).addComponent(ok));
         layout.setHorizontalGroup(hGroup);


         GroupLayout.SequentialGroup vGroup = layout.createSequentialGroup();

         vGroup.addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(ClientIP).addComponent(ip)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(ClientPassword).addComponent(pass)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(Videoname).addComponent(vname)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(perccomplete).addComponent(percent)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(PacketsSent).addComponent(pacsent)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(Connectiontype).addComponent(conntype)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(noofvideossent).addComponent(videosend));

         vGroup.addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(disconnect)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(refresh)).addGroup(layout.createParallelGroup(Alignment.LEADING).addComponent(ok));
         layout.setVerticalGroup(vGroup);

score 0 · Answer 5 · answered Jul 31 '14 at 22:56

The only reliable way to get the labels and their corresponding fields to line up properly is to put them in the same panel and use a single instance of a layout manager to line them up.

GridLayout

The simplest approach would be to use a two-column Grid layout:

JPanel fieldPane = new JPanel(new GridLayout(0, 2));
fieldPane.add(ClientIP);
fieldPane.add(ip);
fieldPane.add(ClientPassword);
fieldPane.add(pass);
fieldPane.add(Videoname);
fieldPane.add(vname);
fieldPane.add(perccomplete);
fieldPane.add(percent);
fieldPane.add(PacketsSent);
fieldPane.add(pacsent);
fieldPane.add(Connectiontype);
fieldPane.add(conntype);
fieldPane.add(noofvideossent);
fieldPane.add(videosend);

This has the one disadvantage that all the cells will be the same size. Specifically, all the label cells will be the same width as the field cells. This probably won't matter in this specific case, however in the more general case you would want to use a different layout that allows the first column to remain narrow and gives all the remaining width to the second column.

GridBagLayout

Here's how I'd do that with GridBagLayout:

JPanel fieldPane = new JPanel(new GridBagLayout());
Insets insets = new Insets(2, 2, 2, 2);
GridBagConstraints label = new GridBagConstraints(
    0, 0, 1, 1, 0.0, 0.0,
    GridBagConstraints.BASELINE_LEADING, GridBagConstraints.NONE,
    insets, 2, 2);
GridBagConstraints value = new GridBagConstraints(
    1, 0, 1, 1, 0.0, 0.0,
    GridBagConstraints.BASELINE_LEADING, GridBagConstraints.HORIZONTAL,
    insets, 2, 2);
fieldPane.add(ClientIP, label);
fieldPane.add(ip, value);
label.gridy++;
value.gridy++;
fieldPane.add(ClientPassword, label);
fieldPane.add(pass, value);
label.gridy++;
value.gridy++;
fieldPane.add(Videoname, label);
fieldPane.add(vname, value);
label.gridy++;
value.gridy++;
fieldPane.add(perccomplete, label);
fieldPane.add(percent, value);
label.gridy++;
value.gridy++;
fieldPane.add(PacketsSent, label);
fieldPane.add(pacsent, value);
label.gridy++;
value.gridy++;
fieldPane.add(Connectiontype, label);
fieldPane.add(conntype, value);
label.gridy++;
value.gridy++;
fieldPane.add(noofvideossent, label);
fieldPane.add(videosend, value);

Because I use GridBagLayout a lot, I subclassed GridBagConstraints to make my life a little easier. My subclass has, amongst others, the following method:

public SuperGBC at(int x, int y) {
    gridx = x;
    gridy = y;
    return this;
}

It has similar methods anchor(), fill() and insets()for initialising itself without having to specify all values. This makes the above code somewhat more compact:

JPanel fieldPane = new JPanel(new GridBagLayout());
Insets insets = new Insets(2, 2, 2, 2);
SuperGBC label = new SuperGBC()
    .anchor(SuperGBC.BASELINE_LEADING)
    .insets(insets);
SuperGBC value = new SuperGBC()
    .anchor(SuperGBC.BASELINE_LEADING)
    .insets(insets)
    .fill(GridBagConstraints.HORIZONTAL, 0.0, 0.0);
fieldPane.add(ClientIP, label.at(0, 0));
fieldPane.add(ip, value.at(1, 0));
fieldPane.add(ClientPassword, label.at(0, 1));
fieldPane.add(pass, value.at(1, 1));
fieldPane.add(Videoname, label.at(0, 2));
fieldPane.add(vname, value.at(1, 2));
fieldPane.add(perccomplete, label.at(0, 3));
fieldPane.add(percent, value.at(1, 3));
fieldPane.add(PacketsSent, label.at(0, 4));
fieldPane.add(pacsent, value.at(1, 4));
fieldPane.add(Connectiontype, label.at(0, 5));
fieldPane.add(conntype, value.at(1, 5));
fieldPane.add(noofvideossent, label.at(0, 6));
fieldPane.add(videosend, value.at(1, 6));

score 0 · Answer 6 · answered Apr 05 '18 at 11:27

After some findings - MigLayout looks to be the best option for me

Code will be just the following:

JPanel parentPanel = new JPanel(new MigLayout("wrap 2")); //Autowrap after each 2 elements
parentPanel.add(label1);
parentPanel.add(field1);
parentPanel.add(label2);
parentPanel.add(field2);
...

No need to specify indexes by hand or create some huge layout infrastructure - simple code to get conceptually simple result. Please see the QuickStart guide: http://www.miglayout.com/QuickStart.pdf

You can plug it in or directly download from Maven: https://mvnrepository.com/artifact/com.miglayout/miglayout

Arrange the Label with its respective field Swing

6 Answers6

Linked

Related