Download AS/400 Java

GUI Java
▮ Explain difference between:
▮ Applications/Applets/Servlets
▮ AWT/Swing/SWT
▮ Inheritance
▮ Basic AWT visual components
▮ UML (Unified Modeling Language)
Non-graded assg part 1 part2
Chapter 3
© copyright Janson Industries 2014
1
Apps/Applets/Servlets
▮ Apps are stored & executed on the client PC
▮ Applets are “called” by a web page. The
applet’s Java code
▮ Stored on the server
▮ Downloaded to the client PC
▮ Run by the client browser
▮ Servlets are stored and run on the server
▮ Servlets generate HTML that is sent to the client’s
browser
Chapter 3
© copyright Janson Industries 2014
2
Apps/Applets/Servlets
Apps
Applets
Stored on
client
Run on
client
X
X
Stored on
server
X
Servlets
Chapter 3
X
X
© copyright Janson Industries 2014
Run on
server
X
3
Apps/Applets/Servlets
Chapter 3
Stored on
Run on
Apps
client
client
Applets
server
client
Servlets
server
server
© copyright Janson Industries 2014
4
Client Apps
▮ Client based apps Adv:
▮ Fast: execute on client, no communication lag
▮ No catastrophic failure
▮ Client based apps DisAdv:
▮ Must install app on each client computer
▮
▮ Multiple copies of app:
▮ Take up more space
▮ Updating app more difficult/time consuming
Chapter 3
© copyright Janson Industries 2014
5
Server Apps
▮ Server based apps Adv:
▮ Accessible from any computer with a browser
▮ One copy of app
▮ Takes up little space
▮ Updates to app are fast
▮ Server based apps DisAdv:
▮ Catastrophic failure – server goes out, no
processing can occur
▮ Communication time lag – especially with applets
▮ Must download entire application before executing
Chapter 3
© copyright Janson Industries 2014
6
Java GUI Components
▮ Many sets of GUI components:
▮ AWT (Advanced Windowing Toolkit)
▮ Swing
▮ SWT (Simple Widget Toolkit)
▮ AWT implements each H/W platform’s
version of the GUI components
▮ Swing is consistent across all H/W (but
takes longer to “paint” the GUI)
Chapter 3
© copyright Janson Industries 2014
7
GUI Java
▮ As much as possible, SWT implements
each H/W’s platforms version of the
GUI components
▮ Provides the added Swing components
and functions
▮ Works differently than AWT and Swing
Chapter 3
© copyright Janson Industries 2014
8
GUI Java
▮ AWT and Swing have similar sets of GUI
components stored in packages (that are
part of the JDK):
▮ Frame - JFrame
▮ Button - JButton
▮ TextField - JTextField
▮ Label - JLabel
▮ To use the GUI components, must “import”
the AWT or Swing classes into your class
Chapter 3
© copyright Janson Industries 2014
9
GUI Java
FRAME
Chapter 3
JFRAME
© copyright Janson Industries 2014
10
Using GUI Components
▮ AWT GUI classes in java.awt package
▮ You can use them by fully specifying their
location
▮ java.awt.Label empName = new java.awt.Label();
▮ Or, use the import statement to identify the
java.awt package
▮ import tells complier to look in that location for
any non-fully specified classes
▮ Sorta like the path and classpath but for the
compiler not JVM or Windows
Chapter 3
© copyright Janson Industries 2014
11
GUI Components
// GUIEx.java
import java.awt.*;
Using import allows easier access to
the GUI components because you
don’t have to fully specify the
location of the GUI component
public class GUIEx extends Frame {
:
:
:
:
:
: We define this class as a Frame with the
extends “clause” in the class header
This make GUIEx a subclass of Frame
Chapter 3
© copyright Janson Industries 2014
12
Subclass/Superclass
▮ Subclasses inherit all methods and variables
of the superclass (also called Specialization)
▮ You can create superclasses to hold common
information and functions
▮ For instance:
▮ A Person superclass with name, address, and
phone number variables
▮ Subclasses Employee, Customer, and Supplier
would all get these variables
Chapter 3
© copyright Janson Industries 2014
13
Subclass/Superclass
Person
String name, addr, phnum;
Employee extends Person
String EmpNum;
name = "Joe";
addr="1 1st St";
phnum="111-1111";
Customer extends Person
String CustNum;
name = "Mary";
addr="2 2nd St";
phnum="222-2222";
Supplier extends Person
String SuppNum;
name = "Pat";
addr="3 3rd St";
phnum="333-3333";
▮ Subclasses inherit all methods and variables
of the superclass (aka Specialization)
Chapter 3
© copyright Janson Industries 2014
14
Create a new class (Cust2) – File, New, Class
Click Browse...
Chapter 3
© copyright Janson Industries 2014
15
Start typing “Frame”, select Frame, (and make sure its from
the java.awt package), click OK then Finish
Chapter 3
© copyright Janson Industries 2014
16
RAD creates a bare minimum class
Chapter 3
© copyright Janson Industries 2014
17
Labels
▮ Display constant text on a frame
▮ Must define a label object and,
optionally, set it’s text property
Label custNameLabel = new Label(“Joe Customer");
Chapter 3
© copyright Janson Industries 2014
18
But you get an error
Click light bulb icon to get possible solutions
Chapter 3
© copyright Janson Industries 2014
19
RAD will list solutions with most likely at top
Click a solution to show the solution code
Double click solution to insert code
Chapter 3
© copyright Janson Industries 2014
20
What happens if you click the Run button and why?
Chapter 3
© copyright Janson Industries 2014
21
When running, RAD first suggests saving changes
It’s usually a good idea: click OK
Chapter 3
© copyright Janson Industries 2014
22
Gotcha: if you click the Run button, RAD will run Cust1
(the last application that was run)
Chapter 3
© copyright Janson Industries 2014
23
Can display the Run drop down menu
Notice Cust1 is the first listed Run Configuration
This means it is the default application to be run
Can click Run Configurations...
Chapter 3
© copyright Janson Industries 2014
24
Specify Cust2
Click Run
What’s going to happen and why?
Chapter 3
© copyright Janson Industries 2014
25
Oops, forgot to create a main method
that instantiates (creates) a Cust2 object
Chapter 3
© copyright Janson Industries 2014
26
Getting Cust2 to work
▮ Since Cust2 will be instantiated you need
▮ A constructor for the class (i.e. must have
method called Cust2)
▮ In addition, to get the frame and labels
to work you must set their properties:
▮ Define sizes for the frame and labels
▮ Position the labels on the frame
▮ Make the frame visible
Chapter 3
© copyright Janson Industries 2014
27
Frames
▮ In the constructor, specify:
this.setSize(600, 400);
this.setLayout(null);
(this refers to “this object”, i.e. the Cust2 frame)
▮ Layout null tells the system not to use the
predefined BorderLayout
▮ You will position the components individually
Chapter 3
© copyright Janson Industries 2014
28
Labels
▮ In constructor, set label size & location:
▮ labelVariableName.setSize(length, height)
▮ labelVariableName.setLocation(from left, from top)
▮ Numbers are in pixels
▮ Example (after the label object is created
and after this.setLayout(null);) add:
▮ custNameLabel.setSize(100,10);
▮ custNameLabel.setLocation(155,135);
Chapter 3
© copyright Janson Industries 2014
29
Labels
▮ In the constructor, after the label
properties are set, add the label to the
frame object (referred to as this)
▮ this.add(custNameLabel);
▮ At the end of the constructor, make the
frame visible
▮ this.setVisible(true);
Chapter 3
© copyright Janson Industries 2014
30
main method
▮ In the main method, must create a Cust2
object
▮ We will assign it to a variable called
custTest
▮ Cust2 custTest = new Cust2();
▮ (Actually, don't need to create variable and assign object
because we will not reference the Cust2 object)
▮ Time to run!
Chapter 3
© copyright Janson Industries 2014
31
Display Run menu – notice Cust2 is default launch
Click Cust2 to run
Chapter 3
© copyright Janson Industries 2014
32
Results in Cust2 object being created (instantiated)
Chapter 3
© copyright Janson Industries 2014
33
Steps to Create and Display a
Working Frame
▮ 1. Create a class as a subclass of Frame
▮ 2. Set the following Frame properties:
▮ Layout to null
▮ Size
▮ Location (optional)
▮ Visible to true
▮ 3. To view the frame, create an instance
of the Frame subclass
Chapter 3
© copyright Janson Industries 2014
34
How to Create a Working Label
▮ 1. Import the Label class
▮ 2. Create a Label object
▮ 3. Set the following label properties:
▮ Size
▮ Location
▮ Text (optional)
▮ 4. Add the label to the frame
Chapter 3
© copyright Janson Industries 2014
35
Cust2 (or any Frame subclass) does not
inherit a close function from Frame
To close the frame, click the Terminate button in the
Console pane tool bar
Chapter 3
© copyright Janson Industries 2014
36
Non Graded Assg – Part 1
▮ Create Cust2 so it displays the same info as
Customer but in a frame with 3 labels
import java.awt.Frame;
import java.awt.Label;
public class Cust2 extends Frame {
Label custNameLabel = new Label("Joe Customer");
Label custAddressLabel = new Label("123 Main St.");
Label custCSZLabel = new Label("Jax, FL
32246");
public Cust2(){
this.setSize(600, 400);
this.setLayout(null);
custNameLabel.setSize(100,10);
custNameLabel.setLocation(155,135);
this.add(custNameLabel);
custAddressLabel.setSize(100,10);
custAddressLabel.setLocation(155,155);
this.add(custAddressLabel);
custCSZLabel.setSize(100,10);
custCSZLabel.setLocation(155,175);
this.add(custCSZLabel);
this.setVisible(true);
}
public static void main(String[] args){
Cust2 custTest = new Cust2();
}
}
Chapter 3
© copyright Janson Industries 2014
37
Instead of displaying static info, we can pass the frame info to display
Like Cust1 did
Chapter 2
© copyright Janson Industries 2014
38
Passing Info
▮ Need to change the frame's constructor
to:
▮ Accept info
▮ Set the label value to the passed info
Chapter 3
© copyright Janson Industries 2014
39
Passing Info
Constructor
must accept
info
Constructor
must set
label value
Info must
be passed
Chapter 3
© copyright Janson Industries 2014
40
Passing Info
If 2 pieces of info need to be passed,
public Cust3(String name, String address){…
Problem: if 7 pieces of info need to be passed,
How easy is it to remember what’s the order?
When is phone # passed: First? Second? Sixth?
Solution: object properties
Chapter 3
© copyright Janson Industries 2014
41
Properties
▮ Already worked with properties
▮ Label text and location, Frame size and layout
▮ In a class, each property is:
▮ Defined as a private class variable
▮ Has a getter method that returns the
property value
▮ Has a setter method (usually with
validation functions) that sets the value of
the property
Chapter 3
© copyright Janson Industries 2014
42
Properties
▮ Usually you will create an object
▮ Then manipulate the object properties
▮ We created a label, then set its size, location, text
▮ For instance:
▮ We’ll redefine the Customer class to have
properties that hold the following info:
▮ Contact Person, Customer Name, Phone
Number, Ship to Address
Chapter 3
© copyright Janson Industries 2014
43
Creating Properties
▮ Define private variables for each property
Chapter 3
© copyright Janson Industries 2014
44
Let RAD create the getters and setters
Click Source then Generate Getters and Setters...
Chapter 3
© copyright Janson Industries 2014
45
Properties
▮ Select getters and
setters or click Select All
▮ Can specify
▮ Where methods should be
in the class
▮ How they are grouped
▮ Click OK button
▮ Generates 14 methods
Chapter 3
© copyright Janson Industries 2014
46
Can't fit all getters/setters in work area
Can see them all in the outline
Chapter 3
© copyright Janson Industries 2014
47
Using Properties
▮ Just as you set Frame and Label object
properties, a Customer object’s
properties can now be set
▮ Then pass the Customer variable
(assigned to the Customer object)
instead of individual variables/values
▮ We will modify the customer application
so that a Customer variable is passed to
a Customer Frame
Chapter 3
© copyright Janson Industries 2014
48
Using Properties
▮ A new class CustApp will be used to
"kick off the application"
▮ This means CustApp will:
▮ Create a Customer object and assign it to a
Customer variable
▮ Set the Customer object's properties
▮ Create a Customer Frame object and pass
it the Customer variable (instead of
individual variables/values)
Chapter 3
© copyright Janson Industries 2014
49
New Customer Example
1
CustApp creates a
3
Customer
Customer object,
CustFrame retrieves
Object
assigns to variable
& displays Customer
c, sets object’s
object properties
2
properties
CustApp creates a
CustFrame
CustFrame object,
CustApp
assigns to variable cf,
Object
and sends Customer
variable c
Chapter 3
© copyright Janson Industries 2014
50
New Customer Example
1
Data
CustApp
Chapter 3
Customer
Object
3
Data
2
CustApp creates a
CustFrame object,
assigns to variable cf,
and sends Customer
variable c
© copyright Janson Industries 2014
CustFrame
Object
51
Using Properties
▮ Create a new Frame subclass CustFrame
▮ CustFrame constructor accepts a variable of
type Customer and assigns it to a variable
named cust
▮ CustFrame has four labels
▮ custName
▮ shipToLbl1
▮ shipToLbl2
▮ contactInfo
▮ CustFrame retrieves info from the Customer
object and puts the info into the labels
Chapter 3
© copyright Janson Industries 2014
52
Select project (JavaCourse) then File, New, Class
Specify name of Class
and superclass
Chapter 3
© copyright Janson Industries 2014
53
Cust Frame
Initial code
import java.awt.Frame;
public class CustFrame extends Frame {
}
Need to define a constructor
to accept a Customer variable
Chapter 3
© copyright Janson Industries 2014
54
Programming Technique
▮ We will code portions of the class, then test
each portion as it is created
▮ Incremental coding makes finding errors
easier
▮ If a new method is added and RAD shows an
error, it has something to do with the new code
▮ If all the methods coded at once results in 42
errors, harder to determine what the errors are
Chapter 3
© copyright Janson Industries 2014
55
Cust Frame
import java.awt.Frame;
public class CustFrame extends Frame {
public CustFrame(Customer cust) {
}
}
Even though CustApp passes a variable called c,
CustFrame stores it in a variable named cust
Don’t forget, for frame to work need to:
Size the frame : this.setSize(300, 282);
Set layout to null: this.setLayout(null);
Set visible: this.setVisible(true);
Chapter 3
© copyright Janson Industries 2014
56
Cust Frame Labels
▮ Import the Label class: import java.awt.Label;
▮ Create 4 label objects and assign to variables
Label
Label
Label
Label
custNameLbl = new Label();
shipToLbl1 = new Label();
shipToLbl2 = new Label();
contactInfo = new Label();
▮ Size and position the labels
custNameLbl.setBounds(62, 65, 176, 23);
shipToLbl1.setBounds(62, 120, 176, 23);
shipToLbl2.setBounds(62, 175, 176, 23);
contactInfo.setBounds(62, 230, 176, 23);
Chapter 3
© copyright Janson Industries 2014
57
Cust Frame Labels
▮ Set some test text
custNameLbl.setText("test text");
shipToLbl1.setText("test text");
shipToLbl2.setText("test text");
contactInfo.setText("test text");
▮ Add the labels to the frame
this.add(custNameLbl);
this.add(shipToLbl1);
this.add(shipToLbl2);
this.add(contactInfo);
▮ Test it : what do we need?
Chapter 3
© copyright Janson Industries 2014
58
CustFrame Labels
▮ Code a main method in CustFrame to
create a CustFrame object (to test so far)
public static void main(String[] args) {
Customer c = new Customer();
CustFrame cf = new CustFrame(c);
}
▮ In class assg: Try it!
Chapter 3
© copyright Janson Industries 2014
59
Cust Frame Labels
▮ Need code to retrieve data from
Customer object and put into labels
▮ Use Customer object getter to retrieve a
property value
▮ Could do like this
String tempName = cust.getCustName();
custNameLbl.setText(tempName);
String tempStreet = cust.getShipToStreet();
shipToLbl1.setText(tempStreet);
Chapter 3
© copyright Janson Industries 2014
60
Cust Frame Labels
▮ More efficient to do like this
custNameLbl.setText(cust.getCustName());
shipToLbl1.setText(cust.getShipToStreet());
▮ Two less statements no temp variables
▮ These labels are easy: one getter retrieves
one label’s text
▮ Need to use concatenation for other label’s text
▮ I.e. multiple getter return values go into these labels
Chapter 3
© copyright Janson Industries 2014
61
Concatenation
▮ Combines 2 strings into one
▮ String a = new String(“Sam”);
▮ String b = new String(“I am”);
▮ a + b would be equal to “SamI am”
▮ Use concatenation (+) to combine
multiple property values into one label
shipToLbl2.setText(cust.getShipToCity() + ", " +
cust.getShipToState() + "
" + cust.getShipToZip());
contactInfo.setText(cust.getContactPerson() + "
cust.getContactPhone());
Chapter 3
© copyright Janson Industries 2014
Ph: " +
62
Customer
▮ So we’ve:
▮ Added properties to Customer
▮ Created CustFrame to display the properties
▮ Need to create a CustApp that
▮ Creates a Customer object, a Customer
variable named c, and assigns the object to c
▮ Sets values for the Customer properties
▮ Creates a CustFrame object and passes the
Customer variable c, creates a CustFrame
variable named cf, assigns the CustFrame
Chapter 3 object to cf © copyright Janson Industries 2014
63
CustApp
▮ Create a class called CustApp
▮ In CustApp
▮ Create a main method
▮ In main, write code to:
▮ Create a Customer object, assign to variable c
▮ Use setters to assign the following values in the
Customer object associated with variable c:
▮ Kindness Foods, 1 Milkof St., Human, ME 03234
▮ Joe Samaritan, 555-3333
▮ Create a CustFrame object and pass c, assign
the CustFrame object to a variable named cf
Chapter 3
© copyright Janson Industries 2014
64
Have RAD generate the main method
Chapter 3
© copyright Janson Industries 2014
65
public class CustApp {
public static void main(String[] args) {
Customer c = new Customer();
c.setContactPerson("Joe Samaritan");
c.setContactPhone("555-3333");
c.setCustName("Kindness Foods");
c.setShipToStreet("1 Milkof St.");
c.setShipToCity("Human");
c.setShipToState("ME");
import java.awt.Frame;
import java.awt.Label;
import java.awt.Frame;
c.setShipToZip("03234");
import java.awt.Label;
CustFrame
cf CustFrame
= newextends
CustFrame(c);
public class
Frame {
Label custNameLbl = new Label();
}
Label shipToLbl1 = new Label();
Label shipToLbl2 = new Label();
Label contactInfo = new Label();
}
When run should look like
public CustFrame(Customer cust) {
this.setSize(300, 282);
this.setLayout(null);
this.setVisible(true);
custNameLbl.setBounds(62, 65, 176, 23);
shipToLbl1.setBounds(62, 120, 176, 23);
shipToLbl2.setBounds(62, 175, 176, 23);
contactInfo.setBounds(62, 230, 176, 23);
custNameLbl.setText(cust.getCustName());
shipToLbl1.setText(cust.getShipToStreet());
shipToLbl2.setText(cust.getShipToCity() + ", " + cust.getShipToState() + "
" + cust.getShipToZip());
contactInfo.setText(cust.getContactPerson() + "
Ph: " + cust.getContactPhone());
this.add(custNameLbl);
this.add(shipToLbl1);
this.add(shipToLbl2);
this.add(contactInfo);
}
Non-graded assg: Finish creating
the Customer Application
Chapter 3
public static void main(String[] args) {
Customer c = new Customer();
CustFrame cf = new CustFrame(c);
}
© copyright Janson Industries 2014
}
66
Non-graded Assg
▮ Export as one jar file
▮ Cust2.java
▮ Customer.java
▮ CustFrame.java
▮ CustApp.java
▮ Email the jar file as an email attachment
to [email protected]
Chapter 3
© copyright Janson Industries 2014
67
UML
▮ Unified Modeling Language
▮ Diagrams to show class methods and
variables and interclass relationships:
▮ Composition
▮ Specialization
Chapter 3
© copyright Janson Industries 2014
68
Class Diagram Example
▮ For each class a box is created
▮ The box consists of three areas:
▮ Identification (name)
Customer
▮ Attributes (variables)
- Name:String
- Address:String
▮ Operations (methods)
+ setName:void
+ setAddress:void
▮ Attributes and Operations
are further identified as public
or private (+,-)
Chapter 3
© copyright Janson Industries 2014
69
Class Diagram Example
▮ Attribute entries also specify the attribute’s type
(the type is preceded by a colon & follows the
attribute name)
Customer
▮ Operation entries also specify a
return value (the return value is
preceded by a colon & follows the
operation name)
Chapter 3
© copyright Janson Industries 2014
-Name:String
-Address:String
+setName:void
+setAddress:void
70
Class Diagram Example
▮ Attribute entries can also specify an initial value:
Attribute:Type=initial_value
Name:String=“Joe Programmer”
▮ Operation entries can also specify the expected
parameter(s):
Operation(parm_list):returned_value
getCustomerPO(int):String
Chapter 3
© copyright Janson Industries 2014
71
UML Diagrams
▮ Can show
specialization
Object
Component
Button
Chapter 3
Container
TextComponent
Window
Panel
Frame
Applet
© copyright Janson Industries 2014
TextField
72
RAD can generate for you
Right click a java file (CustApp)
Scroll to bottom and choose:
Visualize
Add to New Diagram File
Class Diagram
Chapter 3
© copyright Janson Industries 2014
73
Click Finish
Chapter 3
© copyright Janson Industries 2014
74
Initially shows class diagram for that class
As you add, will show composition relationship
Right click Customer and CustFrame
Choose
Visualize
Add to current diagram
Chapter 3
© copyright Janson Industries 2014
75
Can't fit diagram in window
In outline view, click Overview button
to display “the big picture”
Chapter
3
© copyright
Janson Industries &
2014resize window to
76 fit
Can
drag
boxes, close
Palette,
Initially only shows
composition (use relationship)
Chapter 3
© copyright Janson Industries 2014
77
Need to simplify diagram
Select all three boxes (Ctrl+click)
Chapter 3
Right click one box and choose:
Filters
Show/Hide Compartment
© copyright Janson Industries 2014
78
Name Compartment only
Want to see superclasses, must add to diagram
Expand JRE System Library, vm.jar, java.lang
Chapter 3
© copyright Janson Industries 2014
79
Select Object.class and String.class
Chapter 3
Right click either class and select
Visualize then
Add to Current Diagram
© copyright Janson Industries 2014
80
Close up vm.jar and expand rt.jar and java.awt
Chapter 3
© copyright Janson Industries 2014
81
Scroll down and select Frame.class and Label.class
Right click either class and select
Visualize then Add to Current Diagram
Chapter 3
© copyright Janson Industries 2014
82
Right click anywhere on diagram background and
choose Select then All Shapes
Chapter 3
© copyright Janson Industries 2014
83
Right click Frame box and select Filters, Show/Hide
Chapter 3
© copyright Janson Industries 2014
Compartment,
Name Compartment Only 84
Right click background and choose Arrange All
Chapter 3
© copyright Janson Industries 2014
85
Still need to drag boxes into better arrangement and
resize the boxes
Chapter 3
© copyright Janson Industries 2014
86
You can modify which relationships are shown
Chapter 3
© copyright Janson Industries 2014
87
You can modify which relationships are shown
Chapter 3
© copyright Janson Industries 2014
88
New diagram file in the project
Generate the UML diagram
Chapter 3
© copyright Janson Industries 2014
89
Other Resources
▮ JavaRanch: http://www.javaranch.com/
▮ Forums, faqs, tutorials
▮ http://www.javaranch.com/campfire has
stories/tutorials concerning various java topics
▮ Here is a link to some online java videos:
▮ http://www.youtube.com/user/webhasher/videos?
sort=da&view=u
▮ I looked at several of them and they seemed pretty good
Chapter 3
© copyright Janson Industries 2014
90