GUI Java Explain difference between ApplicationsAppletsServlets AWTSwingSWT Inheritance

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 part 2 Chapter 3 © copyright Janson Industries 2016 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 2016 2

Apps/Applets/Servlets Applets Stored on client Run on client X X Stored on server X Servlets Chapter 3 X X © copyright Janson Industries 2016 Run on server X 3

Apps/Applets/Servlets Chapter 3 Stored on Run on Apps client Applets server client Servlets server © copyright Janson Industries 2016 4

Client Apps ▮ Client based apps Adv: ▮ Fast: execute on client, no communication lag ▮ No catastrophic failure ▮ Client based apps Dis. Adv: ▮ 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 2016 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 Dis. Adv: ▮ 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 2016 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 2016 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 2016 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 ▮ Text. Field - JText. Field ▮ Label - JLabel ▮ To use the GUI components, must “import” the AWT or Swing classes into your class Chapter 3 © copyright Janson Industries 2016 9

GUI Java FRAME Chapter 3 JFRAME © copyright Janson Industries 2016 10

Using GUI Components ▮ AWT GUI classes in java. awt package ▮ You can use them by fully specifying their location ▮ java. awt. Label emp. Name = 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 2016 11

GUI Components // GUIEx. java public class GUIEx extends java. awt. 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 2016 12

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 { : : : Chapter 3 © copyright Janson Industries 2016 13

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 2016 14

Subclass/Superclass Person String name, addr, phnum; Employee extends Person String Emp. Num; name = "Joe"; addr="1 1 st St"; phnum="111 -1111"; Customer extends Person String Cust. Num; name = "Mary"; addr="2 2 nd St"; phnum="222 -2222"; Supplier extends Person String Supp. Num; name = "Pat"; addr="3 3 rd St"; phnum="333 -3333"; ▮ Subclasses inherit all methods and variables of the superclass (aka Specialization) Chapter 3 © copyright Janson Industries 2016 15

Create a new class (Cust 2) – File, New, Class Click Browse. . . Chapter 3 © copyright Janson Industries 2016 16

Start typing “Frame”, select Frame, (and make sure its from the java. awt package), click OK then Finish Chapter 3 © copyright Janson Industries 2016 17

RAD creates a bare minimum class Chapter 3 © copyright Janson Industries 2016 18

Labels ▮ Display constant text on a frame ▮ Must define a label object and, optionally, set it’s text property Label cust. Name. Label = new Label(“Joe Customer"); Chapter 3 © copyright Janson Industries 2016 19

But you get an error Click light bulb icon to get possible solutions Chapter 3 © copyright Janson Industries 2016 20

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 2016 21

What happens if you click the Run button and why? Chapter 3 © copyright Janson Industries 2016 22

When running, RAD first suggests saving changes It’s usually a good idea: click OK Chapter 3 © copyright Janson Industries 2016 23

Gotcha: if you click the Run button, RAD will run Cust 1 (the last application that was run) Chapter 3 © copyright Janson Industries 2016 24

Can display the Run drop down menu Notice Cust 1 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 2016 25

Specify Cust 2 Click Run What’s going to happen and why? Chapter 3 © copyright Janson Industries 2016 26

Oops, forgot to create a main method that instantiates (creates) a Cust 2 object Chapter 3 © copyright Janson Industries 2016 27

Getting Cust 2 to work ▮ Since Cust 2 will be instantiated you need ▮ A constructor for the class (i. e. must have method called Cust 2) ▮ 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 2016 28

Frames ▮ In the constructor, specify: this. set. Size(600, 400); this. set. Layout(null); (this refers to “this object”, i. e. the Cust 2 frame) ▮ Layout null tells the system not to use the predefined Border. Layout ▮ You will position the components individually Chapter 3 © copyright Janson Industries 2016 29

Labels ▮ In constructor, set label size & location: ▮ label. Variable. Name. set. Size(length, height) ▮ label. Variable. Name. set. Location(from left, from top) ▮ Numbers are in pixels ▮ Example (after the label object is created and after this. set. Layout(null); ) add: ▮ cust. Name. Label. set. Size(100, 10); ▮ cust. Name. Label. set. Location(155, 135); Chapter 3 © copyright Janson Industries 2016 30

Labels ▮ In the constructor, after the label properties are set, add the label to the frame object (referred to as this) ▮ this. add(cust. Name. Label); ▮ At the end of the constructor, make the frame visible ▮ this. set. Visible(true); Chapter 3 © copyright Janson Industries 2016 31

main method ▮ In the main method, must create a Cust 2 object ▮ We will assign it to a variable called cust. Test ▮ Cust 2 cust. Test = new Cust 2(); ▮ (Actually, don't need to create variable and assign object because we will not reference the Cust 2 object) ▮ Time to run! Chapter 3 © copyright Janson Industries 2016 32

Display Run menu – notice Cust 2 is default launch Click Cust 2 to run Chapter 3 © copyright Janson Industries 2016 33

Results in Cust 2 object being created (instantiated) Chapter 3 © copyright Janson Industries 2016 34

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 2016 35

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 2016 36

Cust 2 (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 2016 37

Non Graded Assg – Part 1 ▮ Create Cust 2 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 Cust 2 extends Frame { Label cust. Name. Label = new Label("Joe Customer"); Label cust. Address. Label = new Label("123 Main St. "); Label cust. CSZLabel = new Label("Jax, FL 32246"); public Cust 2(){ this. set. Size(600, 400); this. set. Layout(null); cust. Name. Label. set. Size(100, 10); cust. Name. Label. set. Location(155, 135); this. add(cust. Name. Label); cust. Address. Label. set. Size(100, 10); cust. Address. Label. set. Location(155, 155); this. add(cust. Address. Label); cust. CSZLabel. set. Size(100, 10); cust. CSZLabel. set. Location(155, 175); this. add(cust. CSZLabel); this. set. Visible(true); } public static void main(String[] args){ Cust 2 cust. Test = new Cust 2(); } } Chapter 3 © copyright Janson Industries 2016 38

Instead of displaying static info, we can pass the frame info to display Like Cust 1 did Chapter 2 © copyright Janson Industries 2016 39

Passing Info ▮ Need to change the frame's constructor to: ▮ Accept parameters ▮ Set the label values to the passed info Chapter 3 © copyright Janson Industries 2016 40

Passing Info Constructor must accept info In constructor must set label value Info must be passed Chapter 3 © copyright Janson Industries 2016 41

Passing Info If 2 pieces of info need to be passed, public Cust 3(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 2016 42

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 2016 43

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 2016 44

Creating Properties ▮ Define private variables for each property Chapter 3 © copyright Janson Industries 2016 45

Let RAD create the getters and setters Click Source then Generate Getters and Setters. . . Chapter 3 © copyright Janson Industries 2016 46

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 2016 47

Can't fit all getters/setters in work area Can see them all in the outline Chapter 3 © copyright Janson Industries 2016 48

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 2016 49

Using Properties ▮ A new class Cust. App will be used to "kick off the application" ▮ This means Cust. App 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 2016 50

New Customer Example 1 Cust. App creates a 3 Customer object, Cust. Frame retrieves Object assigns to variable & displays Customer c, sets object’s object properties 2 properties Cust. App creates a Cust. Frame object, Cust. App assigns to variable cf, Object and sends Customer variable c Chapter 3 © copyright Janson Industries 2016 51

New Customer Example Customer Object 1 Data Cust. App Chapter 3 Kindness Foods 1 Milk of Etc. 3 Data 2 Cust. App creates a Cust. Frame object, assigns to variable cf, and sends Customer variable c © copyright Janson Industries 2016 Cust. Frame Object 52

Using Properties ▮ Create a new Frame subclass Cust. Frame ▮ Cust. Frame constructor accepts a variable of type Customer and assigns it to a variable named cust ▮ Cust. Frame has four labels ▮ cust. Name. Lbl ▮ ship. To. Lbl 1 ▮ ship. To. Lbl 2 ▮ contact. Info ▮ Cust. Frame retrieves info from the Customer object and puts the info into the labels Chapter 3 © copyright Janson Industries 2016 53

Select project (Java. Course) then File, New, Class Specify name of Class and superclass Chapter 3 © copyright Janson Industries 2016 54

Cust Frame Initial code import java. awt. Frame; public class Cust. Frame extends Frame { } Need to define a constructor to accept a Customer variable Chapter 3 © copyright Janson Industries 2016 55

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 2016 56

Cust Frame import java. awt. Frame; public class Cust. Frame extends Frame { public Cust. Frame(Customer cust) { } } Even though Cust. App passes a variable called c, Cust. Frame stores it in a variable named cust Don’t forget, for frame to work need to: Size the frame : this. set. Size(300, 282); Set layout to null: this. set. Layout(null); Set visible: this. set. Visible(true); Chapter 3 © copyright Janson Industries 2016 57

Cust Frame Labels ▮ Import the Label class: import java. awt. Label; ▮ Create 4 label objects and assign to variables Label cust. Name. Lbl = new Label(); ship. To. Lbl 1 = new Label(); ship. To. Lbl 2 = new Label(); contact. Info = new Label(); ▮ Size and position the labels cust. Name. Lbl. set. Bounds(62, 65, 176, 23); ship. To. Lbl 1. set. Bounds(62, 120, 176, 23); ship. To. Lbl 2. set. Bounds(62, 175, 176, 23); contact. Info. set. Bounds(62, 230, 176, 23); Chapter 3 © copyright Janson Industries 2016 58

Cust Frame Labels ▮ Set some test text cust. Name. Lbl. set. Text("test text"); ship. To. Lbl 1. set. Text("test text"); ship. To. Lbl 2. set. Text("test text"); contact. Info. set. Text("test text"); ▮ Add the labels to the frame this. add(cust. Name. Lbl); this. add(ship. To. Lbl 1); this. add(ship. To. Lbl 2); this. add(contact. Info); ▮ Test it : what do we need? Chapter 3 © copyright Janson Industries 2016 59

Cust. Frame Labels ▮ Code a main method in Cust. Frame to create a Cust. Frame object (to test so far) public static void main(String[] args) { Customer c = new Customer(); Cust. Frame cf = new Cust. Frame(c); } ▮ In class assg: Try it! Chapter 3 © copyright Janson Industries 2016 60

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 temp. Name = cust. get. Cust. Name(); cust. Name. Lbl. set. Text(temp. Name); String temp. Street = cust. get. Ship. To. Street(); ship. To. Lbl 1. set. Text(temp. Street); Chapter 3 © copyright Janson Industries 2016 61

Cust Frame Labels ▮ More efficient to do like this cust. Name. Lbl. set. Text(cust. get. Cust. Name()); ship. To. Lbl 1. set. Text(cust. get. Ship. To. Street()); ▮ 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 2016 62

Concatenation ▮ Combines 2 strings into one ▮ String a = new String(“Sam”); ▮ String b = new String(“I am”); ▮ a + b would be equal to “Sam. I am” ▮ Use concatenation (+) to combine multiple property values into one label ship. To. Lbl 2. set. Text(cust. get. Ship. To. City() + ", " + cust. get. Ship. To. State() + " " + cust. get. Ship. To. Zip()); contact. Info. set. Text(cust. get. Contact. Person() + " cust. get. Contact. Phone()); Chapter 3 © copyright Janson Industries 2016 Ph: " + 63

Customer ▮ So we’ve: ▮ Added properties to Customer ▮ Created Cust. Frame to display the properties ▮ Need to create a Cust. App that ▮ Creates a Customer object, a Customer variable named c, and assigns the object to c ▮ Sets values for the Customer properties ▮ Creates a Cust. Frame object and passes the Customer variable c, creates a Cust. Frame variable named cf, assigns the Cust. Frame Chapter 3 object to cf © copyright Janson Industries 2016 64

Cust. App ▮ Create a class called Cust. App ▮ In Cust. App ▮ 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 Cust. Frame object and pass c, assign the Cust. Frame object to a variable named cf Chapter 3 © copyright Janson Industries 2016 65

Have RAD generate the main method Chapter 3 © copyright Janson Industries 2016 66

public class Cust. App { public static void main(String[] args) { Customer c = new Customer(); c. set. Contact. Person("Joe Samaritan"); c. set. Contact. Phone("555 -3333"); c. set. Cust. Name("Kindness Foods"); c. set. Ship. To. Street("1 Milkof St. "); c. set. Ship. To. City("Human"); c. set. Ship. To. State("ME"); import java. awt. Frame; import java. awt. Label; import java. awt. Frame; c. set. Ship. To. Zip("03234"); import java. awt. Label; Cust. Frame cf Cust. Frame = newextends Cust. Frame(c); public class Frame { Label cust. Name. Lbl = new Label(); } Label ship. To. Lbl 1 = new Label(); Label ship. To. Lbl 2 = new Label(); Label contact. Info = new Label(); } When run should look like public Cust. Frame(Customer cust) { this. set. Size(300, 282); this. set. Layout(null); this. set. Visible(true); cust. Name. Lbl. set. Bounds(62, 65, 176, 23); ship. To. Lbl 1. set. Bounds(62, 120, 176, 23); ship. To. Lbl 2. set. Bounds(62, 175, 176, 23); contact. Info. set. Bounds(62, 230, 176, 23); cust. Name. Lbl. set. Text(cust. get. Cust. Name()); ship. To. Lbl 1. set. Text(cust. get. Ship. To. Street()); ship. To. Lbl 2. set. Text(cust. get. Ship. To. City() + ", " + cust. get. Ship. To. State() + " " + cust. get. Ship. To. Zip()); contact. Info. set. Text(cust. get. Contact. Person() + " Ph: " + cust. get. Contact. Phone()); this. add(cust. Name. Lbl); this. add(ship. To. Lbl 1); this. add(ship. To. Lbl 2); this. add(contact. Info); } Non-graded assg: Finish creating the Customer Application Chapter 3 public static void main(String[] args) { Customer c = new Customer(); Cust. Frame cf = new Cust. Frame(c); } © copyright Janson Industries 2016 } 67

Non-graded Assg ▮ Export as one jar file ▮ Cust 2. java ▮ Customer. java ▮ Cust. Frame. java ▮ Cust. App. java ▮ Email the jar file as an email attachment to wsjavaws@yahoo. com Chapter 3 © copyright Janson Industries 2016 68

UML ▮ Unified Modeling Language ▮ Diagrams to show class methods and variables and

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) + set. Name: void + set. Address: void ▮ Attributes and Operations are further identified as public or private (+, -) Chapter 3 © copyright Janson Industries 2016 70

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 2016 -name: String -address: String +set. Name: void +set. Address: void 71

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) type(s): Operation(parm_list): returned_value get. Customer. PO(int): String Chapter 3 © copyright Janson Industries 2016 72

UML Relationship Diagrams ▮ Can show specialization Object Component Button Chapter 3 Container Text.

RAD can generate for you Right click a java file (Cust. App) Scroll to

Click Finish Chapter 3 © copyright Janson Industries 2016 75

Initially shows class diagram for that class As you add, will show composition relationship Right click Customer and Cust. Frame Choose Visualize Add to current diagram Chapter 3 © copyright Janson Industries 2016 76

Can't fit diagram in window In outline view, click Overview button to display “the

Initially only shows composition (use relationship) Chapter 3 © copyright Janson Industries 2016 78

Need to simplify diagram Select all three boxes (Ctrl+click) Chapter 3 Right click one

Want to see superclasses, must add to diagram Expand JRE System Library, vm. jar,

Select Object. class and String. class Chapter 3 Right click either class and select

Close up vm. jar and expand rt. jar and java. awt Chapter 3 ©

Scroll down and select Frame. class and Label. class Right click either class and

Right click anywhere on diagram background and choose Select then All Shapes Chapter 3

Right click Frame box and select Filters, Show/Hide Chapter 3 Janson Industries 2016 Compartment,

Right click background and choose Arrange All Chapter 3 © copyright Janson Industries 2016

Still need to drag boxes into better arrangement and resize the boxes Chapter 3

You can modify which relationships are shown Chapter 3 © copyright Janson Industries 2016

New diagram file in the project Chapter 3 © copyright Janson Industries 2016 90

Other Resources ▮ Java. Ranch: 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 2016 91