Unit 131 GUI Layout Managers Learning Outcomes oList and distinguish between the four most common, standard layout managers in Java. oUse these and other layout managers to build good GUI applications. Introduction FlowLayout Manager GridLayout Manager Self-check Exercise 1 BorderLayout Manager Self-check Exercise 2 Exercises
Unit 132 Introduction to GUI Layout Managers A layout manager determines the placement of components with a container. Each container has a default layout manager. A new layout manager can be installed using the setLayout method. Each layout manager implements one of the two interfaces: LayoutManger or LayoutManger2. Here are some common standard layout managers of Java: oFlowLayout oGridLayout oBorderLayout oGridBagLayout
Unit 133 Introduction to Flow Layout FlowLayout places components sequentially from left to right in the order added. Components placement depends on the current size of the container. When the container is resized the components are automatically resized. FlowLayout is the default layout for panels. FlowLayout has three constructors: oFlowLayout() oFlowLayout(int align) oFlowLayout(int align, int hgap, int vgap)
Unit 134 Example 1: Flow Layout Test import javax.swing.*; import java.awt.*; class TestFlowLayout extends JFrame{ public TestFlowLayout(){ Container cp = getContentPane(); cp.setLayout(new FlowLayout()); cp.add(new JButton("1")); cp.add(new JButton("2")); cp.add(new JButton("3")); cp.add(new JButton("4")); cp.add(new JButton("5")); cp.add(new JButton("6")); cp.add(new JButton("7")); setSize(300,300); setTitle("Flow Layout Test1"); setVisible(true); } public static void main(String [] args){ new TestFlowLayout(); } }
Unit 135 Introduction to Grid Layout GridLayout places components in a rectangular grid. GridLayout is good for laying out containers that look like grids. GridLayout forces occupation of all available container space. GridLayout has three constructors: oGridLayout() oGridLayout(int rows, int cols) oGridLayout(int rows, int cols, int hgap, int vgap)
Unit 136 Example 2: Grid Layout Test import javax.swing.*; import java.awt.*; class TestGridLayout extends JFrame{ public TestGridLayout(){ Container cp = getContentPane(); cp.setLayout(new GridLayout(3,3)); cp.add(new JButton("1")); cp.add(new JButton("2")); cp.add(new JButton("9")); cp.add(new JButton("4")); cp.add(new JButton("5")); cp.add(new JButton("6")); cp.add(new JButton("7")); cp.add(new JButton("8")); cp.add(new JButton("3")); setSize(300,300); setVisible(true); } public static void main(String [] args){ new TestGridLayout(); }
Unit 137 Example 2: Another Grid Layout Test import javax.swing.*; import java.awt.*; class TestGridLayout extends JFrame{ public TestGridLayout(){ Container cp = getContentPane(); cp.setLayout(new GridLayout(3,3)); cp.add(new JButton("1")); cp.add(new JButton("2")); cp.add(new JButton("9")); cp.add(new JButton("4")); cp.add(new JButton("5")); cp.add(new JButton("6")); cp.add(new JButton("7")); cp.add(new JButton("8")); setSize(300,300); setVisible(true); } public static void main(String [] args){ new TestGridLayout(); }
Unit 138 Introduction to Border Layout BorderLayout places components according to five areas: "North", "South", "East", "West" and "Center". When you enlarge a container the center area grabs as much of the new space as possible. BorderLayout is good for maintaining a row of buttons in one of the areas near the edgees. BorderLayout has two constructors: oBorderLayout() oBorderLayout(int hgap, int vgap)
Unit 139 Example 3: Border Layout Test import javax.swing.*; import java.awt.*; class TestBorderLayout extends JFrame{ JPanel jb = new JPanel(); public TestBorderLayout(){ jb.setLayout(new GridLayout(3,3)); jb.add(new JButton("1")); jb.add(new JButton("2")); jb.add(new JButton("3")); jb.add(new JButton("4")); jb.add(new JButton("5")); jb.add(new JButton("6")); jb.add(new JButton("7")); jb.add(new JButton("8")); jb.add(new JButton("9"));
Unit 1310 Example 3: Border Layout Test Container cp = getContentPane(); cp.setLayout(new BorderLayout()); cp.add(jb,"Center"); cp.add(new JButton("NORTH"), "North"); cp.add(new JButton("WEST"), "West"); cp.add(new JButton("EAST"), "East"); cp.add(new JButton("SOUTH"), "South"); setSize(300,300); setTitle("Grid Layout Test"); setVisible(true); } public static void main(String [] args){ new TestBorderLayout(); }
Unit 1311 Exercises 1.Move the call to the setVisible() method from the main() method to the TetFlowLayout constructor in Example 1. Then compile and run each of Examples 2, 3 and 4. You will notice some changes when displaying the frames. Explain. 2. Modify Example 2 to add two other types of borders to it. 3.Compare Example 2 and Example 3. In Example 2 we inherited a panel, added more components to it and then changed the panel’ÿ layout manager. In Example 3 we had to create an additional panel. Can Example 3 be written in similar manner to Example 2 without the additional panel? If it is possible, write the equivalent program otherwise explain why it is not possible. 4.Change the fill constraint variable on Line 13 from BOTH to each of the following: NONE, HORIZONTAL and VERTICAL. Run the program in each case and study the effect. 5.Change the value of the gridy constraint variable on Lines 29 to a smaller value. Run the program and observe the result. Do the same for the value on Line 32. Also change these values to bigger values and observe the results.