This appendix provides examples of JavaFX script applications.
For more information about writing JavaFX applications as scripts interpreted by the Nashorn engine, see Chapter 3, "Nashorn and JavaFX".
Example A-1 JavaFX 3-D
This example demonstrates how a complex task (in this case, rendering 3-D graphics with JavaFX) can be done with relatively little code using the Nashorn script engine capabilities. When you run this example, a window with three green shapes is shown: a box, a sphere, and a cylinder.
load("fx:base.js");
load("fx:controls.js");
load("fx:graphics.js");
var material = new PhongMaterial();
material.diffuseColor = Color.LIGHTGREEN;
material.specularColor = Color.rgb(30, 30, 30);
var meshView = Java.to([
new Box(200, 200, 200),
new Sphere(100),
new Cylinder(100, 200)
], "javafx.scene.shape.Shape3D[]");
for (var i = 0; i != 3; i++) {
meshView[i].material = material;
meshView[i].translateX = (i + 1) * 220;
meshView[i].translateY = 200;
meshView[i].translateZ = 20;
meshView[i].drawMode = DrawMode.FILL;
meshView[i].cullFace = CullFace.BACK;
};
var pointLight = new PointLight(Color.WHITE);
pointLight.translateX = 800;
pointLight.translateY = -200;
pointLight.translateZ = -1000;
var root = new Group(meshView);
root.children.add(pointLight);
var scene = new Scene(root, 800, 400, true);
scene.fill = Color.rgb(127, 127, 127);
scene.camera = new PerspectiveCamera(false);
$STAGE.scene = scene;
$STAGE.show();
Example A-2 JavaFX Animation
This example demonstrates how to create a JavaFX animation using the Nashorn script engine capabilities. When you run this example, a window with colorful circles moving around is shown.
load("fx:base.js");
load("fx:controls.js");
load("fx:graphics.js");
var WIDTH = 500;
var HEIGHT = 600;
var animation;
function setup(primaryStage) {
var root = new Group();
primaryStage.resizable = false;
var scene = new Scene(root, WIDTH, HEIGHT);
scene.title = "Colourful Circles";
primaryStage.scene = scene;
// create first list of circles
var layer1 = new Group();
for(var i = 0; i < 15; i++) {
var circle = new Circle(200, Color.web("white", 0.05));
circle.strokeType = StrokeType.OUTSIDE;
circle.stroke = Color.web("white", 0.2);
circle.strokeWidth = 4;
layer1.children.add(circle);
}
// create second list of circles
var layer2 = new Group();
for(var i = 0; i < 20; i++) {
var circle = new Circle(70, Color.web("white", 0.05));
circle.strokeType = StrokeType.OUTSIDE;
circle.stroke = Color.web("white", 0.1);
circle.strokeWidth = 2;
layer2.children.add(circle);
}
// create third list of circles
var layer3 = new Group();
for(var i = 0; i < 10; i++) {
var circle = new Circle(150, Color.web("white", 0.05));
circle.strokeType = StrokeType.OUTSIDE;
circle.stroke = Color.web("white", 0.16);
circle.strokeWidth = 4;
layer3.children.add(circle);
}
// set a blur effect on each layer
layer1.effect = new BoxBlur(30, 30, 3);
layer2.effect = new BoxBlur(2, 2, 2);
layer3.effect = new BoxBlur(10, 10, 3);
// create a rectangle size of window with colored gradient
var colors = new Rectangle(WIDTH, HEIGHT,
new LinearGradient(0, 1, 1, 0, true, CycleMethod.NO_CYCLE,
new Stop(0, Color.web("#f8bd55")),
new Stop(0.14, Color.web("#c0fe56")),
new Stop(0.28, Color.web("#5dfbc1")),
new Stop(0.43, Color.web("#64c2f8")),
new Stop(0.57, Color.web("#be4af7")),
new Stop(0.71, Color.web("#ed5fc2")),
new Stop(0.85, Color.web("#ef504c")),
new Stop(1, Color.web("#f2660f"))));
colors.blendMode = BlendMode.OVERLAY;
// create main content
var group = new Group(new Rectangle(WIDTH, HEIGHT, Color.BLACK),
layer1,
layer2,
layer3,
colors);
var clip = new Rectangle(WIDTH, HEIGHT);
clip.smooth = false;
group.clip = clip;
root.children.add(group);
// create list of all circles
var allCircles = new java.util.ArrayList();
allCircles.addAll(layer1.children);
allCircles.addAll(layer2.children);
allCircles.addAll(layer3.children);
// Create a animation to randomly move every circle in allCircles
animation = new Timeline();
for each (var circle in allCircles) {
animation.getKeyFrames().addAll(
new KeyFrame(Duration.ZERO, // set start position at 0s
new KeyValue(circle.translateXProperty(),
Math.random() * WIDTH),
new KeyValue(circle.translateYProperty(),
Math.random() * HEIGHT)),
new KeyFrame(new Duration(20000), // set end position at 20s
new KeyValue(circle.translateXProperty(),
Math.random() * WIDTH),
new KeyValue(circle.translateYProperty(),
Math.random() * HEIGHT))
);
}
animation.autoReverse = true;
animation.cycleCount = Animation.INDEFINITE;
}
function stop() {
animation.stop();
}
function play() {
animation.play();
}
function start(primaryStage) {
setup(primaryStage);
primaryStage.show();
play();
}