1 / 67 COP 3503 FALL 2012 SHAYAN JAVED LECTURE 14 Programming Fundamentals using Java 1
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1 / 671
COP 3503 FALL 2012SHAYAN JAVED
LECTURE 14
Programming Fundamentals using Java
2 / 67
Graphical-User Interfaces
(GUIs)
3 / 67
So far...
Only created text-based programs
No fancy graphics (buttons! menus! text-fields!)
4 / 67
Graphical-User Interfaces (GUI)
Going to look at how to create GUIs in Java
5 / 67
Graphical-User Interfaces (GUI)
Going to look at how to create GUIs in Java
Use the SWING API (for desktop-programs)
6 / 67
Graphical-User Interfaces (GUI)
Going to look at how to create GUIs in Java
Use the SWING API (for desktop-programs)
Use the AWT API (for Java Applets – on the web)
7 / 67
The SWING API
Used to create desktop applications.
8 / 67
The SWING API
Used to create desktop applications.
Uses the Model-View-Controller software engineering design pattern.
9 / 67
Model-View-Controller design
Model: Manages the behavior and data of the application. Changes state.
10 / 67
Model-View-Controller design
Model: Manages the behavior and data of the application. Changes state.
View: Renders the model into a form for interaction.
(Button, textbox, checkbox, etc.)
11 / 67
Model-View-Controller design
Model: Manages the behavior and data of the application. Changes state.
View: Renders the model into a form for interaction.
(Button, textbox, checkbox, etc.) Controller:
Receives user input and initiates a response by interacting with the model.
12 / 67
The SWING API
Example:
Scrabble
13 / 67
The GUI API
Use the NetBeans IDE for easy drag-and-drop creation.
14 / 67
The GUI API
Use the NetBeans IDE for easy drag-and-drop creation.
But we are going to focus on basic code
15 / 67
The GUI API
3 Groups of classes:
Component Classes: Buttons, Labels, TextFields, etc.
16 / 67
The GUI API
3 Groups of classes:
Component Classes: Buttons, Labels, TextFields, etc.
Container Classes: Frames, Panels, Applets, etc.
17 / 67
The GUI API
3 Groups of classes:
Component Classes: Buttons, Labels, TextFields, etc.
Container Classes: Frames, Panels, Applets, etc.
Helper Classes: Graphics, Color, Font, etc.
18 / 67
The SWING API
Simple Window
Represented by the JFrame class
19 / 67
The SWING API
import javax.swing.JFrame;
public static void main(String[] args) {
JFrame frame = new JFrame(“A Title”);
frame.setSize(400, 300);
frame.setLocation(10, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
20 / 67
The SWING API – add components
import javax.swing.*;
public static void main(String[] args) {
JFrame frame = new JFrame(“A Title”);
JButton button = new JButton(“OK”);
frame.add(button);
frame.setSize(400, 300);
...
}
21 / 67
The SWING API – add components
A JFrame containts a content pane.
22 / 67
The SWING API – add components
A JFrame containts a content pane.
Content pane = instance of java.awt.Container;
23 / 67
The SWING API – add components
A JFrame containts a content pane.
Content pane = instance of java.awt.Container;
Objects are added to it frame.add( Component )
24 / 67
The SWING API – add components
A JFrame containts a content pane.
Content pane = instance of java.awt.Container;
Objects are added to it frame.add( Component ) frame.remove( Component )
25 / 67
Layout Managers
Components in content pane are laid out by layout managers.
26 / 67
Layout Managers
Components in content pane are laid out by layout managers.
Multiple types: FlowLayout GridLayout BorderLayout
27 / 67
Layout Managers - FlowLayout
Components arranged left to right in order.
One row fills up, a new row is started
28 / 67
Layout Managers - FlowLayout
java.awt.FlowLayout
Properties: alignment: int (CENTER/LEFT/RIGHT/etc.) hgap, vgap: int (the gaps – default: 5 pixels)
29 / 67
Layout Managers - FlowLayout
java.awt.FlowLayout
Properties: alignment: int (CENTER/LEFT/RIGHT/etc.) hgap, vgap: int (the gaps – default: 5 pixels)
Constructors: FlowLayout() FlowLayout(alignment, hgap, vgap)
30 / 67
Layout Managers - FlowLayout
public class ShowFlowLayout extends JFrame {
public ShowFlowLayout() {
// set the flow layout
setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20);
add(new JButton(“Button”));
add(new JTextField(8));
}
}
31 / 67
Layout Managers - GridLayout
Arrange components in a grid (matrix) formation. Placed left-to-right.
32 / 67
Layout Managers - GridLayout
Arrange components in a grid (matrix) formation. Placed left-to-right.
Properties: rows, columns: int hgap, vgap: int (the gaps – default: 5 pixels)
33 / 67
Layout Managers - GridLayout
public class ShowGridLayout extends JFrame {
public ShowGridLayout() {
// set the Grid layout – 3 rows, 2 columns
setLayout(new GridLayout(3, 2, 10, 10);
add(new JButton(“Button”));
add(new JTextField(8));
}
}
34 / 67
Layout Managers - BorderLayout
Default Layout for ContentPanes (Jframe)
Divides container into 5 areas: East, West, South, North, Center Components are added into one of these areas
Properties: hgap, vgap: int (the gaps – default: 5 pixels)
35 / 67
Layout Managers - BorderLayout
public class ShowBorderLayout extends JFrame {
public ShowBorderLayout() {
// set the Border Layout
setLayout(new BorderLayout(10, 10);
add(new JButton(“Button”), BorderLayout.EAST);
add(new JTextField(8), BorderLayout.WEST);
}
}
36 / 67
The SWING API
Looked at adding Components to the Window (Frame).
And how to lay them out.
37 / 67
The SWING API
Looked at adding Components to the Window (Frame).
And how to lay them out.
But often need “sub-windows” to create more complex interfaces.
38 / 67
Using JPanels as Subcontainers
Panels are subcontainers.
39 / 67
Using JPanels as Subcontainers
Panels are subcontainers.
Can add components to them
40 / 67
Using JPanels as Subcontainers
Panels are subcontainers.
Can add components to them
Also set layouts (default: FlowLayout)
41 / 67
Using JPanels as Subcontainers
Panels are subcontainers.
Can add components to them
Also set layouts (default: FlowLayout)
JPanel panel = new JPanel();
panel.add(new JButton(“OK”));
42 / 67
Using JPanels
// set the Border Layout of the JFrame
setLayout(new BorderLayout(10, 10);
// add a Panel to the West and East
JPanel p1 = new JPanel();
add(p1, BorderLayout.WEST);
JPanel p2 = new JPanel(); p2.setLayout(new GridLayout(2, 2, 5, 5));
add(p2, BorderLayout.EAST);
// add components to the east panel
p2.add(new JTextField(8)); p2.add(new JButton(“Button1”));
p2.add(new JTextField(8)); p2.add(new JButton(“Button2”));
// one button to the west panel
p1.add(new JButton(“Button3”));
43 / 67
Adding Components
Need to add components for interaction.
44 / 67
Adding Components
Need to add components for interaction.
Some useful ones: JButton JTextField JCheckBox JComboBox JMenuBar etc...
45 / 67
Model-View-Controller design
Model: (ALREADY IMPLEMENTED) Manages the behavior and data of the application. Changes state.
View: DONE Renders the model into a form for interaction.
(Button, textbox, checkbox, etc.) Controller:
Receives user input and initiates a response by interacting with the model.
46 / 67
Interaction and Events
Need to handle events from various GUI components.
47 / 67
Interaction and Events
Need to handle events from various GUI components.
Button clicks, text field changes, menu selection, etc.
48 / 67
Interaction and Events
Need to handle events from various GUI components.
Button clicks, text field changes, menu selection, etc.
Event-driven programming
49 / 67
Interaction and Events
Components generate different kinds of Events
50 / 67
Interaction and Events
Components generate different kinds of Events
ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent
51 / 67
Interaction and Events
Components generate different kinds of Events
ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent
Example: JButton generates ActionEvent
52 / 67
Interaction and Events
Components generate different kinds of Events
ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent
Example: JButton generates ActionEvent Mouse pressed/moved/dragged: MouseEvent
53 / 67
Interaction and Events
Components generate different kinds of Events
ActionEvent, ItemEvent, ChangeEvent, MouseEvent, KeyEvent
Example: JButton generates ActionEvent Mouse pressed/moved/dragged: MouseEvent JCheckBox: ItemEvent, ActionEvent
54 / 67
Interaction and Events
Need to “listen” for Events.
Source object fires an event, and an object interested in the event handles it. Latter object called a “listener”
55 / 67
Interaction and Events
For an object to be a listener, it needs to implement an interface.
56 / 67
Interaction and Events
For an object to be a listener, it needs to implement an interface.
Interface should correspond to the Event. ActionListener for ActionEvent MouseListener for MouseEvent KeyListener for KeyEvent
57 / 67
Interaction and Events
For an object to be a listener, it needs to implement an interface.
Interface should correspond to the Event. ActionListener for ActionEvent MouseListener for MouseEvent KeyListener for KeyEvent
object.addXListener(...)
58 / 67
ActionListener interface
class AClass implements ActionListener {
public void actionPerformed(ActionEvent e) {
// do whatever you want
}
}
59 / 67
ActionListener interface
class AClass implements ActionListener {
public void actionPerformed(ActionEvent e) {
// do whatever you want
}
}
JButton button = new JButton(“OK”);
button.addActionListener(new AClass());
60 / 67
ActionListener interface
ActionEvent methods:
61 / 67
ActionListener interface
ActionEvent methods: Object getSource(): returns the object on which
the Event initially occurred. (in java.util.EventObject)
62 / 67
ActionListener interface
ActionEvent methods: Object getSource(): returns the object on which
the Event initially occurred. (in java.util.EventObject)
String getActionCommand(): returns the command string
(text of the button for ex.)
63 / 67
ItemListener interface
Used for check boxes, toggle buttons, etc.
class AClass implements ItemListener {
public void itemStatechanged(ItemEvent e) {
// do whatever you want
}
}
64 / 67
ItemListener interface
ItemEvent methods:
Object getItem(): Component-specific object.
int getStateChange(): The new state of the associated object.
65 / 67
Interaction and Events
Look at some other useful Events:
MouseEvent KeyEvent WindowEvent
66 / 67
Interaction and Events
Look at some other useful Events:
MouseEvent KeyEvent WindowEvent
Experiment!
67 / 67
Summary
Windows and Panels Layouts Add Components
Add Listeners Handle Events
Related Documents
