Java GUI Layouts

Question

Could somebody tell me which java layout I need to use to achieve the layout below:

I am currently playing out with the FlowLayout however I can’t get the entry fields to line up beside the output window:

Apologies if this is a simple question this is my first time using java. Here is my frame code:

    private void makeFrame()
     {
       setLayout(new FlowLayout(0));

    JPanel panel1 = new JPanel();
    JPanel panel2 = new JPanel();
    JPanel panel3 = new JPanel();
    JPanel panel4 = new JPanel();
    JPanel panel5 = new JPanel();
    JPanel panel6 = new JPanel();
    JPanel panel7 = new JPanel();

    panel1.setLayout(new FlowLayout(0));
    panel2.setLayout(new FlowLayout(0));
    panel3.setLayout(new FlowLayout(0));
    panel4.setLayout(new FlowLayout(0));
    panel5.setLayout(new FlowLayout(0));
    panel6.setLayout(new FlowLayout(0));
    panel7.setLayout(new FlowLayout(0));

    JLabel firstnameJLabel = new JLabel("First Name");
    JLabel lastnameJLabel = new JLabel("Last Name");
    JLabel streetJLabel = new JLabel("Street");
    JLabel townJLabel = new JLabel("Town");
    JLabel postcodeJLabel = new JLabel("Post Code");


    panel1.add(listAllBtn);
    panel1.add(listPersonalBtn);
    panel1.add(listBusinessBtn);
    panel1.add(addPersonalBtn);
    panel1.add(addBusinessBtn);
    panel1.add(deleteBtn);
    panel1.add(findBtn);
    panel1.add(quitBtn);


    panel2.add(firstnameJLabel);
    panel2.add(this.firstNameField);
    panel2.add(this.bookScrollPane);
    this.outputArea.setEditable(false);


    panel3.add(lastnameJLabel);
    panel3.add(this.lastNameField);

    panel4.add(streetJLabel);
    panel4.add(this.streetField);

    panel5.add(townJLabel);
    panel5.add(this.townField);

    panel6.add(postcodeJLabel);
    panel6.add(this.postcodeField);

    panel7.add(enterBtn);


    add(panel1);
    add(panel2);
    add(panel3);
    add(panel4);
    add(panel5);
    add(panel6);
    add(panel7);

    enterBtn.addActionListener(this);
  }

Answer 1

Use multiple nested layout managers

The example looks like a top-level BorderLayout with scroll pane in the CENTER location, a row of buttons (using FlowLayout) in the NORTH location and a GridLayout for the text fields in the WEST location. The latter could be improved by using a GroupLayout, which allows rows and columns to be sized individually but is somewhat complex to use.

There's a great tutorial on using layout managers (unfortunately it seems to have disappeared from Oracle's servers and the link points to a probably transient copy).

Answer 2

Been a while since I worked with Swing, but it looks like the architecture is something like this:

1. You have a panel in the bottom which is BorderLayout
2. Inside that, you add a total of 4 new panels, NORTH, WEST, CENTER and EAST
3. in BorderLayout.NORTH you add a panel which have FlowLayout.LEFT
4. in BorderLayout.WEST you add a panel which have GroupLayout.YAXIS. this panel contains the labels for names etc and the ENTER button
5. in BorderLayout.CENTER you add the textfields that corresponds with the labels
6. in BorderLayout.EAST you add the JSCrollpane.

This might give you an idea and you can play around with these different panels to achive what you want

Answer 3

I would just use MigLayout for the high level page layout, and then dropdown to the simple layout managers for the . It's essentially a grid layout, but it's very easy to use. Miglayout cannot wrap items though, and this is apparently a design issue in Swing. WrapLayout is a layout manager that gives you that functionality, but it can have issues.

http://tips4java.wordpress.com/2008/11/06/wrap-layout/

Looking at the screen shot you've provided I've mocked up the way you would want to divide it up. You'd have 9 rows total (0-8) and 3 columns total (0-2). For stuff like the controls at the very top, you will "span" them across all three columns.

For the text, you just put the text inside of it's individual box in row 1, column 1 for First Name, or row 2, column 1 for Last Name, etc.

You do the same thing with the input boxes.

In the picture below the blue are the columns and the orange are the rows.

So to summarize;

• Use Miglayout for your high level layout. It's like using a table in HTML.
• Use other layout managers to layout the items inside of the grid boxes that Miglayout provides.

Answer 4

The best choise is using Gridbag layout as you have a bit complex UI and GridBag layout provides all the support you needed to achive the exact UI.You will have to use a parent panel and then the child panels in it.Each panel you will have to add seperate GridBag layouts.You can add insets and necessary growing to achieve what you want.

Answer 5

As stated in the previous comment, I would use MigLayout in this project. As you can use split, span and wrap after each field or textbox in order to get the correct layout. You can also debug Miglayout and see where your layout its right or wrong.

download the latest version of MigLayout here : http://www.migcalendar.com/miglayout/versions/

if using eclipse,

• save it in a folder called Lib in the project folder.
• configure the project build path but adding the jar file to the classpath.
• Then you should be able to set the layout to MigLayout.

panel.setLayout(new MigLayout());

or to debug the layout - panel.setLayout(new MigLayout("debug"));