Advanced Java Class

slimwhimperSoftware and s/w Development

Nov 3, 2013 (3 years and 7 months ago)

94 views

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


}


}


}