About four years ago when I started my blog I created a series of posts called Swing Hacks. This series eventually formed the basis of my similarly named book with Chris Adamson and led to my job at Sun. I think the series was successful. I still get an amazing number of hits to Swing Hacks 4, the Universal Right Click.

I wish I had carried the series longer, however, since there was probably much more I could talk about. So this is why I'm starting a new series for JavaFX that I'm going to call JavaFX Doodles. Each doodle will be a small example of code snippet that does something compact but useful. I will cover only JavaFX Script initially, then add mobile and designer tools later. Also note that I am using the currently available interpreter version of the JavaFX Script syntax. I will switch to the compiler version with a slightly different syntax when it becomes available (which shouldn't be too much longer).

I hope this series goes well and produces easily usable samples that will improve your own code. Let me know if there's anything you'd like to see a Doodle of. Here goes!

JavaFX Doodle #1

This is a simple demo I often use in my presentations. It uses basic binding and animation to create a grid of fading red cells.

Cells.fx in action

Most of this code is boilerplate. It declares a subclass of Rect called Cell which adds two attributes (the JavaFX Script term for properties): red and col. Then it creates a subclass of CompositeNode called RolloverGrid which returns a Group of 300 cells in a 30x10 grid. That's all pretty straight forward. I'll explain the interesting bits below.

package simpledemos;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;

import java.lang.System;
class Cell extends Rect {
    attribute red : Number;
    attribute col : Color;
}
attribute Cell.x = 0;
attribute Cell.y = 0;
attribute Cell.width = 20;
attribute Cell.height = 20;
attribute Cell.red = 0.0;

//bind the red component of the color to the red attribute of the Cell.
// this will be auto-updated when ever the red attribute changes.
attribute Cell.fill = Color {
    red: bind red, green:0.0, blue:0, opacity: 1.0};

//animate the red attribute from 1 to 0 over 5 seconds, in 0.05 increments.
attribute Cell.onMouseEntered = operation(e) {
    red = [1.00,0.95 .. 0.00] dur 5000 linear; };

class RolloverGrid extends CompositeNode { }
operation RolloverGrid.composeNode() {
    var cells: Cell*;

    for(j in [0..10]) {
        for(i in [0..30]) {
            //insert a new cell into the cells list
            insert Cell { x: i*21, y: j*21 } into cells;
        }
    }
    return Group{ content: [Rect { x: 0, y: 0, width: 31*21, height: 11*21, fill: black},cells] };
}

Canvas { content: RolloverGrid { } }

There are two interesting parts to this code which do all of the work. The first is the initializer for the fill attribute (in bold above). It says that the fill attribute will be set to a Color composed of red, green, blue, and opacity components. Notice that green, blue, and opacity are set to constants (0,0 and 1, respectively). red, however, is set to bind red. This means it will be bound to the red attribute of the enclosing class, Cell. Because of this bind operation the red component of the fill attribute will be automated updated whenever the red attribute of Cell class changes.

The second important part is one line further down where the code sets an onMouseEntered handlers. In this operation it creates a animation for the red property. The code red = [1.00,0.95 .. 0.00] means 'make red go from 1 to 0 in steps of 0.05'. The dur 5000 part means to take 5000 milliseconds. The linear keyword says to animate linearly rather than with the default, which is a smooth in and smooth out (I'll describe these keywords in greater detail in a future blog).

Whenever the mouse enters a cell it will kick off an animation for that cell. The color will go immediately to bright red and then fade back to black (since the other components of the color are already 0). That's it! These two lines do all of the hard work to create an interactive animation.

Limitations

You may have noticed a problem with this code. If you move the mouse in and out of a cell repeatedly within 5 seconds then then a new animation will start. There is no way to know if the animation is already running and optionally stop it. This is a limitation in the current animation system that is currently being overhauled by the compiler team. When the new syntax is ready I'll show you how to update to it.

To try out this code just paste it into an open JavaFX Script buffer into NetBeans 6 with the latest plugin (instructions for setting up NetBeans here)

Biblioteca

• Swing Hacks 4, the Universal Right Click.
• JavaFX Plugin for NetBeans