New features of ReduxFX 0.2

A while ago I released the new version ReduxFX 0.2. For this release, I completely rewrote the view-builder API to make it more “IDE-friendly”. In addition, ReduxFX now supports applications with several windows.

New View-Builder API

The most important change in version 0.2 is the new view-builder API that a developer uses to define the view of a ReduxFX application. Previously, the following code defined the view of the ColorChooserApp:


return HBox(
padding(50.0),
spacing(20.0),
ColorChooser(
color(state.getColor(), (oldValue, newValue) -> Actions.updateColor(newValue))
),
Region(
background(state.getColor()),
minWidth(100.0),
minHeight(100.0)
)
);

This looks good on paper and is pretty close to frameworks that inspired ReduxFX (mainly elm, redux, and cycle-js). But it turned out that this is not a good format for Java code. In particular it is not an IDE-friendly format. If there was an error somewhere, usually the IDE was not able to tell me where. It just underlined the whole return-statement (which can become huge). Secondly code completion did not really work.

The new API is closer to a standard fluent builder API, as you can see in the following code snippet. It shows the same functionality implemented with the new API:


return HBox()
.padding(50.0)
.spacing(20.0)
.children(
ColorChooser()
.color(state.getColor(), (oldValue, newValue) -> Actions.updateColor(newValue)),
Region()
.background(state.getColor())
.minWidth(100.0)
.minHeight(100.0)
);

As you will notice, the change is subtle, but very important. If there is an error somewhere, your IDE will usually be able to pinpoint the exact location and the new API is also much more code-completion friendly.

Multiple Windows Support

The second interesting feature is support for multiple windows. So far, it was only possible to define a Scenegraph, which could be placed into a Stage or used as the content of a custom control. But with release 0.2 it is also possible to define several Stages that can be shown and hidden. Plus the groundwork was laid out to modify Stage- and Scene-properties with ReduxFX.

The following code shows the essence of the ScreenSwitch-Example:


public static VNode view(AppModel state) {
return Stages()
.children(
Stage()
.title("Left Screen")
.showing(state.getScreen() == Screen.LEFT)
.scene(
Scene()
.root(
StackPane()
.padding(50, 100)
.children(
Button()
.text("Next")
.onAction(e -> Actions.switchScreen(Screen.RIGHT))
)
)
),
Stage()
.title("Right Screen")
.showing(state.getScreen() == Screen.RIGHT)
.scene(
Scene()
.root(
StackPane()
.padding(50, 100)
.children(
Button()
.text("Previous")
.onAction(e -> Actions.switchScreen(Screen.LEFT))
)
)
)
);

Two stages are defined which visibility depends on the property screen in the state. Both stages show a single Button. If you click it, the other screen becomes visible. As you can see the usage is straightforward and consistent with the rest of the view builder API.

Summary

ReduxFX 0.2 added two important features:  the view-builder API became more user-friendly and support for multiple windows was added. These are two more huge steps towards the first alpha release of ReduxFX.

One response to “New features of ReduxFX 0.2”

  1. […] Michael Heinrichs has released ReduxFX 0.2. […]