Transcript 4thed.Ch04

More GUI
▮ Events, Actions, and Listeners
▮ The Visual Editor
▮ More GUI component properties
Non-graded assg part1 part2
Chapter 4
© copyright Janson Industries 2014
1
WindowListener
▮ A class that reacts to window events
▮ Window events
▮ Clicking X to close the window
▮ Resizing the window
▮ This is another one of those JDK classes
that makes your programming life easier!
Chapter 4
© copyright Janson Industries 2014
2
WindowListener
▮ For a class to be a WindowListener it
must:
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;
▮ In the class header have:
… implements WindowListener {
Chapter 4
© copyright Janson Industries 2014
3
WindowListener
▮ Also, the WindowListener must have these
seven methods:
public void windowClosing(WindowEvent e) {
System.exit(0); }
public
public
public
public
public
public
Chapter 4
void
void
void
void
void
void
Ends the JVM
windowClosed(WindowEvent e) {}
windowDeiconified(WindowEvent e) {}
windowIconified(WindowEvent e) {}
windowOpened(WindowEvent e) {}
windowActivated(WindowEvent e) {}
windowDeactivated(WindowEvent e) {}
© copyright Janson Industries 2014
4
WindowListener
▮ Two ways you can do this:
▮ 1. Create a separate class to act as the
window listener
▮ Then in the frame class:
▮ Create the window listener object
▮ Add the window listener object to the frame
this.addWindowListener(new WindowListener());
▮ 2. Have the frame implement WindowListener
▮ Add the frame to itself
this.addWindowListener(this);
Chapter 4
© copyright Janson Industries 2014
5
WindowListener
▮ extends relates two classes as super/sub
classes
▮ implements defines the class as a
WindowListener (in addition to whatever
the extends specifies, e.g. Frame)
▮ addWindowListener makes the
WindowListener part of the frame
▮ Just like creating & adding a label to the frame
Chapter 4
© copyright Janson Industries 2014
6
Create a separate
class to act as the window listener
WindowListener
Must import WindowEvent
and implement Window
Listener
Chapter 4
© copyright Janson Industries 2014
7
WindowListener
Create the window
listener object
Chapter 4
Add the window
listener object to the frame
© copyright Janson Industries 2014
8
Option 2: Define the frame as a WindowListener
Have the frame import and implement WindowListener
Add the frame to itself
Either way, close
button will now work
Chapter 4
© copyright Janson Industries 2014
9
Superclass/subclass
▮ Problem with option 2
▮ Every frame must have code
▮ Alternative 3rd solution
▮ Use inheritance/specialization to avoid coding these
methods multiple times
▮ Have a superclass with needed code
▮ Advantages:
▮ Save programmer time
▮ Less chance of error
▮ Easier to modify
▮ P.S. Inherited methods and variables can be
overridden in subclass (more on this later)
Chapter 4
© copyright Janson Industries 2014
10
Visual Editor
▮ Create a new CustomerFrame class
that implements WindowListener
▮ CustomerFrame constructor will expect
a Customer variable
▮ CustomerFrame retrieves info from
Customer object and puts into labels
▮ Will create a Visual Class and use the
Visual Editor
Chapter 4
© copyright Janson Industries 2014
11
New Customer Example
Create a Customer Customer
object, assign to
Object
variable c, set
object’s
properties
Retrieve & display
Customer object
properties
Create a CustomerFrame CustomerFrame
CustApp object, pass c, assign to
Object
variable cf
Chapter 4
© copyright Janson Industries 2014
12
Visual Class
▮ Click File, New, Visual Class
Chapter 4
© copyright Janson Industries 2014
13
1
2
Use the Style
box to specify
Frame as
superclass
Specify CustomerFrame
4
Implement by
clicking Add..
3
Have RAD generate main
and window event
handling methods
Chapter 4
© copyright Janson Industries 2014
14
Start typing WindowListener, select WindowListener
from the AWT package, click OK
Chapter 4
© copyright Janson Industries 2014
15
Will use main method for testing. Click Finish.
Chapter 4
© copyright Janson Industries 2014
16
import java.awt.Frame;
import java.awt.event.WindowEvent;
import java.awt.event.WindowListener;
VE initially generates this code
public class CustomerFrame extends Frame implements WindowListener {
private static final long serialVersionUID = 1L;
public void windowOpened(WindowEvent e) {}
public void windowClosing(WindowEvent e) {}
public void windowClosed(WindowEvent e) {}
public void windowIconified(WindowEvent e) {}
public void windowDeiconified(WindowEvent e) {}
public void windowActivated(WindowEvent e) {}
public void windowDeactivated(WindowEvent e) {}
public static void main(String[] args) {}
public CustomerFrame() {
super();
initialize();
}
private void initialize() {
this.setSize(300, 200);
this.setTitle("Frame");
}
}
Chapter 4
Initialize method used to set frame
properties and add components
© copyright Janson Industries 2014
17
Design pane
Open
Component
Palette
Source pane
Chapter 4
© copyright Janson Industries 2014
18
Visual Editor
▮ Components stored in trays
▮ Click on tray to open/close
▮ Click on component to select
▮ Then click on design pane to add selected
component
▮ Click on source pane to edit source
code
Chapter 4
© copyright Janson Industries 2014
19
Add components and change
some properties in design pane
Open/close
trays
Enter/change
source code
Chapter 4
Select a
component
Change all properties
in Properties pane
© copyright Janson Industries 2014
20
Visual Editor
▮ Make frame visible and layout null by
adding this source code into initialize
this.setLayout(null);
this.setVisible(true);
▮ Or change in Properties view
Chapter 4
© copyright Janson Industries 2014
21
Click Label in palette then
click on design pane to add
Should give the Label variable a meaningful name
Chapter 4
© copyright Janson Industries 2014
22
Or accept the default
Label's source code
and property values
are displayed
Chapter 4
© copyright Janson Industries 2014
23
Visual Editor
▮ Modify component in design pane,
properties pane, or source code
▮ VE does not name components well
(i.e. label, label1, label2, etc.)
▮ Right click component and select
rename field
Chapter 4
© copyright Janson Industries 2014
24
Specify new name, click OK, and
save all modified resources
VE changes all the source code
Chapter 4
© copyright Janson Industries 2014
25
Chapter 4
© copyright Janson Industries 2014
26
Labels
▮ Lots of label properties
▮ Foreground and background colors
▮ Size, Location
▮ Font style
▮ Alignment
▮ Some nice VE features to define labels
Chapter 4
© copyright Janson Industries 2014
27
Labels
▮ Select many components by
▮ Holding CTRL key and clicking each
OR
▮ Change pointer from selection to marquee
then click and drag around all the
components
Chapter 4
© copyright Janson Industries 2014
28
I’ve added 3
more labels
Click Marquee and pointer
changes from arrow to +
Click here
and drag...
...to here, so all components
are inside the dotted line box
Chapter 4
© copyright Janson Industries 2014
29
When released all
components selected, any
changes will change all
Alignment button
brings up
Alignment and size changes according
to the anchor component
Chapter 4
© copyright Janson Industries 2014
30
Anchor
▮ When selecting by Marquee, it is the
newest component
▮ When selecting by Selection, it is the
last component selected
▮ Anchor component indicated with solid
resize handles
Chapter 4
© copyright Janson Industries 2014
31
Changed pointer to Selection, then
reselected so oldest label is anchor
(held CTRL key, clicked each label)
Click left align
Chapter 4
© copyright Janson Industries 2014
32
Resize all by dragging any label resize handle
Chapter 4
© copyright Janson Industries 2014
33
Need to align labels vertically
Click distribution box
then distribute vertically
Chapter 4
© copyright Janson Industries 2014
34
Distributes evenly
within the box.
Make distribution box larger,
distribute vertically again
Chapter 4
© copyright Janson Industries 2014
35
Click distribution box button again (to deselect) ,
then close Customize Layout window
Drag labels to center on frame
Chapter 4
© copyright Janson Industries 2014
36
Visual Editor
▮ Rename the labels from top to bottom
▮ custNameLbl, shipToLbl1, shipToLbl2,
contactInfo
▮ Make sure custNameLbl is on top
▮ Add code to:
▮ receive a Customer variable
▮ move the info from the Customer object
into the labels
Chapter 4
© copyright Janson Industries 2014
37
Visual Editor
▮ Need to create a class variable of type
Customer
▮ private Customer customer = null;
▮ Change constructor to accept a
Customer variable
▮ public CustomerFrame(Customer cust) {
▮ In constructor, move method variable
(cust) to class variable (customer) –
why?
▮ customer = cust;
Chapter 4
© copyright Janson Industries 2014
38
Non-graded assg:
Change CustApp so that a
CustomerFrame object is created
and change Customer Frame so that
info is displayed like this
Enable the Window Close button
Chapter 4
© copyright Janson Industries 2014
39
Visual Editor Probs
▮ “Error trying to set new file into editor”
▮ 1) Bring up a VE session and close it. Make sure no VE's are open.
2) Click Project, then Clean..., then click Clean All Projects radio
button, then OK button
3) Wait for build to complete.
4) Try VE again. It should work.
Chapter 4
© copyright Janson Industries 2014
40
Visual Editor Probs
▮ When creating, Visual Class not an option
▮ When RAD is installed the Visual Editor is not
in the default configuration
▮ You must change the configuration to include
the Visual Editor
▮ Go back to the Ch01a slides
▮ Slides 37 – 46 show how to change the
configuration to include VE
Chapter 4
© copyright Janson Industries 2010
41
ActionListener
▮ “Reacts” to actions on buttons and lists
▮ Actions
▮ Clicking a button
▮ Clicking a list item
▮ Need to add:
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
Chapter 4
© copyright Janson Industries 2014
42
ActionListener
▮ In the class header, define class as an
ActionListener by adding:
…extends Frame implements ActionListener {
▮ Add the ActionListener to a component:
▮ myButton.addActionListener(this);
▮ In the ActionListener class must define an
actionPerformed method
▮ This method is executed when an action occurs
Chapter 4
© copyright Janson Industries 2014
43
CustomerFrame1
▮ Create a visual class CustomerFrame1
▮ Implement both action and window
listeners
▮ Has a button that when pressed will
display the data
Chapter 4
© copyright Janson Industries 2014
44
CustomerFrame1
Initially displayed with no data
Click Display button…
Chapter 4
© copyright Janson Industries 2014
45
CustomerFrame1
… info displayed in labels
Chapter 4
© copyright Janson Industries 2014
46
Chapter 4
© copyright Janson Industries 2014
47
import
import
import
import
import
java.awt.Frame;
java.awt.event.ActionEvent;
java.awt.event.ActionListener;
java.awt.event.WindowEvent;
java.awt.event.WindowListener;
RAD took care of
imports and
class header
public class CustomerFrame1 extends Frame implements WindowListener,
ActionListener {
private static final long serialVersionUID = 1L;
public void actionPerformed(ActionEvent e) {}
public void windowActivated(WindowEvent e) {}
public void windowClosed(WindowEvent e) {}
:
:
:
:
public void windowOpened(WindowEvent e) {}
Took care of
actionPerformed
and window
methods
public static void main(String[] args) {}
public CustomerFrame1() {
super();
initialize();
}
Initialize sets Frame
props and (as added)
component
properties
© copyright Janson Industries
2014
48
private void initialize() {
this.setSize(300, 200);
this.setTitle("Frame");
}
}
Chapter 4
CustomerFrame1
▮ Notice that the “window” methods
don’t do anything
▮ Need to add code to remove window
this.dispose();
▮ “Code a little, test a little”
▮ Verify close button works by running app
▮ In main, instantiate a CustomerFrame1 object
▮ Then run CustomerFrame1 as application
Chapter 4
© copyright Janson Industries 2014
49
CustomerFrame1
▮ Nothing happens – why not?
▮ Never set Frame visible
▮ Wish I had created a useful frame superclass
that automatically did that!
▮ Add code to set visible then
▮ Run CustomerFrame1 as application
▮ Test close button
Chapter 4
© copyright Janson Industries 2014
50
Click Frame to select
and display properties
In properties pane, click
visible’s drop down
button and select true
Chapter 4
© copyright Janson Industries 2014
51
import
import
import
import
import
java.awt.Frame;
java.awt.event.ActionEvent;
java.awt.event.ActionListener;
java.awt.event.WindowEvent;
java.awt.event.WindowListener;
public class CustomerFrame1 extends Frame implements ActionListener, WindowListener{
public void actionPerformed(ActionEvent arg0) {}
public void windowOpened(WindowEvent arg0) {}
public void windowClosing(WindowEvent arg0) {
this.dispose();
}
:
:
:
:
:
public void windowDeactivated(WindowEvent arg0) {}
public static void main(String[] args) {
CustomerFrame1 cf1 = new CustomerFrame1();
public CustomerFrame1() {
super();
initialize();
}
private void initialize() {
this.setSize(300, 200);
this.setTitle("Frame");
this.setVisible(true);
}
}
Chapter 4
You need to
add to
source
}
VE added to source
© copyright Janson Industries 2014
52
CustomerFrame1
▮ If run and close button clicked,
nothing happens – why not?
▮ Never added WindowListener to the
frame
▮ This is why you should test often: catch errors
early!!
▮ Add code in initialize() to add
WindowListener and test
this.addWindowListener(this);
Chapter 4
© copyright Janson Industries 2014
53
CustomerFrame1
▮ Change source code so that
▮ Class Customer variable called customer
is created
▮ Constructor:
▮accepts a Customer variable called cust
▮assigns cust to the class variable customer
▮ Why?
▮So actionPerformed() can access the
Customer object
Chapter 4
© copyright Janson Industries 2014
54
CustomerFrame1
public class CustomerFrame1 extends Frame implements ActionListener, WindowListener
{
private Customer customer = null;
:
:
:
:
public CustomerFrame1(Customer cust) {
super();
customer = cust;
initialize();
}
:
:
:
:
}
Added
Chapter 4
© copyright Janson Industries 2014
55
Get an error: why? How fix?
Chapter 4
© copyright Janson Industries 2014
56
CustomerFrame1
▮ Our test in main does not pass the
required Customer variable
▮ In main must:
▮ Instantiate a Customer object and
assign to a Customer variable
▮ Pass Customer variable to
CustomerFrame1
Chapter 4
© copyright Janson Industries 2014
57
CustomerFrame1
public static void main(String[] args) {
Customer cust = new Customer();
cust.setCustName("Thrifty Food");
cust.setShipToStreet("1 Diet Lane");
cust.setShipToCity("Fasting");
cust.setShipToState("IN");
CustomerFrame1 cf1 = new CustomerFrame1(cust);
}
Added
Changed
▮ Let’s test that customer object is accessible
▮ In CustomerFrame1's constructor, add code to display
customer name in the console then run as app
System.out.println(customer.getCustName());
Chapter 4
© copyright Janson Industries 2014
58
Frame is
displayed
Make sure window
close button works
Name is displayed
in the console
Chapter 4
© copyright Janson Industries 2014
59
CustomerFrame1
▮ Add labels to hold info
▮ Add button to frame using VE
▮ Define button properties
▮ Including good names
▮ Tie button to ActionListener
▮ Code actionPerformed to retrieve info
from Customer object and put in labels
Chapter 4
© copyright Janson Industries 2014
60
Copy the Label definition statements from
CustFrame into CustomerFrame1
Chapter 4
© copyright Janson Industries 2014
61
RAD inserts the import statement
Chapter 4
© copyright Janson Industries 2014
62
Delete the System.out.println
statement and set the layout to null
Chapter 4
© copyright Janson Industries 2014
63
Switch to the design pane
Notice the labels are not on the frame
Chapter 4
© copyright Janson Industries 2014
64
Drag/drop the four labels
Increase the width of the labels
and the height of the frame to 250
Chapter 4
© copyright Janson Industries 2014
65
Click on the AWT button icon
Click on frame to add the button
Define the button properties so it looks like this
Chapter 4
© copyright Janson Industries 2014
66
For more complicated GUI components, RAD
creates a get method that sets all the properties
Add the actionListener to the button in the get
button method
Let’s test: add to the actionPerformed method:
System.out.println("listener is working");
Chapter 4
© copyright Janson Industries 2014
67
run
the CustomerFrame1,
click the Display button
Click Display button
Text should appear
Chapter 4
© copyright Janson Industries 2014
68
CustomerFrame1
▮ Code actionPerformed to retrieve info
from Customer object and put in labels
▮ Use Customer object’s getters and
concatenation to build label text
▮ Can cut and paste CustFrame code
into actionPerformed to overwrite the
println statement
Chapter 4
© copyright Janson Industries 2014
69
Chapter 4
© copyright Janson Industries 2014
70
Must change cust. to customer.
Can't do Replace All because main uses cust
.
Chapter 4
© copyright Janson Industries 2014
71
Chapter 4
© copyright Janson Industries 2014
72
Run, click Display
Why does data appear like this?
Chapter 4
© copyright Janson Industries 2014
73
CustomerFrame1
▮ In main, the test data wasn’t complete
▮ Only some properties were set
public static void main(String[] args) {
Customer cust = new Customer();
cust.setCustName("Thrifty Food");
cust.setShipToStreet("1 Diet Lane");
cust.setShipToCity("Fasting");
cust.setShipToState("IN");
CustomerFrame1 cf1 = new CustomerFrame1(cust);
}
Chapter 4
© copyright Janson Industries 2014
Only these
were set
74
Change CustApp to create a
CustomerFrame1 object
Run CustApp
Chapter 4
© copyright Janson Industries 2014
75
Click Display button
Notice that the JVM
automatically redisplays frame
after actionPerformed method
Chapter 4
© copyright Janson Industries 2014
76
New Customer Example
Non-graded assg: Do it!
Creates Customer
Customer
object, assigns to
Object Retrieves & displays
variable c, sets
Customer object
object’s
properties
properties
Creates a CustomerFrame1 CustomerFrame1
CustApp object, passes c, assigns
Object
to variable cf
Chapter 4
© copyright Janson Industries 2014
77
Non-graded Assg
▮ Export as one jar file
▮ Customer.java
▮ CustomerFrame.java
▮ CustomerFrame1.java
▮ CustApp.java
▮ Email the jar file as an email attachment
to [email protected]
Chapter 4
© copyright Janson Industries 2014
78