CSC 3104
ADVANCED PROGRAMMING
Chapter 1 Basic GUI Programming
Motivations
JavaFX is a new framework for developing Java GUI
programs. The JavaFX API is an excellent example of how
the object-oriented principle is applied. This chapter serves
two purposes. First, it presents the basics of JavaFX
programming. Second, it uses JavaFX to demonstrate
OOP. Specifically, this chapter introduces the framework
of JavaFX and discusses JavaFX GUI components and
their relationships.
2 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Objectives
◼ To distinguish between JavaFX, Swing, and AWT (§14.2).
◼ To write a simple JavaFX program and understand the relationship among stages,
scenes, and nodes (§14.3).
◼ To create user interfaces using panes, UI controls, and shapes (§14.4).
◼ To use the common properties style and rotate for nodes (§14.6).
◼ To create colors using the Color class (§14.7).
◼ To create fonts using the Font class (§14.8).
◼ To create images using the Image class and to create image views using the ImageView
class (§14.9).
◼ To layout nodes using Pane, StackPane, FlowPane, GridPane, BorderPane, HBox,
and VBox (§14.10).
3 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
JavaFX vs Swing and AWT
◼ Swing and AWT are replaced by the JavaFX platform for
developing rich Internet applications.
◼ When Java was introduced, the GUI classes were bundled in a
library known as the Abstract Windows Toolkit (AWT).
◼ AWT is fine for developing simple graphical user interfaces,
but not for developing comprehensive GUI projects.
◼ AWT is prone to platform-specific bugs. The AWT user-
interface components were replaced by a more robust, versatile,
and flexible library known as Swing components.
◼ Swing components are painted directly on canvases using Java
code. Swing components depend less on the target platform and
use less of the native GUI resource.
◼ With the release of Java 8, Swing is replaced by a completely
new GUI platform known as JavaFX.
4 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Basic Structure of JavaFX
▪ Application
▪ Override the start(Stage) method
▪ Stage, Scene, and Nodes
Stage
Scene
Button
MyJavaFX Run
MultipleStageDemo Run
5 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
public class MyJavaFX extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a button and place it in the scene
Button btOK = new Button("OK");
Scene scene = new Scene(btOK, 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
6 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
public class MultipleStageDemo extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
Scene scene = new Scene(new Button("OK"), 200, 250);
primaryStage.setTitle("MyJavaFX"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
Stage stage = new Stage(); // Create a new stage
stage.setTitle("Second Stage"); // Set the stage title
// Set a scene with a button in the stage
stage.setScene(new Scene(new Button("New Stage"), 100, 100));
stage.show(); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
7 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Panes, UI Controls, and Shapes
ButtonInPane Run
8 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class ButtonInPane extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
pane.getChildren().add(new Button("OK"));
Scene scene = new Scene(pane, 200, 50);
primaryStage.setTitle("Button in a pane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
/**
* The main method is only needed for the IDE with limited
* JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
9 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Common Properties and
Methods for Nodes
▪ style: set a JavaFX CSS style
▪ rotate: Rotate a node
NodeStyleRotateDemo Run
10 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; /**
import javafx.scene.Scene; * The main method is only needed for the IDE with l
import javafx.scene.control.Button; * JavaFX support. Not needed for running from the
command line.
import javafx.stage.Stage; */
import javafx.scene.layout.StackPane; public static void main(String[] args) {
launch(args);
public class NodeStyleRotateDemo extends Application { }
}
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a scene and place a button in the scene
StackPane pane = new StackPane();
Button btOK = new Button("OK"); untuk tukar border
btOK.setStyle("-fx-border-color: blue;");
pane.getChildren().add(btOK);
pane.setRotate(45);
pane.setStyle(
"-fx-border-color: red; -fx-background-color: lightgray;");
Scene scene = new Scene(pane, 200, 250);
primaryStage.setTitle("NodeStyleRotateDemo"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
11 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
The Color Class
12 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
The Font Class
FontDemo Run
13 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; // Create a scene and place it in the stage
import javafx.scene.Scene; Scene scene = new Scene(pane);
import javafx.scene.layout.*; primaryStage.setTitle("FontDemo"); // Set the stage title
import javafx.scene.paint.Color; primaryStage.setScene(scene); // Place the scene in the stage
import javafx.scene.shape.Circle; primaryStage.show(); // Display the stage
import javafx.scene.text.*; }
import javafx.scene.control.*;
import javafx.stage.Stage; /**
* The main method is only needed for the IDE with limited
public class FontDemo extends Application { * JavaFX support. Not needed for running from the command line.
@Override */
// Override the start method in the Application class public static void main(String[] args) {
public void start(Stage primaryStage) { launch(args);
// Create a pane to hold the circle }
Pane pane = new StackPane(); }
// Create a circle and set its properties
Circle circle = new Circle();
circle.setRadius(50);
circle.setStroke(Color.BLACK);
circle.setFill(new Color(0.5, 0.5, 0.5, 0.1));
pane.getChildren().add(circle); // Add circle to the pane
// Create a label and set its properties
Label label = new Label("JavaFX");
label.setFont(Font.font("Times New Roman",
FontWeight.BOLD, FontPosture.ITALIC, 20));
pane.getChildren().add(label);
14 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
The Image Class
Note: The images for this topic can be obtained from
https://liveexample.pearsoncmg.com/common/image/, e.g.
https://liveexample.pearsoncmg.com/common/image/us.gif.
15 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
The ImageView Class
ShowImage Run
16 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; ImageView imageView3 = new ImageView(image);
import javafx.scene.Scene; imageView3.setRotate(90);
import javafx.scene.layout.HBox; pane.getChildren().add(imageView3);
import javafx.scene.layout.Pane;
import javafx.geometry.Insets; // Create a scene and place it in the stage
import javafx.stage.Stage; Scene scene = new Scene(pane);
import javafx.scene.image.Image; primaryStage.setTitle("ShowImage"); // Set the stage title
import javafx.scene.image.ImageView; primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
public class ShowImage extends Application { }
@Override
// Override the start method in the Application class /**
public void start(Stage primaryStage) { * The main method is only needed for the IDE with limited
// Create a pane to hold the image views * JavaFX support. Not needed for running from the command line.
Pane pane = new HBox(10); */
pane.setPadding(new Insets(5, 5, 5, 5)); public static void main(String[] args) {
Image image = new Image("image/us.gif"); launch(args);
pane.getChildren().add(new ImageView(image)); }
}
ImageView imageView2 = new ImageView(image);
imageView2.setFitHeight(100);
imageView2.setFitWidth(100);
pane.getChildren().add(imageView2);
17 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Layout Panes
JavaFX provides many types of panes for organizing nodes
in a container.
18 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
FlowPane
ShowFlowPane Run
19 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application;
import javafx.geometry.Insets; // Create a scene and place it in the stage
import javafx.scene.Scene; Scene scene = new Scene(pane, 200, 250);
import javafx.scene.control.Label; primaryStage.setTitle("ShowFlowPane"); // Set the stage title
import javafx.scene.control.TextField; primaryStage.setScene(scene); // Place the scene in the stage
import javafx.scene.layout.FlowPane; primaryStage.show(); // Display the stage
import javafx.stage.Stage; }
public class ShowFlowPane extends Application { /**
@Override * The main method is only needed for the IDE with limited
// Override the start method in the Application class * JavaFX support. Not needed for running from the command line.
public void start(Stage primaryStage) { */
// Create a pane and set its properties public static void main(String[] args) {
FlowPane pane = new FlowPane(); launch(args);
pane.setPadding(new Insets(11, 12, 13, 14)); }
pane.setHgap(5); }
pane.setVgap(5);
// Place nodes in the pane
pane.getChildren().addAll(new Label("First Name:"),
new TextField(), new Label("MI:"));
TextField tfMi = new TextField();
tfMi.setPrefColumnCount(1);
pane.getChildren().addAll(tfMi, new Label("Last Name:"),
new TextField());
20 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
GridPane
ShowGridPane
Run
21 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; // Place nodes in the pane
import javafx.geometry.HPos; pane.add(new Label("First Name:"), 0, 0);
import javafx.geometry.Insets; pane.add(new TextField(), 1, 0);
import javafx.geometry.Pos; pane.add(new Label("MI:"), 0, 1);
import javafx.scene.Scene; pane.add(new TextField(), 1, 1);
import javafx.scene.control.Button; pane.add(new Label("Last Name:"), 0, 2);
import javafx.scene.control.Label; pane.add(new TextField(), 1, 2);
import javafx.scene.control.TextField; Button btAdd = new Button("Add Name");
import javafx.scene.layout.GridPane; pane.add(btAdd, 1, 3);
import javafx.stage.Stage; GridPane.setHalignment(btAdd, HPos.RIGHT);
public class ShowGridPane extends Application { // Create a scene and place it in the stage
@Override Scene scene = new Scene(pane);
// Override the start method in the Application class primaryStage.setTitle("ShowGridPane"); // Set the stage title
public void start(Stage primaryStage) { primaryStage.setScene(scene); // Place the scene in the stage
// Create a pane and set its properties primaryStage.show(); // Display the stage
GridPane pane = new GridPane(); }
pane.setAlignment(Pos.CENTER);
pane.setPadding(new Insets(11.5, 12.5, 13.5, 14.5)); /**
pane.setHgap(5.5); * The main method is only needed for the IDE with limited
pane.setVgap(5.5); * JavaFX support. Not needed for running from the command line.
*/
public static void main(String[] args) {
launch(args);
}
}
22 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
BorderPane
ShowBorderPane Run
23 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; // Define a custom pane to hold a label in the center of the
import javafx.geometry.Insets; pane
import javafx.scene.Scene; class CustomPane extends StackPane {
import javafx.scene.control.Label; public CustomPane(String title) {
import javafx.scene.layout.BorderPane; getChildren().add(new Label(title));
import javafx.scene.layout.StackPane; setStyle("-fx-border-color: red");
import javafx.stage.Stage; setPadding(new Insets(11.5, 12.5, 13.5, 14.5));
}
public class ShowBorderPane extends Application { }
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a border pane
BorderPane pane = new BorderPane();
// Place nodes in the pane
pane.setTop(new CustomPane("Top"));
pane.setRight(new CustomPane("Right"));
pane.setBottom(new CustomPane("Bottom"));
pane.setLeft(new CustomPane("Left"));
pane.setCenter(new CustomPane("Center"));
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowBorderPane"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
public static void main(String[] args) {
launch(args);
}
}
24 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
HBox
25 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
VBox
ShowHBoxVBox Run
26 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
public class ShowHBoxVBox extends Application {
@Override // Override the start method in the Application class
public void start(Stage primaryStage) {
// Create a border pane
BorderPane pane = new BorderPane();
// Place nodes in the pane
pane.setTop(getHBox());
pane.setLeft(getVBox());
// Create a scene and place it in the stage
Scene scene = new Scene(pane);
primaryStage.setTitle("ShowHBoxVBox"); // Set the stage title
primaryStage.setScene(scene); // Place the scene in the stage
primaryStage.show(); // Display the stage
}
27 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
private HBox getHBox() {
HBox hBox = new HBox(15);
hBox.setPadding(new Insets(15, 15, 15, 15));
hBox.setStyle("-fx-background-color: gold");
hBox.getChildren().add(new Button("Computer Science"));
hBox.getChildren().add(new Button("Chemistry"));
ImageView imageView = new ImageView(new Image("image/us.gif"));
hBox.getChildren().add(imageView);
return hBox;
}
private VBox getVBox() {
VBox vBox = new VBox(15);
vBox.setPadding(new Insets(15, 5, 5, 5));
vBox.getChildren().add(new Label("Courses"));
Label[] courses = {new Label("CSCI 1301"), new Label("CSCI 1302"),
new Label("CSCI 2410"), new Label("CSCI 3720")};
for (Label course: courses) {
VBox.setMargin(course, new Insets(0, 0, 0, 15));
vBox.getChildren().add(course);
}
return vBox;
}
public static void main(String[] args) {
launch(args);
}
}
28 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
29 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Frequently Used UI Controls
Throughout this book, the prefixes lbl, bt, chk, rb, tf, pf, ta, cbo, lv,
scb, sld, and mp are used to name reference variables for Label,
Button, CheckBox, RadioButton, TextField, PasswordField,
TextArea, ComboBox, ListView, ScrollBar, Slider, and
MediaPlayer.
30 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Labeled
A label is a display area for a short text, a node, or both. It is often
used to label other controls (usually text fields). Labels and buttons
share many common properties. These common properties are
defined in the Labeled class.
31 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Label
The Label class defines labels.
LabelWithGraphic Run
32 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; Ellipse ellipse = new Ellipse(50, 50, 50, 25);
import javafx.stage.Stage; ellipse.setStroke(Color.GREEN);
import javafx.scene.Scene; ellipse.setFill(Color.WHITE);
import javafx.scene.control.ContentDisplay; StackPane stackPane = new StackPane();
import javafx.scene.control.Label; stackPane.getChildren().addAll(ellipse, new Label("JavaFX"));
import javafx.scene.image.Image; Label lb5 = new Label("A pane inside a label", stackPane);
import javafx.scene.image.ImageView; lb5.setContentDisplay(ContentDisplay.BOTTOM);
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane; HBox pane = new HBox(20);
import javafx.scene.paint.Color; pane.getChildren().addAll(lb1, lb2, lb3, lb4, lb5);
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle; // Create a scene and place it in the stage
import javafx.scene.shape.Ellipse; Scene scene = new Scene(pane, 450, 150);
primaryStage.setTitle("LabelWithGraphic"); // Set the stage title
public class LabelWithGraphic extends Application { primaryStage.setScene(scene); // Place the scene in the stage
@Override // Override the start method in the Application class primaryStage.show(); // Display the stage
public void start(Stage primaryStage) { }
ImageView us = new ImageView(new Image("image/us.gif"));
Label lb1 = new Label("US\n50 States", us); /**
lb1.setStyle("-fx-border-color: green; -fx-border-width: 2"); * The main method is only needed for the IDE with limited
lb1.setContentDisplay(ContentDisplay.BOTTOM); * JavaFX support. Not needed for running from the command line.
lb1.setTextFill(Color.RED); */
public static void main(String[] args) {
Label lb2 = new Label("Circle", new Circle(50, 50, 25)); launch(args);
lb2.setContentDisplay(ContentDisplay.TOP); }
lb2.setTextFill(Color.ORANGE); }
Label lb3 = new Label("Retangle", new Rectangle(10, 10, 50, 25));
lb3.setContentDisplay(ContentDisplay.RIGHT);
Label lb4 = new Label("Ellipse", new Ellipse(50, 50, 50, 25));
lb4.setContentDisplay(ContentDisplay.LEFT);
33 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
ButtonBase and Button
A button is a control that triggers an action event when clicked.
JavaFX provides regular buttons, toggle buttons, check box buttons,
and radio buttons. The common features of these buttons are
defined in ButtonBase and Labeled classes.
34 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Button Example
ButtonDemo Run
35 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
import javafx.application.Application; @Override // Override the start method in the Application class
import javafx.stage.Stage; public void start(Stage primaryStage) {
import javafx.geometry.Pos; // Create a scene and place it in the stage
import javafx.scene.Scene; Scene scene = new Scene(getPane(), 450, 200);
import javafx.scene.control.Button; primaryStage.setTitle("ButtonDemo"); // Set the stage title
import javafx.scene.image.ImageView; primaryStage.setScene(scene); // Place the scene in the stage
import javafx.scene.layout.BorderPane; primaryStage.show(); // Display the stage
import javafx.scene.layout.HBox; }
import javafx.scene.layout.Pane;
import javafx.scene.text.Text; /**
* The main method is only needed for the IDE with limited
public class ButtonDemo extends Application { * JavaFX support. Not needed for running from the command line.
protected Text text = new Text(50, 50, "JavaFX Programming"); */
public static void main(String[] args) {
protected BorderPane getPane() { launch(args);
HBox paneForButtons = new HBox(20); }
Button btLeft = new Button("Left", }
new ImageView("image/left.gif"));
Button btRight = new Button("Right",
new ImageView("image/right.gif"));
paneForButtons.getChildren().addAll(btLeft, btRight);
paneForButtons.setAlignment(Pos.CENTER);
paneForButtons.setStyle("-fx-border-color: green");
BorderPane pane = new BorderPane();
pane.setBottom(paneForButtons);
Pane paneForText = new Pane();
paneForText.getChildren().add(text);
pane.setCenter(paneForText);
btLeft.setOnAction(e -> text.setX(text.getX() - 10));
btRight.setOnAction(e -> text.setX(text.getX() + 10));
return pane;
}
36 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
TextField
A text field can be used to enter or display a string. TextField is a
subclass of TextInputControl.
37 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
TextField Example
TextFieldDemo Run
38 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
Summary
◼ Layout panes – FlowPane, GridPane, BorderPane, Hbox, Vbox
and combinations of them
◼ Esp. slides #20, #22, #24 and #27 – #28.
◼ Controls – Label, Button, TextField
◼ Some related concepts will be covered in later chapters.
39 Chapter 1 Basic GUI Programming CSC 3104 Advanced Programming
End of Chapter 1
