Indoor, Outdoor & Kids' Trampolines

Reactive Spring Boot: Part 4: JavaFX Line Chart

This tutorial is a series of videos outlining
a number of steps to build a full Spring Boot application featuring a Kotlin service back
end, a Java client and a JavaFX user interface. In the last video, we created a JavaFX Spring Boot application. We’re going to continue with this and get
the application to show an empty line chart, we’ll populate it with data later in the tutorial. Let’s open the stock-client project that we created back in video 2, and go back to the
stock-ui module that we created in video 3. This module had two application classes and
a StageInitializer. We’re going to update the StageInitializer
to display the UI for the application. The Stage will need a Scene, this is the container we’re going to put the UI elements into. The scene needs a parent, which we’ll create
in a minute, and we can set the width and height of the display here, let’s use 800
by 600. Let’s create this parent as a local variable, IntelliJ IDEA works out this needs to be of
type Parent. I’m going to move this to the top of the method
so all the stage functionality is together in the method. While we’re thinking about the stage, let’s
call show so we don’t forget to display it. Now we need to work out where this parent is going to come from. We’re going to use FXML to define what elements are on the user interface. Declaring the view elements in FXML gives
a nice clean separation between the view and the model and controller if we’re following
an MVC pattern. We haven’t declared a dependency on FXML classes yet, so let’s add a Maven dependency, we need
to add a dependency on javafx-fxml. IntelliJ IDEA will add the relevant dependency
to the pom.xml and download the required JAR files. Now we can import the FXMLLoader class. The FXMLLoader needs to know the location of the FXML file, we’ll say this can be
found in a chartResource. We’ll create this as a field in the StageInitializer,
it’s going to be a Spring Resource. We can use the Value annotation to tell Spring where to find the file, let’s say it’s on
the classpath and it’s a file called chart.fxml. The FXMLLoader needed a URL, not a resource, so we’ll call getURL on the chartResource
field. Let’s assign this to a local variable so we
can use it later. getURL throws an Exception, so we’ll surround the call with a try/catch block. In the catch section we’ll throw a new RuntimeException
for the purposes of keeping the tutorial simple, but this is not a useful way to deal with
Exceptions in production code. If the exception is thrown, none of the rest of the code can be run so we’ll move the catch
block down underneath the rest of the method body. Now we can finally initialise our parent, by calling fxmlLoader.load. We need to create our FXML file, let’s go to the resources directory and create a new
FXML file, chart. IntelliJ IDEA creates a basic FXML file for
us, and we can fill in the details we need. A View usually needs a Controller, we’ll declare ours is called ChartController. IntelliJ IDEA has code generation even inside
the FXML file, so we can create this missing controller class from inside the FXML file. This has been created in the default package,
let’s move it into the same package as all the other classes. A move like this always uses the refactoring
capabilities of IntelliJ IDEA so files are moved safely. If we go back to chart.fxml we can see the
path to the controller has been updated with the full package name. We don’t need the default height and width here, we’ll set this in a different component. We’re also not going to use the AnchorPane,
we’ll change this to a Vbox. We can use Optimize Imports to remove all
the unnecessary imports from the FXML file. Let’s see what happens when we run this application, by going back to the SpringBootApplication
class and running it using Ctrl+Shift+F10 for windows or Ctrl+Shift+R for the mac. The application runs in the services window, because it’s a Spring Boot application, and
a Java window pops up at the dimensions we set in the Stage. There’s nothing in there yet as we haven’t
put anything into the view. Let’s make a small change to see that we can control what is displayed in the window. We’ll go back to StageInitializer, and set
a title for the view. Let’s create a field for applicationTitle,
and get IntelliJ IDEA to create a constructor with the appropriate parameters to initialise
this field. We can use Spring to populate the value of
this title. When we re-run the application, we can see JavaFX uses this new title in the title bar Hardcoding string values is not good practice
for a number of reasons, so let’s get this title from somewhere else. In, we can add a new
property and call it something like spring.application.ui.title. Then we can set the value for this title. Back in StageInitializer, we can use SpEL to say that we want to use this property for
the title of our application. Now when we run the application, we see this
value from application properties used as the title of the window. There’s one last thing we need to do to make the most of Spring in this JavaFX application,
and that’s to be able to use the beans from the application context in the JavaFX wiring. FXMLLoader has a method setControllerFactory,
which we can use to say where to get our JavaFX controllers from. We want to get these from the application
context, so first we need to create a field for applicationContext. We can add a new constructor parameter for
this field so that it is autowired in. Once this is set up, we can call getBean on
applicationContext to provide the controllers that JavaFX needs. All our wiring is complete, so let’s finally create our line chart. In chart.fxml, we’ll declare we want a LineChart. A LineChart has an xAxis, which for our purposes
is going to be a Category axis, in other words it’s going to have a series of strings as
values. This is our Time axis. The yAxis, on the other hand, is going to be a NumberAxis. This axis is for the stock price. Let’s set the height of the chart to 600, the maximum height for our application. We also need to give it an fx:id, which is
the ID of the field in the ChartController that will contain the reference to this LineChart. Let’s call it “chart”. IntelliJ IDEA correctly identifies there’s no field called chart in the controller class,
so let’s get it to create the field for us. We set up this LineChart as a chart with a
String x axis and a Number, or in our case, Double, y axis. We can use the FXML annotation to show this
field is populated from an FXML file. Let’s also annotate the class as a Component. Now when we run the application, we see the outline of a line chart shown in our window,
with numbers for our price axis, and time on the x axis. We have successfully created a JavaFX application that is integrated into Spring Boot, that
uses FXML to declare what should be in the view. In the following videos of this tutorial,
we’ll get this chart updating itself with stock prices in real time. Thanks for watching!

Leave a Reply

Your email address will not be published. Required fields are marked *