JAVA FX GUI
PROGRAMMING
IN JAVA
Study reckoners tech tutorial
Agenda
◦ • Introduction to JavaFX
◦ • JavaFX Architecture
◦ • Scene Graph
◦ • Controls
◦ • Layouts
◦ • Events
◦ • Styling
What is JavaFX?
◦ • Modern GUI framework for Java
◦ • Replaces Swing
◦ • Supports rich internet applications
JavaFX vs Swing
JavaFX is the modern choice for new Java desktop apps. It offers better graphics,
animations, CSS styling, and FXML (for separating UI design).
Swing is an older, mature, but less visually modern toolkit. It's often used for
maintaining existing applications or very simple UIs.
In short:
•JavaFX: Modern, rich UI, better for new projects.
•Swing: Older, stable, good for legacy or very basic apps.
JavaFX Application Structure
◦ • Application class
◦ • start(Stage primaryStage) method
Stage and Scene
◦ • Stage: Top-level container
◦ • Scene: Container for all content
Scene Graph
◦ • Hierarchical tree structure
◦ • Nodes are elements in the graph
:
Creating a Simple JavaFX App
[Link]: Download the JavaFX SDK from the OpenJFX website ([Link]).
Extract the downloaded file to a place you'll remember (e.g., C:\javafx-sdk /home/user/javafx- or
sdk).
[Link] Your Code: Save the provided JavaFX code into a file named
[Link] on your computer.
[Link] Command Prompt/Terminal: Go to the folder where you saved
[Link].
[Link]: Type this command and press Enter:
Bash
javac --module-path /path/to/your/javafx-sdk/lib --add-modules [Link],[Link] [Link]
•Important: Replace /path/to/your/javafx-sdk/lib lib with the actual location of the folder inside the JavaFX SDK you downloaded.
[Link]: After compiling, type this command and press Enter:
Bash
java --module-path /path/to/your/javafx-sdk/lib --add-modules [Link],[Link] SimpleJavaFXApp
•Again, make sure to use the correct path to your JavaFX lib folder.
A small window should pop up with "Hello, JavaFX!" and a button!
JavaFX Controls
◦ • Button, Label, TextField, CheckBox, etc.
Label and Button Example
◦ • Label label = new Label("Hello");
◦ • Button btn = new Button("Click")
Handling Events
◦ • setOnAction() method
◦ • Lambda expressions for event handling
TextField and PasswordField
◦ • Input fields for user data
RadioButton and
ToggleGroup
◦ • Used for single-selection options
CheckBox and ComboBox
◦ • For multiple selections and dropdowns
Layouts Overview
◦ • Pane, VBox, HBox, BorderPane, GridPane
Using VBox and HBox
◦ • VBox: vertical layout
◦ • HBox: horizontal layout
BorderPane Layout
◦ • Top, Bottom, Left, Right, Center sections
GridPane Layout
◦ • Layout in rows and columns
AnchorPane and StackPane
◦ • Flexible and stack-based layout options
Styling with CSS
◦ • External and inline CSS
◦ • Styling nodes using selectors
Applying CSS to JavaFX
◦ • [Link]().add("[Link]");
FXML Overview
◦ • Declarative UI with XML
◦ • Separate logic and design
Loading FXML Files
◦ • [Link]() method
To load an FXML file in JavaFX, you use the FXMLLoader class, which reads the FXML file, instantiates the UI
components, and connects them with the controller.
Steps to Load an FXML File:
[Link] an FXML file ([Link] ) with your UI layout.
[Link] FXMLLoader : in your Java code
FXMLLoader loader = new
FXMLLoader(getClass().getResource("[Link]")); Parent root =
[Link](); Scene scene = new Scene(root);
[Link](scene); [Link]();
Controllers in FXML
◦ • Handle UI actions and data
In FXML, a controller is a Java class that manages the behavior of the user
interface defined in an FXML file. It allows you to separate UI layout from logic,
making your JavaFX application more modular and maintainable.
Key Points About Controllers in FXML:
: You specify a controller in the root element of an FXML file using the
•Defining a Controller
fx:controller attribute.
•Connecting UI Elements: The controller class can reference UI components
using @FXML annotations and interact with them programmatically.
•Event Handling: Controllers handle user interactions, such as button clicks, by
defining methods linked to UI events.
•Lifecycle: The initialize() method in the controller is automatically called after the FXML file is loaded, allowing you to set up initial states.
Integrating JavaFX and Scene
Builder
◦ • Drag-and-drop UI creation
◦ • Generates FXML files
JavaFX Properties
◦ • Observable and Bindable values
JavaFX provides specific property classes for primitive types and objects:
•StringProperty: For String values.
•IntegerProperty: For int values.
•DoubleProperty: For double values.
•BooleanProperty: For boolean values.
•ObjectProperty<T>: For any Java object of type T.
These classes often come in two main forms:
•SimpleStringProperty, SimpleIntegerProperty, etc.: Basic implementations.
•ReadOnlyStringProperty, etc.: For properties whose values can only be read, ensuring immutability from external code.
All properties implement the ObservableValue interface, which means you can "observe" them for changes.
Binding in JavaFX
◦ • Automatic synchronization between variables
2D Graphics in JavaFX
◦ • Shapes: Circle, Rectangle, Line
Animation and Effects
◦ • Transitions and visual effects
Deployment
◦ • Run as standalone app or web-based
Conclusion
◦ • JavaFX enables modern GUIs
◦ • Practice layouts, events, and styling