SOFT2201 Module 4 Tutorial JavaFX and Java GUI
We will be using JavaFX through out the semester as a GUI toolkit. JavaFX allows us to create rich multi-media applications, allowing programmers to create user-interfaces that integrate with the operating system’s desktop environment.
Question 1: Setting up a javaFX project
We want to construct a gradle project where we will be able to integrate javafx for the next set of exercises. Initialise a gradle project and modify the build.gradle file to include the following plugin.
plugins {
id ‘application’
id ‘org.openjfx.javafxplugin’ version ‘0.0.8’
}
And include the javafx controls module within the build.gradle file.
javafx {
version = “12.0.2”
modules = [ ‘javafx.controls’ ]
}
Within your project, you should import the following classes to use within your JavaFX application. You will need to utilise them through out the lab.
import javafx.application.Application; import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.canvas.Canvas;
1
Question 2: Creating a window
Togetstarted,wewillcreateasimpleHello JavaFXwindowapplication.Wewillbeusingthisas the basis for our javafx applications. The first part of our application will contain a start method. The start method will be an overidden method from the Application class.
Our first java fx application will manage the initialisation by incorporating the main within its class. import javafx.application.Application;
public class HelloFX extends Application {
@Override
public void start(Stage stage) { //Application initialisation code here
}
public static void main(String[] args) { launch();
} }
The launch method will create a standalone application. An Application instance will be con- structed and the start method will be invoked.
Let’s create a window, we will want to import javafx.scene.Scene, Group and
javafx.stage.Stage.
Please refer to the Java FX 12 API documentation through out the semester.
We will need to set up a Scene, Group and Stage object. The stage object will contain our scene and our scene will contain all renderable objects.
Group root = new Group(); Scene scene = new Scene(root); stage.setScene(scene);
Afterwards we will set a new label for the topbar of our application.
stage.setTitle(“Hello JavaFX”);
We now want a canvas which will allow us to draw images onto it. We will create a canvas with the
dimensions of 600×400.
Canvas canvas = new Canvas(600, 400);
However, we will need to attach the canvas to our root node. We can do this by retrieving the collection
through the .getChildren method and simply add the canvas to it through the .add method. We will then need to call stage.show() which will then start rendering our scene. Onceyouhavecreatedthis,launchyourapplicationthroughgradle runandviewyourresult.
SOFT2201
Software Construction Page 2 of 5
Question 3: Drawing elements on screen
We want to start drawing elements on the screen. JavaFX provides a simple interface for drawing 2D and 3D primitives. You will need to include the following types into your project. You may download a template from Canvas that will have all the necessary classes and structure for you.
import javafx.scene.shape.Circle;
import javafx.scene.canvas.GraphicsContext; import javafx.scene.paint.Color;
We will need to use a Group type node to hold all the objects that will render the scene.
Our Circle object can be positioned and sized on instantiation using its constructor. We will need
to extract the graphics context from the Canvas object that will provide us an interface to draw with.
// Create a circle at coordinates (50, 50) of radius 10
Circle circle = new Circle(50, 50, 10, Color.BLUE); // Add to an existing Group object root.getChildren().add(circle);
If you need more precise control, you can draw the circle manually
double x = 50.0; double y = 50.0; double radius = 10.0;
GraphicsContext gc = canvas.getGraphicsContext2D(); //Set the default fill colour to blue gc.setFill(Color.BLUE);
gc.fillOval(x – radius,
y – radius,
radius * 2,
radius * 2);
Please refer to the the GraphicsContext documentation for the appropriate draw, fill and stroke methods.
After you have simply rendered a circle on the screen, draw a Ellipse and Rectangle and Line object onto the screen. Refer to the documentation by checking the sub classes.
• Do you need a shape object to draw an element?
• What is the advantage of using a shape type within our application? • What could we do to make the drawing of shapes easier?
SOFT2201
Software Construction Page 3 of 5
Question 4: Bouncy ball
Create a program that will bounce a ball around the screen. Start with the ball travelling from the bottom of the screen to the top and back again.
import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.util.Duration;
When we construct a Timeline object we will need to Timeline animationLoop = new Timeline();
animationLoop.setCycleCount(Timeline.INDEFINITE);
We will need to utilise both KeyFrame as a single and continually updated rendered frame onto the
canvas.
Define a duration, in this instance we will aim to update the frame every 60th of a second.
//Approximation
private static final double KEY_FRAME_DURATION = 0.017;
Afterwards, construct a key frame object, it will require a type which implements EventHandler
interface (You can use a lambda function or method reference in this scenario).
KeyFrame frame = new KeyFrame(Duration.seconds(KEY_FRAME_DURATION), (actionEvent) -> {
//Your event handler logic
});
Afterwards, this is added to the Timeline object and rendered on each call. animationLoop.getKeyFrames().add(frame);
animationLoop.play();
In a more complicated simulation, you might want to separate rendering of the model from the control of the model. In this example, that would be a loop for calculating the current position of the ball and another loop for drawing it. You should also consider what is needed to pause your simulation.
SOFT2201
Software Construction Page 4 of 5
SOFT2201
Question 5: Ball from end to end
You have been able to create a window, draw a circle and make a simple animation of objects on screen. Now create a simple simulation where a ball starts from the left side and slowly bounces to the right, losing half its bounce height on each bounce until it rolls.
You will need to ensure it has an initial horizontal speed so it gradually moves towards the other end.
You will be required to create a gravity constant and a vector for the ball. The vector will be manipu- lated on each frame and will the Y component will invert when it hits the bottom of the window.
How well does your simulation handle high velocities? You may well find it handles high speeds poorly. What can be done to fix this problem/potential problem?
Question 6: Drawing images
Our ball simulation can use a background. Consider the order of rendering when creating a back- ground. The last rendered object will be rendered on top of everything else. Be conscious of rendering order and the number of elements to be draw in your scene.
To draw an image onto the screen, you can refer to the Image type within the javafx documentation. We have provided you with a few assets to use within your application.
Software Construction Page 5 of 5