summary introduction introduction

SUMMARY  Introducing Swing  Main components  Layout management  Event handling GRAPHICS PROGRAMMING PROGRAMMAZIONE CONCORRENTE E DISTR. Università degli Studi di Padova Dipartimento di Matematica Corso di Laurea in Informatica, A.A. 2015 – 2016 [email protected] Programmazione concorrente e distribuita INTRODUCTION 2 Riccardo Cardin 4 INTRODUCTION  A little bit of history 
Riccardo Cardin Java 1.0 refers to the Abstract Window Toolkit (AWT) for simple GUI programming AWT delegates to the underlying OS the responsibility to create graphical components («peers»)  Look and feel of target platform  It was very hard to create high‐quality portable GUIs 

Java 1.2 intoduces Swing Graphic components are painted onto blank windows  The only functionality required from the underlying windowing system is a way to put up windows and to paint onto them  Build on top of AWT 
Programmazione concorrente e distribuita Riccardo Cardin 3 Programmazione concorrente e distribuita INTRODUCTION INTRODUCTION  Swing features  Swing Ocean look‐and‐feel 
A little bit slower than AWT 



Rich and convenient set of user interface elements Few dependencies on the underlying platform Consistent user experience across platforms 

Drawback: different look‐and‐feel from native GUIs Many different look‐and‐feels (themes) 

It’s not a real problem on modern machines Metal, Ocean and Synth (JSE 5.0), Nimbus (JSE 7.0, vector drawings) Package javax.swing: it is considered a Java ext. Programmazione concorrente e distribuita Riccardo Cardin 5 Riccardo Cardin Programmazione concorrente e distribuita MAIN COMPONENTS MAIN COMPONENTS  Frame  Let me explain what’s going on in here... 
Top level window, Frame (AWT) or JFrame (Swing) 
The only Swing component that is not painted on the canvas  Always use «J» components, which belong from Swing 

EventQueue.invokeLater(new Runnable() {
public void run() {
SimpleFrame frame = new SimpleFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
});
class SimpleFrame extends JFrame {
private static final int DEFAULT_WIDTH = 300;
private static final int DEFAULT_HEIGHT = 200;
public SimpleFrame() {
setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);
}
}
Programmazione concorrente e distribuita Riccardo Cardin By default a frame as size of 0 x 0 pixels, so SimpleFrame set the size of the frame in its ctor You have to define what should happen when the user closes the application’s frame 

JFrame.EXIT_ON_CLOSE: the program exit on close Event dispatch thread EventQueue.invokeLater(new Runnable() {
public void run() {
// Configuration statement
}
});

6 You have to do
ALWAYS in this way!!!
Finally, a frame has to be made visible, using setVisible(true)
7 Programmazione concorrente e distribuita Riccardo Cardin 8 MAIN COMPONENTS MAIN COMPONENTS  Frame hierarchy  Display information in a component 

Component / Windows
 Component is the base class of every GUI object  Resize and reshape actions 
set / get methods 
Use the content pane instead Components are instances of JComponent / JPanel 
Implement paintComponent method, that is called by the event handler every time a window needs to be redrawn class MyComponent extends JComponent {
public void paintComponent(Graphics g) {
// code for drawing
}}
Toolkit kit = Toolkit.getDefaultToolkit();
Adapter pattern Programmazione concorrente e distribuita A frame is considered a container for components Get the content pane and draw something on it
//
Container contentPane = frame.getContentPane();
Component c = /* . . . */;
contentPane.add(c);
Toolkit class  Used to bind some components to a particular native toolkit impl. 
DO NOT DRAW DIRECTLY ONTO A FRAME! 
Frame properties 


Riccardo Cardin 9 MAIN COMPONENTS Programmazione concorrente e distribuita Riccardo Cardin 10 Riccardo Cardin 12 MAIN COMPONENTS Used to organize the
menu bar and
content pane and to
implement
look-and-feel
Used to add
Components and to
draw something
onto the frame
Programmazione concorrente e distribuita Riccardo Cardin 11 Programmazione concorrente e distribuita LAYOUT MANAGEMENT LAYOUT MANAGEMENT  JDK has not form designer tools You need to write code to position (lay out) the UI components where you want them to be In general components are placed inside containers, and a layout

Container class
stores references to
itself
manager
determines the position and sizes of the components in the
container

Buttons, text fields, and other UI elements extend the class Component. Components can be placed inside containers, such as panel.  Containers can themselves be put inside other containers  Container extends Component
 Composite pattern 
Programmazione concorrente e distribuita Riccardo Cardin 13 LAYOUT MANAGEMENT Programmazione concorrente e distribuita Riccardo Cardin 14 LAYOUT MANAGEMENT  Composite pattern It is a composition
of Component
objects

Programmazione concorrente e distribuita Riccardo Cardin 15 In Swing, the problem is that leaf components are subclasses of composite class Programmazione concorrente e distribuita Riccardo Cardin 16 LAYOUT MANAGEMENT 
LAYOUT MANAGEMENT  Add 3 buttons to a JPanel
Flowlayout
 Elements are put in a row, sized at their preferred size 


public BorderLayoutExample(String title) {
super(title);
// Set the size of the window
setSize(300, 200);
// Add component to frame
addComponentsToPane(getContentPane());
}
If the horizontal space in the container is too small, the layout uses multiple rows. 

public class BorderLayoutExample extends JFrame {
Default layout manager for a panel Elements are centered horizontally by default Layout changes accordingly to container size Constructor permits to specify: private void addComponentsToPane(final Container pane) {
// Panel with FlowLayout as default layout manager
JPanel controls = new JPanel();
controls.add(new JButton("Button 1"));
controls.add(new JButton("Button 2"));
controls.add(new JButton("Button 3"));
// Content pane of the frame, BorderLayout as default
pane.add(controls, BorderLayout.SOUTH);
}
Left, right or center alignment  Vertical or horizontal gaps 
Elements are put in
rows
Programmazione concorrente e distribuita Riccardo Cardin 17 LAYOUT MANAGEMENT 
18  Build a window with 3 buttons at the bottom public class BorderLayoutExample extends JFrame {
Default layout manager of the JFrame content panel  BorderLayout.NORTH, BorderLayout.EAST...  Center is the default position 
public BorderLayoutExample(String title) {
super(title);
// Set the size of the window
setSize(300, 200);
// Add component to frame
addComponentsToPane(getContentPane());
}
The edge components are laid first When the container is resized, the dim. of the edge components are unchanged 
private void addComponentsToPane(final Container pane) {
// Panel with FlowLayout as default layout manager
JPanel controls = new JPanel();
controls.add(new JButton("Button 1"));
controls.add(new JButton("Button 2"));
controls.add(new JButton("Button 3"));
// Content pane of the frame, BorderLayout as default
pane.add(controls, BorderLayout.SOUTH);
}
It grows all components to fill the available space 
Use an intermediate JPanel to contain the elements 
Programmazione concorrente e distribuita Riccardo Cardin LAYOUT MANAGEMENT BorderLayout
 Defines 5 regions in which elements can be placed 
Programmazione concorrente e distribuita Riccardo Cardin 19 Programmazione concorrente e distribuita Riccardo Cardin 20 LAYOUT MANAGEMENT 
LAYOUT MANAGEMENT  Build a windows with 4 buttons put in 2 rows GridLayout
 Arranges all components in rows and columns like a spreadsheet public class GridLayoutExample extends JFrame {
public BorderLayoutExample(String title) {
super(title);
// Set the size of the window
setSize(300, 200);
// Add component to frame
addComponentsToPane(getContentPane());
}
private void addComponentsToPane(final Container pane) {
// Set GridLayout to the panelb
JPanel controls = new JPanel();
controls.setLayout(new GridLayout(2, 2));
controls.add(new JButton("Button 1"));
controls.add(new JButton("Button 2"));
controls.add(new JButton("Button 3"));
controls.add(new JButton("Button 4"));
pane.add(controls;
}
All components are given the same size (also in case of resizing of the window)  Usually used to model a small part of a UI, rather than the whole windows 

Components are added starting from the first entry in the first row, then the second entry and so on // Get the content pane and draw something on it
// Valuing with a 0 the number of rows will allow the layout to
// use as many rows as necessary
panel.setLayout(new GridLayout(4, 4));
Programmazione concorrente e distribuita Riccardo Cardin 21 LAYOUT MANAGEMENT 
22  Build a window with two cards public class CardLayoutExample extends JFrame {
// ...
private void addComponentsToPane(final Container pane) {
// ...
cards = new JPanel(new CardLayout());
cards.add(createCard1(), "Card 1");
cards.add(createCard2(), "Card 2");
}
private JPanel createCombo() {
// ...
We will introduce
// Add combo a listener
listeners in a
comboBox.addItemListener(new ItemListener() {
moment
@Override
public void itemStateChanged(ItemEvent e) {
// Get the layout
CardLayout layuot = (CardLayout) cards.getLayout();
layuot.show(cards, (String) e.getItem());
}
});
It is like playing card in a stack, where only the top card (component) is visible at any time You can ask for either the first or the last card You can ask to flip the deck backwards or forwards  You can specify a card with a specific name 

Programmazione concorrente e distribuita Riccardo Cardin LAYOUT MANAGEMENT CardLayout
 Used to model two or more components that share the same display space 
Programmazione concorrente e distribuita Riccardo Cardin 23 Programmazione concorrente e distribuita Riccardo Cardin 24 LAYOUT MANAGEMENT EVENT HANDLING  An operating environment constantly monitors events and reports them to the program 
The program decides what to do in response to these events 

Keystrokes, mouse clicks, and so on In Java (AWT) the developer has the full control on how the events are transmitted from the event source to events listeners Every object can be an event listener (delegation model) Event listeners register themself to an event source  Obsever pattern  Events are objects of type java.util.EventObject


Programmazione concorrente e distribuita Riccardo Cardin 25 EVENT HANDLING A listener object implements a listener interface An event source
registers a listener
An event source can register listener and send them event objects Event source
notifies the listener
button
JButton
= new Jbutton("OK");
button.addActionListener(listener); // Registering a listener


Event
source
class MyListener implements ActionListener {
public void actionPerformed(ActionEvent event) {
// React to the event goes here
}
}

26 EVENT HANDLING  Summarizing 
Riccardo Cardin Programmazione concorrente e distribuita The listener react
accordingly
The event source sends events to every registered listener The listener, using the event info, reacts accordingly Programmazione concorrente e distribuita Riccardo Cardin 27 Programmazione concorrente e distribuita Riccardo Cardin 28 EVENT HANDLING EVENT HANDLING Programmazione concorrente e distribuita Riccardo Cardin 29 Programmazione concorrente e distribuita EVENT HANDLING EVENT HANDLING  Let’s see a simple example  Let’s see a simple example show a panel populated with three buttons. When a button is
We will
clicked,
we want the background color of the panel to change to a
particular color.


To create a button, simply create a JButton object, giving to it a label or an icon // Create the buttons
JButton blueButton = new JButton("Yellow");
JButton blueButton = new JButton("Blue");
JButton redButton = new JButton("Red");
// Add them to a panel (flow layout anyone?)
buttonPanel.add(yellowButton);
buttonPanel.add(blueButton);
buttonPanel.add(redButton);
Programmazione concorrente e distribuita Riccardo Cardin 30 Then, let’s define button listeners class ColorAction implements ActionListener {
private Color backgroundColor; // The color to set to the panel
public ColorAction(Color c) {
backgroundColor = c;
}
public void actionPerformed(ActionEvent event) {
// set panel background color
}
}
// Create the listeners
ColorAction yellowAction = new ColorAction(Color.YELLOW);
ColorAction blueAction = new ColorAction(Color.BLUE);
ColorAction redAction = new ColorAction(Color.RED);
// Register listeners to buttons
yellowButton.addActionListener(yellowAction);
blueButton.addActionListener(blueAction);
redButton.addActionListener(redAction);
First of all, let’s create the buttons 
Riccardo Cardin 31 Programmazione concorrente e distribuita Riccardo Cardin 32 EVENT HANDLING EVENT HANDLING  Let’s see a simple example  Let’s see a simple example 
A problem rises: how can a listener modify a property of the panel? Can we go even further?  Let’s use anonymous inner classes to handle events public
void makeButton(String name, final Color backgroundColor)
JButton button = new JButton(name);
buttonPanel.add(button);
button.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent event) {
buttonPanel.setBackground(backgroundColor);
}); }
} 
Please, do not try to add listener’s func. to the frame  Violation of separation of concerns  Use inner classes instead! 
class ButtonFrame extends JFrame {
// The panel to change the color
private JPanel buttonPanel;
private class ColorAction implements ActionListener {
private Color backgroundColor;
public void actionPerformed(ActionEvent event) {
// Changing the color to the main class panel
buttonPanel.setBackground(backgroundColor);
}
}
}
Programmazione concorrente e distribuita Riccardo Cardin {
The inner class mechanism automatically generates a constructor that stores all final variables that are used  Closure anyone?! 
33 EVENT HANDLING Programmazione concorrente e distribuita Riccardo Cardin 34 EVENT HANDLING  Let’s see a simple example 
If the anonymous inner class method calls one method only, EventHandler class can be used 
Reflection mechanism loadButton.addActionListener(
EventHandler.create(ActionListener.class,
frame, "loadData"));

The statement frame.loadData() is executed in response of an event EventHandler.create(ActionListener.class,
frame, "loadData",
"source.text");

The statement frame.loadData(event.getSource.getText()) is executed Programmazione concorrente e distribuita Riccardo Cardin 35 Programmazione concorrente e distribuita Riccardo Cardin 36 EVENT HANDLING EVENT HANDLING  Not all events are simply as button clicks  Adapter pattern 
The listener WindowListener interface, that handles WindowEvent objects, has 7 methods 

Source interface
Adapt source
interface to target
 Object adapter windowActivated(WindowEvent e);
windowDeactivated(WindowEvent e);
}

Target interface
interface WindowListener {
public
void windowOpened(WindowEvent e);
void windowClosing(WindowEvent e);
void
windowClosed(WindowEvent e);
void windowIconified(WindowEvent e);
void
windowDeiconified(WindowEvent e);
void
void
Class adapter Probably you don’t need to defined them all! Each AWT listener interfaces with more than one method comes with a companion Adapter 
Implements all methods with "do nothing" operations Programmazione concorrente e distribuita Riccardo Cardin 37 Riccardo Cardin Programmazione concorrente e distribuita EVENT HANDLING EVENT HANDLING  What if you need to share the same behaviour Interface
Method
Params
Generated by
ActionListener
actionPerformed
ActionEvent
• getActionCommand
• getModifiers
ActionButton
JComboBox
JTextField
Timer
AdjustmentListener
adjustementValueChan
ged
AdjustementEvent
• getAdjustable
• getAdjustableType
• getValue
JScrollbar
ItemListener
itemStateChanged
ItemEvent
• getItem
• getItemSelectable
• getStateChange
AbstractButton
JComboBox
FocusListener
focusGained
focusLost
FocusEvent
• isTemporary
Component
KeyListener
keyPressed
keyReleased
keyTyped
KeyEvent
• getKeyChar
• getKeyCode
• getKeyModifiersText
• getKeyText
• isActionKey
Component
in response to more than one event? 
Use Action interface, that extends ActionListener
It encapsulates the description of the «command» and parameters that are necessary to carry out the command  Command pattern  AbstractAction is an adapter class provided by the JDK void actionPerformed(ActionEvent
event)
// Add
a property to the action object indexed by key
void putValue(String key, Object value)
a property indexed by key
// Get
Object getValue(String key)
 Then simply add the action to your UI components using constructor 
38 new JButton(new MyAction());
Programmazione concorrente e distribuita Riccardo Cardin 39 Programmazione concorrente e distribuita Riccardo Cardin 40 EVENT HANDLING Interface
MouseListener
MouseMotionListener
MouseWheelListener
WindowListener
...and so on CONCLUSIONS Method
Params
Generated by
mousePressed
mouseReleased
mouseEntered
mouseExited
mouseClicked
MouseEvent
• getClickCount
• getX
• getY
• getPoint
• translatePoint
Component
mouseDragged
mouseMoved
MouseEvent
Component
mouseWheelMoved
MouseWheelEvent
• getWheelRotation
• getScrollAmount
Component
windowClosing
windowOpened
windowIconified
windowDeiconified
windowClosed
windowActivated
windowDeactivated
WindowEvent
• getWindow
Window
Programmazione concorrente e distribuita Riccardo Cardin 41 EXAMPLES Programmazione concorrente e distribuita Riccardo Cardin 42 REFERENCES https://github.com/rcardin/pcd‐snippets 
Chap. 7 «Graphics Programming», Core Java Volume I ‐ Fundamentals, Cay Horstmann, Gary Cornell, 2012, Prentice Hall 
Chap. 8 «Event Handling», Core Java Volume I ‐ Fundamentals, Cay Horstmann, Gary Cornell, 2012, Prentice Hall 
Chap. 9 «User Interface Components with Swing», Core Java Volume I ‐ Fundamentals, Cay Horstmann, Gary Cornell, 2012, Prentice Hall 
How to Use FlowLayout https://docs.oracle.com/javase/tutorial/uiswing/layout/flow.html 
How to Use CardLayout https://docs.oracle.com/javase/tutorial/uiswing/layout/card.html 
How to Use Actions https://docs.oracle.com/javase/tutorial/uiswing/misc/action.html Programmazione concorrente e distribuita Riccardo Cardin 43 Programmazione concorrente e distribuita Riccardo Cardin 44