Sweet Boxes

See this thread in the mailing lists.

Here is a pretty button widget.

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

function lighter(c: Color, k: Number) =
       Color
       {
               red: (1 - (1 - c.red) * k)
               green: (1 - (1 - c.green) * k)
               blue: (1 - (1 - c.blue) * k)
               opacity: c.opacity
       };

function darker(c: Color, k: Number) =
       Color
       {
               red: c.red * k
               green: c.green * k
               blue: c.blue * k
               opacity: c.opacity
       };


class SweetBox extends CompositeNode
{
       attribute color: Color;
       attribute roundness: Number;

       attribute inset: Number;

       attribute x: Number;
       attribute y: Number;
       attribute w: Number;
       attribute h: Number;

       operation frame(x:Number, y: Number, w:Number, h:Number);
}

attribute SweetBox.inset = 1;

operation SweetBox.frame(x:Number, y: Number, w:Number, h:Number)
{
       this.x = x;
       this.y = y;
       this.w = w;
       this.h = h;
}

function SweetBox.composeNode() =
       Group
       {
               filter: [GaussianBlur {radius: 2}]
               content:
               [
                       Rect
                       {
                               x: bind x
                               y: bind y
                               width: bind w
                               height: bind h
                               arcHeight: bind roundness * h
                               arcWidth: bind roundness * h
                               fill: bind LinearGradient
                               {
                                       x1: 0, y1: 0, x2: 0, y2: 1
                                       stops:
                                       [
                                               Stop {offset: 0.0 color: darker(color, 0.5)},
                                               Stop {offset: 1.0 color: color}
                                       ]
                                       spreadMethod: PAD
                               }
                       },
                       Clip
                       {
                               shape: Rect
                               {
                                       x: bind x+inset
                                       y: bind y+inset
                                       width: bind w-2*inset
                                       height: bind (h-2*inset) /2
                                       arcHeight: bind roundness * h /3
                                       arcWidth: bind roundness * h /3
                               }
                               content: Rect
                               {
                                       x: bind x+inset
                                       y: bind y+inset
                                       width: bind w-2*inset
                                       height: bind h-2*inset
                                       arcHeight: bind roundness * h
                                       arcWidth: bind roundness * h
                                       opacity: 0.8
                                       fill: bind LinearGradient
                                       {
                                               x1: 0, y1: 0, x2: 0, y2: 0.5
                                               stops:
                                               [
                                                       Stop {offset: 0.0 color: white},
                                                       Stop {offset: 1.0 color: lighter(color, 0.8)}
                                               ]
                                               spreadMethod: PAD
                                       }
                               }
                       }
               ]
       };

To work in JavaFXPad, add the following:

Canvas {
    content: SweetBox {
        color: green
        roundness: 1
        x: 10
        y: 10
        w: 200
        h: 40
    }
}