My first JavaFX application
Learning JavaFX by building a simple TodoList application in IntelliJ
My UI building Journey
Twenty two years ago I was a professional IBM VisualAge Smalltalk developer. I even went as far as taking a test to become an IBM certified VisualAge Smalltalk Associate Developer. I would occasionally demo the VisualAge Smalltalk capabilities to other developers I worked with. The most impressive (and simple) demo I would give in VisualAge Smalltalk was building a working in-memory ToDoList application in less than two minutes.
After I started writing this blog, I decided to do some research to see if someone had recorded a YouTube video of creating a ToDoList with VisualAge Smalltalk. I couldn’t find any videos, but after some digging around, I found the online documentation for VAST and it contains exactly the same ToDoList example I used to demo, under a section titled “Constructing your first visual application.” VAST is the successor of IBM VisualAge Smalltalk and is now the product of Instantiations.
I enjoyed building desktop apps in VisualAge Smalltalk. I even enjoyed building desktop apps in Java using Swing for the first ten years I worked in Java. Desktop apps in Java were often replaced with Java web apps and eventually were supplanted by JavaScript apps on the front end. I eventually stopped building UIs altogether, and have stuck mostly to working on backend Java code.
While I have never been that good at building great looking UIs in any language, I missed being able to throw together a functional UI so I could quickly demo something. I wanted to be able to build a working UI in Java in under two minutes. I figured straight Java Swing programming was going to cause me to go through rigorous brute force coding and memorization, so I decided not to even look at that option. I longed for something that would enable my productivity like VisualAge Smalltalk did. I am pretty sure nothing comparable exists even today, but I thought perhaps there would be something to bring me closer to being enabled as a UI developer again.
IntelliJ to the Rescue
I decided one day this week just to open IntelliJ and see what it could do for me. As I’ve come to expect from my favorite IDE of the past 20 years, IntelliJ had a surprise for me. I clicked on “New Project” and this is what I found.
I picked JavaFX from the Generators list. After I changed the project name and group, and clicked “Next”, then I got prompted with this screen.
I didn’t select any of these, because I didn’t think I would need anything fancy for a simple ToDoList. So then I just clicked “Create”.
Voila! IntelliJ created a working HelloApplication all setup with Maven build and everything. It generates two classes (HelloApplication, HelloController) and an XML file (hello-view.xml) that contains a declarative layout for a UI. Above I just clicked on the “Run” button next to the HelloApplication class and the UI with a working button that sets a label shows up.
The very next thing I did is open up the XML file named hello-view.xml.
Looking at this file I could kind of figure out how this would probably work and how I could morph the code into my own working ToDoList application. At this point, I had read absolutely zero documentation on JavaFX. I am familiar with declarative user interfaces as I have developed previously in Adobe Flex and had managed the development of a proprietary declarative Java UI framework named GLUI when I worked at Goldman Sachs. The GLUI framework had Swing, Web, and iOS renderers, in addition to a headless renderer for testing. If you’ve read my blog about the Lego CI build monitoring robot, then you have seen GLUI running on an iPad, without realizing what you were looking at. GLUI is a fond, but distant memory.
At this point, I had seen enough from IntelliJ and JavaFX that I felt I could probably comfortably develop a ToDoList application in under 30 minutes. This is when I decided to tweet about the new journey I had just begun.
Making the Todo List Application
After getting the HelloApplication working, I waited a few days to get back and try things in IntelliJ. This was several hours ago. Now I have a working TodoListApplication (pictured at the top of this blog).
This is the todolist-view.xml file that I morphed from the original hello-view.xml file.
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.ListView?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
fx:controller="example.todolist.TodoListController">
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
<TextField fx:id="todoItem" />
<ListView fx:id="todoList" />
<HBox>
<Button text="Add" onAction="#onAddButtonClick" alignment="BOTTOM_LEFT" />
<Button text="Remove" onAction="#onRemoveButtonClick" alignment="BOTTOM_RIGHT" />
</HBox>
</VBox>In order to get this working, I had to do a little research to learn about the HBox tag, which allowed me to put the add and remove buttons next to each other horizontally. I also looked up TextField and ListView components and figured out I needed to give them ids like the label in hello-view.xml.
This is my TodoListController. I added todoItem and todoList as fields and used the FXML tag. I don’t quite know how all this works (yet), but it was trivial just to try it out, and it worked as I expected.
package example.todolist;
import javafx.fxml.FXML;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
public class TodoListController
{
@FXML
private TextField todoItem;
@FXML
private ListView todoList;
@FXML
protected void onAddButtonClick()
{
this.todoList.getItems().add(this.todoItem.getText());
}
@FXML
protected void onRemoveButtonClick()
{
int indexToRemove = this.todoList.getSelectionModel().getSelectedIndex();
this.todoList.getItems().remove(indexToRemove);
}
}I was able to figure out how to hook up events to actions based on the HelloApplication example. IntelliJ seems to know how to associate events in the XML file to the corresponding actions in the controller. I just clicked around the IntelliJ code assist to figure out there was a selection model for the list view and that I could get there selected index for an item in the list from there.
This is my TodoListApplication.
package example.todolist;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class TodoListApplication extends Application
{
@Override
public void start(Stage stage) throws IOException
{
FXMLLoader fxmlLoader = new FXMLLoader(
TodoListApplication.class.getResource("todolist-view.fxml"));
Scene scene = new Scene(fxmlLoader.load(), 320, 240);
stage.setTitle("Todo List");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args)
{
TodoListApplication.launch();
}
}All I really had to change in here was the name of the XML file, but that was done as part of an automated refactoring by IntelliJ when I renamed the hello-view.xml file to todolist-view.xml.
This is the running application. It’s good enough that I feel satisfied with my first experiments learning some basic JavaFX.
Next Steps for my TodoList application
There are a lot more things I would like to explore now that I got a basic UI up and running very quickly using JavaFX. After I built the TodoList UI, by editing the XML file and Java files by hand, I discovered that there is a UI Builder for JavaFX that works in IntelliJ called SceneBuilder. SceneBuilder is an OSS UI builder for JavaFX built by Gluon. I’d like to check out SceneBuilder soon to see if I can add more complex components using drag and drop.
I will also introduce a simple domain concept for a TodoItem. I might just make it contain a String and a Date to start. This will give me the opportunity to experiment with the DatePicker in JavaFX.
Once I have a TodoItem, I will want to be able to persist them and restore them at start up. I will probably start out by doing this with an ORM called Reladomo that I haven’t used in a while. I might also experiment with some other persistent store options.
This is going to be a lot of fun for me. I will write about discoveries I learn along the way.
Finally
I started out this journey, trying to replace something that I had lost long ago. I wanted to be able to build and demo desktop UIs quickly in Java, just as I had been able to 22 years ago using VisualAge Smalltalk. I accidentally discovered something I hadn’t expected to find — a declarative UI capability with JavaFX. This was certainly a lot more fun than hand coding a UI in Swing, so I am looking forward to learning more. While the visual programming environment that I had with VisualAge Smalltalk still seems to have no equivalent in any language I have seen, a declarative UI is something I am very familiar with in Java. I have already started enjoying developing in JavaFX, and it’s really only been 4 or 5 hours of exploration, including writing this blog.
Thank you for reading!
I am the creator of and a Committer for the Eclipse Collections OSS project which is managed at the Eclipse Foundation. Eclipse Collections is open for contributions.
Other Java articles you may like:
- 20 Examples of Date and Time in Java 8 (tutorial)
- How to use Stream class in Java 8 (tutorial)
- How to use filter() method in Java 8 (tutorial)
- How to use forEach() method in Java 8 (example)
- How to join String in Java 8 (example)
- How to convert List to Map in Java 8 (solution)
- How to use peek() method in Java 8 (example)
- How to convert the stream to the array in Java 8 (tutorial)
- Java 8 Certification FAQ (guide)
- Java 8 Mock Exams and Practice Test (test)
