SOFT2201/COMP9201 Week 4 Tutorial
JavaFX and Java GUI
JavaFX and Java GUI
Copyright By PowCoder代写 加微信 powcoder
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 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
id ‘application’
id ‘org.openjfx.javafxplugin’ version ‘0.0.13’
And include the javafx controls module within the build.gradle file.
version = “17.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 tutorial.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.canvas.Canvas;
SOFT2201/COMP9201 JavaFX and Java GUI
Question 2: Creating a window
To get started, we will create a simple HelloFX window application, shown as follows. We will
be using this as 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 javafx application will manage the initialisation by incorporating the main within its class.
import javafx.application.Application;
public class HelloFX extends Application {
public void start(Stage primaryStage) {
//Application initialisation code here
public static void main(String[] args) {
launch(args);
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, javafx.scene.Group
and javafx.stage.Stage.
Please refer to the Java FX 17 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);
primaryStage.setScene(scene);
Afterwards we will set a new label for the topbar of our application.
primaryStage.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 retrieve the collection
through the .getChildren method and simply add the canvas to it through the .add method.
Software Design and Construction 1 Page 2 of 5
https://openjfx.io/javadoc/17/index.html
SOFT2201/COMP9201 JavaFX and Java GUI
root.getChildren().add(canvas);
We will then need to call primaryStage.show() which will then start rendering our scene.
Once you have created this, launch your application through gradle run and view your result.
Congratulations if you have a window displayed on your screen. No worries if you don’t. You can
find both a sample build.gradle file and a sample HelloFX.java file under Module 4 on
Canvas site.
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.
import javafx.scene.shape.Circle;
import javafx.scene.canvas.GraphicsCintext;
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.
Please refer to the the GraphicsContext documentation for the appropriate draw, fill and stroke
Circle circle = new Circle(50, 50, 10);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setFill(Color.BLUE); //Any fill function will use this colour
gc.fillOval(circle.getCenterX() – circle.getRadius(),
circle.getCenterY() – circle.getRadius(),
circle.getRadius() * 2,
circle.getRadius() * 2);
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?
Software Design and Construction 1 Page 3 of 5
https://openjfx.io/javadoc/17/javafx.graphics/javafx/scene/canvas/GraphicsContext.html
https://openjfx.io/javadoc/17/javafx.graphics/javafx/scene/shape/Shape.html
SOFT2201/COMP9201 JavaFX and Java GUI
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;
Firstly, we construct a Timeline object with the following code
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. Therefore, a duration needs to be defined. 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),
/* Your EventHandler type */);
Afterwards, this is set to the Timeline object and rendered on each call.
KeyFrame frame = new KeyFrame(Duration.seconds(KEY_FRAME_DURATION),
(actionEvent) -> {
//Your event handler logic
Finally, we add the frame and make the animation work by using the following code
animationLoop.getKeyFrames().add(frame);
animationLoop.play();
primaryStage.show();
Software Design and Construction 1 Page 4 of 5
https://openjfx.io/javadoc/17/javafx.base/javafx/event/EventHandler.html
SOFT2201/COMP9201 JavaFX and Java GUI
Question 5: Ball from end to end
You have been able to create a window, draw a circle and simply animate 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 a start horizontal speed so it gradually moves towards 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 the Y component will invert when it hits the bottom of the window.
Software Design and Construction 1 Page 5 of 5
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com