Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 3 Designing the Interface with Layout Managers

Programming with Java

© 2002 The McGraw-Hill Companies, Inc. All rights reserved.

1

McGraw-Hill/Irwin

Chapter 3

Designing the Interface with Layout Managers



2

McGraw-Hill/Irwin

• Position components on the interface.

• Use the setLayout method to select the layout manager.

• Place equally sized components in rows and columns with the GridLayout manager.

• Arrange components using the BorderLayout manager.

• Create more flexible displays with the GridBagLayout and the GridBagConstraints.

• Design multiple pages to display one at a time with the CardLayout.

• Use Panels to combine multiple layouts on one applet.

Objectives



3

McGraw-Hill/Irwin

Java Layout Managers

• Java uses layout managers to dynamically determine the placement of components and containers when the program runs.

• These layout managers are specific for the system running your program, so the components have the correct look and spacing for that system.

• Applet is a container and the components must be in the container.



4

McGraw-Hill/Irwin

• Layout manager determines the sequence of components in the container.

• Default Layout manager is the FlowLayout manager.• Other layouts are GridLayout, BorderLayout, CardLayout,

and GridBagLayout.• You can also combine layouts by placing the layouts in the

panels and then adding the panels to the applet.

Java Layout Managers Continued



5

McGraw-Hill/Irwin

The setLayout Method—General Format

setLayout(new LayoutManager);



6

McGraw-Hill/Irwin

The setLayout Method—Examples

setLayout(new FlowLayout());

setLayout(new GridLayout());



7

McGraw-Hill/Irwin

The FlowLayout Class—Constructors

FlowLayout();FlowLayout(int Alignment):FlowLayout(int Alignment, int horizontalGap, int verticalGap);



8

McGraw-Hill/Irwin

The FlowLayout Constructor—Examples

setLayout(new FlowLayout());

MyAppletLayout = new FlowLayout(FlowLayout.LEFT, 5, 10);setLayout(MyAppletLayout);



9

McGraw-Hill/Irwin

The GridLayout Class—Constructors

GridLayout();GridLayout(int rows, int columns);GridLayout(int rows, int columns, int horizontalGap, int verticalGap);



10

McGraw-Hill/Irwin

The GridLayout Constructor—Examples

setLayout(new GridLayout(3, 2)); setLayout(new GridLayout(3, 2, 40, 20));



11

McGraw-Hill/Irwin

The GridLayout Manager

GridLayout of a single column or a single row can be created by setting column to zero or the row to zero.



12

McGraw-Hill/Irwin

GridLayout of 3 Rows and 2 Columns



13

McGraw-Hill/Irwin

GridLayout in Internet Explorer – GridLayout(3,2,40,20)



14

McGraw-Hill/Irwin

GridLayout in Netscape – GridLayout(3,2,40,20)



15

McGraw-Hill/Irwin




16

McGraw-Hill/Irwin




17

McGraw-Hill/Irwin

BorderLayout Manager

• This manager divides the container into sections based on a compass.

• The sections are called north, south, east, west and center.

• You can only add one component to each section and resizes each component to fill each section.

• You will see later that instead of each component to a section, you can add a container to each section.

• When you add a component to the layout, you must specify the section of the component will go in, or it will default to the center.



18

McGraw-Hill/Irwin

The BorderLayout Class—Constructors

BorderLayout();BorderLayout(int horizontalGap, int verticalGap);



19

McGraw-Hill/Irwin

The BorderLayout Constructor—Examples

setLayout(new BorderLayout()); BorderLayout layMyBorderLayout = new BorderLayout(10, 10);setLayout(layMyBorderLayout);



20

McGraw-Hill/Irwin

BorderLayout using Empty Constructor



21

McGraw-Hill/Irwin

BorderLayout with 10 Pixels in Between – BorderLayout(10,10)



22

McGraw-Hill/Irwin

GridBag Layout Manager

• It is a manager that is much more flexible but more complicated that the other layouts.

• A gridbag layout is a grid with row and columns, but you can control the sizes and placement of components using GridBagConstraints.

• By setting, you can combine multiple cells, set the size and location of any component and the set the alignment of each component within its cell.

• The area inside a cell where you can place the component is known as the display area.



23

McGraw-Hill/Irwin

• By default, the grid is centered in the middle of the container regardless of the number of rows or columns.

• As Java is cross-platform, you must remember that you are giving relative placement, telling which components can grow or shrink.

• You are not specifying an absolute size or placement.

• The output of your layouts will vary depending on the platform, browser and event the size of the browser.

GridBag Layout Manager Continued



24

McGraw-Hill/Irwin

Specifying a GridBagLayout

• To use a gridbag layout, you must declare the GridBagLayout and GridBagConstaraints object and attach the layout to your applet.

• Example: GridBagLayout gridbag = new GridBagLayout();GridBagConstraints constraints = new GridBagConstraints();SetLayout(gridbag);



25

McGraw-Hill/Irwin

Setting Constraints for Components• For each component that you add to the gridbag layout, you

must first set an instance of the GridBagContraints class. • You can set as many as 11 different data member of the

GridBagConstraints object, usually you set a few and take the rest as default.

• Let us look at an example:constraints.anchor = GridBagConstraints.EAST; //Align to the rightconstraints.fill = GridBagConstraints.NONE; //Do not expand to fillgridbag.setConstraints(lblDept, constraints); //set the constraints to lblDeptadd(lblDept); //add to the applet



26

McGraw-Hill/Irwin

Setting Constraints for Components Continued

• The GridBagConstraints object keeps the data values that you assign to it.

• If you set the constraints for another component without changing the constraints the next component will have the same constraints as the previous one.



27

McGraw-Hill/Irwin

The setConstraints Method—General Format

GridBagLayoutObject.setConstraints(Component, GridBagConstraintsObject)



28

McGraw-Hill/Irwin

The setConstraints Method—Example

gridbag.setConstraints(txtDept, constraints);add(txtDept);



29

McGraw-Hill/Irwin

Precisely Placing Components

• Use the gridx to set the column and gridy to set the row; both are zero based.

• The gridlines do not appear on the interface, they are only to help visualize the layout.



30

McGraw-Hill/Irwin

GridBagLayout – with Set to Fill Their Display Area



31

McGraw-Hill/Irwin

Setting the Alignment of Components within Cells

• The anchor constraint sets the alignment of the components that are smaller than their display area.

• You can set the anchor constants to one of these: NORTH, SOUTH, EAST, WEST, CENTER, NORTHWEST, NORTHEAST, SOUTHWEST, or SOUTHEAST.

• The default alignment is CENTER.

• The anchor has no effect if the component fills its cell (its display area).



32

McGraw-Hill/Irwin

Adjust the Column Widths by Setting the weightx Constraints



33

McGraw-Hill/Irwin

Setting Insets• To control spacing between the components use an Insets

object.

• You can specify the number of pixels to add as padding between a component and the edge of its cell.

• The Insets constructor represents integer values for the pixel spacing in the order below.

• Insets Constructor: Insets(int top,int left, int bottom, int right);

• If you have difficulty with your textfields being size “zero” adjust the inset sizes so they are smaller than the textfield sizes.



34

McGraw-Hill/Irwin

Using Relative Placement

• You can specify relative placement and relative size for components, rather than precise grid coordinates.

• Using this technique, you can set the gridwidth constraint to RELATIVE, which places a component in the next cell.

• To finish off the row and make the next component appear in the next row set the gridwidth constraints to REMAINDER, which makes the cell fill the remainder of the row.

• DO NOT mix absolute placement with relative placement, you will get odd results.



35

McGraw-Hill/Irwin

Setting the Relative Width of Columns

• You can set the weightx data member to set the relative widths of columns.

• You can set the column width once for each column, in the first row in the grid, and then use 0 for the weightx argument for all the rows.

• If you forget to set weightx to 0 the last setting you used will apply to all cells after that point.

• You can use relative weights for the cells such as making column1 relative weight of 1 and column 2 relative weight of 3.



36

McGraw-Hill/Irwin

Using GridBagLayout Manager



37

McGraw-Hill/Irwin

Controlling Placement, Size and Alignment

• You will want to experiment with GridBagConstraints to achieve the best output.

• See Table 3.1 for more possibilities.

• You can make a component use more than one cell by setting the gridwidth and gridheight data members.

• Examples: constraints.gridwidth = 2; //Joins two cells horizontally

Constraints.gridheight = 2; //Joins two cells vertically



38

McGraw-Hill/Irwin

GridBagConstraint Data MembersData Members (variables)

Value Purpose

gridx integer RELATIVE(default)

The grid column to place the component; first column is 0. Upper-left cell for a multicell component. Default RELATIVE specifies column to the right of last component placed.

constraints.gridx = GridBagConstraints.RELATIVE;//Next columnconstraints.gridx = 1;//Column two

gridy integerRELATIVE(default)

The grid row to place the component; first row is 0. Upper-left cell for a multicell component. Default RELATIVE specifies row below last component placed.

constraints.gridy = GridBagConstraints.RELATIVE;constraints.gridy = 0;//Row one



39

McGraw-Hill/Irwin

GridBagConstraint Data Members Continued

gridwidth integerDefault value is 1.

Number of cells in the same row the component will use. To make this component the last in the row, use REMAINDER.

constraints.gridwidth = GridBagConstraints.REMAINDER;//Last cell in rowconstraints.gridwidth = 2;//Component uses two cells

gridheight integer Default value is 1.

integer Default value is 1.

Examples: constraints.gridheigth = GridBagConstraints.REMAINDER;//Last in columnconstraints.gridheigth = 2;//Component uses two cells in column

fill NONE (default)HORIZONTALVERTICALBOTH

Resizing rules for a component smaller than its display area; HORIZONTAL makes component as wide as the display area; VERTICAL—as tall; BOTH expands it vertically and horizontally.

Examples: constraints.fill = GridBagConstraints.BOTH;//Fill cell height & widthconstraints.fill = GridBagConstraints.HORIZONTAL;//Fill cell width



40

McGraw-Hill/Irwin


anchor CENTER (default)NORTHSOUTHEASTWESTNORTHWESTNORTHEASTSOUTHWESTSOUTHEAST

Alignment of component within display area.

Examples: constraints.anchor = GridBagConstraints.WEST;//Align component leftconstraints.anchor = GridBagConstraints.EAST;//Align component right

weightx integerDefault value is 0.

Determines relative width of grid column. Set weightx for one component in a column to set the relative width of the entire column. A weightx of 1 for each column makes the cells equal in width. You can use relative sizes, such as 2 or 3, or make all widths percentages. The default, 0, places all extra space at the beginning and ending of the row.



41

McGraw-Hill/Irwin


Examples: constraints.weightx = 1;//Relative weightconstraints.weightx = 3;//Relative weight-3 times larger than 1constraints.weightx = 20;//Make this column 20% of total width of 100constraints.weightx = 80;//Make this column 80% of total width of 100

weighty integerDefault value is 0.

Determines relative height of grid row. Set weighty for one component in a row to set the relative height of the entire row. A weighty of 1 for each row makes the cells equal in height. You can use relative sizes, such as 2 or 3, or make all heights percentages. The default, 0, places all extra space at the beginning and ending of the column.

Examples: constraints.weighty = 3;//Relative weight-3 times taller than 1constraints.weighty = 20;//Make this row 20% of total height of grid of 100constraints.weighty = 80;//Make this row 80% of total height of grid of 100

insets An instance of the Insets class. Default is 0,0,0,0

Sets distance in pixels from edge of display area (cell) to edge of component. Creates a blank space around the component. Include separate values for top, left, bottom, and right.



42

McGraw-Hill/Irwin


Example: constraints.insets = new Insets(5,5,5,5);//Padding around components

ipadx integer Number of pixels to add to the width of a component on both the left and right. Will increase the component width by twice the setting, since the pixels are added on both ends.

Example: constraints.ipadx = 2;//Increase component width by 2 pixels on each end

ipady integer Number of pixels to add to the height of a component on both the top and bottom. Will increase the component height by twice the setting, since the pixels are added on both ends.

Example: constraints.ipady = 2;//Increase component height by 2 pixels on top and bottom



43

McGraw-Hill/Irwin

Creating Your Own Methods

• You can put all of the gridbag layout code in the init.

• It is better to organize your init.

• Create your own method where you can place all the gridbag layout code.

• Let the init method call the method, which has the gridbag layout code.

• And after the method is executed the control returns to the init where you can write more methods or statements.



44

McGraw-Hill/Irwin

Planning a GridBagLayout • It helps to draw a sketch when you plan a user interface using

a GridBagLayout.

• Draw a grid with maximum number of rows and columns that you might need and then sketch the components in the cells.

• Remember you can make a component more than one cell horizontally and/or vertically.

• You can make the component fill its display area or set it to remain a fixed size and set its alignment within the display area.

• Remember the largest component determines the size for a column or a row.



45

McGraw-Hill/Irwin

The CardLayout Manager

• Is another flexible layout manager.

• The manager allows you to create multiple layouts on different “cards” and arrange the cards as you want.

• CardLayout manager contains methods for next(), previous(), first(), last(), and show().



46

McGraw-Hill/Irwin

Using Panels

• For the greatest flexibility in laying out a user interface, you can use multiple Panel objects.

• Each Panel is a container in which you can set any layout manger.

• You can use the gridlayout for one panel, a borderlayout for another panel and the gridbag layout for another panel.



47

McGraw-Hill/Irwin

Using Panels Continued• Then you can add all the panels to the applet.• To display a panel on your applet, you must declare a new

instance of a Panel class.• The set the layout manager to the panel, specify the

components, add them to the Panel and then add the panel to the applet.

• Example: Panel pnlDisplay = new Panel();pnlDisplay.setLayout(new GridLayout(1,2));pnlDisplay.add(new Label(“Name :”));



48

McGraw-Hill/Irwin

Two Panels are Used – Upper Panel Uses gridlayout and the

Lower Panel Uses borderlayout



49

McGraw-Hill/Irwin

Using No Layout Manager

• It isn’t absolutely necessary to use a layout manager.

• You can turn off the default FlowLayout manager and place components precisely by specifying the actual pixel locations.

• In doing so, you give up the great advantage of Java that allows programs to run on any system.

• This can only work if you know that all the systems that run your program have the same screen size and resolution.

• You can turn off the default layout manager by setting the layout manager to null – setLayout(null);



50

McGraw-Hill/Irwin

The setBounds Method—General Format

component.setBounds(int x, int y, int width, int height);



51

McGraw-Hill/Irwin

The setBounds Method—Example

lblDept.setBounds(10, 10, 100, 30);



52

McGraw-Hill/Irwin

Using the Null Layout Manager and the setBounds Method

Documents

Programming with Java © 2002 The McGraw-Hill Companies, Inc. All rights reserved. 1 McGraw-Hill/Irwin Chapter 3 Designing the Interface with Layout Managers