Scribd
Upload
2 views

Introduction

JavaFX is a graphics framework for creating desktop and mobile applications, allowing for UI design through XML or Java code. Key components include Stages, Scenes, and various Layouts and Components, with properties that control appearance and event handling for user interactions. The document also provides guidance on setting up JavaFX, improving UI appearance, and resources for further learning and tutorials.

Uploaded by

Gabriel Katembo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Introduction

JavaFX is a graphics framework for creating desktop and mobile applications, allowing for UI design through XML or Java code. Key components include Stages, Scenes, and various Layouts and Components, with properties that control appearance and event handling for user interactions. The document also provides guidance on setting up JavaFX, improving UI appearance, and resources for further learning and tutorials.

Uploaded by

Gabriel Katembo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Introduction to JavaFX

JavaFX is a graphics framework for creating


desktop and mobile apps.

JavaFX interfaces can be defined declaratively


(in XML) instead of Java code. (In Swing, the
UI is defined entirely in code.)

Example of both ways shown later.


Some Concepts
A JavaFX application contains a Window

that contains a Stage

that contains a graph (tree) of Components


and Layouts

appearance is controlled by properties you can set:

size, color, background, spacing (social distancing), ...


U.I. is Presented on a Stage
The Stage Contains a Scene
stage.setScene( scene );
Scene has Components & Layouts
scene.setLayout( livingRoomLayout );
scene.getChildren().add( Sofa );
What You Need to Know
1. How do I get a Stage?

2. What are the Layouts and Containers?

3. How do I use Components?

4. What Properties can I set? (appearance)

5. How to respond to Events?


Create this UI in Code
Structure of JavaFX App (main)
public class HelloFX extends Application {
public static void main(String[] args) {
launch(args);
}

@Override
public void start(Stage primaryStage) {
// Create a container as root node in the Scene
FlowPane root = new FlowPane();
// Set appearance of container (spacing, alignment)

// Add components to the container)

// Show the scene graph on the Stage


primaryStage.setScene(new Scene(root));
primaryStage.show();
}
Define Container & Components

Label (read-only) TextField (input) Button

FlowPane - components "flow" left-to-right


Add Components
public void start(Stage primaryStage) {
FlowPane root = new FlowPane();
// Set appearance of container

// Add components to the container)


Label prompt = new Label("Who are you?");
TextField nameField = new TextField();
Button button = new Button("Greet Me");
root.getChildren().add(prompt);
root.getChildren().add(nameField);
root.getChildren().add(button);
View It

Looks ugly.
Run-time Annoyance
When you run a JavaFX application with Java 11 you
may get this message:

Error: JavaFX runtime components are


missing, and are required to run this...

This relates to modules in Java 9+. Here's a fix:

Cmd line:
java --module-path /path/to/javafx/lib
--add-modules javafx.base,javafx.controls
IDE: Add --module-path and --add-modules to VM args.
Java 8 - Retrograde Solution
Java 8 includes JavaFX in the JDK (no external Jars)
and does not use modules.

You can add JDK 8 to your system and configure it in


Eclipse or IntelliJ, and maybe in VS Code.
You choose which IDE (JDK8, JDK11, etc.) for each
project.

You must be careful to run from command line using Java


8 "java" command, too.
Otherwise JavaFX classes will not be found.
Improve Appearance using Properties
Every control has properties you can set that effect its
appearance. Modify the FlowPane:

FlowPane root = new FlowPane();


// Set appearance of container
root.setAlignment(Pos.CENTER);
root.setHgap(10.0);
root.setPadding(new Insets(10.0));
Where to learn properties?
The Oracle JavaFX Tutorial gives many examples of
setting properties of components.

Oracle has downloadable PDF and ePub for...


Getting Started with JavaFX
JavaFX Layouts
JavaFX UI Controls

Use SceneBuilder (visual layout) -- it's even easier.


Modularize
start() method is getting long.
Separate component creation to its own method.

public void start(Stage primaryStage) {


FlowPane root = initComponents();

// Show the scene graph on the Stage


primaryStage.setScene(new Scene(root));
primaryStage.show();
Add Behavior
UI should respond to click on "Greet Me" button.
Events
 Graphics applications use events.
 Event is caused by user actions.
 An event dispatcher notifies interested objects.

Event Handler

EventQueue void handle( Event event ) {


1. ActionEvent notify
Event 2. MouseEvent
3. KeyEvent
4. WindowEvent }
...
Events
1. User clicks mouse on a button -- that's an Event.
2. JavaFX creates a MouseEvent object.
– the MouseEvent describes what happened:
which component? which mouse button?
3. JavaFX looks for a registered "Event Handler", and
calls it using the ActionEvent as parameter.
Event Handler
Click! MouseEvent void handle( Event event ) {
notify
MyButton

JavaFX user interface


Adding Event Handlers
You tell JavaFX what events you want to handle, and
which code to invoke:

button.setOnAction( EventHandler<ActionEvent> )

== or ==

button.addEventHandler( eventType, eventHandler )


Write an EventHandler
This example uses an inner class.
Many examples use anonymous class or lambda.

class ClickHandler
implements EventHandler<ActionEvent> {
public void handle(ActionEvent event) {
String name = nameField.getText().trim();
if (name.isEmpty()) {
nameField.setPromptText(
"Please enter a name");
}
else showDialog("Hello, "+name);
}
}
Access the TextField
EventHandler needs access to the nameField.
Define it as an attribute instead of a local variable.

public class HelloFX extends Application {


private TextField nameField;
public static void main(String[] args) {
launch(args);
}

class ClickHandler implements ... {


// inner class can access outer class
}
Attach Event Handler
private void initComponents() {

Button button = new Button("Greet me");

button.setOnAction(new ClickHandler());
showDialog
Instead of printing on boring System.out,
pop-up an Alert box to greet user.

public void showDialog(String message) {


Alert alert = new
Alert(Alert.AlertType.INFORMATION);
alert.setTitle("Greetings");
alert.setHeaderText( message );
// wait for user to dismiss dialog
alert.showAndWait();
}
Run it
Exercise - Improve the UI

TODO 1:
TODO 2:
After greeting the
If user presses ENTER in
person, clear the text
nameField, also invoke
from nameField.
ClickHandler, by adding an event
handler to nameField.
You can reuse the same
ClickHandler object, don't create
another one.
SceneBuilder
Visual tool for creating graphical UI. But first...
Writing a UI in Code is Good
Good to learn the concepts and components
first.

For a dynamic UI, it may be necessary to add


components using code.
Good Tutorials
Oracle's JavaFX Tutorial - lots of info about components.
https://docs.oracle.com/javase/8/javase-
clienttechnologies.htm

code.makery - SceneBuilder tutorial, 7 parts.


https://code.makery.ch/library/javafx-tutorial/part1/

Vojtech Ruzicka JavaFX & SceneBuilder tutorial


https://www.vojtechruzicka.com/javafx-getting-started/
also 7 parts. Instructions for IntelliJ.
Suggest a Good Tutorial?
If you find a good tutorial site or video(s), post the links
on Google classroom.

Or send to me. Posting for everyone is better.

You might also like