Sweet Boxes
From Planet JFX
[edit] Summary
See this thread in the mailing lists.
Here is a pretty box widget. Adjust the color attribute of a SweetBox when you add it for different results.
| Code | Preview |
|---|---|
| 
|
note: width and height are a bit off | 
|
[edit] Code
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: red
roundness: 1
x: 10
y: 10
w: 200
h: 40
}
}
