1. Swing Advanced HCI (IAT 351)
TA: Syavash Nobarany

2. Swing & AWT AWT: Abstract Windowing Toolkit Swing: new with Java2
import java.awt.*
Swing: new with Java2
import javax.swing.*
Extends AWT
Tons o’ new improved components

3. Partial AWT and Swing Class Hierarchy
java.lang.Object
CheckboxGroup
Component
MenuComponent
Button
Canvas
Checkbox
Choice
Container
Label
List
Scrollbar
TextComponent
JComponent
Scrollpane
Panel
Window
AbstractButton
JLabel
JList
JPanel
JScrollpane
Applet
Dialog
Frame
JButton
JApplet
JDialog
JFrame
java.awt.*
javax.swing.*

4. Swing Features Pluggable look and feel
Accessibility API: for people with disabilities
Undo Framework API: supports unlimited numbers of actions to undo and redo
Flexible Deployment: run within a browser as an applet or Java Web Start
CDE/Motif
Windows
Metal

5. Swing Set Demo
J2sdk/demo/jfc/SwingSet3

6. GUI Component API Java: GUI component = class Properties Methods
Events
JButton

7. Using a GUI Component Create it Configure it Add it Listen to it
Instantiate object: b = new JButton(“press me”);
Configure it
Properties: b.text = “press me”; [avoided in java]
Methods: b.setText(“press me”);
Add it
panel.add(b);
Listen to it
Events: Listeners
JButton

8. Event-Driven UIs Old model (e.g., UNIX shell, DOS)
Interaction controlled by system, user queried for input when needed by system
Event-Driven Interfaces (e.g., GUIs)
Interaction controlled by user
System waits for user actions and then reacts
More complicated programming and architecture

9. Event Dispatch Loop Event Queue Event Loop (runs in dedicated thread)
Queue of input events
Event Loop (runs in dedicated thread)
Remove next event from queue
Determine event type
Find proper component(s)
Invoke callbacks on components
Repeat, or wait until event arrives
Mouse moved (t0,x,y)
Component
Invoked callback method
Update application state
Request repaint, if needed

10. Event Dispatch Window Panel Label TextArea Panel Button Button
Event Queue
Mouse moved (t0,x,y)
Mouse pressed (t1,x,y,1)
Mouse dragged (t2,x,y,1)
Key typed (t3, ‘F1’) …
(queues and dispatches incoming events in a dedicated thread)
Window
Panel
Label
TextArea
Panel
/* callback for TextArea */
public void mouseMoved(e) {
// process mouse moved event }
Button
Button

11. Events, Listeners, Adapters and Handler Methods
Listener / Adapter
Handler Methods
ActionEvent
ActionListener
actionPerformed
AdjustmentEvent
AdjustmentListener
adjustmentValueChanged
MouseEvent
MouseListener MouseAdapter
mouseClicked mouseEntered mouseExited mousePressed mouseReleased
KeyEvent
KeyListener
KeyAdapter
keyPressed keyReleased keyTyped
ComponentEvent
ComponentListener
ComponentAdapter
componentShown componentHidden componentMoved componentResized
Adapter classes with empty methods for Listener interfaces with >1 methods

12. Anatomy of an Application GUI
Internal structure
GUI
JFrame
JFrame
JPanel
containers
JPanel
JButton
JButton
JLabel
JLabel

13. Using a GUI Component Create it Configure it
Add children (if container)
Add to parent (if not JFrame)
Listen to it
order important

14. Build from bottom up Create: Add: (bottom up) Frame Panel Components
Listener
Create:
Frame
Panel
Components
Listeners
Add: (bottom up)
listeners into components
components into panel
panel into frame
JButton
JLabel
JPanel
JFrame

15. How does HelloWorld look like?
class HelloButtonListener implements ActionListener { private JButton button; HelloButtonListener(JButton b){ button = b; } public void actionPerformed(ActionEvent e){ button.setText("Hello World!");
import java.awt.event.*;
import javax.swing.*;
public class HelloAgain extends JFrame {
HelloAgain(){
super("Example: Swing GUI");
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
final JButton b = new JButton("Show message!");
b.addActionListener(new HelloButtonListener(b));
add(b);
setSize(250,100); }
public static void main(String[] args){
new HelloAgain().setVisible(true);
ActionEvent
Mouse click

16. Keyword “super” A method that overrides a superclass's method
Invoke the overridden method using “super”
Example:
public class Library extends AbstractLibrary {
@Override
public void printAddress() {
super.printAddress(); // calls AbstractLibrary’s printAddress
System.out.println(address); } …

17. Layout Managers
A layout manager helps in arranging the components in a container
Each layout manager:
Encapsulates an algorithm for positioning and sizing of components
Automatically calculates the coordinates of each component it manages
If a container is resized, the layout manager readjusts the placement of the components

18. Layout Manager Heuristics
null
FlowLayout
none, programmer sets x,y,w,h
Left to right,
Top to bottom
BorderLayout
GridLayout n c w e s

19. null layout JFrame f = new JFrame(“title”); JPanel p = new JPanel( );
JButton b = new JButton(“press me”);
b.setBounds(new Rectangle(10,10, 100,50));
p.setLayout(null); // x,y layout
p.add(b);
f.setContentPane(p);
press me

20. BorderLayout
Allows placing of components by using the geographic terms:
CENTER
EAST
NORTH
SOUTH
WEST
The components are placed around the edges
The component in the center uses the remaining space
import java.awt.*;
import java.swing.*;
import java.awt.event.*;
class BorderExample extends JFrame {
BorderExample() {
super("Example: BorderLayout");
setLayout(new BorderLayout());
add(new Button("Center"),BorderLayout.CENTER);
add(new Button("East"),BorderLayout.EAST);
add(new Button("North"),BorderLayout.NORTH);
add(new Button("South"),BorderLayout.SOUTH);
add(new Button("West"),BorderLayout.WEST);
setSize(200,200); }
public static void main(String[] args)
new BorderExample().setVisible(true);

21. GridLayout
Automatically arranges components in a grid of rows and columns
The container is divided into equal-sized cells, and one component is placed in each cell
import java.awt.*;
import java.swing.*;
import java.awt.event.*;
class GridExample extends JFrame {
GridExample() {
super("Example: GridLayout");
setLayout(new GridLayout(2,2));
add(new Button("1,1"));
add(new Button("1,2"));
add(new Button("2,1"));
add(new Button("2,2"));
setSize(250,100); }
public static void main(String[] args)
new GridExample().setVisible(true);

22. FlowLayout Set layout mgr before adding components press me then me
JFrame f = new JFrame(“title”);
JPanel p = new JPanel( );
FlowLayout L = new FlowLayout( );
JButton b1 = new JButton(“press me”);
JButton b2 = new JButton(“then me”);
p.setLayout(L);
p.add(b1);
p.add(b2);
Set layout mgr before adding components
press me
then me

23. Combinations
JButton
JButton
JTextArea

24. Combinations JButton JButton JFrame n JPanel: BorderLayout c
JPanel: FlowLayout
JTextArea

25. Menu, MenuBar and MenuItem
import java.awt.*;
import java.awt.event.*;
import java.swing.*;
class MenuExample extends JFrame {
MenuExample(){
super("Example: MenuBar");
final MenuBar mb = new MenuBar();
setMenuBar(mb);
final Menu m = new Menu("File");
MenuItem mi;
mi = new MenuItem("Exit");
mi.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent ae){
System.exit(0); }
});
m.add(mi);
mb.add(m);
setSize(250,100);
public static void main(String[] args){
new MenuExample().setVisible(true);
A frame may contain a menu bar with options
When the mouse is clicked on an option a drop down menu appears
Each menu consists of one or more menu items

26. JOptionPane Examples

27. JPanel Panel is the simplest container class
import java.swing.*;
import java.awt.event.*;
class PanelExample extends JFrame {
PanelExample(){
super("Example: Panel");
final Panel p = new JPanel();
p.add(new JButton("1"));
p.add(new JButton("2"));
p.add(new JButton("3"));
add(p);
setSize(250,100); }
public static void main(String[] args){
new PanelExample().setVisible(true);
Panel is the simplest container class
A panel provides space in which an application can attach any other component, including other panels
The default layout manager for a panel is the FlowLayout manager

28. Swing Architecture 2 important cases
Features of a good system architecture: Easy to
Understand
Change
Debug
Reuse
Design Principle: Reduced coupling
2 important cases
View form Logic/Model
Model from Database

29. Separating View from Logic/Model
Model-View-Controller pattern
Provides for a good way to partition work and create a modular design
MVC components
Model
Data storage, no presentation elements
View
No data storage, presentation elements
Controller
Glue to tie the model and the view together

30. Modified MVC in Swing JList contains the visual properties
ListModel: Contains the data in the list
JList
UI Manager
List Model
List UI

31. Applets JApplet is like a JFrame Already has a panel
Access panel with JApplet.getContentPane( )
import javax.swing.*;
class hello extends JApplet {
public void init(){
JButton b = new JButton(“press me”);
getContentPane().add(b); }
contentPane
JButton

32. Applet Methods Called by browser: init( ) - initialization
start( ) - resume processing (e.g. animations)
stop( ) - pause
destroy( ) - cleanup
paint( ) - redraw stuff (‘expose’ event)

33. Application + Applet Command line Browser JFrame or JApplet
import javax.swing.*;
class helloApp {
public static void main(String[] args){
// create Frame and put my mainPanel in it
JFrame f = new JFrame(“title”);
mainPanel p = new mainPanel();
f.setContentPane(p);
f.show(); }
class helloApplet extends JApplet {
public void init(){
// put my mainPanel in the Applet
getContentPane().add(p);
// my main GUI is in here:
class mainPanel extends JPanel {
mainPanel(){
setLayout(new FlowLayout());
JButton b = new JButton(“press me”);
add(b);
Command line
Browser
JFrame or
JApplet
contentPane
JPanel
JButton

34. Thank you