part 2 – gui layout chapter 12
TRANSCRIPT
![Page 1: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/1.jpg)
1
Event Driven Programming
Part 2 – GUI Layout
Chapter 12
CS 2334University of Oklahoma
Brian F. Veale
![Page 2: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/2.jpg)
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
![Page 3: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/3.jpg)
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
![Page 4: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/4.jpg)
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
![Page 5: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/5.jpg)
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
![Page 6: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/6.jpg)
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
![Page 7: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/7.jpg)
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\||| * |||| |||| * |||| |||| * |||| |||| * |||| |||| * |||\/||| * ||\/|| * |\/| * \/ */
![Page 8: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/8.jpg)
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 */
![Page 9: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/9.jpg)
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
![Page 10: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/10.jpg)
10
Example GUI Code● LabeledScrollingList1.java
![Page 11: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/11.jpg)
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
![Page 12: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/12.jpg)
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>);
![Page 13: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/13.jpg)
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);
![Page 14: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/14.jpg)
14
BorderLayout
CenterEast
North
South
West
![Page 15: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/15.jpg)
15
BorderLayout Demos● BorderLayoutDemo.java● LabeledScrollingList2.java
![Page 16: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/16.jpg)
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
![Page 17: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/17.jpg)
17
FlowLayout Demo● FlowLayoutDemo.java
![Page 18: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/18.jpg)
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
![Page 19: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/19.jpg)
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)
![Page 20: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/20.jpg)
20
GridLayout Demo● GridLayoutDemo.java
![Page 21: Part 2 – GUI Layout Chapter 12](https://reader035.vdocument.in/reader035/viewer/2022073101/62e4a6566f5579034c06ce7c/html5/thumbnails/21.jpg)
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