Netbeans-style Frames

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

operation brighter( c: Color ) {
    var newColor = c.getColor().brighter();
    return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());
}

operation darker( c: Color ) {
    var newColor = c.getColor().darker();
    return rgba:Color(newColor.getRed(), newColor.getGreen(), newColor.getBlue(), newColor.getAlpha());
}

class SweetBox extends CompositeNode
{
    attribute color: Color;
    attribute roundness: Number;
    attribute title: String;
    
    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;
attribute SweetBox.roundness = 1.0;
attribute SweetBox.title = "Unknown";

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
{
    var arcSize = 30
    var titleBarHeight = 20
    content:
    [ Rect {
        x: bind x
        y: bind y
        width: bind w
        height: bind h
        arcHeight: bind roundness * arcSize
        arcWidth: bind roundness * arcSize
        fill: white
        stroke: black
        onMouseEntered: operation( e ) {
            color = brighter( color );
        }
        onMouseExited: operation( e ) {
            color = darker( color );
        }
    },
    Add {
        shape1: Rect {
            x: bind x
            y: bind y
            width: bind w
            height: titleBarHeight
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
        }
        shape2: Rect {
            x: bind x
            y: bind y + titleBarHeight/2
            width: bind w
            height: titleBarHeight/2
        }
        fill: bind LinearGradient
        {
            x1: 0, y1: 0, x2: 0, y2: 1
            stops:
            [
            Stop {offset: 0.0 color: bind darker( darker( darker
                (color) ) )},
            Stop {offset: 1.0 color: bind brighter( brighter( brighter
                (color) ) )}
            ]
        }
        stroke: bind darker( color )
        strokeWidth: 1
    },
    Clip
    {
        shape: Rect
        {
            x: bind x+inset
            y: bind y+inset
            width: bind w-2*inset
            height: (titleBarHeight - 2*inset) / 2
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
        }
        content: Rect
        {
            x: bind x+inset
            y: bind y+inset
            width: bind w-2*inset
            height: titleBarHeight - 2*inset
            arcHeight: bind roundness * arcSize
            arcWidth: bind roundness * arcSize
            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: bind brighter( color )}
                ]
            }
        }
    },
    Text { content: bind title, x: bind x + 10, y: bind y + 5, fill:
        white } ]
};

Canvas {
    content: [
    Rect {
        x: 0
        y: 0
        width: 1000
        height: 400
        fill: rgb(105, 133, 170)
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "Projects"
        x: 10
        y: 10
        w: 280
        h: 180
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "Navigator"
        x: 340
        y: 10
        w: 280
        h: 180
    },
    SweetBox {
        color: rgb(48, 68, 105)
        title: "MyFile.jfx"
        x: 10
        y: 200
        w: 620
        h: 180
    }
    ]
}