JavaFX Basics

Programming Fundamentals (Java) II| Lecture 2

2
JavaFX Application Lifecycle
1. Start
● Override the start(Stage primaryStage) method.
2. Launch
● Call Application.launch(args) to start the app.
3. Stop
● Override the stop() method for cleanup tasks.

3
Structure of a JavaFX Application
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;
public class HelloWorld extends Application {
@Override
public void start(Stage primaryStage) {
Label label = new Label("Hello, JavaFX!");
Scene scene = new Scene(label, 300, 200);
primaryStage.setScene(scene);
primaryStage.setTitle("Hello JavaFX");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}

4
Core JavaFX Components
Stage: The top-level container (like a window). It is a window for displaying a scene
that contains nodes.
Scene: Holds all the UI elements.
Nodes: UI elements (buttons, labels, etc.) or layout containers. Nodes can be shapes,
image views, UI controls, and panes. Panes, UI controls, and shapes are subtypes of
Node. Panes are used to hold nodes.
Parent: Base class for containers (e.g., VBox, HBox, Pane).

5
6
Stage
Stage is a window for displaying a scene that contains nodes.
Multiple stages can be displayed in a JavaFX program.

7
8
Panes

9
Coordinates
The Java coordinate system is measured in pixels, with (0, 0) at its upper-left corner.

10
Property Binding
JavaFX introduces a new concept called property binding that enables a target object
to be bound to a source object.
If the value in the source object changes, the target object is also changed
automatically.
The target object is called a binding object or a binding property and the source object
is called a bindable object or observable object.

11
Property Binding

12
Property Binding
A binding property has a value getter method, setter method, and property getter
method.

13
Property Binding

14
Common Properties and Methods for Nodes
The abstract Node class defines many properties and methods that are common to all
nodes.
JavaFX style properties are similar to cascading style sheets (CSS) used to specify the
styles for HTML elements in a Web page. So, the style properties in JavaFX are called
JavaFX CSS.
In JavaFX, a style property is defined with a prefix –fx-.
Note properties are available in JavaFX CSS Reference Guide.
The syntax for setting a style is styleName:value.
For example, circle.setStroke(Color.BLACK); circle.setFill(Color.RED); are written as:
circle.setStyle("-fx-stroke: black; -fx-fill: red;");

15
The Color Class
The Color class can be used to create colors.

16
The Color Class
A color instance can be constructed using the following constructor:
public Color(double r, double g, double b, double opacity);
Color color = new Color(0.25, 0.14, 0.333, 0.51);
Alternatively, you can use one of the many standard colors such as BEIGE, BLACK,
BLUE, BROWN, CYAN, DARKGRAY, GOLD, GRAY, GREEN, LIGHTGRAY, MAGENTA,
NAVY, ORANGE, PINK, RED, SILVER, WHITE, and YELLOW defined as constants in
the Color class. The following code, for instance, sets the fill color of a circle to red:
circle.setFill(Color.RED);

17
The Font Class
A Font describes font name, weight, and size.
You can obtain a list of available font family names by invoking the static
getFamilies() method.
The font postures are two constants: FontPosture.ITALIC and
FontPosture.REGULAR.
For example, the following statements create two fonts.
Font font1 = new Font("SansSerif", 16);
Font font2 = Font.font("Times New Roman", FontWeight.BOLD,
FontPosture.ITALIC, 12);

18
The Font Class

19
The Image and ImageView Classes
The Image class represents a graphical image and the ImageView class can be used to
display an image.
Image image = new Image("image/us.gif");
ImageView imageView = new ImageView(image);
or
ImageView imageView = new ImageView("image/us.gif");

20
The Image and ImageView Classes
Image encapsulates information about images.

21
The Image and ImageView Classes
ImageView is a node for displaying an image.

22
The Image and ImageView Classes
The image file must be placed in the same directory as the class file.

23
The Image and ImageView Classes
If you use the URL to locate the image file, the URL protocal http:// must be present.
So the following code is wrong.
new Image("www.cs.armstrong.edu/liang/image/us.gif");
It must be replaced by
new Image("http://www.cs.armstrong.edu/liang/image/us.gif");

24
Layout Panes
JavaFX provides many types of panes for automatically laying out nodes in a desired
location and size.

25
FlowPane
FlowPane arranges the nodes in the pane horizontally from left to right or vertically
from top to bottom in the order in which they were added.

26
GridPane
A GridPane arranges nodes in a grid (matrix) formation. The nodes are placed in the
specified column and row indices.

27
28
BorderPane
A BorderPane can place nodes in five regions: top, bottom, left, right, and center, using
the setTop(node), setBottom(node), setLeft(node), setRight(node), and
setCenter(node) methods.

29
Q&A

Any Questions?

30