Transcript Human Computer Interaction

2006
The University of Auckland | New Zealand
SOFTENG 350
YEAR
Programming
Object-Oriented GUIs
II
Swing Components and Events
SOFTENG 350 – Lecture 17
2006
Organizational Stuff
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Lab on Thursday 10-12. Now: GTL and FTL (CS
Building)
• Next lab on 11th May: Swing exercises.
– Layout manager
– GUI components: lists, text, buttons, dialogs
• Lab next week, on 19th May: guided tour to JSP
technology
– Downloading, installing and running a Tomcat web
server
– Implementing and deploying a first Java Servlet
– Implementing and deploying a first Java Server
Page
2006
Don’t call us, we’ll call you !
Summary
The University of Auckland | New Zealand
SOFTENG 350
YEAR
The Hollywood-Principle (don’t call us we call you) means
the OO call back mechanism: the way object-oriented APIs
are customized by developers. The developer (i) extends
API classes and overrides template methods or (ii)
implements interfaces. The developer then instantiates
objects and passes them in method calls to the API.
Don’t call us
and we won’t
call you.
With Objects, subtype
polymorphism and dynamic
binding OOP languages provide a
typed, higher-order parameter
passing mechanism. Code can be
encapsulated in an object and
therefore passed as a parameter
in a type-safe manner.
2006
Don’t ask what kind !
Summary
The University of Auckland | New Zealand
SOFTENG 350
YEAR
If you have some objects that are used identical but
behave differently, make their classes implement a
common interface. The interface can be seen as a
contract or protocol the single objects adhere to. In
client code that uses the objects, use the objects as
objects of their common supertype. The OOP dynamic
binding mechanism knows the correct type and executes
the correct service. You do not have to clutter up your
service code with asking for types. The defined common
interface serves as an inbuilt documentation that is kept
under surveillance of the OOP language type checker. You
cannot introduce a new subclass without implementing all
the methods of the interface.
2006
Partial AWT and Swing
Class Hierarchy
java.lang.Object
The University of Auckland | New Zealand
SOFTENG 350
YEAR
CheckboxGroup
Component
MenuComponent
Button Canvas Checkbox Choice Container Label List Scrollbar TextComponent
JComponent
AbstractButton
JLabel
JList
Scrollpane
JPanel
JButton
java.awt.*
JScrollpane
Panel
Window
Applet
Dialog
JApplet
JDialog JFrame
javax.swing.*
Frame
2006
AWT vs. Swing
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• AWT Abstract Windowing Toolkit
– Original Java GUI toolkit
– Lowest-common denominator for all Java host
environments
– Java standard, e.g., works even with old Browsers
– Robust / thread-safe
• SWING
– Flexible, powerful, but rather complex add-on
– Richer set of GUI components
– Pluggable Look-and-Feel Support
– Internationalization
– Not thread safe
2006
Swing Design Principles
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• A graphical user interface is built as a containment
hierarchy of GUI components
• Model Concept. Data displayed by a GUI component
(so called model) are cleanly separated from their
screen presentation (so called view)
• Events / Event Listeners / Event Objects. Defined
Events that stem from human computer interaction (a
window has been moved, the mouse has been clicked)
trigger event listeners. Information about the
triggering event is submitted to the event listener as
an event object.
2006
The Initial Swing GUI
Containment Hierarchy
The University of Auckland | New Zealand
SOFTENG 350
YEAR
aTopLevelContainer:
JFrame or JDialog or JApplet
rootPane:
JRootPane
(JPanel) glassPane:
java.awt.Component
layeredPane:
JLayeredPane
(JPanel) contentPane:
java.awt.Container
optional
menuBar:
JMenuBar
2006
The Initial Swing GUI
Containment Hierarchy
Frame / Dialog / Applet
SOFTENG 350
YEAR
a 3D model
enables menus to
pop up above the
content pane
Root Pane
Layered Pane
The University of Auckland | New Zealand
File Edit
Undo
Redo
Cut
allows for
interception of
mouse events and
painting across
GUI components
Content Pane
Glass Pane
2006
Concrete Example
Containment Hierarchy
The University of Auckland | New Zealand
SOFTENG 350
YEAR
JMenu fileMenu = new JMenu("File");
fileMenu.add("New");
fileMenu.add("Open");
fileMenu.add("Close");
JMenu editMenu = new JMenu("Edit");
editMenu.add("Undo");
editMenu.add("Redo");
editMenu.add("Cut");
JMenuBar mymenubar = new JMenuBar();
mymenubar.add(fileMenu);
mymenubar.add(editMenu);
JFrame myframe = new JFrame("My Frame");
myframe.setJMenuBar(mymenubar);
File Edit
New
Open
Close
File Edit
Undo
Redo
Cut
2006
Swing Components
The University of Auckland | New Zealand
SOFTENG 350
YEAR
•
•
•
•
•
•
•
Top-Level Containers
General-Purpose Containers
Special-Purpose Containers
Basic Controls
Text Components
Uneditable Information Displays
Interactive Displays of Highly Formatted Information
2006
Top-Level Containers
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• GUI components that are on the top of a containment
hierarchy
• Top-level containers do not inherit from JComponent
JFrame. Full GUI application
JDialog. For the creation of customized
Dialogs. For standardized dialogs use
JOption pane instead.
JApplet
2006
General-Purpose Containers
JPanel
The University of Auckland | New Zealand
SOFTENG 350
YEAR
JScrollPane
JSplitPane
JTabbedPane
JToolBar
2006
Special-Purpose Containers
JInternalFrame
The University of Auckland | New Zealand
SOFTENG 350
YEAR
JLayeredPane
2006
Basic Controls
JButton
SOFTENG 350
YEAR
The University of Auckland | New Zealand
JCheckbox
JRadioButton and ButtonGroup
The University of Auckland | New Zealand
SOFTENG 350
2006
Basic Controls
Combobox
YEAR
List
Menu
Slider
Spinner
2006
Text Components
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Text Controls:
– JTextField
– JPasswordField
– JFormattedTextField
• Plain Text Areas: JTextArea
• Styled Text Areas:
– JEditorPane
– JTextPane
2006
Uneditable
Information Displays
The University of Auckland | New Zealand
SOFTENG 350
YEAR
JLabel
JProgressBar
JToolTip
2006
Interactive Displays of Highly
Formatted Information
SOFTENG 350
YEAR
The University of Auckland | New Zealand
JColorChooser
JTable
JFileChooser
JTree
2006
Models of GUI Components
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Data displayed by a GUI component (so called model) are
cleanly separated from their screen presentation (so called
view)
• Origin of terminology: Model-View-Controller (Smalltalk)
• A GUI component can have several models. More precisely, a
model can be:
– Displayed data (e.g. list items - ListModel)
– Information about state (selected item - ListSelectedModel)
• Advantages
– Non-volatile concept for displayed data: no redundant data
structures are necessary
– The GUI model concept is integrated with the GUI event
concept. Changes of the model trigger events and can
therefore be observed in a well-defined way.
2006
Using Models - Example
SOFTENG 350
YEAR
listModel = new DefaultListModel();
listModel.addElement("Alan Sommerer");
….
The University of Auckland | New Zealand
list = new JList(listModel);
public void actionPerformed(ActionEvent e) {
int index = list.getSelectedIndex();
listModel.remove(index);
}
2006
Swing Event Concept
The University of Auckland | New Zealand
SOFTENG 350
YEAR
event
object
event
source
event
event
listener
a.k.a event handler
a.k.a event processing
2006
Swing Event Concept
The University of Auckland | New Zealand
SOFTENG 350
YEAR
aJButton
anActionEvent
anActionListener
button pressed
Class ActionEvent extends AWTEvent {
Object getSource()
}
Interface ActionListener extends EventListener {
void actionPerformed(ActionEvent e)
}
public class SwingApplication implements ActionListener {
public Component createComponents() {
button.addActionListener(this);
}
public void actionPerformed(ActionEvent anActionEvent) {
event processing code
}
}
2006
Kinds of Events
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Low-level events versus semantic events
• Listeners supported by all Swing Components
– Component listener
– Focus listener
– Key listener
– Mouse listener
– Mouse-motion listener
– Mouse-wheel listener
• Component specific event listeners
– Action
– Caret
– Change
– Document, undoable edit
– Item
– List selection
– Window
2006
Event Adapter
• Example: MouseListener versus Mouse Adapter
SOFTENG 350
YEAR
void mouseClicked(MouseEvent e)
The University of Auckland | New Zealand
void mouseEntered(MouseEvent e)
void mouseExited(MouseEvent e)
void mousePressed(MouseEvent e)
void mouseReleased(MouseEvent e)
2006
Swing and Threads
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Swing is not thread-safe
• There is one event-dispatching thread
• The single-thread rule: once a Swing component has
been realized, all code that might affect or depend
on the state of that component should be executed in
the event-dispatching thread.
• The responsiveness rule: Don’t do time-consuming
tasks in event listeners. Spawn new threads for those
instead.
The responsiveness rule
The single-thread rule
2006
Exceptions to the
Single-Thread Rule
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• A few methods are marked in the API as being threadsafe: This method is thread safe, although most Swing
methods are not.
• No contradiction to the rule: construction before the
realization:
public static void main(String[] args) {
JFrame f = new JFrame();
construction
f.pack();
f.show();
no more construction !!
}
}
2006
Swing Thread Safety
Counterexample
The University of Auckland | New Zealand
SOFTENG 350
YEAR
public static void main( String args[ ] ){
final DefaultListModel model = new DefaultListModel();
JList list = new JList( model );
JFrame frame = new JFrame();
frame.getContentPane().add( list );
frame.setVisible( true );
new Thread(){ public void run() {
setPriority( Thread.MIN_PRIORITY );
while ( true ) model.addElement("FOO");
}}.start();
new Thread(){ public void run() {
setPriority( Thread.MIN_PRIORITY );
while ( true ) model.removeElement("FOO");
}}.start();
}}
2006
Swing Thread Safety
Counterexample
The University of Auckland | New Zealand
SOFTENG 350
YEAR
Error message from the runtime system:
Exception in thread “AWT-Event-Queue-0”
java.lang.ArrayIndexOutOfBoundsException: 4145 >= 4145
at java.util.Vector.elementAt(Unkown Source)
Code from the API implementation:
public synchronized Object elementAt( int index ) {
if (index >= elementCount) {
throw new ArrayIndexOutOfBoundsException(
index + " >= " + elementCount);
}
}
2006
Submitting Code to the
Event-Dispatching Thread
The University of Auckland | New Zealand
SOFTENG 350
YEAR
javax.swing.SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGUI();
}
});
javax.swing.SwingUtilities.invokeAndWait(new Runnable() {
public void run() {
createAndShowGUI();
}
});
2006
Directed Reading
•
Using Swing Components
– Using Top-Level Containers
– Using Models
– The JComponent Class
– Using Text Components
– Text Component Features
– The Text Component API
– How to Use Buttons, Check Boxes,
and Radio Buttons
– How to Make Dialogs
– How to Use Labels
– How to Use Lists
– How to Use Panels
– How to Use Tool Tips
•
Writing Event Listeners
– Introduction to Event Listeners
– General Information about Writing
Event Listeners
– Listeners Supported by Swing
Components
– Implementing Listeners for Commonly
Handled Events
– How to Write an Action Listener
– How to Write a List Data Listener
– How to Write a Mouse Listener
– How to Write a Mouse-Motion Listener
– Listener API Table
•
Using Other Swing Features
– How to Use Borders
– How to Use Threads
•
•
Laying Out Components Within a Container
– A Visual Guide to Layout Managers
– Using Layout Managers
– How Layout Management Works
– How to Use GridBagLayout
Performing Custom Painting
– How Swing Components Are Displayed
– Introduction to Painting Concepts
– Implementing a Custom Component
The University of Auckland | New Zealand
SOFTENG 350
YEAR
2006
Summary / Next Topics
The University of Auckland | New Zealand
SOFTENG 350
YEAR
• Summary
– Don’t ask what kind / Don’t call us, we’ll call you
– Containment hierarchies of GUI components
– Models of Swing GUI components
– Swing GUI event concept
– Swing and Threads
– Directed Reading
• Next lab: Swing exercises.
• Next tutorial on 12th May:
– MS Visual Studio Designer
– HTML WYSIWYG Editor
– Basic Swing drawing
– Game programming taster (timing)
• Next lecture: Programming Dynamic Web Pages
• Lab next week: guided tour to JSP technology