A JavaFX Script Application Examples

This section provides examples of JavaFX script applications.

Nashorn and JavaFX describes how to write JavaFX applications as scripts interpreted by the Nashorn engine.

Topics

Example 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 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();
}