Trouble with GridLayout, BoxLayout .... any sort of layout!

[Phil Hopgood]

Hi All,

Before we begin, I'm a newbie but I posted this here because I reckon it'll get moved here anyway. If it should be in Java beginners then, sorry, I'll move it over there.

I have searched the forums and picked up a few pointers but I'm still having immense problems trying to get things to be where I want them on the screen ..... I know, you've heard that before ..... sorry.

I'm trying to create a small contact details app just for practice. My approach has been to sketch it out on paper, identify areas that can be put into JPanels then try to get those panels to be where I want them on the screen. It seems to me that generally, for each panel, I have a grid of two columns and a number of rows; so for capturing the contacts name for instance, I have column of five JLabels next to a column of five JTextFields.

I ended up with the following:

  
import javax.swing.*;
import java.awt.*;
 
public class ConatactEditDetails {
 
    JFrame frame;
    JPanel name;
    JPanel sex;
    JPanel address;
    JPanel panel;
 
    public void go () {
 
        frame = new JFrame("Edit Contact Details");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(300,300);
 
        JLabel titleLabel           = new JLabel("Title:",JLabel.RIGHT);
        JLabel firstNameLabel       = new JLabel("First Name:",JLabel.RIGHT);
        JLabel secondNameLabel      = new JLabel("Second Name:",JLabel.RIGHT);
        JLabel familyNameLabel      = new JLabel("Family Name:",JLabel.RIGHT);
        JLabel preferredNameLabel   = new JLabel("Preferred Name:",JLabel.RIGHT);
 
        JTextField title            = new JTextField(12);
        JTextField firstName        = new JTextField(15);
        JTextField secondName       = new JTextField(15);
        JTextField familyName       = new JTextField(30);
        JTextField preferredName    = new JTextField(15);
 
        name = new JPanel();
        name.setLayout(new GridLayout(5,2,5,10));
        name.setBackground(Color.lightGray);
        name.setBorder(BorderFactory.createEmptyBorder(10,10,10,10));
 
        name.add(titleLabel);
        name.add(title);
 
        name.add(firstNameLabel);
        name.add(firstName);
 
        name.add(secondNameLabel);
        name.add(secondName);
 
        name.add(familyNameLabel);
        name.add(familyName);
 
        name.add(preferredNameLabel);
        name.add(preferredName);
 
        panel = new JPanel();
        panel.setBackground(Color.yellow);
        panel.add(name);
 
        frame.getContentPane().add(BorderLayout.WEST,panel);
        frame.setVisible(true);
 
    } // close go method
} // close ConatactEditDetails class

Ignore the colours, I used those so that I could see what was going on and just what is going on?

This got me somewhere toward where I want to be but there are a couple of problems I just don't seem to be able to solve.

I put name into panel so that I could get some padding around name otherwise it just clanged up against the left hand edge.

The problems I have at the moment are:
1. The column containing the text labels is too wide. I realise that with GridLayout you get equal column widths based on the largest object but I don't really want that. I want column one to be narrower so that it's all shoved over to the left. I tried putting all the text labels in a one panel (BoxLayout) and all the fields in another and putting both panels into name set up as BoxLayout with X_AXIS but the labels didn't quite line up with the fields. So Guys, how do I get it to look like it does in my above attempt but with it all moved over to the left a bit?

2. If I re-size the window, say I make it narrower from the right hand edge, nothing re-sizes! It just remains the same and gets chopped off as I bring the right hand edge toward the left. I thought that one of the main reasons for using these noisome layout managers was that you don't have to worry about re-sizing, the manager takes care of that up to certain constraints. I must be missing something. How do I get it to re-size? and how do I set a minimum size below which it won't shrink and a maximum size above which it won't grow?

3. The input fields seem to accept any number of input characters even though I've set a size. What am I doing wrong here? I want to limit the user to a maximum input characters for each field.

4. The input fields are all the same width and I want then to have different widths and not all of them be the size of the biggest one.

I'm sorry if this is all too elementary, I have tried and I've dug around in the API docs but I just don't seem to be getting anywhere. I don't want you to do it all for me but if you could just give me few pointers I'd be very grateful.

Thanks for your time and your help,
Regards,
Phil.

[ August 11, 2008: Message edited by: Phil Hopgood ]

[ August 11, 2008: Message edited by: Phil Hopgood ]
[ August 11, 2008: Message edited by: Phil Hopgood ]

[Brian Cole]

Originally posted by Phil Hopgood:
I tried putting all the text labels in a one panel (BoxLayout) and all the fields in another and putting both panels into name set up as BoxLayout with X_AXIS but the labels didn't quite line up with the fields. So Guys, how do I get it to look like it does in my above attempt but with it all moved over to the left a bit?

This approach almost works. Use GridLayout(0, 1) instead of a BoxLayout for the labels panel and the fields panel. That way they will line up (because, as you note, each cell will be the same height) so long as each has the same number of components. Then put the labels panel in the WEST (or LINE_START) and the fields panel in the CENTER of a panel with BorderLayout.

I put name into panel so that I could get some padding around name otherwise it just clanged up against the left hand edge.

2. If I re-size the window, say I make it narrower from the right hand edge, nothing re-sizes! It just remains the same and gets chopped off as I bring the right hand edge toward the left. I thought that one of the main reasons for using these noisome layout managers was that you don't have to worry about re-sizing, the manager takes care of that up to certain constraints. I must be missing something. How do I get it to re-size?

Well panel is using FlowLayout, so it doesn't pass any resizing behaviour down to its children components. You could add padding by changing panel's layout to BorderLayout, putting name in CENTER, and calling panel.setBorder(BorderFactory.createEmptyBorder(...)). But it would be easier to dispense with panel and just call name.setBorder(...).

3. The input fields seem to accept any number of input characters even though I've set a size. What am I doing wrong here? I want to limit the user to a maximum input characters for each field.

You have set the fields' columns property, but that has nothing to do with a character limit. The only effect of that is on the preferred width for layout (which is ignored by GridLayout anyway). Restricting the entered content of the fields is not a layout issue, but take a look at DocumentFilter. (There are also other ways to do it.)

4. The input fields are all the same width and I want then to have different widths and not all of them be the size of the biggest one.

Well in this case ignore my advice to use GridLayout. There are various ways to do this. One way is to put each label/field pair into its own panel and set preferredSize on the labels so the fields line up.
[ August 11, 2008: Message edited by: Brian Cole ]

[dhan dd]

Hi,
I am sending solution as per your requirment, you go through it. I used here one panel and setBounds of their components.

import javax.swing.*;
import java.awt.*;
public class ConatactEditDetails
{
JFrame frame;
JPanel name;
JPanel sex;
JPanel address;
JPanel panel;
public void go ()
{
frame = new JFrame("Edit Contact Details");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(300,300);
name = new JPanel();
name.setLayout(null);
JLabel titleLabel=new JLabel("Title:");//,JLabel.RIGHT);
titleLabel.setBounds(10,50,80,30);
JLabel firstNameLabel=new JLabel("First Name:");//,JLabel.RIGHT);
firstNameLabel.setBounds(10,80,100,30);
JLabel secondNameLabel=new JLabel("Second Name:");//,JLabel.RIGHT);
secondNameLabel.setBounds(10,110,100,30);
JLabel familyNameLabel=new JLabel("Family Name:");//,JLabel.RIGHT);
familyNameLabel.setBounds(10,140,100,30);
JLabel preferredNameLabel=new JLabel("Preferred Name:");//,JLabel.RIGHT);
preferredNameLabel.setBounds(10,170,100,30);
JTextField title=new JTextField();
title.setBounds(120,50,100,20);
JTextField firstName=new JTextField();
firstName.setBounds(120,80,150,20);
JTextField secondName=new JTextField();
secondName.setBounds(120,110,150,20);
JTextField familyName=new JTextField();
familyName.setBounds(120,140,150,20);
JTextField preferredName=new JTextField();
preferredName.setBounds(120,170,150,20);
name.add(titleLabel);
name.add(title);
name.add(firstNameLabel);
name.add(firstName);
name.add(secondNameLabel);
name.add(secondName);
name.add(familyNameLabel);
name.add(familyName);
name.add(preferredNameLabel);
name.add(preferredName);
name.setBackground(Color.lightGray);
panel.setBackground(Color.yellow);
frame.add(name);
frame.setVisible(true);
} // close go method

public static void main(String args[])
{

ConatactEditDetails obj=new ConatactEditDetails();
obj.go();
}


} // close ConatactEditDetails class

[Michael Dunn]

> name.setLayout(null);

this is the absolute *worst* advice you can ever get in swing.

the time you spend experimenting/learning the different layoutManagers will
save you a lot of grief later on.

Often the effect you are ater is achieved by nesting panels (each a different layoutManager)

[Phil Hopgood]

Thanks for that Guys.

Lots of things to try out but I've had enough for today ....... I'm really frustrated. I'm used to using PowerBuilder's IDE which just let's you put things where you want them (and I've designed a lot of client/server gui's in 14 years!), of course you can do it textually in PowerBuilder but it's a pain and why would you bother? after all a GUI's essentially a visual thing and therefore (maybe) it's more appropriate to do it visually.

...... but I was advised that in Javaland most people do GUI's textually, so I thought "ok, I'll go for it." but I dunno, if java's so good why is it so hard to create a simple five field GUI? ..... I know there are a lot of benefits; platform independence, pluggable look/feel, re-size, etc. ... so I guess I just need to plugging away.

Anyway thanks for all your help.

Regards,
Phil.

[Gregg Bolinger]

The following uses MigLayout which I highly recommend over any other layout manager. The code I've provided does, I think, everything you want except #3 which isn't a UI layout issue.

public class MigLayoutContactEditDetails {
 
  JFrame frame;
  JPanel name;
  JPanel sex;
  JPanel address;
  JPanel panel;
 
  public void go() {
 
    frame = new JFrame("Edit Contact Details");
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setSize(300, 300);
 
    JLabel titleLabel = new JLabel("Title:");
    JLabel firstNameLabel = new JLabel("First Name:");
    JLabel secondNameLabel = new JLabel("Second Name:");
    JLabel familyNameLabel = new JLabel("Family Name:");
    JLabel preferredNameLabel = new JLabel("Preferred Name:");
 
    JTextField title = new JTextField(12);
    JTextField firstName = new JTextField(15);
    JTextField secondName = new JTextField(15);
    JTextField familyName = new JTextField(30);
    JTextField preferredName = new JTextField(15);
 
    name = new JPanel(new MigLayout("fill"));
    name.setBackground(Color.lightGray);
    name.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));
 
    name.add(titleLabel, "align right");
    name.add(title, "wrap");
 
    name.add(firstNameLabel, "align right");
    name.add(firstName, "wrap");
 
    name.add(secondNameLabel, "align right");
    name.add(secondName, "wrap");
 
    name.add(familyNameLabel, "align right");
    name.add(familyName, "wrap");
 
    name.add(preferredNameLabel, "align right");
    name.add(preferredName, "wrap");
 
    frame.getContentPane().add(name, BorderLayout.CENTER);
    frame.pack();
    frame.setVisible(true);
 
  } // close go method
 
  public static void main(String[] args) {
    new MigLayoutContactEditDetails().go();
  }
}

[ August 11, 2008: Message edited by: Gregg Bolinger ]

[Phil Hopgood]

Gregg,

Thanks for that.

You did mention MiG Layout to me before when I first joined JavaRanch but at the time I thought it was maybe not for me cos it wasn't part of the standard Sun offering and may not help me to get certified. I see now, from the MiG website that there is at least some pressure to include MiG in the next Java release so I think the time has come to acquaint myself with MiG!

Anyway I want to get a client/server app that I did in Powerbuilder some time ago migrated to Java so I just need to get the layout right - anyway you can!

Thanks once again,
Regards,
Phil.