As mentioned in my previous post, I added two important new features to ReduxFX 0.1. While the previous post focused on the ability to communicate with the outside world from ReduxFX application, this post focuses on the second new feature: the ability to write standard JavaFX components.
You can see the basic architecture of a JavaFX component implemented with ReduxFX in the picture above. As you can see, it is very similar to a small ReduxFX application. The heart of a ReduxFX component is the event cycle, which is typical for functional reactive UI programming.
The major difference is, how the event cycle interacts with the ReduxFX library to implement the parts of a JavaFX component:
- Every JavaFX component defines a JavaFX Node that represents the component visually. It needs to be added to the JavaFX Scenegraph to make the component visible.
- In addition each JavaFX component provides an interface, which allows the application to interact with the component. The interface consists of JavaFX properties, events, and methods.
Modifying the JavaFX Node
The visual representation of a ReduxFX component is defined via the view()-function similar to regular ReduxFX applications. The only difference is, that the VNode that you return from the view()-function does not define the root node of the Scene, but the root node of the component.
Implementing the JavaFX interface
You can implement the properties and events of a ReduxFX component with a specialized driver. (If you want to know more about the this concept, please check out the driver-documentation.) To modify a property or fire an event, you dispatch Commands to the Driver. To listen and react to property-changes from the outside, you can specify actions that are sent to the Updater if a property-change occurs.
Summary
The second important new feature of ReduxFX 0.1 is support for the implementation of components. Luckily the architecture of a ReduxFX component is very similar to a small ReduxFX application.
If you want to read more, please take a look at the documentation about building a ReduxFX component.