GUI from eclipse/WindowsBuilder not WYSIWYG

[Marlon Churchill]

Hi,

I have recently switched from GridBagLayout and hand coding in notepad++ to using Eclipse with the WindowsBuilder. My Panel looks fine when I create it but when I run the program textfields shift subtly and components are not aligned.

Is there some secret to actually get the components you layout? I have been using the GroupLayout.

Or will I have to post an example with code?

[Rob Spoor]

This is one of the reasons why I never let any GUI builder create my GUI for me, and I still do it manually like you used to do.

[Marlon Churchill]

Rob Spoor wrote:This is one of the reasons why I never let any GUI builder create my GUI for me, and I still do it manually like you used to do.

I just got tired of GridBagLayout not aligning components, or rearranging the whole panel in a jumble for some unknown reason.

Figuring out Eclipse has been actually more work than hand coding. WindowBuilder is temperamental and slow to work with.

[Marlon Churchill]

Here is a sample code: In the designer everything is aligned and looks nice. When I run it, the textFieldInitial is not aligned with the textFieldBounday. The line border of timeOptions overlaps the textfields contained within it.

Main Class

import javax.swing.JFrame;


public class SwingTester {

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		// TODO Auto-generated method stub
		JFrame frame = new TestFrame();
	      frame.setVisible(true); 
	}

}

The frame:

import javax.swing.JFrame;

public class TestFrame extends JFrame
{
	public TestPanel mainPanel;
	   public TestFrame ()
	   {
	      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	      setTitle("Swing Test");
	    //  setBounds(300,300,500,500);
	      setResizable(true);
	      mainPanel = new TestPanel();
	      this.add(mainPanel);
	      this.pack();
	   }
}

and finally TestPanel:

import javax.swing.JPanel;


public class TestPanel extends JPanel {
	private JTextField textFieldInitial;
	private JTextField textFieldBoundary;
	private JTextField textFieldNumDt;
	private JTextField textFieldFinalTime;

	/**
	 * Create the panel.
	 */
	public TestPanel() {
		
		JPanel solverPanel = new JPanel();
		solverPanel.setBorder(new TitledBorder(UIManager.getBorder("TitledBorder.border"), "Solver Options", TitledBorder.LEADING, TitledBorder.TOP, null, new Color(0, 0, 0)));
		
		JLabel lblInitial = new JLabel("Initial");
		
		JLabel lblBoundary = new JLabel("Boundary");
		
		textFieldInitial = new JTextField();
		textFieldInitial.setColumns(10);
		
		textFieldBoundary = new JTextField();
		textFieldBoundary.setColumns(10);
		
		JButton btnStart = new JButton("Start");
		
		JPanel timeOptionsPanel = new JPanel();
		timeOptionsPanel.setBorder(new TitledBorder(new TitledBorder(new LineBorder(new Color(0, 0, 0)), "", TitledBorder.LEADING, TitledBorder.TOP, null, new Color(0, 0, 0)), "Time Options", TitledBorder.LEADING, TitledBorder.TOP, null, new Color(0, 0, 0)));
		GroupLayout groupLayout = new GroupLayout(this);
		groupLayout.setHorizontalGroup(
			groupLayout.createParallelGroup(Alignment.LEADING)
				.addGroup(groupLayout.createSequentialGroup()
					.addContainerGap()
					.addComponent(solverPanel, GroupLayout.PREFERRED_SIZE, 113, GroupLayout.PREFERRED_SIZE)
					.addGap(53)
					.addGroup(groupLayout.createParallelGroup(Alignment.LEADING)
						.addGroup(groupLayout.createSequentialGroup()
							.addComponent(timeOptionsPanel, GroupLayout.PREFERRED_SIZE, 195, GroupLayout.PREFERRED_SIZE)
							.addContainerGap())
						.addGroup(groupLayout.createParallelGroup(Alignment.LEADING)
							.addGroup(groupLayout.createSequentialGroup()
								.addComponent(lblInitial)
								.addGap(34)
								.addComponent(textFieldInitial, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE)
								.addPreferredGap(ComponentPlacement.RELATED, 41, Short.MAX_VALUE)
								.addComponent(btnStart)
								.addGap(35))
							.addGroup(groupLayout.createSequentialGroup()
								.addComponent(lblBoundary)
								.addGap(14)
								.addComponent(textFieldBoundary, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE)
								.addContainerGap(165, Short.MAX_VALUE)))))
		);
		groupLayout.setVerticalGroup(
			groupLayout.createParallelGroup(Alignment.LEADING)
				.addGroup(groupLayout.createSequentialGroup()
					.addGroup(groupLayout.createParallelGroup(Alignment.LEADING)
						.addGroup(groupLayout.createSequentialGroup()
							.addGap(24)
							.addComponent(solverPanel, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE))
						.addGroup(groupLayout.createSequentialGroup()
							.addGap(27)
							.addGroup(groupLayout.createParallelGroup(Alignment.TRAILING)
								.addComponent(textFieldInitial, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE)
								.addComponent(lblInitial)
								.addComponent(btnStart))
							.addGroup(groupLayout.createParallelGroup(Alignment.LEADING)
								.addGroup(groupLayout.createSequentialGroup()
									.addGap(18)
									.addComponent(lblBoundary))
								.addGroup(groupLayout.createSequentialGroup()
									.addGap(12)
									.addComponent(textFieldBoundary, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE)))))
					.addGap(15)
					.addComponent(timeOptionsPanel, GroupLayout.PREFERRED_SIZE, 85, GroupLayout.PREFERRED_SIZE)
					.addContainerGap(261, Short.MAX_VALUE))
		);
		
		JRadioButton rdbtnNumDt = new JRadioButton("num dt");
		
		JRadioButton rdbtnFinalTime = new JRadioButton("Final Time");
		
		textFieldNumDt = new JTextField();
		textFieldNumDt.setColumns(10);
		
		textFieldFinalTime = new JTextField();
		textFieldFinalTime.setColumns(8);
		GroupLayout gl_timeOptionsPanel = new GroupLayout(timeOptionsPanel);
		gl_timeOptionsPanel.setHorizontalGroup(
			gl_timeOptionsPanel.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_timeOptionsPanel.createSequentialGroup()
					.addContainerGap()
					.addGroup(gl_timeOptionsPanel.createParallelGroup(Alignment.LEADING)
						.addGroup(gl_timeOptionsPanel.createSequentialGroup()
							.addComponent(rdbtnNumDt)
							.addPreferredGap(ComponentPlacement.RELATED, 48, Short.MAX_VALUE)
							.addComponent(textFieldNumDt, GroupLayout.PREFERRED_SIZE, 64, GroupLayout.PREFERRED_SIZE))
						.addGroup(Alignment.TRAILING, gl_timeOptionsPanel.createSequentialGroup()
							.addComponent(rdbtnFinalTime)
							.addPreferredGap(ComponentPlacement.RELATED, GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
							.addComponent(textFieldFinalTime, GroupLayout.PREFERRED_SIZE, 96, GroupLayout.PREFERRED_SIZE)))
					.addContainerGap())
		);
		gl_timeOptionsPanel.setVerticalGroup(
			gl_timeOptionsPanel.createParallelGroup(Alignment.LEADING)
				.addGroup(gl_timeOptionsPanel.createSequentialGroup()
					.addGroup(gl_timeOptionsPanel.createParallelGroup(Alignment.BASELINE)
						.addComponent(rdbtnNumDt)
						.addComponent(textFieldNumDt, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE))
					.addPreferredGap(ComponentPlacement.UNRELATED)
					.addGroup(gl_timeOptionsPanel.createParallelGroup(Alignment.LEADING)
						.addComponent(textFieldFinalTime, GroupLayout.PREFERRED_SIZE, GroupLayout.DEFAULT_SIZE, GroupLayout.PREFERRED_SIZE)
						.addComponent(rdbtnFinalTime))
					.addContainerGap(8, Short.MAX_VALUE))
		);
		timeOptionsPanel.setLayout(gl_timeOptionsPanel);
		solverPanel.setLayout(new BorderLayout(0, 0));
		
		JRadioButton rdbtnExplicit = new JRadioButton("Explicit");
		solverPanel.add(rdbtnExplicit, BorderLayout.NORTH);
		
		JRadioButton rdbtnImplicit = new JRadioButton("Implicit");
		solverPanel.add(rdbtnImplicit, BorderLayout.SOUTH);
		setLayout(groupLayout);
		

	}
}

[Michael Dunn]

> I just got tired of GridBagLayout not aligning components, or rearranging the whole panel in a jumble for some unknown reason.

unless you're super-human, gridbaglayout is the most frustrating layout manager of them all.

much easier to understand all the other layout managers and their individual 'niceties',
then put your components together in 'nested' layout managers.

see them here

http://download.oracle.com/javase/tutorial/uiswing/layout/visual.html

post a pic of the good looking example from your ide, and I'm sure someone will post one (or more) ways of achieving it with nesting.

[Rob Spoor]

And don't be afraid to create a few JPanels with their own layout managers and add these to your main container. This nesting of layout managers is a very common approach to get things just the way you want.

[Adam Cripps]

I looked at GridBagLayout for my app, and soon realised that it was like falling down a very deep rabbit hole.

I then switched to MigLayout and have not looked back since. It also has a very helpful forum. Documentation isn't great and needs improving but it does what I want without any extra headaches.

[Marlon Churchill]

Here is a jpg file for the panel I wouldlike to create.

I suppose I could align components a bit better, but its still better than what GridBagLayout would give.

I will take a look at MigLayout.

[Rob Spoor]

Marlon Churchill wrote:I suppose I could align components a bit better, but its still better than what GridBagLayout would give.

Then you haven't used GridBagLayout correctly yet. It can be used to create that UI just fine, with a few extra JPanels perhaps. I'm not saying you should use it though; I've used JGoodies Forms for years because I didn't like GridBagLayout.

[Marlon Churchill]

Rob Spoor wrote:

Marlon Churchill wrote:I suppose I could align components a bit better, but its still better than what GridBagLayout would give.

Then you haven't used GridBagLayout correctly yet. It can be used to create that UI just fine, with a few extra JPanels perhaps. I'm not saying you should use it though; I've used JGoodies Forms for years because I didn't like GridBagLayout.

You are correct. I put in some inner JPanels, and used the GridLayout manager in them instead of FlowLayout.

Also drew up a sketch and found some mistakes on my GridBagConstraints.

I think I might try MigLayout next still. Thanks to Adam for the tip.

Thanks to all who replied.

Thanks to Rob for pushing me to look again at my GridBag code.

[Rob Spoor]

You're welcome.