Thread: GUI design

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    231
    Rep Power
    16

    GUI design


    Hi,

    How do I make the Age label and its textfield in the second row? Currently, the name label and the age label are in the same row.

    Thanks.

    Code:
    import java.awt.BorderLayout;
    import java.awt.FlowLayout;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JMenuBar;
    import javax.swing.JMenu;
    import javax.swing.JPanel;
    import javax.swing.SwingConstants;
    import javax.swing.JButton;
    import javax.swing.JTextField;
    
    public class MyGUI extends JFrame {
    	private JLabel label_;
    	private JTextField textField_;
    
    	public MyGUI() {
    
    		setLayout(new BorderLayout());
    		JMenuBar bar = new JMenuBar(); // create menu bar
    		setJMenuBar( bar ); // add menu bar to application
    		bar.add(new JMenu("File"));
    
    		JPanel topPanel = new JPanel();
    		topPanel.setLayout( new FlowLayout() );
    		label_ = new JLabel("\n\n");
    		topPanel.add(label_);
    
    		JPanel centerPanel = new JPanel(); // create north panel
    		centerPanel.setLayout( new FlowLayout() );
    
    		label_ = new JLabel( "Enter Name: ", SwingConstants.RIGHT ); // create label for BTP name
    		centerPanel.add( label_ ); // add label to panel
    		textField_ = new JTextField(10);
    		centerPanel.add(textField_);
    
    		label_ = new JLabel("   Age: ", SwingConstants.RIGHT);  // create label for status
    		centerPanel.add(label_);
    		textField_ = new JTextField(3);
    		centerPanel.add(textField_);
    
    
    		JPanel southPanel = new JPanel(); // create south panel
    		southPanel.setLayout( new FlowLayout() );
    
    		JButton viewButton = new JButton("View");
    		southPanel.add(viewButton);
    
    		JButton exitButton = new JButton("Exit");
    		southPanel.add(exitButton);
    
    		add( topPanel, BorderLayout.NORTH);
    		add( centerPanel, BorderLayout.CENTER ); // add north panel
    		add( southPanel, BorderLayout.SOUTH ); // add south panel
    	}
    
     	public static void main( String[] args ) {
    		MyGUI frame = new MyGUI();
    		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    		frame.setLocation( 600, 200 );
    		frame.setSize( 460, 240 ); // set frame size
        	        frame.setVisible( true ); // display frame
    	}
    }
  2. #2
  3. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    FlowLayout is more or less about having elements at one row.

    Try take a look at the GridLayout, which allows you to specify the number of rows and columns you want.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    231
    Rep Power
    16
    My problem with using the grid layout is to adjust the size of the text field. Although I specified the number of characters in the field but it always takes a whole cell. Below is the example. Although the Name text field has 15 characters and the Age text field has 3 characters but they both take up the whole cell. I tried to use buttons to pad around them but that did not help much.

    Code:
    JPanel centerPanel = new JPanel();
    centerPanel.setLayout( new GridLayout(2,2,5,5) ); 
    		
    label_ = new JLabel( "Enter Name: ", SwingConstants.RIGHT ); 
    centerPanel.add( label_ ); 
    textField_ = new JTextField(15);
    centerPanel.add(textField_);
    
    label_ = new JLabel("   Age: ", SwingConstants.RIGHT);
    centerPanel.add(label_);
    textField_ = new JTextField(3);
    centerPanel.add(textField_);
    Thanks.
  6. #4
  7. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2011
    Maybe GroupLayout is a better solution:

    java Code:
     
    import java.awt.FlowLayout;
    import java.awt.BorderLayout;
    import javax.swing.JFrame;
    import javax.swing.JLabel;
    import javax.swing.JMenuBar;
    import javax.swing.JMenu;
    import javax.swing.JPanel;
    import javax.swing.SwingConstants;
    import javax.swing.JButton;
    import javax.swing.JTextField;
     
    import javax.swing.GroupLayout;
    import static javax.swing.GroupLayout.Alignment.*;
     
    public class MyGUI extends JFrame {
    	private JLabel label_;
    	private JLabel label_name;
    	private JLabel label_age;
    	private JTextField textField_name;
    	private JTextField textField_age;
     
    	public MyGUI() {
     
    		setLayout(new BorderLayout());
    		JMenuBar bar = new JMenuBar(); // create menu bar
    		setJMenuBar( bar ); // add menu bar to application
    		bar.add(new JMenu("File"));
     
    		JPanel topPanel = new JPanel();
    		topPanel.setLayout( new FlowLayout() );
    		label_ = new JLabel("\n\n");
    		topPanel.add(label_);
     
    		JPanel centerPanelRow1 = new JPanel();
    		centerPanelRow1.setLayout( new FlowLayout() );
     
    		label_name = new JLabel( "Enter Name: ", SwingConstants.RIGHT ); 
    		textField_name = new JTextField(15);
    		textField_name.setMaximumSize( textField_name.getPreferredSize() );
     
    		label_age = new JLabel("   Age: ", SwingConstants.RIGHT);
    		textField_age = new JTextField(3);
    		textField_age.setMaximumSize( textField_age.getPreferredSize() );
     
    		JPanel centerPanel = new JPanel();
     
    		// Using Group Layout to align elements together
    		GroupLayout layout = new GroupLayout(centerPanel);
    		centerPanel.setLayout(layout);
    		layout.setAutoCreateGaps(true);
    		layout.setAutoCreateContainerGaps(true);
     
    		layout.setHorizontalGroup(layout.createSequentialGroup()
    			.addGroup(layout.createParallelGroup(TRAILING)
    				.addComponent(label_name)
    				.addComponent(label_age))
    			.addGroup(layout.createParallelGroup(LEADING)
    				.addComponent(textField_name)
    				.addComponent(textField_age))
    		);		
     
    		layout.setVerticalGroup(layout.createSequentialGroup()
    			.addGroup(layout.createParallelGroup(BASELINE)
    				.addComponent(label_name)
    				.addComponent(textField_name))
    			.addGroup(layout.createParallelGroup(BASELINE)
    				.addComponent(label_age)
    				.addComponent(textField_age))
    		);
     
    		JPanel southPanel = new JPanel(); // create south panel
    		southPanel.setLayout( new FlowLayout() );
     
    		JButton viewButton = new JButton("View");
    		southPanel.add(viewButton);
     
    		JButton exitButton = new JButton("Exit");
    		southPanel.add(exitButton);
     
    		add( topPanel, BorderLayout.NORTH);
    		add( centerPanel, BorderLayout.CENTER ); // add north panel
    		add( southPanel, BorderLayout.SOUTH ); // add south panel
    	}
     
     	public static void main( String[] args ) {
    		MyGUI frame = new MyGUI();
    		frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
    		frame.setLocation( 600, 200 );
    		frame.setSize( 460, 240 ); // set frame size
    		frame.setVisible( true ); // display frame
    	}
    }


    Alternative is to use GridBagLayout.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    231
    Rep Power
    16
    Thank you very much! I would like to move the labels and the text fields to the center. How do I do that?

IMN logo majestic logo threadwatch logo seochat tools logo