JavaFX Basics

Why?
Not everything has to be in command-line interfaces (CLIs).

Think of the suffers your grandparents face for using CLIs!

Your apps shall be user-friendly to get many users!

2
3
4
5
Intro
JavaFX is a library for creating GUIs in Java.

OOPs are heavily utilized in JavaFX.

A JavaFX application can run both on a desktop and

a Web browser.

6
 Hello
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

// hello world
public class GUI00 extends Application {

@Override
public void start(Stage stg) throws Exception {
Label label = new Label("Hello world from JavaFX!");
Scene scene = new Scene(label);
stg.setScene(scene);
stg.show();
}

public static void main(String[] args) {

Application.launch(args);
}
7
}
Hello

8
 Hello
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage; Analyze the OOP of this Hello code!
// hello world
public class GUI00 extends Application {

@Override
public void start(Stage stg) throws Exception {
Label label = new Label("Hello world from JavaFX!");
Scene scene = new Scene(label);
stg.setScene(scene);
stg.show();
}

public static void main(String[] args) {

Application.launch(args);
}
9
}
 Hello
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

// hello world
public class GUI00 extends Application {

@Override
public void start(Stage stg) throws Exception {
Label label = new Label("Hello world from JavaFX!");
Scene scene = new Scene(label);
Label is a non-editable text control. A Label is
stg.setScene(scene);
stg.show(); useful for displaying text that is required to fit
} within a specific space.
public static void main(String[] args) {
Application.launch(args);
}
10
}
 Hello
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

// hello world
public class GUI00 extends Application {

@Override
public void start(Stage stg) throws Exception {
Label label = new Label("Hello world from JavaFX!");
Scene scene = new Scene(label);
stg.setScene(scene);
stg.show(); The JavaFX Scene class is the container for all
} content in a scene graph.
public static void main(String[] args) {
Application.launch(args);
}
11
}
 Hello
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

// hello world
public class GUI00 extends Application {

@Override
public void start(Stage stg) throws Exception {
Label label = new Label("Hello world from JavaFX!");
A Stage in JavaFX is a top-level container that
Scene scene = new Scene(label);
stg.setScene(scene); hosts scenes. The primary stage is created by
stg.show(); the platform and passed to the start(Stage stg)
}
method of the Application class.
public static void main(String[] args) {
Application.launch(args);
}
12
}
13
 The very basics of JavaFX
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class GUI001 extends Application {

@Override
public void start(Stage stg) throws Exception {
Button button = new Button("Readyyy!");
Scene scene = new Scene(button, 250, 100);
stg.setTitle("GUI 001");
stg.setScene(scene);
stg.show();
}

public static void main(String[] args) {

Application.launch(args);
}

} 14
 The very basics of JavaFX
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class GUI001 extends Application {

@Override
public void start(Stage stg) throws Exception {
Button button = new Button("Readyyy!");
Scene scene = new Scene(button, 250, 100);
stg.setTitle("GUI 001");
stg.setScene(scene);
stg.show();
}

public static void main(String[] args) {

Application.launch(args);
}

} 15
 The very basics of JavaFX
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class GUI001 extends Application {

@Override
public void start(Stage stg) throws Exception {
Button button = new Button("Readyyy!");
Scene scene = new Scene(button, 250, 100);
stg.setTitle("GUI 001");
stg.setScene(scene);
stg.show();
}

public static void main(String[] args) {

Application.launch(args);
}
Add stg.setResizable(false);
} and what would happen?
16
 Multiple stages
// ... other code parts follow previous code
public void start(Stage stg1) throws Exception {
stg1.setTitle("GUI 002");
stg1.setScene(new Scene(new Button("Gooo!"), 200,100));
stg1.show();

Stage stg2 = new Stage();

stg2.setTitle("GUI 002");
stg2.setScene(new Scene(new Button("Steadyyy!"), 200,100));
stg2.show();

Stage stg3 = new Stage();

stg3.setTitle("GUI 002");
stg3.setScene(new Scene(new Button("Readyyy!"), 200,100));
stg3.show();
}

17
 Multiple stages
// ... other code parts follow previous code
public void start(Stage stg1) throws Exception {
stg1.setTitle("GUI 002");
stg1.setScene(new Scene(new Button("Gooo!"), 200,100));
stg1.show();

Stage stg2 = new Stage();

stg2.setTitle("GUI 002");
stg2.setScene(new Scene(new Button("Steadyyy!"), 200,100));
stg2.show();

Stage stg3 = new Stage();

stg3.setTitle("GUI 002");
stg3.setScene(new Scene(new Button("Readyyy!"), 200,100));
stg3.show();
}

Close the window, you'll see the Steadyyy! stage,

close the window again, you'll see the Gooo! stage.
18
 A pane is like a container
public void start(Stage stg1) throws Exception {
StackPane pn = new StackPane();
pn.getChildren().add(new Button("Niceee!")); // because Nice! would sound rude
Scene scn = new Scene(pn, 300, 100);
stg1.setScene(scn);
stg1.show();
}

19
 A pane is like a container
public void start(Stage stg1) throws Exception {
StackPane pn = new StackPane();
pn.getChildren().add(new Button("Niceee!")); // because Nice! would sound rude
Scene scn = new Scene(pn, 300, 100);
stg1.setScene(scn);
stg1.show();
}

Note that the button now doesn't occupy the whole scene, thanks to Pane!
20
 Stacked square and button
public void start(Stage stg1) throws Exception {
Rectangle rect = new Rectangle(100, 100, 180, 140);
rect.setFill(Color.BLUE);

StackPane pn = new StackPane(rect, new Button("Niceee!"));

Scene scn = new Scene(pn, 500, 200);
stg1.setScene(scn);
stg1.show();
}

21
 Stacked square and button
public void start(Stage stg1) throws Exception {
Rectangle rect = new Rectangle(100, 100, 180, 140);
rect.setFill(Color.BLUE);

StackPane pn = new StackPane(rect, new Button("Niceee!"));

Scene scn = new Scene(pn, 500, 200);
stg1.setScene(scn);
stg1.show();
}

22
Quiztime: Java art

23
 Quiztime: Java art
public void start(Stage stg1) throws Exception {
StackPane pn = new StackPane();
for(int i = 100; i > 0; i--) {
Rectangle rect = new Rectangle(0,0,5*i,5*i);
switch(i % 3) {
case 0:
rect.setFill(Color.RED); break;
case 1:
rect.setFill(Color.GREEN); break;
case 2:
rect.setFill(Color.BLUE); break;
}
pn.getChildren().add(rect);
}

Scene scn = new Scene(pn, 500, 500);

stg1.setScene(scn);
stg1.show();
}
24
 Circle
public void start(Stage stg1) throws Exception {
Circle c = new Circle();
c.setCenterX(200);
c.setCenterY(100);
c.setRadius(50);
c.setStroke(Color.ALICEBLUE);
c.setStrokeWidth(5);
c.setFill(Color.BISQUE);

Pane pn = new Pane();

pn.getChildren().add(c);
Scene scn = new Scene(pn, 400, 200);
stg1.setTitle("Life's like a circle");
stg1.setScene(scn);
stg1.show();
}

25
 Circle
public void start(Stage stg1) throws Exception {
Circle c = new Circle();
c.setCenterX(200);
c.setCenterY(100);
c.setRadius(50);
c.setStroke(Color.ALICEBLUE);
c.setStrokeWidth(5);
c.setFill(Color.BISQUE);

Pane pn = new Pane();

pn.getChildren().add(c);
Scene scn = new Scene(pn, 400, 200);
stg1.setTitle("Life's like a circle");
stg1.setScene(scn);
stg1.show();
}

26
 Circle
public void start(Stage stg1) throws Exception {
Circle c = new Circle();
c.setCenterX(70);
c.setCenterY(100);
c.setRadius(50);
c.setStroke(Color.ALICEBLUE);
c.setStrokeWidth(5);
c.setFill(Color.BISQUE);

Pane pn = new Pane();

pn.getChildren().add(c);
Scene scn = new Scene(pn, 400, 200);
stg1.setTitle("Life's like a circle");
stg1.setScene(scn);
stg1.show();
}

27
 Circle
public void start(Stage stg1) throws Exception {
Circle c = new Circle();
c.setCenterX(70);
c.setCenterY(0);
c.setRadius(50);
c.setStroke(Color.ALICEBLUE);
c.setStrokeWidth(5);
c.setFill(Color.BISQUE);

Pane pn = new Pane();

pn.getChildren().add(c);
Scene scn = new Scene(pn, 400, 200);
stg1.setTitle("Life's like a circle");
stg1.setScene(scn);
stg1.show();
}

28
Quiztime: Loops of circles

29
 Solution
public Circle createCircle(int X, int Y) {
Random r = new Random();
Circle c = new Circle();
c.setCenterX(X);
c.setCenterY(Y);
c.setRadius(30);
c.setFill(Color.rgb(r.nextInt(256), r.nextInt(256), r.nextInt(256)));
return c;
}

// ... cont

30
 Solution
// ... cont

@Override
public void start(Stage stg1) throws Exception {
Pane pn = new Pane();
for(int i = 0; i < 5; i++)
for(int j = 0; j < 5; j++)
pn.getChildren().add(createCircle(50 + i*65,50 + j*65));
Scene scn = new Scene(pn, 360, 360);
stg1.setTitle("Circles");
stg1.setScene(scn);
stg1.setResizable(false);
stg1.show();
}

31
JavaFX provides many other shapes

Image copyright: https://dzone.com/refcardz/javafx-8-1?chapter=6

32
Quiztime: We love buttons

33
Solution
@Override
public void start(Stage stg1) throws Exception {
VBox pn = new VBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
for(int i = 1; i <= 9; i++)
pn.getChildren().add(new Button("Button " + i));
Scene scn = new Scene(pn, 300, 500);
stg1.setTitle("We love buttons");
stg1.setScene(scn);
stg1.setResizable(false);
stg1.show();
}

34
Quiztime: We love horizontal buttons

35
 Solution
@Override
public void start(Stage stg1) throws Exception {
HBox pn = new HBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
for(int i = 1; i <= 9; i++)
pn.getChildren().add(new Button("Button " + i));
Scene scn = new Scene(pn, 800, 200);
stg1.setTitle("We love buttons");
stg1.setScene(scn);
stg1.setResizable(false);
stg1.show();
}

36
Toggle Buttons

37
 Solution
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("HBox Experiment 1");
ToggleButton toggleButton1 = new ToggleButton("Left");
HBox hbox = new HBox(toggleButton1);
Scene scene = new Scene(hbox, 200, 100);
primaryStage.setScene(scene);
primaryStage.show();
}

38
JavaFX Labels and Images

39
 Solution
public void start(Stage stg1) throws Exception {
VBox pn = new VBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
pn.getChildren().add(new Label("Happy Ramadhan!"));
FileInputStream fis = new FileInputStream("pics/ramadhan.png");
Image img = new Image(fis);
ImageView iv = new ImageView(img);
iv.setFitHeight(400);
iv.setPreserveRatio(true);
pn.getChildren().add(iv);
Scene scn = new Scene(pn, 500, 500);
stg1.setTitle("Happy Ramadhan!");
stg1.setScene(scn);
stg1.setResizable(false);
stg1.show();
}
40
Quiztime: Create your own Happy Ramadhan (or
Merry X-Mas, or any greetings!)

41
ChoiceBox

42
 ChoiceBox: Code
public void start(Stage stg1) throws Exception {
VBox pn = new VBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
pn.getChildren().add(new Label("Pick your fav K-pop star!"));
String[] stars = {"Joo Ko-Wee", "Park Bo-Wow"};
ChoiceBox cb = new
ChoiceBox(FXCollections.observableArrayList(stars));
pn.getChildren().add(cb);
Scene scn = new Scene(pn, 180, 150);
stg1.setScene(scn);
stg1.setResizable(false);
stg1.show();
}
43
TextField

44
TextField: Code
public void start(Stage stg1) throws Exception {
HBox pn = new HBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
pn.getChildren().add(new Label("Who's fav K-pop star?"));
TextField tf = new TextField();
tf.setPrefWidth(150);
pn.getChildren().add(tf);
Scene scn = new Scene(pn, 300, 100);
stg1.setScene(scn);
stg1.show();
}

45
CheckBox

46
 CheckBox: Code
public void start(Stage stg1) throws Exception {
VBox pn = new VBox();
pn.setAlignment(Pos.CENTER);
pn.setSpacing(20);
pn.getChildren().add(new Label("Who are your fav K-pop stars?"));
CheckBox cb1 = new CheckBox("Joo Ko-Wee");
CheckBox cb2 = new CheckBox("Park Bo-Wow");
CheckBox cb3 = new CheckBox("Sandiaga Yunho");
pn.getChildren().add(cb1);
pn.getChildren().add(cb2);
pn.getChildren().add(cb3);
Scene scn = new Scene(pn, 200, 200);
stg1.setScene(scn);
stg1.show();
}

47
Inspired by:
Liang, Introduction to Java, 10th edition, Pearson.
https://www.geeksforgeeks.org/
Google