Layout Managers Implementing the Graphical User Interface

J.E.D.I

5.6.2 Layout Managers

The position and size of the components within each container is determined by the layout manager. The layout managers governs the layout of the components in the container. These are some of the layout managers included in Java. 1. FlowLayout 2. BorderLayout 3. GridLayout 4. GridBagLayout 5. CardLayout The layout manager can be set using the setLayout method of the Container class. The method has the following signature. void setLayoutLayoutManager mgr If you prefer not to use any layout manager at all, you pass null as an argument to this method. But then, you would have to position the elements manually with the use of the setBounds method of the Component class. public void setBoundsint x, int y, int width, int height The method controls the position based on the arguments x and y, and the size based on the specified width and height. This would be quite difficult and tedious to program if you have several Component objects within the Container object. Youll have to call this method for each component. In this section, youll learn about the first three layout managers. The FlowLayout Manager The FlowLayout is the default manager for the Panel class and its subclasses, including the Applet class. It positions the components in a left to right and top to bottom manner, starting at the upper-lefthand corner. Imagine how you type using a particular word editor. This is how the FlowLayout manager works. It has three constructors which are as listed below. FlowLayout Constructors FlowLayout Creates a new FlowLayout object with the center alignment and 5-unit horizontal and vertical gap applied to the components by default. FlowLayoutint align Creates a new FlowLayout object with the specified alignment and the default 5-unit horizontal and vertical gap applied to the components. FlowLayoutint align, int hgap, int vgap Creates a new FlowLayout object with the first argument as the alignment applied and the hgap-unit horizontal and vgap-unit vertical gap applied to the components. Table 1.3.1: FlowLayout constructors Software Engineering 224 J.E.D.I The gap refers to the spacing between the components and is measured in pixels. The alignment argument should be one of the following: 1. FlowLayout.LEFT 2. FlowLayout.CENTER 3. FlowLayout.RIGHT What is the expected output of the following program? import java.awt.; class FlowLayoutDemo extends Frame { public static void mainString args[] { FlowLayoutDemo fld = new FlowLayoutDemo; fld.setLayoutnew FlowLayoutFlowLayout.RIGHT, 10, 10; fld.addnew ButtonONE; fld.addnew ButtonTWO; fld.addnew ButtonTHREE; fld.setSize100, 100; fld.setVisibletrue; } } Shown below is a sample output running on Windows platform. Table 13.1: Output of sample code in Windows Software Engineering 225 J.E.D.I The BorderLayout Manager The BorderLayout divides the Container into five parts- north, south, east, west and the center. Each components is added to a specific region. The north and south regions stretch horizontally whereas the east and west regions adjust vertically. The center region, on the other hand, adjusts in both horizontally and vertically. This layout is the default for Window objects, including objects of Windows subclasses Frame and Dialog type. BorderLayout Constructors BorderLayout Creates a new BorderLayout object with no spacing applied among the different components. BorderLayoutint hgap, int vgap Creates a new BorderLayout object with hgap-unit horizontal and vgap-unit spacing applied among the different components. Table 1.3.2: BorderLayout constructors Like in the FlowLayout manager, the parameters hgap and vgap here also refers to the spacing between the components within the container. To add a component to a specified region, use the add method and pass two arguments: the component to add and the region where the component is to be positioned. Note that only one component can be placed in one region. Adding more than one component to a particular container results in displaying only the last component added. The following list gives the valid regions are predefined fields in the BorderLayout class. 1. BorderLayout.NORTH 2. BorderLayout.SOUTH 3. BorderLayout.EAST 4. BorderLayout.WEST 5. BorderLayout.CENTER Here is a sample program demonstrating how the BorderLayout works. import java.awt.; class BorderLayoutDemo extends Frame { public static void mainString args[] { BorderLayoutDemo bld = new BorderLayoutDemo; bld.setLayoutnew BorderLayout10, 10; may remove bld.addnew ButtonNORTH, BorderLayout.NORTH; bld.addnew ButtonSOUTH, BorderLayout.SOUTH; bld.addnew ButtonEAST, BorderLayout.EAST; bld.addnew ButtonWEST, BorderLayout.WEST; bld.addnew ButtonCENTER, BorderLayout.CENTER; bld.setSize200, 200; bld.setVisibletrue; } } Software Engineering 226 J.E.D.I Here is a sample output of this program. The second figure shows the effect of resizing the frame. Figure 1.3.2: Output of sample code The GridLayout Manager With the GridLayout manager, components are also positioned from left to right and top to bottom as in the FlowLayout manager. In addition to this, the GridLayout manager divides the container into a number of rows and columns. All these regions are equally sized. It always ignores the components preferred size. The following is the available constructors for the GridLayout class. GridLayout Constructors GridLayout Creates a new GridLayout object with a single row and a single column by default. GridLayoutint rows, int cols Creates a new GridLayout object with the specified number of rows and columns. GridLayoutint rows, int cols, int hgap, int vgap Creates a new GridLayout object with the specified number of rows and columns. hgap- unit horizontal and vgap-unit vertical spacings are applied to the components. Table 1.3.3: GridLayout constructors Try out this program. import java.awt.; class GridLayoutDemo extends Frame { public static void mainString args[] { GridLayoutDemo gld = new GridLayoutDemo; gld.setLayoutnew GridLayout2, 3, 4, 4; Software Engineering 227 J.E.D.I gld.addnew ButtonONE; gld.addnew ButtonTWO; gld.addnew ButtonTHREE; gld.addnew ButtonFOUR; gld.addnew ButtonFIVE; gld.setSize200, 200; gld.setVisibletrue; } } This is the output of the program. Observe the effect of resizing the frame. Figure 1.3.3: Output of sample code Panels and Complex Layouts To create more complex layouts, you can combine the different layout managers with the use of panels. Remember that a Panel is a Container and a Component at the same time. You can insert Components into the Panel and then add the Panel to a specified region in the Container. Software Engineering 228 J.E.D.I Observe the technique used in the following example. import java.awt.; class ComplexLayout extends Frame { public static void mainString args[] { ComplexLayout cl = new ComplexLayout; Panel panelNorth = new Panel; Panel panelCenter = new Panel; Panel panelSouth = new Panel; North Panel Panels use FlowLayout by default panelNorth.addnew ButtonONE; panelNorth.addnew ButtonTWO; panelNorth.addnew ButtonTHREE; Center Panel panelCenter.setLayoutnew GridLayout4,4; panelCenter.addnew TextField1st; panelCenter.addnew TextField2nd; panelCenter.addnew TextField3rd; panelCenter.addnew TextField4th; South Panel panelSouth.setLayoutnew BorderLayout; panelSouth.addnew CheckboxChoose me, BorderLayout.CENTER; panelSouth.addnew CheckboxIm here, BorderLayout.EAST; panelSouth.addnew CheckboxPick me, BorderLayout.WEST; Adding the Panels to the Frame container Frames use BorderLayout by default cl.addpanelNorth, BorderLayout.NORTH; cl.addpanelCenter, BorderLayout.CENTER; cl.addpanelSouth, BorderLayout.SOUTH; cl.setSize300,300; cl.setVisibletrue; } } Software Engineering 229 J.E.D.I Here is the output of the program. Figure 1.3.4: Output of sample code

5.6.3 Swing GUI Components