Introduction to Java Graphics and GUIs in Software Design & Implementation

undefined
 
CSE 331
Software Design & Implementation
 
Dan Grossman
Spring 2015
Java Graphics and GUIs
(Based on slides by Mike Ernst, Dan Grossman, David Notkin, Hal Perkins)
 
The plan
 
Today: introduction to Java graphics and Swing/AWT libraries
 
Then: event-driven programming and user interaction
 
None of this is comprehensive – only an overview and guide to
what you should expect to be out there
Some standard terminology and perspective
 
Credits: material taken from many places; including slides and
materials by Ernst, Hotan, Mercer, Notkin, Perkins, Stepp; Reges;
Sun/Oracle docs & tutorial; Horstmann; Wikipedia; others, folklore,
 
2
 
CSE331 Spring 2015
 
References
 
Very useful start: Sun/Oracle Java tutorials
http://docs.oracle.com/javase/tutorial/uiswing/index.html
 
Mike Hoton’s slides/sample code from CSE 331 Sp12 (lectures 23,
24 with more extensive widget examples)
http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect23-GUI.pdf
http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect24-Graphics.pdf
h
t
t
p
:
/
/
c
o
u
r
s
e
s
.
c
s
.
w
a
s
h
i
n
g
t
o
n
.
e
d
u
/
c
o
u
r
s
e
s
/
c
s
e
3
3
1
/
1
2
s
p
/
l
e
c
t
u
r
e
s
/
l
e
c
t
2
3
-
G
U
I
-
c
o
d
e
.
z
i
p
http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect24-Graphics-code.zip
 
Good book that covers this (and much more): 
Core Java
 vol. I by
Horstmann & Cornell
There are other decent Java books out there too
 
3
 
CSE331 Spring 2015
 
Why study GUIs?
 
Er, because graphical user interfaces are pretty common (duh 
)
And it’s fun!
 
Classic example of using inheritance to organize large class
libraries
The best (?) example of OOP’s strengths
 
Work with a huge API – and learn how (not) to deal with all of it
 
Many core 
design patterns
 show up: callbacks, listeners, event-
driven programs, decorators, façade
 
4
 
CSE331 Spring 2015
 
What not to do…
 
 
Don’t try to learn the whole library: There’s way too much
 
Don’t memorize – look things up as you need them
 
Don’t miss the main ideas, fundamental concepts
 
Don’t get bogged down implementing eye candy
 
5
 
CSE331 Spring 2015
 
Main topics to learn
 
Organization of the AWT/Swing library
Names of essential widgets/components
 
Graphics and drawing
Repaint callbacks, layout managers, etc.
 
Handling user events
 
Building GUI applications
MVC, user events, updates, …
 
6
 
CSE331 Spring 2015
 
A very short history (1)
 
Java’s standard libraries have supported GUIs from the beginning
 
Original Java GUI: 
AWT
 (Abstract Window Toolkit)
Limited set of user interface elements (widgets)
Mapped Java UI to host system UI widgets
Lowest common denominator
“Write once, debug everywhere”
 
 
7
 
CSE331 Spring 2015
 
A very short history (2)
 
Swing
: Newer GUI library, introduced with Java 2 (1998)
 
Basic idea: underlying system provides only a blank window
Swing draws all UI components directly
Doesn’t use underlying system widgets
 
Not a total replacement for AWT:  Swing is implemented on top of
core AWT classes and both still coexist
 
Use Swing, but deal with AWT when you must
 
8
 
CSE331 Spring 2015
 
GUI terminology
 
window
: A first-class citizen of the graphical desktop
Also called a 
top-level container
Examples: 
frame
, dialog box, applet
 
component
: A GUI 
widget
 that resides in a window
Called 
controls
 in many other languages
Examples: button, text box, label
 
container
: A component that hosts (holds) components
Examples: frame, applet, 
panel
, box
 
9
 
CSE331 Spring 2015
 
Some components…
 
CSE331 Spring 2015
 
10
 
Component and container classes
 
Every GUI-related class
descends from 
Component
,
which contains dozens of basic
methods and fields
Examples: 
getBounds
,
isVisible
,
setForeground
, …
 
“Atomic” components: labels,
text fields, buttons, check boxes,
icons, menu items…
 
Many components are
containers
 – things like panels
(
JPanel
) that can hold nested
subcomponents
 
11
 
CSE331 Spring 2015
 
Swing/AWT inheritance hierarchy
 
Component  
(AWT)
Window
Frame
JFrame
  
(Swing)
JDialog
 
Container
JComponent
 
(Swing)
JButton        JColorChooser    JFileChooser
JComboBox      JLabel           JList
JMenuBar       JOptionPane      JPanel
JPopupMenu     JProgressBar     JScrollbar
JScrollPane    JSlider          JSpinner
JSplitPane     JTabbedPane      JTable
JToolbar       JTree            JTextArea
JTextField     ...
 
12
 
CSE331 Spring 2015
 
Component properties
 
Zillions.  Each has a 
get
 (or 
is
) accessor and a 
set
 modifier.
Examples: 
getColor,setFont,isVisible
, …
 
CSE331 Spring 2015
 
13
 
Types of containers
 
Top-level containers: 
JFrame
, 
JDialog
, …
Often correspond to OS windows
Usually a “host” for other components
Live at top of UI hierarchy, not nested in anything else
 
Mid-level containers: panels, scroll panes, tool bars
Sometimes contain other containers, sometimes not
JPanel
 is a general-purpose component for drawing or
hosting other UI elements (buttons, etc.)
 
Specialized containers: menus, list boxes, …
 
Technically, all 
JComponent
s are containers
 
14
 
CSE331 Spring 2015
 
JFrame
 – top-level window
 
Graphical window on the screen
 
Typically holds (hosts) other components
 
Common methods:
JFrame(String
 
title
)
: 
constructor, title optional
setDefaultCloseOperation(int
 
what
)
What to do on window close
JFrame.EXIT_ON_CLOSE 
terminates application
setSize(int
 
width
, int
 
height
)
:
 set size
add(Component
 
c
)
:
 add component to window
setVisible(boolean
 
b
)
:
 make window visible or not
 
15
 
CSE331 Spring 2015
 
Example
 
 
 
 
 
SimpleFrameMain.java
 
16
 
CSE331 Spring 2015
 
JPanel
 – a general-purpose container
 
Commonly used as a place for graphics, or to hold a collection
of button, labels, etc.
 
Needs to be added to a window or other container:
frame.add(new JPanel(…))
 
JPanel
s can be nested to any depth
 
Many methods/fields in common with 
JFrame
 (since both inherit
from 
Component
)
Advice: can’t find a method/field?  Check the superclasses
 
A particularly useful method:
setPreferredSize(Dimension 
d
)
 
17
 
CSE331 Spring 2015
 
Containers and layout
 
What if we add several components to a container?
How are they positioned relative to each other?
Answer: each container has a 
layout manger
 
CSE331 Spring 2015
 
18
 
Layout managers
 
Kinds:
FlowLayout
 (left to right [changeable], top to bottom)
Default for 
JPanel
Each row centered horizontally [changeable]
 
BorderLayout
 (“center”, “north”, “south”, “east”, “west”)
Default for 
JFrame
No more than one component in each of 5 regions
(Of course, component can itself be a container)
 
GridLayout
 (regular 2-D grid)
 
Others... (some are incredibly complex)
 
FlowLayout 
and 
BorderLayout 
should be good enough for now…
 
19
 
CSE331 Spring 2015
 
pack()
 
Once all the components are added to their containers, do this to
make the window visible:
pack();
setVisible(true);
 
pack()
 figures out the sizes of all components and calls the
container’s layout manager to set locations in the container
(recursively as needed)
 
If your window doesn’t look right, you may have forgotten 
pack()
 
20
 
CSE331 Spring 2015
 
Example
 
 
 
 
 
SimpleLayoutMain.java
 
21
 
CSE331 Spring 2015
 
Graphics and drawing
 
So far so good – and very boring…
 
What if we want to actually draw something?
A map, an image, a path, …?
 
Answer: Override method 
paintComponent
Components like 
JLabel
 provide a suitable 
paintComponent
that (in 
JLabel
’s case) draws the label text
Other components like 
JPanel
 typically inherit an empty
paintComponent
 and can override it to draw things
 
Note: As we’ll see, 
we
 override 
paintComponent 
but 
we
 
don’t
 call it
 
22
 
CSE331 Spring 2015
 
Example
 
 
 
 
 
SimplePaintMain.java
 
23
 
CSE331 Spring 2015
 
Graphics methods
 
Many methods to draw various lines, shapes, etc., …
 
Can also draw images (pictures, etc.):
I
n
 
t
h
e
 
p
r
o
g
r
a
m
 
(
n
o
t
 
i
n
 
p
a
i
n
t
C
o
m
p
o
n
e
n
t
)
:
Use AWT’s “Toolkit” to load an image:
Image pic =
    Toolkit.getDefaultToolkit()
       .getImage(
file-name (with path)
);
Then in 
paintComponent
:
g.drawImage(pic, …);
 
24
 
CSE331 Spring 2015
 
Graphics
 vs 
Graphics2D
 
Class 
Graphics
 was part of the original Java AWT
Has a procedural interface:
 
g.drawRect(…), g.fillOval(…), …
 
Swing introduced 
Graphics2D
Added an object interface – create instances of 
Shape
 like
Line2D
, 
Rectangle2D
, etc., and add these to the
Graphics2D 
object
 
Actual parameter to 
paintComponent
 is always a 
Graphics2D
Can always cast this parameter from 
Graphics 
to
Graphics2D
Graphics2D 
supports both sets of graphics methods
Use whichever you like for CSE 331
 
25
 
CSE331 Spring 2015
 
So who calls 
paintComponent
?
And when??
 
Answer: the window manager calls 
paintComponent
whenever
 
it wants!!!
 
 (a callback!)
When the window is first made visible, and whenever after
that some or all of it needs to be 
repainted
 
C
o
r
o
l
l
a
r
y
:
 
p
a
i
n
t
C
o
m
p
o
n
e
n
t
 
m
u
s
t
 
a
l
w
a
y
s
 
b
e
 
r
e
a
d
y
 
t
o
 
r
e
p
a
i
n
t
r
e
g
a
r
d
l
e
s
s
 
o
f
 
w
h
a
t
 
e
l
s
e
 
i
s
 
g
o
i
n
g
 
o
n
You have no control over when or how often
You must store enough information to repaint on demand
 
If “you” want to redraw a window, call 
repaint()
 from the
program (
not
 from 
paintComponent
)
Tells the window manager to schedule repainting
Window manager will call 
paintComponent
 when it
decides to redraw (soon, but maybe not right away)
Window manager may combine several quick 
repaint()
requests and call 
paintComponent()
 only once
 
26
 
CSE331 Spring 2015
 
Example
 
 
 
 
 
FaceMain.java
 
27
 
CSE331 Spring 2015
How repainting happens
28
program
window manager (UI)
It’s worse than it looks!
Your program and the
window manager are
running 
concurrently
:
Program thread
User Interface thread
Do not attempt to mess
around – follow the rules
and nobody gets hurt!
Asynchronous
Callback
CSE331 Spring 2015
 
Crucial
 rules for painting
 
Always override 
paintComponent(g)
 if you want to draw on a
component
Always call 
super.paintComponent(g)
 first
N
E
V
E
R
,
 
E
V
E
R
,
 
E
V
E
R
 
c
a
l
l
 
p
a
i
n
t
C
o
m
p
o
n
e
n
t
 
y
o
u
r
s
e
l
f
Always paint the entire picture, from scratch
U
s
e
 
p
a
i
n
t
C
o
m
p
o
n
e
n
t
s
 
G
r
a
p
h
i
c
s
 
p
a
r
a
m
e
t
e
r
 
t
o
 
d
o
 
a
l
l
 
t
h
e
d
r
a
w
i
n
g
.
 
 
O
N
L
Y
 
u
s
e
 
i
t
 
f
o
r
 
t
h
a
t
.
 
 
D
o
n
t
 
c
o
p
y
 
i
t
,
 
t
r
y
 
t
o
 
r
e
p
l
a
c
e
 
i
t
,
 
o
r
m
e
s
s
 
w
i
t
h
 
i
t
.
 
 
I
t
 
i
s
 
q
u
i
c
k
 
t
o
 
a
n
g
e
r
.
D
O
N
T
 
c
r
e
a
t
e
 
n
e
w
 
G
r
a
p
h
i
c
s
 
o
r
 
G
r
a
p
h
i
c
s
2
D
 
o
b
j
e
c
t
s
 
Fine print: Once you are a certified™ wizard, you may find reasons
to do things differently, but that requires deeper understanding of
the GUI library’s structure and specification
 
29
 
CSE331 Spring 2015
 
What’s next – and not
 
Major topic for next lecture is how to handle user interactions
We already know the core idea: it’s a big-time use of the
observer pattern
 
Beyond that you’re on your own to explore all the wonderful
widgets in Swing/AWT.
Have fun!!
(But don’t sink huge amounts of time into eye candy)
 
30
 
CSE331 Spring 2015
Slide Note
Embed
Share

Introduction to Java graphics, Swing/AWT libraries, event-driven programming, user interaction, essential terminology, and perspective in software design & implementation using Java. The material covers organization of AWT/Swing library, essential widgets/components, graphics, user events, and building GUI applications.


Uploaded on Sep 12, 2024 | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. CSE 331 Software Design & Implementation Dan Grossman Spring 2015 Java Graphics and GUIs (Based on slides by Mike Ernst, Dan Grossman, David Notkin, Hal Perkins)

  2. The plan Today: introduction to Java graphics and Swing/AWT libraries Then: event-driven programming and user interaction None of this is comprehensive only an overview and guide to what you should expect to be out there Some standard terminology and perspective Credits: material taken from many places; including slides and materials by Ernst, Hotan, Mercer, Notkin, Perkins, Stepp; Reges; Sun/Oracle docs & tutorial; Horstmann; Wikipedia; others, folklore, CSE331 Spring 2015 2

  3. References Very useful start: Sun/Oracle Java tutorials http://docs.oracle.com/javase/tutorial/uiswing/index.html Mike Hoton s slides/sample code from CSE 331 Sp12 (lectures 23, 24 with more extensive widget examples) http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect23-GUI.pdf http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect24-Graphics.pdf http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect23-GUI-code.zip http://courses.cs.washington.edu/courses/cse331/12sp/lectures/lect24-Graphics-code.zip Good book that covers this (and much more): Core Java vol. I by Horstmann & Cornell There are other decent Java books out there too CSE331 Spring 2015 3

  4. Why study GUIs? Er, because graphical user interfaces are pretty common (duh ) And it s fun! Classic example of using inheritance to organize large class libraries The best (?) example of OOP s strengths Work with a huge API and learn how (not) to deal with all of it Many core design patterns show up: callbacks, listeners, event- driven programs, decorators, fa ade CSE331 Spring 2015 4

  5. What not to do Don t try to learn the whole library: There s way too much Don t memorize look things up as you need them Don t miss the main ideas, fundamental concepts Don t get bogged down implementing eye candy CSE331 Spring 2015 5

  6. Main topics to learn Organization of the AWT/Swing library Names of essential widgets/components Graphics and drawing Repaint callbacks, layout managers, etc. Handling user events Building GUI applications MVC, user events, updates, CSE331 Spring 2015 6

  7. A very short history (1) Java s standard libraries have supported GUIs from the beginning Original Java GUI: AWT (Abstract Window Toolkit) Limited set of user interface elements (widgets) Mapped Java UI to host system UI widgets Lowest common denominator Write once, debug everywhere CSE331 Spring 2015 7

  8. A very short history (2) Swing: Newer GUI library, introduced with Java 2 (1998) Basic idea: underlying system provides only a blank window Swing draws all UI components directly Doesn t use underlying system widgets Not a total replacement for AWT: Swing is implemented on top of core AWT classes and both still coexist Use Swing, but deal with AWT when you must CSE331 Spring 2015 8

  9. GUI terminology window: A first-class citizen of the graphical desktop Also called a top-level container Examples: frame, dialog box, applet component: A GUI widget that resides in a window Called controls in many other languages Examples: button, text box, label container: A component that hosts (holds) components Examples: frame, applet, panel, box CSE331 Spring 2015 9

  10. Some components CSE331 Spring 2015 10

  11. Component and container classes Every GUI-related class descends from Component, which contains dozens of basic methods and fields Examples: getBounds, isVisible, setForeground, Component Lots of AWT components Container Atomic components: labels, text fields, buttons, check boxes, icons, menu items Various AWT containers JComponent Many components are containers things like panels (JPanel) that can hold nested subcomponents Tons of JComponents JPanel JFileChooser CSE331 Spring 2015 11

  12. Swing/AWT inheritance hierarchy Component (AWT) Window Frame JFrame(Swing) JDialog Container JComponent(Swing) JButton JColorChooser JFileChooser JComboBox JLabel JList JMenuBar JOptionPane JPanel JPopupMenu JProgressBar JScrollbar JScrollPane JSlider JSpinner JSplitPane JTabbedPane JTable JToolbar JTree JTextArea JTextField ... CSE331 Spring 2015 12

  13. Component properties Zillions. Each has a get (or is) accessor and a set modifier. Examples: getColor,setFont,isVisible, name type background Color border Border enabled boolean focusable boolean font Font foreground Color height, width int visible boolean tooltip text String Dimension description background color behind component border line around component whether it can be interacted with whether key text can be typed on it font used for text in component foreground color of component component's current size in pixels whether component can be seen text shown when hovering mouse various sizes, size limits, or desired sizes that the component may take CSE331 Spring 2015 size, minimum / maximum / preferred size 13

  14. Types of containers Top-level containers: JFrame, JDialog, Often correspond to OS windows Usually a host for other components Live at top of UI hierarchy, not nested in anything else Mid-level containers: panels, scroll panes, tool bars Sometimes contain other containers, sometimes not JPanel is a general-purpose component for drawing or hosting other UI elements (buttons, etc.) Specialized containers: menus, list boxes, Technically, all JComponents are containers CSE331 Spring 2015 14

  15. JFrame top-level window Graphical window on the screen Typically holds (hosts) other components Common methods: JFrame(Stringtitle): constructor, title optional setDefaultCloseOperation(intwhat) What to do on window close JFrame.EXIT_ON_CLOSE terminates application setSize(intwidth, intheight): set size add(Componentc): add component to window setVisible(booleanb): make window visible or not CSE331 Spring 2015 15

  16. Example SimpleFrameMain.java CSE331 Spring 2015 16

  17. JPanel a general-purpose container Commonly used as a place for graphics, or to hold a collection of button, labels, etc. Needs to be added to a window or other container: frame.add(new JPanel( )) JPanels can be nested to any depth Many methods/fields in common with JFrame (since both inherit from Component) Advice: can t find a method/field? Check the superclasses A particularly useful method: setPreferredSize(Dimension d) CSE331 Spring 2015 17

  18. Containers and layout What if we add several components to a container? How are they positioned relative to each other? Answer: each container has a layout manger CSE331 Spring 2015 18

  19. Layout managers Kinds: FlowLayout (left to right [changeable], top to bottom) Default for JPanel Each row centered horizontally [changeable] BorderLayout( center , north , south , east , west ) Default for JFrame No more than one component in each of 5 regions (Of course, component can itself be a container) GridLayout (regular 2-D grid) Others... (some are incredibly complex) FlowLayout and BorderLayout should be good enough for now CSE331 Spring 2015 19

  20. pack() Once all the components are added to their containers, do this to make the window visible: pack(); setVisible(true); pack() figures out the sizes of all components and calls the container s layout manager to set locations in the container (recursively as needed) If your window doesn t look right, you may have forgotten pack() CSE331 Spring 2015 20

  21. Example SimpleLayoutMain.java CSE331 Spring 2015 21

  22. Graphics and drawing So far so good and very boring What if we want to actually draw something? A map, an image, a path, ? Answer: Override method paintComponent Components like JLabel provide a suitable paintComponent that (in JLabel s case) draws the label text Other components like JPanel typically inherit an empty paintComponent and can override it to draw things Note: As we ll see, we override paintComponent but wedon t call it CSE331 Spring 2015 22

  23. Example SimplePaintMain.java CSE331 Spring 2015 23

  24. Graphics methods Many methods to draw various lines, shapes, etc., Can also draw images (pictures, etc.): In the program (notin paintComponent): Use AWT s Toolkit to load an image: Image pic = Toolkit.getDefaultToolkit() .getImage(file-name (with path)); Then in paintComponent: g.drawImage(pic, ); CSE331 Spring 2015 24

  25. Graphics vs Graphics2D Class Graphics was part of the original Java AWT Has a procedural interface: g.drawRect( ), g.fillOval( ), Swing introduced Graphics2D Added an object interface create instances of Shape like Line2D, Rectangle2D, etc., and add these to the Graphics2D object Actual parameter to paintComponent is always a Graphics2D Can always cast this parameter from Graphics to Graphics2D Graphics2D supports both sets of graphics methods Use whichever you like for CSE 331 CSE331 Spring 2015 25

  26. So who calls paintComponent? And when?? Answer: the window manager calls paintComponent wheneverit wants!!! (a callback!) When the window is first made visible, and whenever after that some or all of it needs to be repainted Corollary: paintComponent must always be ready to repaint regardless of what else is going on You have no control over when or how often You must store enough information to repaint on demand If you want to redraw a window, call repaint() from the program (not from paintComponent) Tells the window manager to schedule repainting Window manager will call paintComponent when it decides to redraw (soon, but maybe not right away) Window manager may combine several quick repaint() requests and call paintComponent() only once CSE331 Spring 2015 26

  27. Example FaceMain.java CSE331 Spring 2015 27

  28. How repainting happens program window manager (UI) repaint() It s worse than it looks! Your program and the window manager are running concurrently: Program thread paintComponent(g) User Interface thread Do not attempt to mess around follow the rules and nobody gets hurt! Asynchronous Callback CSE331 Spring 2015 28

  29. Crucial rules for painting Always override paintComponent(g) if you want to draw on a component Always call super.paintComponent(g) first NEVER, EVER, EVER call paintComponent yourself Always paint the entire picture, from scratch Use paintComponent sGraphics parameter to do all the drawing. ONLYuse it for that. Don t copy it, try to replace it, or mess with it. It is quick to anger. DON T create new Graphics or Graphics2D objects Fine print: Once you are a certified to do things differently, but that requires deeper understanding of the GUI library s structure and specification wizard, you may find reasons CSE331 Spring 2015 29

  30. Whats next and not Major topic for next lecture is how to handle user interactions We already know the core idea: it s a big-time use of the observer pattern Beyond that you re on your own to explore all the wonderful widgets in Swing/AWT. Have fun!! (But don t sink huge amounts of time into eye candy) CSE331 Spring 2015 30

More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#