layout manager problem

[bertyhell]

hello

i want to replicate this form

http://i77.photobucket.com/albums/j74/bertyhell/layout.png

the top is just the form
the lower one is how i'm triing to do it
'red' is a boxlayout
and the green parts are panels with normal flowlayouts

i cant seem to get the alignment right

this is what i got already:

http://i77.photobucket.com/albums/j74/bertyhell/layout2.png

code part:

//filter panel
	JPanel pnlFilter = new JPanel();

	pnlFilter.setLayout(new FlowLayout(FlowLayout.LEFT));
	getContentPane().add(pnlFilter, BorderLayout.PAGE_START);

	//datefilter
	JPanel pnlDate = new JPanel();
	pnlDate.setBorder(BorderFactory.createTitledBorder("Date:"));
	pnlDate.setLayout(new BoxLayout(pnlDate, BoxLayout.Y_AXIS));
	//pnlDate.setPreferredSize(new Dimension(300,200));
	pnlFilter.add(pnlDate);

	JPanel pnl1 = new JPanel();
	JLabel lblAfter = new JLabel("After:");
	lblAfter.setBorder(BorderFactory.createEmptyBorder(2, 5, 2, 5));
	pnl1.add(lblAfter);
	pnl1.add(Box.createHorizontalGlue());
	pnlDate.add(pnl1);

	JPanel pnl2 = new JPanel();
	JDateChooser dchAfter = new JDateChooser();
	dchAfter.setBorder(BorderFactory.createEmptyBorder(2, 5, 2, 5));
	dchAfter.setDate(new Date());
	pnl2.add(dchAfter);
	pnl2.add(Box.createHorizontalGlue());
	pnlDate.add(pnl2);

	//aftertime
	JPanel pnl3 = new JPanel();
	JSpinner hourAfter = new JSpinner(new SpinnerNumberModel(Calendar.HOUR_OF_DAY, 0, 24, 1));
	JSpinner minutesAfter = new JSpinner(new SpinnerNumberModel(GregorianCalendar.MINUTE, 0, 60, 1));
	pnl3.add(hourAfter);
	pnl3.add(minutesAfter);
	pnl3.add(new JLabel("hh:mm"));
	pnl3.add(Box.createHorizontalGlue());
	pnlDate.add(pnl3);

[cbarton.a]

bertyhell,

I love to use the GridBagLayout as often as I can for the control that it offers over the placement of the components, however in this case, I would have 2 panels, the Call and Date panels with the data inside the call panel either a GridLayout or (my fave) GridBagLayout. The date panel can be set up using a GridLayout as well. Don't forget the JMenuBar.

cbarton.a

[bertyhell]

that helped
this is what i got now
http://i77.photobucket.com/albums/j74/bertyhell/layout3.png

but how do i align the grey panel content in Date to the left

and everything in call to the right?

code:

//filter panel
	JPanel pnlFilter = new JPanel();

	pnlFilter.setLayout(new FlowLayout(FlowLayout.LEFT));
	getContentPane().add(pnlFilter, BorderLayout.PAGE_START);

	//datefilter
	JPanel pnlDate = new JPanel();
	pnlDate.setPreferredSize(new Dimension(180,215));
	pnlDate.setBorder(BorderFactory.createTitledBorder("Date:"));
	pnlDate.setLayout(new GridLayout(0,1));
	//pnlDate.setPreferredSize(new Dimension(300,200));
	pnlFilter.add(pnlDate);


	JLabel lblAfter = new JLabel("After:");
	lblAfter.setBorder(BorderFactory.createEmptyBorder(0, 5, 0, 0));
	pnlDate.add(lblAfter);

	JPanel pnlDateAfter = new JPanel();

	pnlDateAfter.setBackground(Color.gray);

	JCheckBox ckbDateAfter = new JCheckBox();
	pnlDateAfter.add(ckbDateAfter);
	JDateChooser dchAfter = new JDateChooser();
	//dchAfter.setPreferredSize(new Dimension(131,20));
	dchAfter.setDate(new Date());
	pnlDateAfter.add(dchAfter);
	pnlDate.add(pnlDateAfter);

	//aftertime
	JPanel pnlTimeAfter = new JPanel();

	pnlTimeAfter.setBackground(Color.white);

	JCheckBox ckbTimeAfter = new JCheckBox();
	pnlTimeAfter.add(ckbTimeAfter);
	JSpinner hourAfter = new JSpinner(new SpinnerNumberModel(Calendar.HOUR_OF_DAY, 0, 24, 1));
	JSpinner minutesAfter = new JSpinner(new SpinnerNumberModel(GregorianCalendar.MINUTE, 0, 60, 1));
	pnlTimeAfter.add(hourAfter);
	pnlTimeAfter.add(minutesAfter);
	pnlTimeAfter.add(new JLabel("hh:mm"));
	pnlDate.add(pnlTimeAfter);

	//beforefilter
	JLabel lblBefore = new JLabel("Before:");
	lblBefore.setBorder(BorderFactory.createEmptyBorder(0, 5, 0, 0));
	pnlDate.add(lblBefore);

	JPanel pnlDateBefore = new JPanel();

	pnlDateBefore.setBackground(Color.gray);

	JCheckBox ckbDateBefore = new JCheckBox();
	pnlDateBefore.add(ckbDateBefore);
	JDateChooser dchBefore = new JDateChooser();
	//dchBefore.setPreferredSize(new Dimension(131,20));
	dchBefore.setDate(new Date());
	pnlDateBefore.add(dchBefore);
	pnlDate.add(pnlDateBefore);

	//aftertime
	JPanel pnlTimeBefore = new JPanel();

	pnlTimeBefore.setBackground(Color.white);

	JCheckBox ckbTimeBefore = new JCheckBox();
	pnlTimeBefore.add(ckbTimeBefore);
	JSpinner hourBefore = new JSpinner(new SpinnerNumberModel(Calendar.HOUR_OF_DAY, 0, 24, 1));
	JSpinner minutesBefore = new JSpinner(new SpinnerNumberModel(GregorianCalendar.MINUTE, 0, 60, 1));
	pnlTimeBefore.add(hourBefore);
	pnlTimeBefore.add(minutesBefore);
	pnlTimeBefore.add(new JLabel("hh:mm"));
	pnlDate.add(pnlTimeBefore);





	//Callfilter
	JPanel pnlCall = new JPanel();
	pnlCall.setPreferredSize(new Dimension(180,215));
	pnlCall.setBorder(BorderFactory.createTitledBorder("Call:"));
	pnlCall.setLayout(new GridLayout(0,1));
	pnlFilter.add(pnlCall);

	JPanel pnlCallFrom = new JPanel();

	pnlCallFrom.setBackground(Color.gray);

	JLabel lblFrom = new JLabel("Call from:");
	pnlCallFrom.add(lblFrom);
	JTextField txtCallFrom = new JTextField();
	txtCallFrom.setPreferredSize(new Dimension(100,20));
	pnlCallFrom.add(txtCallFrom);
	pnlCall.add(pnlCallFrom);

	JPanel pnlCallTo = new JPanel();

	pnlCallTo.setBackground(Color.white);

	JLabel lblTo = new JLabel("Call to:");
	pnlCallTo.add(lblTo);
	JTextField txtCallTo = new JTextField();
	txtCallTo.setPreferredSize(new Dimension(100,20));
	pnlCallTo.add(txtCallTo);
	pnlCall.add(pnlCallTo);

	JPanel pnlDurationMin = new JPanel();

	pnlDurationMin.setBackground(Color.gray);

	JLabel lblmin = new JLabel("Duration: min:");
	pnlDurationMin.add(lblmin);
	JTextField txtMin = new JTextField();
	txtMin.setPreferredSize(new Dimension(50,20));
	pnlDurationMin.add(txtMin);
	pnlCall.add(pnlDurationMin);

	JPanel pnlDurationMax = new JPanel();

	pnlDurationMax.setBackground(Color.white);

	JLabel lblMax = new JLabel("Max:");
	pnlDurationMax.add(lblMax);
	JTextField txtMax = new JTextField();
	txtMax.setPreferredSize(new Dimension(50,20));
	pnlDurationMax.add(txtMax);
	pnlCall.add(pnlDurationMax);

	pnlCall.add(Box.createVerticalGlue());

[cbarton.a]

In your panel setup, you are calling the GridLayout with 0 rows and 1 column. There are from what I am seeing in the Call box to be 4 rows and 2 columns, that will line it up a little better, that is the same with the Date panel.

Hope that helps,

cbarton.a

[bertyhell]

In your panel setup, you are calling the GridLayout with 0 rows and 1 column. There are from what I am seeing in the Call box to be 4 rows and 2 columns, that will line it up a little better, that is the same with the Date panel.

Hope that helps,

cbarton.a

thx for the help :)

i gave up on the simple gridlayout
so i learned gridbaglayout
pretty awsome :)
almost the same as webdesign with tables

this is what i got
http://i77.photobucket.com/albums/j74/bertyhell/layout4.png

2 little problems
i would like the labels on the left to get smaller (green indication)

and the 2 textboxes on the right below should be smaller (red indication)

i tried adjusting the relative sizes but it doesn't change
i think i got the table structure right
help?

GridBagLayout gbLayoutCall = new GridBagLayout();
	GridBagConstraints gbcCall = new GridBagConstraints();

	//Callfilter
	JPanel pnlCall = new JPanel();
	pnlCall.setPreferredSize(new Dimension(250, 215));
	pnlCall.setBorder(BorderFactory.createTitledBorder(""));
	pnlCall.setLayout(gbLayoutCall);
	pnlFilter.add(pnlCall);

	JLabel lblFrom = new JLabel("Call from:");
	buildConstraints(gbcCall, 0, 0, 1, 1, 20, 10, GridBagConstraints.NONE, GridBagConstraints.EAST);
	gbLayoutCall.setConstraints(lblFrom, gbcCall);
	pnlCall.add(lblFrom);

	JTextField txtCallFrom = new JTextField(new NumberDocument(), "", 10);
	txtCallFrom.setInputVerifier(new TestLength());
	buildConstraints(gbcCall, 1, 0, 2, 1, 200, 10, GridBagConstraints.HORIZONTAL, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(txtCallFrom, gbcCall);
	pnlCall.add(txtCallFrom);

	JLabel lblOut = new JLabel(new ImageIcon(getClass().getResource("/images/out.png")));
	buildConstraints(gbcCall, 3, 0, 1, 1, 10, 10, GridBagConstraints.NONE, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(lblOut, gbcCall);
	pnlCall.add(lblOut);

	JLabel lblTo = new JLabel("Call to:");
	buildConstraints(gbcCall, 0, 1, 1, 1, 20, 10, GridBagConstraints.NONE, GridBagConstraints.EAST);
	gbLayoutCall.setConstraints(lblTo, gbcCall);
	pnlCall.add(lblTo);

	JTextField txtCallTo = new JTextField(new NumberDocument(), "", 10);
	txtCallTo.setInputVerifier(new TestLength());
	buildConstraints(gbcCall, 1, 1, 2, 1, 200, 10, GridBagConstraints.HORIZONTAL, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(txtCallTo, gbcCall);
	pnlCall.add(txtCallTo);

	JLabel lblIn = new JLabel(new ImageIcon(getClass().getResource("/images/in.png")));
	buildConstraints(gbcCall, 3, 1, 1, 1, 10, 10, GridBagConstraints.NONE, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(lblIn, gbcCall);
	pnlCall.add(lblIn);

	JLabel lblmin = new JLabel("Duration: min:");
	buildConstraints(gbcCall, 0, 2, 2, 1, 60, 10, GridBagConstraints.NONE, GridBagConstraints.EAST);
	gbLayoutCall.setConstraints(lblmin, gbcCall);
	pnlCall.add(lblmin);

	JTextField txtMin = new JTextField(new NumberDocument(), "", 10);
	buildConstraints(gbcCall, 2, 2, 1, 1, 50, 10, GridBagConstraints.HORIZONTAL, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(txtMin, gbcCall);
	pnlCall.add(txtMin);

	JLabel lblMax = new JLabel("Max:");
	buildConstraints(gbcCall, 0, 3, 2, 1, 60, 10, GridBagConstraints.NONE, GridBagConstraints.EAST);
	gbLayoutCall.setConstraints(lblMax, gbcCall);
	pnlCall.add(lblMax);

	JTextField txtMax = new JTextField(new NumberDocument(), "", 10);
	buildConstraints(gbcCall, 2, 3, 1, 1, 50, 10, GridBagConstraints.HORIZONTAL, GridBagConstraints.WEST);
	gbLayoutCall.setConstraints(txtMax, gbcCall);
	pnlCall.add(txtMax);

[cbarton.a]

You need to set some Insets. They dictate the spacing of the rows and columns:

GridBagConstraints c.insets = new Insets(int top,
              int left,
              int bottom,
              int right)

So you would make the right part of the inset like 10 or something for there to be a 10 px relative right for the components.
As for the sizing, you can use the GridBagConstraints c.ipadx for horizontal spacing and ipady to make it fatter.

cbarton.a

[bertyhell]

You need to set some Insets. They dictate the spacing of the rows and columns:

GridBagConstraints c.insets = new Insets(int top,
              int left,
              int bottom,
              int right)

So you would make the right part of the inset like 10 or something for there to be a 10 px relative right for the components.
As for the sizing, you can use the GridBagConstraints c.ipadx for horizontal spacing and ipady to make it fatter.

cbarton.a

i would like to do that without insets cause then the "duration: min" and "max:" doesn't move to the right as well

i made the gridbagdesign like this
http://i77.photobucket.com/albums/j74/bertyhell/layout5.png

why doesn't it behave like i designed it to? (prob the most asked question in software design :p )

[cbarton.a]

You can just reorder the code to where you want the insets to affect and where you don't.

For example right everything that needs the insets to be in one part so:

c.insets = new Insets(0, 0, 0, 10)
... all the components ..
c.insets = new Insets(...)
... these components ...

From what I can compare, I would make the two call boxes longer via ipadx and the durations ones smaller. I would also make it so that the duration min and max labels would take up 2 cells that way there would be an indent.

What are the parameters in the buildConstraints(..)?

[cbarton.a]

Here is just the call window that I came up with. Is this what you mean? I just specified the ipads and insets, gridwidths and it worked as you sketched out.

[bertyhell]

Here is just the call window that I came up with. Is this what you mean? I just specified the ipads and insets, gridwidths and it worked as you sketched out.

exacly
nice
ok i'll try it :)
working on database connection now