The Absolute Beginners Guide to Reactive JavaFX
Table of Contents
A Short Introduction#
This is a guide to help you learn how to build JavaFX applications the right way. It’s not a reference guide, but an instructional guide intended to be read in order. Depending on your learning style, it’s probably a good idea to follow along with the guide in your IDE, trying out the examples and experimenting with some of the concepts along the way.
I’ve tried to keep each part short and easily digestible, so that you can stop at the end of any part and pick later from the next part.
My hope is that you fully understand the content of each part before moving on to the next. If you are confused about anything you can usually research in on the web, or find it in the JavaDocs for the components involved. If you are really stuck, you can send me an email and I’ll help. In any event, each part of this guide is written with the assumption that the content that preceded it has been fully understood.
What We’ll Build#
To start with, we’ll build a “throw-away” application to learn some basic concepts. This will start out as a simple “Hello World” application that we’ll add some styling and user interaction to. Then we’ll put it aside and build a real application, a “Create, Retrieve, Update and Delete” (CRUD) application for a simulated customer database.
JavaFX as a Reactive Framework#
This tutorial series concentrates on using JavaFX as a “Reactive” GUI framework.
What is a Reactive framework?
From WikiPedia:
In computing, reactive programming is a declarative programming paradigm concerned with data streams and the propagation of change…
For example, in an imperative programming setting, a := b + c would mean that a is being assigned the result of b + c in the instant the expression is evaluated, and later, the values of b and c can be changed with no effect on the value of a. On the other hand, in reactive programming, the value of a is automatically updated whenever the values of b or c change, without the program having to explicitly re-execute the statement a := b + c to determine the presently assigned value of a.
Okay, but what does this get you?
In a word, simplicity.
Now your GUI is designed purely with the intent to reflect State at any given time in the best possible way. There is no code anywhere in your GUI that concerns itself with application logic or business rules or any of that.
At the other end, the business logic is concerned simply with maintaining and reacting to State without any idea of how it impacts the GUI.
It’s much easier to see it in practice than to describe it. In this series, we’ll start right from the beginning utilizing the tools and features in JavaFX that allow Reactive designs to be implemented. You’ll see that it’s not complicated, and a natural way to build an application with JavaFX.
Companion Project#
In order to make it easier to follow along at home, all of the source code from this series has been included in a companion project available on GitHub…
The source code is divided up into packages, each package containing the code as of the end the part of the series to which it corresponds. So the package ca.pragmaticcoding.beginners.part2 contains the code as described in part2 of this series.
In this way, you can see the whole application at each stage of its evolution, you can run it for yourself and see how it works. You can change code. You can break code. You can try your own ideas and experiment as much as you like.
On To It!#
Let’s get started!
Part 2 - Configuring Layouts
5 mins
Some basics about building layouts and making your screens look the way you want.
Part 3 - User Interaction
11 mins
GUI applications need a way for the user to interact with them. In this lesson we’ll show how to allow user input with TextField, and to launch an action with a Button.
Part 4 - Styling
8 mins
JavaFX includes Cascading Style Sheets for styling the elements of your GUI. This is a quick guide about how to use them.
Part 5 - Application Framework
3 mins
Building an application that “does something” means adopting a framework that works well with JavaFX. Here we build the skeleton of the Model-View-Controller-Interactor framework that we’re going to use for our CRUD application.
Part 6A - First Feature: Minimal Create
10 mins
The first feature for our CRUD application has to be “Create”. In this lesson we’ll get started by designing the GUI and connecting it to the Controller.
Part 6B - Adding Persistence
14 mins
In this lesson we finish up a “bare-bones” Create function by building the back-end and connecting it to the business logic in the Interactor. Part of this involves creating a simulated database.
Part 7 - What Next?
4 mins
Now we’ve completed the core programming for our “Create” function, where do go next. We’ll look at the idea of a “Product Backlog”, and talk about how we should prioritize our next steps.
Part 8 - Dealing With Latency and Blocking
14 mins
Our simulated database doesn’t really do a good job standing in for a real database because it works too fast. We’ll slow it down and see what horrible things this does to our application. Then we’ll see how to deal with this.
Part 9 - GUI Validation
5 mins
We’ve also got a big problem with our application because there’s no data validation in our screen. This means that users can save invalid customer data. We’ll look at how to cope with this properly.
Part 10 - Handling Database Errors
9 mins
The last problem with our application is that it can save duplicate customer records, corrupting our database. This means adding some rules to our database and telling our GUI when those rules have been broken. We’ll see how to handle exceptions from the back-end in our application.
Part 11 - A "Working" Application
4 mins
At this point we have a pretty clean “Create” application. It’s error resistant, doesn’t corrupt our database and ready to add some more functionality. Let’s look at what we’ve done so far.
Part 12 - Adding a New Field: eMail
6 mins
It’s finally time to add a third field to our screen! In this article we’re going to add just a single new field, for email, to our screen. We’re going to see how the process goes from the View all the way down to the Broker. Most importantly, we going to see how we need to be vigilant in ensuring that our code stays clean as we add more features.
Part 13 - Feature Envy
8 mins
In this article we’re going to look at how Feature Envy has crept into our View code. We’re going to look at why this happens, and how to deal with it. Finally, we’re going to see how clearing out Feature Envy makes our code much cleaner and easier to understand.
Moving On - Building A CRUD Application
3 mins
Introduction#
So far we’ve built an application that does little, but demonstrates a lot. Now we’re going to write one of the most common types of application out there - CRUD (Create, Retrieve, Update and Delete).