JavaFX Application States are very self-descriptive. In each different state, a JavaFX application or component holds a set of characteristics. By transitioning between different states, it is possible to add motion or behavior.
In this recipe, we will use states to change the background color of our application. It might not be the most useful use of states, but it exemplifies correctly what can be achieved.
To continue with this recipe, NetBeans and the set of plugins that bundle JavaFX must be installed.
If unsure how to proceed, please refer to the recipe Creating a JavaFX Project, specifically the Getting ready section section.
For this recipe, we will be continuing with the Project created in the previous recipe.
We also need the JavaDB Database running. If unsure how to proceed, please refer to the previous recipe, where all the information required to setup and run Java DB is in place.
With NetBeans configured and our project in place, let's start the recipe.
First we need to add states.
Open Main.fx in the Design mode:
- On the States section, click on the green plus sign.
- The Add State dialog pops up, under State Name, type First.
- Then click again on the green plus sign and on the Add State dialog, type Second.
We will need to change the Second state. Click on the Second state under the States editor:
- Click on an empty space in our
Main.fxfile. - Navigate to the Properties window and click on the green plus sign related to Background Fill, then select Color, and choose any color you like when the Choose Color dialog pops up.
We will then start coding the state Transition:
- Under the State editor, click on the First state.
- Select the index buttons inside
Main.fx, navigate to the Properties window, and under action, click on 101 button (101 is only shown if the Connecting JavaFX Application to Database was used as base for this recipe, otherwise no 101 text is shown). - On the pop-up, click on Use specified function name and click Generate.
- Inside the indexNextButtonAction function, add the following:
jdbcdataSource.getRecordSet().next(); currentState.nextWrapped();
Save the file and click on Run Main Project.
When we create the First and the Second state, both states have Background Fill for Main.fx set as white.
For Second state, we then set the Background Fill to the color of our choice but do not have a way to add transition to that state.
So to add the State transition, we need to override the code generated for the index button by the IDE, since this is where we are interacting with the application.
So, for we ask the IDE to generate another function. In that function, we ask jdbcdataSource to retrieve the next record in line, and then we iterate the currentState variable, transitioning to the other state.