JFXBuilder Blog

Here is an example that shows using JavaFX Rio to build and deploy a Rich Internet Temperature Converter in just 5 minutes, complete with running example applet and video tutorial. In the demo, you can change the temperature value using the text field or slider and see it reflected in the Celsius field and the visual thermometer. Here are the steps to recreate:

1. Drag in two text fields and a slider
2. Select “Add Binder” from “Add Shapes” pull-down
3. Add Temperature property (of type Number)
4. Drag Temperature key from Keys Browser to components
5. Change Temperature key to formula in Celsius field
6. Draw Thermometer
7. Bind inner shape’s width to Temperature
8. Preview as Applet

[ Video Tutorial ] [ Applet ] [ Gallery ] 

Here’s a sneak peek at some cool new animation features we’ve been working on for animating objects along arbitrary paths:The JavaFX app above was written using JFXBuilder’s new path animation feature. This allows you to draw any kind of path you can think of, and then animate other shapes along that path. You can use any of JFXBuilder’s drawing tools to construct a path that you want some shape to follow in your animation. For the example pictured in the screenshot, I went to google maps and found an interesting looking freeway clover-leaf. After dragging the image into JFXBuilder, I drew some paths with the pencil tool on top of the image and refined them by editing the path’s control points until I got exactly the paths I wanted each car image to follow.The path animation works in exactly the same way as all other animation in JFXBuilder. You specify how far along a pathway a shape should be at various keyframes, and JFXBuilder does all the work of figuring out the exact location and possibly rotation needed to draw the frames in between. And of course you can apply all the interpolations like easein, easeout, accelerate, etc. to motion along the path.Here’s a screenshot where I’m playing with the path animation in JFXBuilder. At time zero, I set the “Position Along Path” slider to the beginning, and then at 3 seconds, I set it to 100%. It’s set to orient the motorcycle image as it moves along the path, but I can animate this setting as well. If I turn that option off at the point where the motorcycle leaves the ramp, the (riderless) bike will look like it’s popped a wheelie and is maintaining that position through the rest of the animation.There’s a lot going on behind the scenes to make sure the motion is smooth. Check out the examples in the app at the top of this entry. There are some very cool things that this new feature will enable you to do.

One of the most interesting additions to the last version of JavaFX was the new Morph Shape. In the last week we decided to see if we could come up with a quick way to integrate this functionality into JFXBuilder.

The solution we came up with is similar to our SwichShape (introduced in our [ MouseOver Animation ] blog a few weeks ago). For Morph shape we added a new menu item called “Group in Morph Shape”. Simply draw a few shapes, select them (in the order you want the morph to follow) and choose the menu item (right click to get there quickly).

Once you have a Morph shape, you can simply move the “Morphing” slider to get an intermediate version of the shape. Notice that the slider max value is the original shape count minus 1, so 0-1 morphs between the first two shape, 1-2 between the first and second, and so on.

We also added the ability to animate the “Morphing” attribute, so the real fun comes when you move the morph shape over time in a scene and modify it’s morphing at different key frames. Check out this [ sample applet ] or [ run the application ] and try it for yourself!

It seems likely that one of the more common uses for JavaFX will be in creating graphically rich presentations. JavaFX certainly has the functionality to do anything that PowerPoint does and then some.

JFXBuilder’s architecture is well suited for this, and we’ve taken the past couple of days to add the necessary JavaFX glue to get this working. Here’s a screenshot of an example slide show that was created entirely with JFXBuilder (plus a few images I got from NASA).

JFXBuilder already handles multiple page documents well, so getting it to create JavaFX slide shows was just a matter of generating the javafx code for each page independently. Every page becomes a new slide, with potentially its own animations, bindings, and controls.

We added a few buttons whose actions are pre-bound to javafx operations the multiple-slide canvas understands, such as “pageForwards” and “pageBackwards”. You simply drag these buttons from the gallery onto your slides, hit “Preview JFX” and voilá - you’ve got a slide show, complete with animations, sounds, Swing components, etc., etc.

On the javaFX side, we merely use a Canvas subclass that has an array of pages (or slides). When requested to change the slide, it just swaps out the canvas’s content array for the chosen slide and starts off any animation for the new slide.

We published the slide show shown above as another example applet on our gallery page. Check it out, and send along any questions or feedback.

We’ve implemented a number of interesting interpolation functions in JavaFX this week using a simple Interpolator.fx class. An interpolator, which is used behind the scenes to calculate the changes between keyframes of an animation, can be set for any change using the Animation Inspector.

We’ve included some fun ones in the base class, including EaseIn, EaseOut, Bounce, SingleStep, and various others. You can, of course, provide your own subclasses.

Here’s an applet that shows off the standard interpolations, as well as a custom subclass.

The standard interpolators can be chosen from the drop-down menu. I’ve implemented a custom Perlin Noise interpolator for this example, that can add a little bit of random noise to any other interpolator. This can be used to make some movements more natural, since nothing in the world moves smoothly.

Another interpolator subclass we created was one that knows about colors. The color interpolator is based on any other interpolator, so you can animate from Red to Black using EaseIn, EaseBoth, Bounce, etc. If you change the color of a shape between keyframes, JFXBuilder automatically selects the Color interpolator for you.

The JavaFX Color object already has a method to interpolate between two colors, so our ColorInterpolator subclass becomes as simple as:

function ColorInterpolator.getValue(time:Number, start, end) { var ratio = parent.getValue(time,0,1); return ((Color)start).interpolate(end, ratio); }

This does an interpolation through RGB colorspace, but you could certainly imagine others. For the moment, that’s left as an exercise to the reader.

We’ll drop in more as we think of interesting ones. I’m currently thinking a Damped Harmonic Oscillator would be fun…

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:

In the last week we’ve been adding animation support to JFXBuilder. Fortunately, JFXBuilder’s existing key frame animation model matches well with JavaFX - in particular, using the JavaFX “dur” statement:

    var i = [1..100] dur 1000;

JFXBuilder already has an animation panel that lets you animate almost any shape attribute: x, y, width, height, rotation, scale, skew, opacity, color, stroke color and stroke width. To define an animation, you simply draw a shape or drop a component, move the animation time slider to a different time, and change the attributes for the new time. JFXBuilder will automatically interpolate all the values between the two key frames.

To support this in JavaFX, we simply needed to add these attributes to the existing Shape node and build a standard transform that would bind to these attributes:

    transform = bind [translate(width/2, height/2), rotate(rotation), ... ]

We did this in a new JFX class called ShapeX (which subclasses Shape). The benefit of having these attributes explicitly defined is that it was now easy for JFXBuilder to define animation records for these attributes using the JFX dur statement. This is a nice improvement over other graphics description languages which require a record definition for every shape (with a transform update) for every frame of the animation.

The second issue we faced was how to batch up groups of dur statements for each key frame. Josh came up with an elegant solution for this - a simple KeyFrame class with a “frame” ivar. We use a “master” dur statement on this frame ivar to iterate over the number of key frame, then we use a trigger to catch the individual key frames, where the individual shape-attribute dur statements are called:

    // Define class for key frame counter
    class KeyFrame {
        attribute frame: Number;
    }
    // Declare trigger for key frame changes
    trigger on KeyFrame.frame = value
    {
        // Trigger actions for key frame 0
        if(frame==0)
        {
            ((ShapeX)canvas.content[5]).x = [68..173] dur 2680;
            ((ShapeX)canvas.content[5]).y = [263,261.821..184] dur 2680;
            ((ShapeX)canvas.content[5]).roll = [0..322] dur 2680;
            ((ShapeX)canvas.content[5]).scale = [1.2,1.206..1.6] dur 2680;
        }
        // Trigger actions for key frame 1
        ...
    }
    // Start animation
    new KeyFrame.frame = 0;

So now we have real JFX generation for JFXBuilder’s key frame animation panel. Tomorrow we’ll post an applet showing a simple animation in action. In the meantime, run the app to see key frame animation in JFXBuilder/JavaFX now.

Launch JFXBuilder:

Key Features: JFX Page Layout Drag and Drop Components Don’t expect much yet… Draw boxes, lines, polygons, text Drag and drop a Button, Text, Slider Then just hit “Preview JFX”! [ Goto http://reportmill.com/jfx ]

A Barn-raising

ReportMill has for years been a leader in Java graphic design software and Swing UI building technology and JavaFX holds the promise of being a natural fit for ReportMill’s technologies.

This week we started a new branch of our source, did some reading of the JavaFX materials, and started implementing a few customizations and extensions to support JavaFX. Posted here is our page layout application modified to generate a preview of basic illustrations with an integrated version of JavaFXPad.Check back regularly as we learn more about JavaFX, get feedback and incorporate improvements into this initiative. Plans for the coming week include adding support for images and animation.

Check out the demo!