Download Layout Managers in Java GUI Development: Flow Layout, Grid Layout, and Border Layout and more Lecture notes Web Design and Development in PDF only on Docsity!
Web Design & Development CS-
Graphical User Interfaces - 2
Layout Managers
Layout Managers are used to form the appearance of your GUI. They are concerned with
the arrangement of components of GUI. A general question is “why we can not place
components at our desired location (may be using the x,y coordinate position?”
The answer is that you can create your GUI without using Layout Managers and you can
also do VB style positioning of components at some x,y co-ordinate in Java, but that is
generally not advisable if you desire to run the same program on different platforms
The appearance of the GUI also depends on the underlying platform and to keep that
same the responsibility of arranging layout is given to the LayoutManagers so they can
provide the same look and feel across different platforms
Commonly used layout managers are
1. Flow Layout
2. Grid Layout
3. Border Layout
4. Box Layout
5. Card Layout
6. GridBag Layout and so on
Let us discuss the top three in detail one by one with code examples. These top three will
meet most of your basic needs
Web Design & Development CS-
1. Flow Layout
Position components on line by line basis. Each time a line is filled, a new line is
started.
The size of the line depends upon the size of your frame. If you stretch your frame
while your program is running, your GUI will be disturbed.
Example Code
// File FlowLayoutTest.java
import java.awt.; import javax.swing.;
public class FlowLayoutTest {
JFrame myFrame ; JButton b1, b2, b3, b4, b5;
//method used for setting layout of GUI public void initGUI ( ) {
myFrame = new JFrame(“Flow Layout”);
Container c = myFrame.getContentPane();
c.setLayout( new FlowLayout( ) );
b1 = new JButton(“Next Slide”); b2 = new JButton(“Previous Slide”); b3 = new JButton(“Back to Start”); b4 = new JButton(“Last Slide”); b5 = new JButton(“Exit”);
c.add(b1); c.add(b2); c.add(b3); c.add(b4); c.add(b5);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myFrame.setSize(300,150); myFrame.setVisible(true);
} //end initGUI method
public FlowLayoutTest () { // default constructor initGUI (); }
Web Design & Development CS-
2. Grid Layout
Splits the panel/window into a grid (cells) with given number of rows and
columns.
Forces the size of each component to occupy the whole cell. Size of each
component is same
Components are added row wise. When all the columns of the first row are get
filled the components are then added to the next row.
Only one component can be added into each cell.
Example Code
// File GridLayoutTest.java
import java.awt.; import javax.swing.;
public class GridLayoutTest {
JFrame myFrame ; JButton b1, b2, b3, b4, b5;
//method used for setting layout of GUI public void initGUI ( ) {
myFrame = new JFrame(“Grid Layout”);
Container c = myFrame.getContentPane();
// rows , cols
c.setLayout( new GridLayout( 3 , 2 ) );
b1 = new JButton(“Next Slide”); b2 = new JButton(“Previous Slide”); b3 = new JButton(“Back to Start”); b4 = new JButton(“Last Slide”); b5 = new JButton(“Exit”);
c.add(b1); c.add(b2); c.add(b3); c.add(b4); c.add(b5);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myFrame.setSize(300,150); myFrame.setVisible(true);
Web Design & Development CS-
} //end initGUI method
public GridLayoutTest () { // default constructor initGUI (); }
public static void main (String args[ ]) { GridLayoutTest glTest = new GridLayoutTest(); }
} // end of class
output
Modification
The grid layout also allows the spacing between cells. To achieve spacing between cells,
modify the above program.
Pass additional parameters to the constructor of GridLayout, spaces between rows &
spaces between columns as shown below
c.setLayout( new GridLayout( 3 , 2 , 10 , 20) );
The output is look similar to one given below.
Web Design & Development CS-
c.add( b1 , BorderLayout.NORTH ); c.add( b2 , BorderLayout.SOUTH );
c.add( b3 , BorderLayout.EAST ); c.add( b4 , BorderLayout.WEST );
c.add( b5 , BorderLayout.CENTER);
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myFrame.setSize(300,150); myFrame.setVisible(true);
} //end initGUI method
public BorderLayoutTest () { // default constructor initGUI (); }
public static void main (String args[ ]) { BorderLayoutTest glTest = new BorderLayoutTest(); }
} // end of class
Points to Remember
Revisit the code of adding components, we specify the region in which we want
to add component or otherwise they will not be visible.
Consider the following segment of code: BorderLayout.NORTH, as you
guessed correctly NORTH is a constant (final) defined in BorderLayout class
public access modifier. Similarly the other ones are defined. Now you understand,
why so much emphasis has been made on following the naming conventions.
output
Web Design & Development CS-
Making Complex GUIs
From the discussion above it seems that the basic Layout Managers may not help us in
constructing complex GUIs, but generally a combination of these basic layouts can do the
job. So lets try to create the calculator GUI given below
This GUI has 16 different buttons each of same size and text field on the top and a label
‘my calculator’ on the bottom.
So, how we can make this GUI? If Border Layout is selected, it has five regions (each
region can have at most one component) but here we have more than five components to
add. Lets try Grid Layout, but all the components in a Grid have same size and the text
field at the top and label at the bottom has different size. Flow Layout cannot be selected
because if we stretch our GUI it will destroy its shape.
Can we make this GUI? Yes, we can. Making of such GUI is a bit tricky business but
General Purpose Containers are there to provide the solution.
JPanel
It is general purpose container (can’t exist alone, it has to be in some toplevel
container) in which we can put in different components (JButton , JTextField etc
even other JPanels)
JPanel has its own layout that can be set while creating JPanel instance
JPanel myPanel = new JPanel ( new FlowLayout( ) );
Add components by using add method like shown below.
Web Design & Development CS-
b7 = new JButton("7"); b8 = new JButton("8"); b9 = new JButton("9");
bPlus = new JButton("+"); bMinus = new JButton("-"); bMul = new JButton("*"); bPoint = new JButton("."); bEqual = new JButton("="); bClear = new JButton("C");
tfAnswer = new JTextField();
lMyCalc = new JLabel("My Clacualator");
//creating panel object and setting its layout pButtons = new JPanel (new GridLayout(4,4));
//adding components (buttons) to panel pButtons.add(b1); pButtons.add(b2); pButtons.add(b3); pButtons.add(bClear);
pButtons.add(b4); pButtons.add(b5); pButtons.add(b6); pButtons.add(bMul);
pButtons.add(b7); pButtons.add(b8); pButtons.add(b9); pButtons.add(bMinus);
pButtons.add(b0); pButtons.add(bPoint); pButtons.add(bPlus); pButtons.add(bEqual);
// getting componenet area of JFrame Container con = fCalc.getContentPane(); con.setLayout(new BorderLayout());
//adding components to container con.add(tfAnswer, BorderLayout.NORTH); con.add(lMyCalc, BorderLayout.SOUTH); con.add(pButtons, BorderLayout.CENTER);
fcalc.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fCalc.setSize(300, 300); fCalc.setVisible(true);
} //end initGUI method
Web Design & Development CS-
public CalculatorGUI () { // default constructor
initGUI ();
}
public static void main (String args[ ]) {
CalculatorGUI calGUI = new CalculatorGUI ();
}
} // end of class
