Layout Managers in Java GUI Development: Flow Layout, Grid Layout, and Border Layout, Lecture notes of Web Design and Development

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! Handout 10–2 Web Design & Development CS-506 - 124 - 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 Handout 10–2 Web Design & Development CS-506 - 125 - 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 (); } Handout 10–2 Web Design & Development CS-506 - 128 - } //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. Handout 10–2 Web Design & Development CS-506 - 129 - 3. Border Layout Divides the area into five regions. North, South, East, West and Center Components are added to the specified region If any region not filled, the filled regions will occupy the space but the center region will still appear as background if it contains no component. Only one component can be added into each region. Example Code // File BorderLayoutTest.java import java.awt.*; import javax.swing.*; public class BorderLayoutTest { JFrame myFrame ; JButton b1, b2, b3, b4, b5; //method used for setting layout of GUI public void initGUI ( ) { myFrame = new JFrame(“Border Layout”); Container c = myFrame.getContentPane(); c.setLayout( new BorderLayout( ); 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”); NORTH SOUTH CENTER EAST WEST Handout 10–2 Web Design & Development CS-506 - 130 - 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 Handout 10–3 Web Design & Development CS-506 - 133 - 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 Handout 10–3 Web Design & Development CS-506 - 134 - public CalculatorGUI () { // default constructor initGUI (); } public static void main (String args[ ]) { CalculatorGUI calGUI = new CalculatorGUI (); } } // end of class