Simple Internal Frame Example
From Planet JFX
This is example of an internal frame.
[edit] Code
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.lang.*;
public class CloseButton extends CompositeNode {
private attribute pressed: Boolean;
public attribute action: operation()?;
}
function CloseButton.composeNode() =
Group {
var: g
var pressHover = bind pressed and g.hover
var r = 6
var fill:Paint = bind if g.hover then gray else new Color(.7, .7, .7, 1)
var stroke:Paint = bind if pressHover then new Color(.8, .8, .8, 1) else white
content:
[Circle {
onMousePressed: operation(e) {pressed = true;}
onMouseReleased: operation(e) {if (g.hover) {(this.action)();} pressed = false;}
selectable: true
cx: r
cy: r
radius: r
fill: bind fill
stroke: bind fill
},
Line {
x1: r/2
y1: r/2
x2: r + r/2
y2: r + r/2
stroke: bind stroke
},
Line {
x1: r/2
y1: r + r/2
x2: r + r/2
y2: r/2
stroke: bind stroke
}]
};
public class MaximizeButton extends CompositeNode {
private attribute pressed: Boolean;
public attribute action: operation()?;
}
function MaximizeButton.composeNode() =
Group {
var: g
var pressHover = bind pressed and g.hover
var r = 6
var fill:Paint = bind if g.hover then gray else new Color(.7, .7, .7, 1)
var stroke:Paint = bind if pressHover then new Color(.8, .8, .8, 1) else white
content:
[Circle {
onMousePressed: operation(e) {pressed = true;}
onMouseReleased: operation(e) {if (g.hover) {(this.action)();} pressed = false;}
selectable: true
cx: r
cy: r
radius: r
fill: bind fill
stroke: bind fill
},
Rect {
x: r/2
y: r/2
width: r
height: r
strokeLineJoin: ROUND
stroke: bind stroke
}]
};
public class SimpleInternalFrame extends CompositeNode {
public attribute x: Number;
public attribute y: Number;
public attribute width: Number;
public attribute height: Number;
}
attribute SimpleInternalFrame.x = 0;
attribute SimpleInternalFrame.y = 0;
attribute SimpleInternalFrame.width = 300;
attribute SimpleInternalFrame.height = 310;
function SimpleInternalFrame.composeNode() =
Group {
var: g
var insets = 8
var fillHead = true
var showButtons = true
transform: bind translate(x, y)
content: [
Rect{id: "Hover effect" width: bind width height: bind height visible: bind g.hover stroke: red strokeWidth: 10 opacity: 0.5 arcHeight: 10 arcWidth: 10 },
Rect{id: "Frame outline" width: bind width height: bind height stroke: black strokeWidth: 2 fill: lightgrey arcHeight: 10 arcWidth: 10},
Group {
id: "Frame header"
transform: bind translate(insets, insets)
content: [
MaximizeButton{transform: bind translate(width-30-2*insets, 4) visible: bind showButtons cursor: DEFAULT},
CloseButton{transform: bind translate(width-15-2*insets, 4) visible: bind showButtons cursor: DEFAULT},
Rect{width: bind width-2*insets height: 20 stroke: black strokeWidth: 2 fill: red opacity: bind if fillHead then 0.3 else 0.01 arcHeight: 10 arcWidth: 10 cursor: MOVE
onMouseDragged: operation(e:CanvasMouseEvent) {
x += e.localDragTranslation.x;
y += e.localDragTranslation.y;
}
onMouseClicked: operation(e) {if (e.clickCount==2) { if (height < 300) { height = 300; } else { height = 20+2*insets;} } }
}
]
},
View {
transform: translate(10,20+insets)
clip: Clip {
shape: Rect {
height: bind height-30
width: bind width-10
}
}
content: Label {
text: bind
"<html>
<p width={if width > 150 then width-10 else 150}>
The JavaFX family of products comprises a set of runtime environments, widgets, development tools, and scripting environments based on Java technology. There are currently two products in the JavaFX family:
</p>
<p width={width-40}>
<img src=http://www.sun.com/images/ig/ig_javafx_architecture.jpg width='200' height='120'>
</p>
<br>
<table>
<tr>
<td>Toggle buttons</td><td><a href='{#(operation() {showButtons = not showButtons;})}'>{if showButtons then "off" else "on"}</a></td>
</tr>
<td>Toggle header</td><td><a href='{#(operation() {fillHead = not fillHead;})}'>{if fillHead then "off" else "on"}</a></td>
<tr>
</html>"
}}
,
null
]
};
var contentGroup = Group {};
insert SimpleInternalFrame{x:50 y:10} into contentGroup.content;
contentGroup;
Frame {
content: Canvas{content: contentGroup}
width: 1100
height: 1000
visible: true
}
