Dev Notes

I’ve been working on a demonstration JavaFX application.  It was originaly written for the prerelease candidate.  I just updated it to work with JavaFX version 1.1 and thought I’d share it.  This is a simple spinner that can be stopped and started.  Here’s the full source.  A description of how it works is below.

package org.mediabrowser;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.Node;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;

/**
 * A spinning icon, indicating the application is working
 * @author Connor Garvey
 * @created Oct 22, 2008, 8:12:48 PM
 * @version 0.0.2
 * @since 0.0.1
 */

public class Spinner extends CustomNode {
  var rotation: Number = 0;
  var timeline: Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE;
    keyFrames: [
      KeyFrame {
        time: 50ms
        action: tick
      }
    ]
  };

  public override function create(): Node {
    return Group {
      content: [
        ImageView {
          image: Image {
            url: "{__DIR__}resources/color_wheel.png"
          }
          transforms: Rotate {
            pivotX: 8
            pivotY: 8
            angle: bind this.rotation
          }
          translateX: 3
          translateY: 3
        },
        Rectangle {
          width: 22
          height: 22
        }
      ]
    };
  }

  public function start() {
    this.timeline.play();
  }

  public function stop() {
    this.timeline.stop();
  }

  function tick() {
    this.rotation += 20;
    if (this.rotation == 360) {
      this.rotation = 0;
    }
  }
}

• First, the spinner extends CustomNode. That way, it can be placed anywhere in a UI.
• The timeline is used to rotate the spinner
  • Since the application will be starting and stopping the spinner, set it to run forever, Timeline.INDEFINITE
  • The spinner only does one thing, turn, so it only needs one key frame.  It’s set to turn 20 degrees every 50ms.
• JavaFX will call create() to create instances of the spinner
  • The __DIR__ makes the spinner image relative to the current class
  • Since the image is 16×16, set the rotation pivot point to 8×8, the center of the image
  • The angle of rotation is bound to a property of the class so that it can be easily modified
  • When an image starts to rotate, it appears to shake because it’s not round.  To smooth the rotation out, it’s transformed down and to the right and placed inside of a rectangle.