SOFT2201/COMP9201 Week 4 Tutorial

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  {

@Override

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 17API 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 600x400.

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.

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 methods.

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 documentationby 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?

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 ();