GUI
Lecture 10
Intro to GUI
GUI = Graphical User Interface
--
“Gooey”
Just because it’s “gooey” does not mean you may
write messy code.
•
GUI is the “view layer”, and we should try separating it from
the controller and model layers.
AWT = Abstract Windowing Toolkit
Swing = better versions of AWT classes
GUI terminology
Components
= buttons, text fields, frames, dialog boxes, scrollbars,
popup menus, scrollable lists, etc.
Containers
= things that hold Components. A container is also a
component. Examples: Panel, Window.
LayoutManagers
arrange Components inside of Containers.
Use
Graphics
objects to draw directly onto a component. This can
draw shapes, text, images, etc.
“
Painting
” is when a component is drawn onto the screen.
Events
occur when a user clicks the mouse, types on the keyboard,
types in a text field, or selects an item from a list.
Listeners
(or adapters) handle events, and are specific to a certain
type of event.
Java Foundation Classes (JFC)
AWT
Swing
Java 2D
(Accessibility API)
(Drag and Drop API)
A few important GUI packages
AWT (java.awt and subpackages)
•
Components / Containers
•
Don’t mix AWT and Swing components.
•
Layout Managers
•
AWT managers works on swing, and Swing also has some extra
managers.
•
Events
•
Listeners /Adapters
•
(Java2D (java.awt.geom))
Swing (javax.swing and subpackages)
•
Components is replacing AWT components
•
Has more layout managers
•
Has new types of events
•
Listeners and Adapters work similar
Swing vs. AWT
Don’t mix AWT with Swing, and always use Swing if available
AWT was original GUI API
–
quite limited!
•
not very platform independent
•
you must do double
-
buffering yourself
•
native windows consume a lot of system resources
Swing is built on AWT, and is a big improvement
•
mostly light
-
weight classes
•
100% pure java = platform independent, because it doesn’t depend on
native code
•
pluggable look and feel allows the program to reflect the platform it’s
currently running on
•
double buffers automatically
Note that Swing components start with “J”.
•
“Frame” refers to the old AWT class.
•
“JFrame” refers to the new Swing class.
Swing: HelloWorld
package examples.windows;
import javax.swing.JFrame;
import javax.swing.JLabel;
import java.awt.BorderLayout;
public class HelloWorld
extends JFrame
{
public HelloWorld( String titleText ) {
super( titleText );
setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
JLabel greeting = new JLabel( "Hello World!",
JLabel.CENTER );
getContentPane().add( greeting,
BorderLayout.CENTER );
setSize( 300, 100 );
setVisible( true );
}
public static void main( String[] args ) {
new HelloWorld( "Hello World! Sample" );
}
}
Swing Components
common swing components: see figure 6
-
3, p
393
-
396
MVC layers
•
The
model layer
is a separate class, which may be
shared by multiple Swing components
•
In Swing, the Controller and View layers of a
component are not separated, because of the nature
of GUI components
–
the view is the controller.
•
See figure 6
-
4 on page 397 & 398
Layout Managers
LayoutManagers arrange components within
Containers.
They account for things that you cannot know
at compile time, like differing screen
resolutions, platform differences, fonts, etc.
Containers are components, and child
containers can have a LayoutManger that is
different from their parent’s.
Using LayoutManagers
Create a new Container. It has a default
LayoutManager, which you can override by
calling the setLayout method on it.
LayoutManager classes:
•
BorderLayout
•
BoxLayout
•
CardLayout
•
FlowLayout
•
GridBagLayout
•
GridLayout
Layout Paradigms
BorderLayout
: North, South, East, West, and Center. figures 6
-
12 & 6
-
13
FlowLayout
: lines the components up horizontally from left to right. Can
specifiy justification; default is center. fig. 6
-
14
GridLayout
: has columns and rows. components are added left to right
and top to bottom, like a text editor. figure 6
-
15
GridbagLayout
: more flexible than GridLayout
–
components can be
added to any cell, and can span multiple rows and columns. figure 6
-
16
CardLayout
: imagine a deck of cards
–
only one component is visible at
a time.
BoxLayout
: components are in a single
-
file line, which can be horizontal
or vertical. figure 6
-
17
Note: the above figures are in a JTabbedPane, which does it’s own
LayoutManaging.
Example Layouts
Experiment with the Swing tutorials in Suns web site.
JTabbedPane
Events: The Hollywood model
“Don’t call us, we’ll call you.”
No polling loops. Don’t poll the
environment looking for events.
When an event ccurs, the event dispatch
thread will call you.
Events
Events are objects that encapsulate
changes in state that are initiated by the
user or operating system.
java.awt.event examples
•
KeyEvent, MouseEvent, PaintEvent,
WindowEvent
Javax.swing.event examples
•
ListSelectionEvent, MenuEvent, etc.
Selected methods of selected event classes
KeyEvent.getKeyCode()
MouseEvent.getPoint() (mouse location)
MouseEvent.getButton()
Listener / Adapters
Listener
–
interfaces
•
Flexibility
•
Each kind of event has a listener interface
•
KeyEvent / KeyListener etc.
Adapter classes
•
Convenience
–
you only have to implement
the methods you need.
How to create event handlers
1.
Define a class that implements some
chosen listener interface.
Adapter or interface implementation
2.
Register an instance of the class with
the component affected by the event.
•
Component.addxxxListener(xxxListener object)
addxxxListener
All components have the methods
•
addComponentListener, addFocusListener,
addMouseListener, addMouseMotionListener
Class myHandler implements TextListener {
public void textValueChanged(TextEvent e){
// implementation details omitted
}
}
TextListener t1 = new myHandler();
JTextArea t = new JTextArea();
t.addTextListener(t1);
Painting
You can override a Swing component’s
paintComponent
method if you don’t
want to use the component’s default appearance. Call
super.paintComponent (unless you want transparency).
Call
repaint
() when you want to explicitly refresh what the user is seeing.
Then the JVM first calls update() and then paint() for the current component.
Unless you are performing animation (games) you typically don’t have to
override the
paint
() method.
You can also override
update
() if you want close control over the refreshing
of
a part
of the component’s appearance. You may update selective areas of
the component.
Don’t call paintComponent() or paint() directly. Leave that to the event
dispatch thread.
Methods you can paint with
Graphics class
•
drawString
•
drawLine
•
drawRect
•
drawPolygon
•
drawArc
•
drawImage
•
fillRect
•
fillPolygon
•
fillArc
•
setColor
•
setFont
•
setXORMode( Color c)
•
gives colors that are an
XOR of c and what was
already there
–
fun to
play with
•
setPaintMode()
•
just overwrite what’s
there
–
this is the
default
Java 2D
Parts of API
•
Graphics2D class in java.awt
•
java.awt.geom
•
java.awt.font
•
java.awt.image
Advantages over Graphics class
•
antialiasing
smooths edges
•
can
fill
with contents other than a solid colors
•
(patterns, gradients…)
•
can use any system
font
•
printing
is easier (see chapter 7)
•
can paint
any shape
you want, not just predefined ones
•
“
Strokes
”
–
any width, and varying patterns (dashed, etc.)
•
Transformations. You can stretch, rotate, etc. anything you draw
GUI Task
static class ImageDisplayer extends JComponent {
private boolean showing = false;
private ImageIcon imageIcon =
new ImageIcon("images/happy
-
frog.gif");
private java.util.Timer timer = new java.util.Timer();
public void showImageBriefly() {
// fill in to show the image for 1.5 seconds,
// and then stop showing it
}
public void paintComponent(Graphics g) {
// fill in to draw a blue rectangle,
// and then paint the imageIcon inside of it
}
}
GUI Task Solution
static class ImageDisplayer extends JComponent {
private boolean showing = false;
private ImageIcon imageIcon = new ImageIcon("images/happy
-
frog.gif");
private java.util.Timer timer = new java.util.Timer();
public void showImageBriefly() {
showing = true;
repaint();
timer.schedule(new TimerTask() {
public void run() {
showing = false;
repaint();
}
}, 1500);
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
if (!showing) {
g.setColor(new Color(0,0,255));
g.fillRect(10, 10, imageIcon.getIconWidth()+10,
imageIcon.getIconHeight()+10);
imageIcon.paintIcon(this, g, 15,15);
}
}
}
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment