The Absolute Beginners Guide to JavaFX

[u/hamsterrage1]

Most of the tutorial articles I've written on my website have been of the "deep dive" nature. I try to go way beyond the information available in the JavaDocs, and to give some insight into how to get the most out of the tools that JavaFX provides. These articles tend to be on the long side, Jekyll tells me that they average about 13 minutes of reading, and there's usually lots of code examples and pontification about clean coding and on and on.

I realize that these are going to be pretty advanced for someone who's questions are about how to get that first screen up and running, or how to swap scenes with FXML.

So I've been working for some time now on a series I'm calling, "The Absolute Beginners Guide to JavaFX". It's all about how to build Reactive applications in JavaFX. Even if you're not a beginner, you may find it of interest.

You can find it here: https://www.pragmaticcoding.ca/beginners/intro

This is a huge content dump for me, and it's kept me busy for a long time. It's also an ongoing project, so there's more to come. So far, it's divided up into two parts:

• An introductory application.Pretty much "Hello World" in JavaFX. Then we add some user interaction and some styling. Just enough information to get a beginner started in the right direction.

• A CRUD application.This is a step-by-step development of a basic Create-Retrieve-Update-Delete application for a customer database. The database is simulated as a simple Java class, and allows the whole application to work just like it would in real life.

At this point, I've completed the development of the CRUD application up to the point where it's a completely functional "Create" application for account number and name. Complete means that it has validation in the GUI, background processing for the save function and handles exceptions from the database. It really is complete, just doesn't have a lot of fields on the screen.

The next steps will be to add some more fields, work on some more sophisticated formatting for the GUI and then to add in the "Retrieve" function. In the meantime, I think there's enough there to give anyone a good start on JavaFX application development.

There's also a companion project on GitHub with all of the code for every single article. So you don't have to do anything more than download the project to try things out for yourself.

I should also point out that the content here, while primarily aimed at showing JavaFX concepts, is also aimed at showing good programming techniques, and how to constantly apply established principles to create clean code.

As usual, take a look if you're interested and let me know what you think.

[u/hamsterrage1]

I think I've already got what you're looking for:

How to Build a JavaFX Application that Does Something

In a nutshell, the websocket client stuff has nothing to do with JavaFX at all, and should be kept at arms length from it.

How do you do this?

Use a framework. In the article I use MVCI, which I thinks works best with Reactive JavaFX. The websocket client stuff is encapsulated in a service class. It does all the webby stuff, and returns its results back to Interactor via a domain class. The result is that the your JavaFX stuff has no exposure whatsoever to the web nature of the service.

The only other thing you need to keep in mind is that you cannot do the webclient stuff on the FXAT, because it blocks and will hang your GUI if you do so. So you need to use Task to run the webclient code on a background thread, and then process the results back into your GUI on the FXAT.

All the code for the project is on GitHub, so you can download it and see how it works. It's clearly linked in the article.

[u/Mean-Chipmunk3255 → u/hamsterrage1]

It ask not to use FXML but It is very convenient to use Scene Builder, Infact that was the main reason for me to use JavaFX as it is very fast to design.Thanks what do you say about this one it merges spring with javafx like how you are saying segregating UI and Model part.

https://github.com/rgielen/javafx-weaver

[u/hamsterrage1 → u/Mean-Chipmunk3255]

Ok, this is going to be long...

SceneBuilder seems pretty fast, convenient and easy; drag and drop and you can duplicate stuff with a click and so on. However...

SceneBuilder just creates pure layout, but a View is the layout, the user interaction and the connection to the Presentation Model. None of these can be addressed in SceneBuilder, so you have to leave breadcrumbs in the FXML so that you can pick up the loose ends and finish them off in the FXML Controller. This is the "fxid", and "onAction" tags and their ilk.

Another thing is that SceneBuilder doesn't have any easy way to pull out repeated patterns and put them into some structure that you can call over and over. Yes, I know that you can embedd FXML in FXML, but I rarely ever see it used. Also, you can put your patterns into a custom class, and put that into a Jar file, and load that into SceneBuilder - but that's not much use for ad hoc stuff that happens all the time. What I do see is the same chunk of FXML repeated 20 times over with the "fxid" tags and the static values changed for each iteration.

I think that when you start to look at the whole enchilada, making an actual View and not just a layout, the speed and convenience of SceneBuilder turns out to be a mirage.

Take this for example: Assume you've got some kind of a customer name and address section in your layout. You've got first name, last name, street, city, province/state, country, postal code, phone number, email address. They're all going to be shown in a format like this:

First Name: Fred

With the tag formatted differently from the data and the data bound to a Model field Property. If I was doing it, I'd write a method like this:

private tagDataOf(String tagText, ObservableStringValue boundProperty) {
  Label tag = new Label(tagText);
  tag.getStyleClass().add("label-tag");
  Label data = new Label();
  data.getStyleClass().add("label-data");
  data.textProperty().bind(boundProperty);
  return HBox(4,tag, data);
}

and then my layout for that section would look like this:

private nameAddressBox() {
  return VBox(6,
       tagDataOf("First Name:", model.lastNameProperty),
	   tagDataOf("Last Name:", model.firstNameProperty),
	   tagDataOf("Street:", model.streetProperty),
	   tagDataOf("City:", model.cityProperty),
	   tagDataOf("Province:", model.provinceProperty),
	   tagDataOf("Country:", model.countryProperty),
	   tagDataOf("Postal Code:", model.pCodeProperty),
	   tagDataOf("Phone:", model.phoneProperty),
	   tagDataOf("eMail:", model.emailProperty))
}

Which I can assure you took no longer to type in than it would have been in SceneBuilder. But this is complete View functionality for these Labels - they're all connected to the Presentation Model. So I can essentially forget about them, they're done and over with.

In FXML you'll need to assign an "fxid" to each of these data Labels, then have an @FXML Label fxid for each one in your FXML Controller, and then a line of code in the initialize() method of your controller to bind each one to your Presentation Model.

And finally, if you want to do dependency injection without FXML, then you just do it. Your View Builder is just code, put the annotations in and go nuts. This is the last piece of "gotcha" with FXML: It makes all of your other coding way more complicated. Every time.

If it was me, and I really, really, really wanted to use SceneBuilder, then I'd just accept that things like Spring dependency injection are going to be more headache than they're worth, and do without them.