JFXBuilder Blog

This week we’ve been playing with a user friendly way to easily configure graphical and animated actions for common input events, like MouseOver and MousePressed.

JFXBuilder already has a shape custom tailored for this called a “SwitchShape”. The basic idea is to select a group of shapes that we want to react to a mouse event, select the menu item “Group in SwitchShape”, then simply configure the look of the different “versions” (MouseOver, MousePressed, etc.).

The added dimension to this that SwitchShape adds is that each “version” has its own animator and timeline, so it’s easy to configure both a new look and an animated response (like scale up, or fade-in, or pulsing).

On the JavaFX side, we simply created a new SwitchShape.fx class that manages an array of SwitchShapeVersion(.fx) objects. Each version has a name, a content array and an animation script. Then SwitchShape can simply implement the onMouseEntered, onMousePressed, etc., methods to trigger the appropriate named version.

    attribute SwitchShape.onMouseEntered = operation(e:CanvasMouseEvent) {

        setVersion("Mouse Over");    };

This foundation with SwitchShape in JFXBuilder and JavaFX should provide a solution for creating a wide range of input event actions without having to resort to hand-coding. Additionally, there should be some exiting possibilities for this feature in conjunction with sound and with some of ReportMill’s standard reporting features (using datasets and data substitution).

Here is a simple example of this in action: