Parallel Application States and State Variables in JavaFX Composer
Written by David Kaspar, adapted and maintained by Jeffrey Rubinoff
A JavaFX application's workflow can make use of states. A state represents a set of component property values that apply at the same point of time. Each state represents a snapshot of the application. The application is in one state when the application starts. The application switches to other states after the user clicks a button, chooses a radio button, or performs a similar action. A component's visibility, animations, and other properties can differ in different states. (Note that the component exists in all states.)
If your application has component properties that change independently of each other, you can create a parallel set of states for each independent property or group of properties. Each parallel set of states is associated with a state variable. An application can have multiple state variables. The states associated with one state variable are independent of the states associated with any other state variable. An application can be in different parallel states simultaneously.
In this tutorial, you design a simple UI with a label and two buttons. The application has two sets of parallel states. One set of states relates to the text of the label and the other set of states relates to the color of the label. Press one button, and the text in the label changes. Press the other button, and the color of the label changes.
Before you take this tutorial, you should take the tutorial Application States In JavaFX Composer.
Contents
To follow this tutorial, you need the following software and resources.
Designing the UI
For the purposes of this tutorial, you need a JavaFX Desktop application with some UI components. In this section you design the application.
To design the application:
- Choose File > New Project. The New Project wizard opens. Under Categories, select JavaFX.
Under Projects, select JavaFX Desktop Business Application and click Next.
- The Name and Location page opens. Name the project ParallelStates. Select a location for the project. Accept the default options and click Finish.
- The project is created and an empty design file opens in the Editor. Look for a Palette window and a Properties window on the right. If either window is missing, open it by going to Window > Palette (Ctrl+Shift+8) or Window > JavaFX Composer Properties, respectively.
- In the Palette window, expand the JavaFX Controls section and drag the following components into the Design:
- Select a button. Go to the Properties window and change the button's Identifier property to titleButton and change its Text property value to "Next Title".
Note: Identifier is a stateless property. You can set this property in any state, and it has that value in all states. Note also that its Open Details button is always greyed out. Other stateless properties include all properties in the Code category.
- Select the other button. Go to the Properties window and change the button's Identifier property to colorButton and change its Text property value to "Next Color".
- Go to the States window and create two states. Name them "First" and "Second". Select the First state.
- Go to the Design view and select the label component. Go to the Properties window and set the label's Text property to "First".
- Go back to the States window and select the Second state. Select the label again, and set its Text property to "Second".
The design is complete for the moment, with two states and a label that displays different text in the two states. Next you work with the state variables to add color states and animations.
Working with the State Variables Editor
In this section, you use the state variables editor to add a second state variable, give the variables meaningful names, and add animations to all transformations between states associated with a state variable.
To set up the state variables:
- Go to the States window. Click the double arrow
that opens the state variables editor.
- The state variables editor opens in the States window. The editor displays one state variable, which has the default name currentState.
- Click the Edit State Variable
icon. The Edit State Variable dialog opens. Rename the state variable to titleStateVariable and click OK.
- Click the Add State Variable
icon. The Add State Variable dialog opens. Name the new state variable colorStateVariable and click OK.
- Open the edit dialog for colorStateVariable. Select the linear interpolator and set the duration to 800 ms. Accept the other default settings and click OK.
- In the States window, you now have the two state variables, named titleStateVariable and colorStateVariable. Select colorStateVariable. In the states editor, you see that it has one state, named State1. Click the Edit State icon for State1.
- The Edit State dialog opens. Rename the state to Red.
- Add another state to colorStateVariable. Name this state Blue.
The state variables and states are all complete. Note that both states in colorStateVariable inherit the state variable's linear, 800ms animation. Also note that the start state is displayed for both state variables (First, Red).
Adding Colors to the Label
You have already assigned different texts to the label. These texts correspond to the First and Second states, which are associated with the titleStateVariable. Now you assign colors to correspond to the Red and Blue states.
To add colors to the label:
- In the States window, select the colorStateVariable and the Red state.
- In the Design view, select the label.
- Click the Add button
for the Text Fill property and select Color from the menu that appears.
- The Choose Color dialog opens. Select a shade of red that you like and click OK.
- In the States window, switch to the Blue state.
- Repeat steps 3 and 4 but select a shade of blue that you like.
The label now displays its text in different colors in the two colorStateVariable states.
Adding Actions to Switch Between States
In this section, you add actions to the Next Title and Next Color button so they switch between states. The coding is different than in Application States In JavaFX Composer, where you only had one state variable.
Note that all actions are added in the <master> state. The <master> state is not associated with a single state variable. All states in all state variables inherit from the master state.
To add actions to the buttons to switch between states:
- In the States window, select the master state.
- In the Design View, select the titleButton.
- Go to the Properties window. Find the Action property for the titleButton Click the Generate button next to the Action property.
- A list of action generation options opens. Choose "Generate: Go to next state". This generates a button action for going to the next state. The editor changes to the Source view, showing the titleButtonAction function that you generated. The default code is invalid, because there is no state variable named currentState. Replace currentState.next() with titleStateVariable.nextWrapped(). You can use code completion.
- Return to the design view and select the colorButton. Repeat steps 3 and 4, but insert the code colorStateVariable.nextWrapped().
The application is now complete!
Running the Project
Run the ParallelStates project. (F6 or Run Main Project icon 
, if it is the main project.) The design file is saved and the project is compiled and started. The application opens in the First and Red states.
Click Next Title, and the text changes to Second. Click the button again, and it changes back to first. Click Next Color, and the text color passes through purple as it changes to blue, because of the animation.
More Exercises
Here are some more exercises you can run to explore the use of state variables:
- Add a third state variable called sizeStateVariable. Add states to the variable associated with different font sizes, and add a button that changes between these states.
- Play with different animation settings in the state variables.
See Also
For more information about using NetBeans IDE to develop JavaFX applications, see the following resources:
