Summary[]
See this thread in the mailing lists.
This example builds on the Sweet Boxes example to make them look like internal frames. It also makes use of mouse events to change the frame titles as the mouse enters and exits them.
Code[]
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
Regist
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: "Kalender"
x: 10
y: 10
w: 280
h: 180
},
SweetBox {
color: rgb(48, 68, 105)
title: "Nachrichten"
x: 340
y: 10
w: 280
h: 180
},
SweetBox {
color: rgb(48, 68, 105)
title: "Schreibfeld"
x: 10
y: 200
w: 620
h: 180
}
]
}
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: "Kalender"
x: 10
y: 10
w: 280
h: 180
},
SweetBox {
color: rgb(48, 68, 105)
title: "Nachrichten"
x: 340
y: 10
w: 280
h: 180
},
SweetBox {
color: rgb(48, 68, 105)
title: "Schreibfeld"
x: 10
y: 200
w: 620
h: 180
}
]
}