Advanced Java Class

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);


}


}


}