JavaFX Composer Parallel States Tutorial
This document is written for Preview 1 release and there might be small changes in the screenshots. Still the tutorial is doable even in the new release.
In Preview 2 release there are two changes:
- added a concept of an animation inheritance - for details, read State Animation Tutorial
- editing of Colors is changed i.e. the "Text Fill" property of a Label - read the Colors section in the New In Preview 2 document for manual how to edit them
The goal of this tutorial is to show how to work with parallel states.
Before reading with this tutorial you should be able to work with states as described in JavaFXComponentStatesTutorial2.
Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template.
Add a Label and two Buttons to the design. Set the text of the first Button (aka titleButton) to "Next Title" and the text of the second Button (aka colorButton) to "Next Color".
Add two states to the design names "First", "Second". Select the "First" state and set the "Text" of the Label to "First". Similarly for "Second" state.
Now your design should look like this:
State Variable View
First let's press the "Expand" button:
The states view is expanded to show a view of state variables.
So far you have been working with a single state variable by identified with "currentState". This variable has assigned a single "actual" state at the same time.
The tools allows users to define parallel state variables. Then all state variables are working simultaneously in runtime and independently assign the values to component properties.
The only restriction is:
- If a property of a component is modified is a state (that belongs to a state variable) then it cannot be modified in states that belongs to another state variable.
Editing State Varible
We are going to rename the "currentState" to "titleStateVariable" by pressing "Edit" button in the state variables view. In the dialog rename the "State variable name" to "titleStateVariable":
Finally to code the titleButton to cycle through the states of titleStateVariable, we have to select the "< master >" state and edit the "Action" property of the titleButton to generate a function with "titleStateVariable.nextWrapped();" call in the source code. See the JavaFXComposerStatesTutorial2 for details.
Adding a new State Variable
For adding a new state variable, press "Add" button and specify "colorStateVariable" as the "State variable name".
Similarly to the previous step, the "Action" property of the colorButton has to point to a generated function with "colorStateVariable.nextWrapped();" call in the source code. Note edit the "Action" property in the "< master >" state.
For adding states to the state variable you have to select the state variable in the view and press "Add" button in state. This way add "Red" and "Blue" states to the "colorStateVariable".
When you have the states created, select the "colorStateVariable" state variable then "Red" state and then select the Label. Now look at the Properties window. It should appear like this:
You can notice that an icon on the right side of the "Text" property has a lock badge. This way the tool is telling you that the "Text" property is locked for editing in this state (i.e. "colorStateVariable") since it is already edited in the "titleStateVariable".
The "Text Fill" is having a default-state icon which means it was not set in neither Master nor in any other state.
Now set the "red" color to the "Text Fill" property of the Label for the "Red" state and similarly "blue" color for the "Blue" state.
Note that the Preview 2 the colors are edited as resources. Therefore you have to press "Add" button and choose "Color" from the popup menu. This way you have created a Color resource and assigned it to the "Text Fill" property. Now press "Edit" button to select the color and slide the sliders to set "Red" color.
So far we have been editing stateful properties but there are other kinds of properties. To see them. Select the "scene" itself by clicking on the design background and select the "Red" state. Look at the Properties window. There select the "Code" category (the button on the right side of the Review button).
The "Identifier" property is so-called single-value property. It does not represent any property of any JavaFX component. It is used as an identifier of a Scene component in the source code. Simiarly all the properties in the "Code" category. These properties can be in-place edited at any state but they are edited always in the Master state. You can see that by opening the Property Details dialog.
The "Width" and "Height" property are stateless properties. They represent properties of JavaFX components that a developer can read and initiate but cannot write. They can be edited in the Master state only therefore they have the lock badge if any non-Master state is selected.
Run the Application
When you run the project by pressing the "Run" icon in the main window toolbar.
The window appear with a "Red" label saying "First". This is due to the fact that both state variables are having a start state assigned and both are working simultaneously and independently on each other. So they both changed the properties of the Label at the same time.