Griffon: GfxBuilder/FxBuilder side by side

The following snapshot shows a couple of spheres drawn with GfxBuilder and FxBuilder, can you guess which one is which?

I'm not much of an artist so you probably guessed right already, the left one is drawn by GfxBuilder, the right one by FxBuilder; the whole app requires setting up the builders and the following view script
Each sphere is a custom node, notice that the fx version sets a white background by default and also makes the graphics antialiased, whereas in the gfx version you must make those settings explicit, it appears gfxbuilder is in a lower level of abstraction than fxbuilder, but appearances can be deceiving. Let's look at the gfx code first, after all it was used as a reference for making the fx one:

import java.awt.Color
import griffon.builder.gfx.*

class GfxSphereNode extends CustomGfxNode {
  @GfxAttribute(alias="r") double radius = 90
  @GfxAttribute double cx = 100
  @GfxAttribute double cy = 100
  @GfxAttribute Color base     = Colors.get("blue")
  @GfxAttribute Color ambient  = Colors.get(r: 6,  g: 76,  b: 160, a: 127)
  @GfxAttribute Color specular = Colors.get(r: 64, g: 142, b: 203, a: 255)
  @GfxAttribute Color shine    = Colors.get("white")

GfxSphereNode() {
    super("sphere")
  }

DrawableNode createNode(GfxBuilder builder) {
    double height = radius * 2
    builder.group(borderColor: 'none') {
      circle(cx: cx, cy: cy, radius: radius, fill: base)
      circle(cx: cx, cy: cy, radius: radius) {
        multiPaint {
          radialGradient(radius: radius) {
            stop(offset: 0.0f, color: ambient)
            stop(offset: 1.0f, color: rgba(alpha: 204))
          }
          radialGradient(cy: cy + (height*0.9),
                         fy: cy + (height*1.1)+20,
                         radius: radius) {
            stop(offset: 0.0f, color: specular)
            stop(offset: 0.8f, color: specular.derive(alpha: 0))
            transforms{ scale(y: 0.5) }
          }
          radialGradient(fit: false, fx: 55, fy: 35, radius: height/1.4){
            stop(offset: 0.0f, color: shine.derive(alpha:0.5))
            stop(offset: 0.5f, color: shine.derive(alpha:0))
          }
        }
      }
    }
  }
}

Two things that I really like about this version

multiPaint() rules!
java.awt.Color has a derive() method attached via Groovy MOP

Now let's look at the fx version, this is pure JavaFX Script code

package fx;

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;

class FXSphereNode extends CustomNode {
  var cx = 100.0;
  var cy = 100.0;
  var r  = 90.0;
  var base     = Color.BLUE;
  var ambient  = Color.rgb(6/255.0, 76/255.0, 160/255.0, 127/255.0);
  var specular = Color{ red: 64/255.0, green: 142/255.0, blue: 203/255.0 };
  var shine    = Color.WHITE;

override function create():Node {
    var height = r * 2;
    var specular2 = Color { red: specular.red, green: specular.green,
      blue: specular.blue, opacity: 0.0 };
    var shine1 = Color { red: shine.red, green: shine.green,
      blue: shine.blue, opacity: 0.5 };
    var shine2 = Color{ red: shine.red, green: shine.green,
      blue: shine.blue, opacity: 0.0 };
    Group {
      content: [
        Circle { centerX: cx, centerY: cy, radius: r, fill: base },
        Circle { centerX: cx, centerY: cy, radius: r,
                 fill: RadialGradient {
                   centerX: cx, centerY: cy, radius: r, proportional: false,
                   stops: [
                     Stop { offset: 0.0, color: ambient },
                     Stop { offset: 1.0, color: Color.color(0,0,0,0.8) }
                   ]
                 }
        },
        Circle { centerX: cx, centerY: cy, radius: r,
                 scaleY: 0.6, translateY: r * 0.30,
                 fill: RadialGradient {
                   centerX: cx, centerY: height * 0.8,
                   focusX: cx, focusY: height * 0.9,
                   radius: r, proportional: false,
                   stops: [
                     Stop { offset: 0.0, color: specular} ,
                     Stop { offset: 0.8, color: specular2 }
                   ]
                 }
        },
        Circle { centerX: cx, centerY: cy, radius: height/1.4,
                 fill: RadialGradient {
                   centerX: cx, centerY: cy,
                   focusX: 65, focusY: 45,
                   radius: r * 1.5, proportional: false,
                   stops: [
                     Stop { offset: 0.0, color: shine1} ,
                     Stop { offset: 0.5, color: shine2 }
                   ]
                 }
        }
      ]
    }
  }
}

On the surface the code is pretty much the same, however there is no multiPaint() equivalent, that makes the code a bit longer, as each gradient must be applied to an independent Circle. Notice that the specular gradient applies requires a scale transform to be applied to the containing Circle not the paint. Also notice that deriving a color is not as easy as calling derive(). This is by no means a post to bash JavaFX rather to point out some of its deficiencies (as well as some of mine, for some reason couldn't get the gradients to use implicit values for cx, cy and r, but I know it's possible somehow!), for example a MultiPaint class could certainly be created, and a derive() method could be added to Color (actually a whole set of deriveRed(), deriveGreen(), etc). The fx version could certainly use some rework, it took me a while to tweak the coordinates to make it look like the gfx version but it is not there quite yet, I'm hoping someone more versed in JavaFX Script can lend a hand. (#imlookingatyoujohnathan)

Oh yeah, in case the first paragraph didn't drive the point home: this is a Swing app that contains two panels, one of them contains a JavaFX scene, so there, it can be done.

Keep on Groovying!

Griffon: GfxBuilder/FxBuilder side by side

Posted by: Andres Almiray on July 13, 2009

About Andres Almiray

Why Attend the NFJS Tour?

Current Topics: