1

Event Driven Programming

Part 2 – GUI Layout

Chapter 12

CS 2334University of Oklahoma

Brian F. Veale

2

Patterns● Pattern – a particular arrangement of

classes designed to efficiently deal with a frequently encountered problem

– Represents a standard solution to a problem.

– Spend less time “re-inventing the wheel”● Model Pattern – represents the data

structure or resource being manipulated

– i.e., a list of students● View Pattern – A visual representation of

the model's current state.

● Controller Pattern – Responds to commands from the user

– i.e., button clicks and menu selections

3

An example GUI● Create a scrolling list of U.S. State

names● It should have a caption at the top,

“States”● The list should be of type JList● The data model for the list will be a

Vector– data model – refers to the model

pattern for the program

● The caption will be a JLabel

4

More Components● To allow scrolling, the JList will have to

be inside a JScrollPane

● We’ll need a heavyweight component to bind them all together

– JFrame● We’ll actually end up with six

components for this interface.

– JFrame

– JMenuBar

– JPanel

– JLabel

– JScrollPane

– JList

5

Organizing Containers● How do we organize our containers

and components?● Using multiple components and

containers is complicated– We must understand, document, and

manage the relationships between the components and containers

– Containers can be nested within one another

– Components can’t contain anything else

● Documentation is important for interface design

6

Types of UI Documentation● We can draw a hierarchical

structure that shows the relationship between components and containers

JFrame

JMenuBar (in frame) JPanel (in frame)

JLabel JScrollPane

JList

7

Text Documentation● Not as easy to read as a hierarchical

structure, but is easy to type into your code/* ASCII diagram of component and container * structure: * * /­­­­­­­­­­­­­JFrame­­­­­­­­­­­­­­­­­\ * |/­­­­­JPanel from JFrame­­­­­­­­­­­\| * ||            JLabel                || * ||/­­­­­­­­­­­­­JScrollPane­­­­­­­­\|| * |||/­­­­­­­­JList­­­­­­­­­­­­­­­­­\||| * ||||                              |||| * ||||                              |||| * ||||                              |||| * ||||                              |||| * |||\­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­/||| * ||\­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­/|| * |\­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­/| * \­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­/ */

8

Another Documentation Option● Can use indentation to show

nesting● Somewhat harder to read, but

easier to construct/*  * Hierarchy of components and containers * JFrame frame *     JPanel from frame *        JLabel label *       JScrollPane scrollPane *           JList list */

9

Displaying the Components on the Screen● Construct the components

● Add the components to the correct container

● Pack the heavyweight component● Make the heavyweight component

visible● It is important to have a system to

component construction– Start at the lowest level and work up

● Build the JList, JScrollPane, …, to JFrame

– Start at the highest level and work down● Build the JFrame, JLabel, …, to JList

10

Example GUI Code● LabeledScrollingList1.java

11

Problems?● The JLabel is not visible

– The JLabel was properly constructed– The tree of components was

constructed

● The JList is on top of the JLabel● We didn’t give the JPanel any

information on the layout of the components

● We use LayoutManagers to arrange components and containers in Java

12

Layout Managers● Key to this issue is resizing

– What happens to the user interface when the window changes size?

– Which components enlarge?– Which stay the same size?

● We’ll focus on three popular LayoutManagers– BorderLayout– FlowLayout– GridLayout

● You can change the LayoutManager for a container<container>.setLayout(new <name of LayoutManager>);

13

BorderLayout● Put components in five positions

– North, South, East, and West– Center

● Only Center freely changes size when the window is resized

● Default layout for the JPanel in the JFrame (but not the default layout for all JPanels)

● We can control which location we add a component to by passing a second argument to the add method of the container

frame.getContentPane().add(JLabel, BorderLayout.NORTH);

14

BorderLayout

CenterEast

North

South

West

15

BorderLayout Demos● BorderLayoutDemo.java● LabeledScrollingList2.java

16

FlowLayout● Start at upper left corner of

container● Fill in components as they are

added– Left to right– Up to down

● Go to the next row if you don’t have room for any more components

● Easy, but stupid– Resizing windows causes confusion

17

FlowLayout Demo● FlowLayoutDemo.java

18

GridLayout● Designed to hold grid of similar sized

components● Constructing a GridLayout object

– GridLayout(R,C)● R = number of rows● C = number of columns

● When R is set to a non-zero value, the number of columns used is dynamically determined from R and the # of components in the container.

● C affects the layout only when R is zero

19

GridLayout

● Components are added left to right, up to down

– The first component is placed at (0,0)

– The second component at (0,1)

– Next component in the next available slot in the current row. If the row is full a new row is started.

(0,0) (0,1) (0,2) (0,3)

(1,0) (1,1) (1,2) (1,3)

(2,0) (2,1) (2,2) (2,3)

(3,0) (3,1) (3,2) (3,3)

20

GridLayout Demo● GridLayoutDemo.java

21

GridBagLayout● More complicated than other

LayoutManagers● Good for aligning components in rows

and columns– Unlike GridLayout, components need not be

the same size

– Many options to set up when we use it

● Good choice for many GUIs, but can be overused

● Check out the API for usage, we may cover it later