1. Using JavaFX Applications
GUI in Java
Using JavaFX Applications

2. Outline What is GUI Creating an Application Window
controls and layouts (arrangements; panes)
Activating Buttons in an Application Window
making it do something
What are polymorphism and inheritance?

3. What is a GUI? Graphical User Interface Lots less typing for the user
a graphical way to use the program
windows, icons, menus, pointing (WIMP)
Lots less typing for the user
Lots less things for them to remember
see options by looking
File Edit Help _ X
Open
Save ——
Exit
Mrph
Blah
Yuck
Eeew
Gross
Dpbl
Xvgl

4. GUI vs. Console

5. Differences Different kinds of objects involved
Scanner in console
text fields and buttons in app
Interaction is different
console needs you to enter numbers in order
can change numbers and recalculate in app

6. Similarities Purpose of program is the same Input is the same
calculate a final course grade for this course
Input is the same
user provides component grades
assignments, labs, tests, exam
Steps for doing calculation the same
read the numbers
calculate the result
show the result

7. A Slightly Simpler GUI Program opens up a window like this:
What can we do with it?
can enter numbers into the first and second number boxes
can click the “Add” button to put their sum into the result box
can click the “Done” button to end the program

8. Creating an Application
New Project > JavaFX > JavaFX Application
We will call our program AdderApplication
NetBeans generates an Application
you can run it right away:
Click the button
“Hello World!ˮ printed in output window

9. Application Code It’s a bit complicated!
import commands:
extends keyword
I’ll explain this soon
start method
lots of code in it
main method
one line of code
Most code is in the start method

10. The Method main Applications have a main method don’t change it!
public static void main(String[] args) { launch(args); }
don’t change it!
starts the GUI by calling launch method
more about the launch method later

11. The Method start Sets up the GUI you can use this version of start
@Override
public void start(Stage primaryStage) { Pane pane = makePane(); Scene scene = new Scene(pane); primaryStage.setScene(scene); primaryStage.setTitle(MY_TITLE); primaryStage.show(); }
you can use this version of start
need to write makePane() and define MY_TITLE

12. Stage and Scene Two data types in JavaFX: Stage is a window
primaryStage is the main window
Scene is the inside of the window
Stage has a Scene in it

13. Scene and Pane Pane is another data type in JavaFX:
Scene is inside of the window
Pane is the arrangement of items in the window
Scene has a Pane in it

14. Pane and Controls Lots of controls in JavaFX:
Pane is the arrangement of items in the window
Controls are the bits the user interacts with
Pane has controls in it

15. Our Controls We have three kinds of controls in our Scene
Labels: bits of text that don’t do anything
TextFields: boxes for users to type in
Buttons: things for users to click
something should happen after they get clicked
we’ll worry about that later
Other applications may need other things
CheckBoxes, RadioButtons, MenuBar, Menus, …

16. Creating a Label Like Scanners, need to be imported, created
import javafx.scene.control.Label;
no other kind of Label will work with an Application
tell constructor the text for the new Label
Label instructions;
instructions = new Label("Enter two numbers to add up:");
Label num1Label = new Label("First Number:");
Label num2Label = new Label("Second Number:");
Label result = new Label("Result:");

17. Creating a TextField Same as for Label
import javafx.scene.control.TextField;
no other kind of TextField will work here
tell constructor text to start in TextField
or leave blank if the field starts blank
TextField num1Field = new TextField("0");
TextField num2Field = new TextField("0");
TextField resultField = new TextField("0");
note that text is a String, not an int or double

18. Creating a Button Same as for Label and TextField:
import javafx.scene.control.Button;
no other kind of Button will work here
tell constructor text to put in Button
Button addButton = new Button("Add");
Button doneButton = new Button("Done");

19. Creating a Look for Controls
We have a lot of controls in our window
Labels, TextFields, Buttons
Want them to look alike
and default sizes are pretty small
Make a method to create and style them
Label result = makeLabel("result");
TextField num1Field = makeNumberField("0");
Button addButton = makeButton("Add");

20. Styling a Control Can set multiple properties for a control
font and alignment, for example
need to import Font and Pos
want number fields to be 18-point monospaced, and right-aligned
private static TextField makeNumberField(String text) { TextField result = new TextField(text); result.setFont(new Font("Monospaced", FONT_SIZE)); result.setAlignment(Pos.CENTER_RIGHT); return result; }

21. Exercises Write the methods makeButton and makeLabel
they should use a FONT_SIZE font
don't bother setting an alignment
Buttons will be centred, which is good
Labels will be left-aligned, which is good

22. Our Arrangement Laid out as a grid:
two columns, five rows, numbered from zero
JavaFX has a class called GridPane
Column
0 1
Row 1 2 3 4
Enter two numbers to add up:
First Number:
(Box for First Number)
Second Number:
(Box for Second Number)
Result:
(Box for Result)
(Add Button)
(Done Button)

23. Creating a Grid Layout Create the GridPane
GridPane root = new GridPane();
Add each object to its column and row
root.add(instructions, 0, 0);
root.add(num1Label, 0, 1);
root.add(num1Field, 1, 1); …
root.add(addButton, 0, 4);
root.add(doneButton, 1, 4);
Enter two numbers to add up:
First Number:
(Box for First Number)
Second Number:
(Box for Second Number)
Result:
(Box for Result)
(Add Button)
(Done Button)
Need to import javafx.scene.layout.GridPane;

24. Spreading over Multiple Cells
Make instructions go all the way across the top
currently stuck in top-left cell of grid (0, 0)
want to make it go across two columns
but still only one row
add number of columns and rows to add(…)
root.add(instructions, 0, 0, 2, 1); // 2 columns, 1 row
Enter two numbers to add up:
First Number:
(Box for First Number)
Second Number:
(Box for Second Number)
Result:
(Box for Result)
(Add Button)
(Done Button)

25. Styling the GridPane Add space around the outside
root.addSetPadding(new Insets(15, 25, 15, 25));
need to import javafx.geometry.Insets
Add space between rows and columns
root.setHgap(15);
root.setVgap(10);
Center buttons
GridPane.setHalignment( addButton, HPos.CENTER);

26. Making it Work Clicking the Buttons does nothing
no action associated with the button
Sample application had an example:
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
System.out.println("Hello World!"); }
});
We can make that simpler!

27. Use Lambda Expression NetBeans has a yellow light-bulb suggestion:
This … can be changed into a lambda expression
Do that! It’ll look much simpler!
btn.setOnAction((ActionEvent event) -> {
System.out.println("Hello World!");
});
quicker and easier magic formula!
uses hyphen + greater-than sign as an arrow
put what you want the Button to do in the braces

28. The done Button’s Action
Want to end the program
could use System.exit(0);
better to use Platform.exit();
for later, when you make this Application Awesome!
doneButton.setOnAction((ActionEvent event) -> {
Platform.exit();
});
need to import javafx.application.Platform
also javafx.event.ActionEvent, if you deleted it before
NOT java.awt.ActionEvent!

29. The add Button’s Action
Needs to add the numbers from the two input TextFields and put answer in result TextField
TextFields give you a String, not an int/double
String num1Text = num1Field.getText();
need to translate into an int: Integer.parseInt
int num1 = Integer.parseInt(num1Text);
then need to change int to String: Integer.toString
String sumText = Integer.toString(sum);
and put that String into the result
resultField.setText(sumText);

30. The add Button’s Action
All together:
addButton.setOnAction((ActionEvent event) -> {
int num1, num2, sum;
String num1Text, num2Text, sumText;
num1Text = num1Field.getText();
num2Text = num2Field.getText();
num1 = Integer.parseInt(num1Text);
num2 = Integer.parseInt(num2Text);
sum = num1 + num2;
sumText = Integer.toString(sum);
resultField.setText(sumText);
});

31. The add Button’s Action
Better to put all that in a method
method needs to be told the three TextFields
addButton.setOnAction((ActionEvent event) -> {
addUp(num1Field, num2Field, resultField);
});
addUp method created in AdderApplication
does all the things we did on the previous slide
Run the program and watch it add up numbers

32. Weird Stuff Stuff we used but didn’t explain:
public class AdderApplication extends Application {
public static void main(String[] args) { launch(args); }
private Pane makePane() { GridPane root = new GridPane(); … return root; } }
What does this mean?
Where is launch?
How can we return a GridPane when it says we’re going to return a Pane?

33. Inheritance Inheritance Explains all the stuff on previous slide
a way of using code that’s been written before
without copying it (copying is bad)
being a special version of another class
a self-driving car is a special kind of car
or a more specific kind of another class
a Nova Scotian is a specific kind of Canadian
Explains all the stuff on previous slide

34. Special Kinds of Panes More than one kind of Pane in JavaFX
GridPane is one
StackPane is another
also BorderPane, FlowPane, HBox and VBox
Classes arranged in a hierarchy
GridPane is a subclass of Pane
Pane is the superclass of GridPane

35. JavaFX Pane Hierarchy (part)
BorderPane
Pane is the superclass
FlowPane
Pane
GridPane
These are the
subclasses
Arrows point from subclass to superclass
HBox
StackPane
VBox

36. Has vs. Is A Scene has a Pane in it A GridPane is a Pane
a Pane is a part of a Scene
A GridPane is a Pane
it’s not in a Pane
it’s a special kind of Pane
The Pane a Scene has can be a GridPane
this Scene has a GridPane in it
the other Scene has a StackPane in it

37. “Is a” Means… A GridPane is a Pane any method that returns a Pane …
such as makePane()
… can return a GridPane …
… because a GridPane is a Pane
any method that expects to be given a Pane …
such as the Scene constructor
… can be given a GridPane …

38. Variables and Objects Scanner object goes into a Scanner variable
Scanner kbd = new Scanner(System.in);
Pane object goes into a Pane variable
Pane pane1 = new Pane();
But GridPanes are Panes, so…
Pane pane2 = new GridPane();
NOTE: Can’t go the other way!
a Pane isn’t necessarily a GridPane
GridPane pane3 = new Pane();

39. Declaring Inheritance
Need to tell Java about inheritance
my class inherits from this other class
e.g. GridPane inherits from Pane
Use the extends keyword
public class GridPane extends Pane {
says that GridPane is a Pane
public class AdderApplication extends Application {
says …?

40. The Application Class Application class knows how to do GUIs
AdderApplication extends Application tells Java that our AdderApplication is a GUI
in particular, an Application
(there are other kinds of GUIs)
(no GUI is not a data type in Java)
Better yet – inheritance gets you stuff
AdderApplication inherits methods

41. Inheriting Methods If B extends A, then B is an A
Thus, B can do anything A can do
because B is an A
Our AdderApplication can do anything an Application can do
because it is an Application
The things A can do are its public methods
and B gets all of them!

42. Inheriting Methods
public class A { public void doThis() { System.out.println(“Hello!”); } } public class B extends A {} public class MyProg { public static void main(String[] args) { A anA = new A(); B aB = new B(); anA.doThis(); // prints Hello! aB.doThis(); // prints Hello! (!)

43. Adding Methods to Subclass
B is a subclass of A (B extends A)
B can do anything A can do
because B is a A
But B could do more
just have to tell Java extra things B can do
declare them just like any other method

44. Adding Methods
public class A { public void doThis() { System.out.println(“Hello!”); } } public class B extends A { public void doThat() { System.out.println(“Bye!”); } anA.doThis(); // prints “Hello!” aB.doThis(); // prints “Hello!” aB.doThat(); // prints “Bye!” anA.doThat(); // error!

45. Inheriting Application Methods
Every public method that Application has…
…AdderApplication gets (automatically)
don’t even need to say you want it!
Application has a launch method …
knows how to start up a GUI
… so AdderApplication has it, too!
it’s static, so we can call it from main
we do, and it starts up the GUI

46. The launch and start Methods
The launch method calls the start method
start is the method we use to build our GUI
every Application must have a start method
more about this later
In order to get our GUI to do what we want, we need to write our own start method
start method needs to declared correctly
notation to get Java to check
just like the toString method we saw before

47. Adding Methods
Of course, we add our own methods to our AdderApplication
makePane, makeLabel, makeNumberField, …
We call them when we need them
from our start method
also in the addButton event handler
more on that soon

48. Inheritance in JavaFX JavaFX uses a lot of inheritance
there is a data type called Control
a TextField is a Control
a Label is a Control
a Button is a Control
But it’s much more complicated than that!
lots more types of controls
arranged in a deep hierarchy

49. JavaFX Control Hierarchy (part)
MenuBar
TextInputControl
TextField
Control
Label
PasswordField
Labelled
ButtonBase
Arrows point from subclass to superclass
A Button is a ButtonBase
A ButtonBase is a Labelled
A Labelled is a Control
Button
CheckBox
RadioButton
ToggleButton

50. Inheriting from Subclasses?
You can inherit from classes that inherit
a TextField is a TextInputControl
a TextInputControl is a Control
thus a TextField is a Control
Inherit all your super-class’s methods …
… including all the methods it inherited
TextField inherits all Control’s public methods
Control
TextInputControl
TextField

51. Why Such a Deep Hierarchy
Because of inheriting methods
Class holds all methods that “go together”
all Control-y methods in Control
extra label-y methods in Labelled
extra Label-y methods in Label
extra button-y methods in ButtonBase
extra Button-y methods in Button
extra toggle-y methods in ToggleButton
extra RadioButton-y methods in RadioButton
And Controls are only part of the hierarchy

52. JavaFX Node Hierarchy (part)
Controls are buttons
and fields and so on
Canvas
MediaView
Group
Control
Parent
Region
A Node containing other Nodes
Node
Pane
Circle
Panes are used
to lay out controls
Line
Rectangle
Shape
Text
Not to be confused with a Label

53. Last Weird Thing Making the Buttons act: Which is actually short for:
btn.setOnAction( (ActionEvent event) -> {
System.out.println("Hello World!");
});
Which is actually short for:
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) { }

54. Event Handlers Buttons need event handlers
objects that handle events on the button
it knows what to do when that event happens
such as when the user clicks that button
which is what the onAction handlers do
The setOnAction method expects to be given an EventHandler object
one that knows how to handle ActionEvents

55. EventHandlers EventHandler objects need a handle method
EventHandler<ActionEvent> objects have a handle method that accepts ActionEvent objects
there are other kinds of events…
To get our event handler to do what we want it to do, we need to write our own handle method
and we get Java to check it’s the right declaration by using notation

56. Anonymous Classes The long version uses an anonymous class
a class that has no name
We could use a named class!
EventHandler<ActionEvent> myHandler;
myHandler = new MyButtonActionHandler();
btn.addOnAction(myHandler);
and that named class would need to have the handle method in it, and say that it’s an EventHandler of the right kind (lots of work)

57. Lambda Expressions The short version is even better
a lot less writing involved
accomplishes the same result
set an onAction handler for the button
Don’t even need to say it’s an EventHandler
setOnAction knows it needs an EventHandler
and EventHandler knows it needs a handle method
so Java can figure it all out!

58. Inheritance? We can create EventHandler objects
Do they inherit from EventHandler class?
not actually!
Something different, but very similar
they implement rather than extend
more on the difference next week!

59. Questions