Pages

▼

Saturday, January 21, 2012

Java GUI Tutorial 3 - Layouts and Layout Managers

In GUI Tutorial Part 2, we learned about a few commands we can use with JPanel objects. Essentially this post will be an expansion of your knowledge of JPanel components such as the button you created in the previous tutorial. (Go to the first tutorial post: GUI Tutorial Part 1)

Everything starts with a problem:

If I create a JPanel and a JFrame and add five JButtons to the JPanel (which is held in the JFrame), where would they be placed? The easiest way to answer this question is to try it out. Feel free to copy and paste my code. Highlight the java code, press Ctrl + C, select a text area where you can paste the code, press Ctrl + V. 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class ButtonGUI {
    public static void main(String[] args) {
        //create frame and panel to hold buttons. The frame and panel are our window
        JPanel panel = new JPanel();
        JFrame frame = new JFrame("Button GUI");

        //An array of JButtons limited to only 5 open slots
        JButton[] buttonList = new JButton[5];

        frame.setSize(500,500);

        //loop num [0, 4]
        for(int num=0;num<5;num++)
        {

            //creates a button labeled num and adds it to our JPanel, panel 
            buttonList[num]= new JButton("Button #"+(num+1));
            panel.add(buttonList[num]);
            buttonList[num].setVisible(true);
        }
        frame.add(panel);
        panel.setVisible(true);
        frame.setVisible(true);

    }
}

If you haven't already, please run the program (code is above) and view the location of the five JButtons. Resize the window of the program to see how the buttons positions change.
Minimized window had to reposition buttons vertically in 2 columns



Moderate space crunch for the buttons, horizontally. Notice each row of buttons are centered.
A large amount of horizontal space allows the buttons to be in one row.

There is an element of uncertainty to where the components (our buttons) will be placed on the JPanel. We need some way of organizing components of a JPanel in a predictable manner. For this, we have LayoutManagers, which act exactly like how their name implies: they manage the panels layout. The layout managers are helpful because you can avoid coding with absolute points (numerical locations) on the computer monitor more than one time!

For this tutorial I will introduce one of the easiest, but my least favorite LayoutManager provided by Java, the BorderLayout. The BorderLayout divides your Window into five parts, north, south, east, west, and center. 

My example code that builds off of the previous example code
import java.awt.BorderLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class ButtonGUI2 {
    public static void main(String[] args) {
        //create frame and panel. The frame and panel are the window
        JPanel panel = new JPanel();
        JFrame frame = new JFrame("Button GUI");

        panel.setLayout(new BorderLayout());
        //An array of JButtons limited to only 5 open slots
        // this array (list) cotains absolutely no buttons until we have instantized 
        JButton[] buttonList = new JButton[5];

        //Set the size of the JFrame, frame.
        frame.setSize(500,500);

        //loop goes through num integer values [0, 4]: (0,1,2,3,4)
        for(int num=0;numl&t;5;num++)
        {
            //creates a button labeled num and adds it to our JPanel, panel 
            buttonList[num]= new JButton("Button #"+(num+1));
            buttonList[num].setVisible(true);
        }

        //add each button to the panel with a direction field supplied by the BorderLayout class.
        panel.add(buttonList[0], BorderLayout.NORTH);
        panel.add(buttonList[1], BorderLayout.EAST);
        panel.add(buttonList[2], BorderLayout.SOUTH);
        panel.add(buttonList[3], BorderLayout.WEST);
        panel.add(buttonList[4], BorderLayout.CENTER);

        //Add the JPanel, panel,  to the JFrame, frame.
        frame.add(panel);

        //Make sure the window is visible.
        frame.setVisible(true);
    }
}

BorderLayout Results!

Very spacious. Button #1 and Button #2 are quite short relative to Button #3,4, and 5. A crunch horizontally. The BorderLayout allows the button in the center to be "pushed behind the others"
If I was going to use the BorderLayout, I would apply an invisible border to contain each button closer in size. This would also, make the background of the panel visible. How To Use Borders In Java is a good reference for Swing related problems, questions, or demos.

Some Other Layouts

  1. AbsoluteLayout
  2. -BoxLayout
  3. CardLayout
  4. FlowLayout
  5. GridLayout
  6. GridBagLayout
  7. GroupLayout
  8. SpringLayout
In GUI Tutorial 4 we will try out one of the other layouts listed above.
at

No comments:

Post a Comment