A quick update of what is now available on GfxBuilder:

• Border paints and multi paints are back! here is a small how-to on paints.
• All strokes classes from Jerry Huxtable's collection are back too, plus a few additions from Jeremy @ Java Graphics: Code Snippets. Here is another small how-to on strokes.
• Most important of all: Custom Nodes!

ut I'm very excited about the availability of custom nodes because making them in the past was nigh impossible, thanks in part to AST transformations that no longer is true. Let's revisit the Sphere multi-paint example, if you recall the code from than sample (follow the paint tutorial for a quick memory refreshment) you will notice that a sphere can be drawn using a circle and 3 gradients, well here is the updated version using custom nodes, first an image is worth a thousand words



Now for the code itself
import groovy.swing.SwingBuilder import griffon.builder.gfx.* import griffon.builder.gfx.swing.GfxPanel import java.awt.Color class SphereNode 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") SphereNode() { super("sphere") } Drawable 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)) } } } } } } def gfx = new GfxBuilder() def node = gfx.group() { antialias true background(color('white')) customNode(SphereNode) customNode(SphereNode, cx: 300, base: color('red'), ambient: Colors.get(r: 160, g: 76, b: 6, a: 127), specular: Colors.get(r: 203, g: 64, b: 64, a: 255)) customNode(SphereNode, cy: 300, base: color('green'), ambient: Colors.get(r: 160, g: 76, b: 6, a: 127), specular: Colors.get(r: 64, g: 250, b: 64, a: 255)) customNode(SphereNode, cx: 300, cy: 300, base: color('orange'), ambient: Colors.get(r: 160, g: 76, b: 6, a: 127), specular: Colors.get(r: 203, g: 203, b: 64, a: 255)) } def swing = new SwingBuilder() swing.edt { frame(title: "Sphere", size: [410,430], visible: true) { panel(new GfxPanel(), id: "canvas", node: node) } }The SphereNode exposes 7 attributes to the outside world using @GfxAttribute. This particular annotation is @Bindable's long lost sibling, it not only performs the same task @Bindable does (making a property an observable one) but it also is able to write an aliased property, this means you can either set a value for the radius: property or r: property (shortcuts!), it doesn't matter as the backing field will be updated accordingly. The node sets some default values for those attributes, those values match the settings for the blue sphere. Moving on to the actual drawing code of the node, it is pretty much the same one found in the painting how-to plus a few tweaks to have all gradients be relative to the node's location. Notice that the radial gradients are now aware of its host's dimensions, this is why setting values for cx: and cy: is now optional.

Drawing 4 spheres is just a matter of setting the appropriate coordinates (cx,cy) and tweaking some of the colors, otherwise we will have a drawing of 4 blue spheres in the same place! There are two ways for adding a custom node to an scene, by defining the node's class as the value of customNode() or passing an instance of a subclass of CustomNode to customNode(), in the end there is not much difference, the builder makes sure your nodes have the proper attribute values set before they are rendered.

Keep on Groovying!