JavaFX progress bar with glow effect.

Question

I am hoping someone can help me with this issue. I recently followed James Clarke example of a progress bar with glow effect and it helped with developing a progress bar for an application I was working on. But now, with the JavaFX sdk 1.2 update, the application does not fully work anymore. The progressbar.fx code is posted below:
ProgressBar.fx code:
import java.lang.Math;
import java.lang.Object;
import javafx.animation.Interpolator;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.paint.Paint;
import javafx.scene.Scene;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;
import javafx.scene.layout.Resizable;
public class ProgressBar extends CustomNode, Resizable{
public var min: Number;
public var max: Number = 100.0;
public var value: Number;
public var background: Paint = Color.rgb(118,149,178);
public var foreground: Paint = Color.rgb(216,219,225);
public var font = bind Font{name: "Courier Bold Italic" size: height - borderWidth * 8};
public var arcWidth: Number = 20;
public var arcHeight: Number = 50;
public var borderStroke: Color = Color.BLACK;
public var borderWidth: Number = 1;
public var fontPaint: Paint = Color.LIGHTGRAY;
public var showPercentage = true;
var progressText: Text;
var backgroundText: Text;
var progessBar: Rectangle;
var range = bind Math.abs(max - min);
var percentComplete: Number = bind if(max != 0) { (
value - min) / max
} // if
else {0.0;} // else;
var currentX = bind percentComplete * width;
var blurX: Number = 30;
var progressString: String = bind "%%{%.0f (percentComplete*100)}";
var progressValue = bind "{%.2f value}";
var progressHeight = bind height - borderWidth * 4;
var blurAnim = Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at(0s) { blurX => 0.0 }
at(2s) { blurX =>
currentX - progressHeight / 2 tween Interpolator.EASEBOTH }
var playing = bind visible on replace{
if(playing) {
blurAnim.play();
}else {
blurAnim.stop();
public override function create(): Node {
return Group {
content: [
Rectangle { //background
width: bind width
height: bind height
fill: bind background
stroke: bind borderStroke
strokeWidth: bind borderWidth
arcWidth: bind arcWidth
arcHeight: bind arcHeight
cache: true
backgroundText = Text { // Text over Background
layoutX: bind (width - backgroundText.layoutBounds.width) / 2
layoutY: bind (height - backgroundText.layoutBounds.height) / 2
textOrigin: TextOrigin.TOP
font: bind font
fill: bind foreground
content: bind if(showPercentage) progressString else progressValue
cache: true
Group {
content: [
progessBar = Rectangle { // Progress
layoutX: bind borderWidth
layoutY: bind borderWidth * 2
width: bind currentX
height: bind progressHeight
fill: bind foreground
arcWidth: bind arcWidth
arcHeight: bind arcHeight
Ellipse {
centerX: bind blurX
centerY: bind height / 2
radiusX: bind progressHeight
radiusY: bind progressHeight / 2
fill: Color.rgb(255,255,255,.7)
effect: GaussianBlur{ radius: 30
Text { // Text Over Progress Bar, this has to be in progressBar coordinate space
x: bind (width - backgroundText.layoutBounds.width) / 2
y: bind (height - backgroundText.layoutBounds.height) / 2
textOrigin: TextOrigin.TOP
font: bind font
fill: bind background
content: bind if(showPercentage) progressString else progressValue
clip: bind progessBar
}, // Text
] // 2nd content
} // 2nd Group
] // 1st content
}; // 1st Group
} // public override function create(): Node
} // public abstract class ProgressBar extends CustomNode, Resizeable
function run(args:String[]):Void {
var stage: Stage = Stage {
     title: "Progress Bar"
scene: Scene {
width: 925
height: 60
content: ProgressBar {
     layoutX: 10
layoutY: 10
width: 890
height: 35
value: 80
} // content: ProgressBar
} // scene: Scene
} // var stage: Stage = Stage
} // function run(args:String[]):Void
I use RESTful ws to get the progress of the billing run, which is the loadProgressdata() method in the main.fx, and everything was working fine until we did the javafx sdk 1.2 update. With the update in place, I recompiled the project and found that "Resizable" in
the "public class ProgressBar extends CustomNode, Resizable" was throwing an error when the project was recompiled. I made some changes(mainly adding variables for height and width) but now when the program runs, the backing rectangle appears along with the
percentage of billing progress, but the progress part(2nd rectangle) does not appear with the glow effect. I have read about using "getPrefWidth()" and "getPrefHeight()" methods, but not really sure how I would use them. I can't make the public class ProgressBar extends CustomNode, Resizable abstract as I need to instantiate in the Main.fx.
Can anyone shed some light on what might need to be done to get this running correctly again. I don't need anyone the give me the exact code, but just to point me in the correct direction.

Answer 1

Can you post your code again between "{ code} ... {code }" tags ? Some symbols are missing if copy/pasted.
That said, your preferred width and height, simply return the width and height of your component. What I discovered recently is using LayoutInfo on controls to set the preferred width and height. These are the dimensions the surrounding container (VBox, HBox, Flow, ....) will use to arrange size and position of the enclosed components. So maybe you won't need Resizable any more. Simply fill in the layoutInfo property.
Edited by: Java.Artisan on Jun 26, 2009 11:25 AM
Edited by: Java.Artisan on Jun 26, 2009 11:26 AM