Creating Graphical User Interfaces Dr. Mark L. Hornick

Placing GUI components on a JFrame CS-1020 11/17/2018 Placing GUI components on a JFrame There are two ways to put GUI components on the content pane of a JFrame: Absolute positioning You explicitly specify the position and size of GUI objects within the content pane btnQuit.setBounds( 10, 125, 80, 30 ); Use a Layout Manager A class that controls automatic placement of components The content pane of a frame is where we can place GUI components. Among the approaches available to us to place components, we will study the easier one here. The easier absolute positioning is not a recommended approach for practical applications, but our objective here is to learn the basic handling of events and placement of GUI objects, we will use the easier approach. Chapter 12 of the textbook discusses different layout managers. SE-1020 Dr. Mark L. Hornick Dr. Mark L. Hornick

Layout Managers automatically determine how the GUI components appear within the container Many different layout managers exist; some are: FlowLayout BorderLayout GridLayout To use, set the layout manager of a JFrame’s Container to the type of layout manager you want to use: FlowLayout fl = new FlowLayout(FlowLayout.CENTER); contentPane.setLayout(fl); SE-1020 Dr. Mark L. Hornick

Using FlowLayout In using this layout, GUI components are placed in left-to-right order. When the component does not fit on the same line, left-to-right placement continues on the next line. As a default, components on each line are centered. SE-1020 Dr. Mark L. Hornick

FlowLayout behavior when the frame containing the components is resized SE-1020 Dr. Mark L. Hornick

BorderLayout This layout manager divides the container into five regions: center, north, south, east, and west. Not all regions have to be occupied. SE-1020 Dr. Mark L. Hornick

BorderLayout resizing CS-1020 11/17/2018 BorderLayout resizing The north and south regions expand or shrink in width only The east and west regions expand or shrink in height only The center region expands or shrinks on both height and width. contentPane.setLayout(new BorderLayout()); contentPane.add(button1, BorderLayout.NORTH); contentPane.add(button2, BorderLayout.SOUTH); contentPane.add(button3, BorderLayout.EAST); contentPane.add(button4, BorderLayout.WEST); contentPane.add(button5, BorderLayout.CENTER); SE-1020 Dr. Mark L. Hornick Dr. Mark L. Hornick

GridLayout Places GUI components on equal-size N by M grids. Components are placed in top-to-bottom, left-to-right order. Number of rows and columns remains the same after the frame is resized, but the width and height of each region will change. SE-1020 Dr. Mark L. Hornick

GridLayout resizing SE-1020 Dr. Mark L. Hornick

Complex layouts For sophisticated GUI’s, it can be difficult to use a single layout manager to get the look you are after. Another approach is to use panels Multiple panels can be placed in a content pane The class that implements a panel is JPanel Panel 1 Panel 3 Panel 3 SE-1020 Dr. Mark L. Hornick

Using Panels Panels can be placed on a JFrame using absolute positioning using a layout manager Each panel can employ it’s own layout manager or not UI components are added to the panels, rather than the JFrame But you can still add components to the JFrame as well Border Layout panel Absolute positioning panel Flow Layout panel SE-1020 Dr. Mark L. Hornick

Nested Layouts A panel can be placed inside another panel This is called nesting panels Nesting can be done to any level Here, the East region of the outer panel contains a border layout SE-1020 Dr. Mark L. Hornick

Another nested panel example Here, the Center region of the outer panel contains a border layout SE-1020 Dr. Mark L. Hornick

North Center South SE-1020 Dr. Mark L. Hornick

North Center South SE-1020 Dr. Mark L. Hornick