JavaFX with Passion! Puzzler #1

This puzzler is mainly directed at the students of the free JavaFX with Passion! course, and it contains concepts that have been covered in the course so far.  The first student in that course who submits a correct solution will be awarded a free token for the Pro JavaFX early access eBook.  If you're not enrolled in that course, feel free to submit a solution to this puzzler as well, because I'll give a free eBook for the first correct solution from a non-JavaFX-with-Passion student as well.

This first puzzler is pretty simple, but future puzzlers will be increasingly difficult.  Here are the requirements:

1. As shown in the screenshot above, the JavaFX program must have a slider and some text that rotates when the slider is adjusted.
2. The rotation will be from 0 to 360 degrees, depending on the position of the slider.
3. The text will consist of the string "Angle: " followed by the angle of rotation.
4. The text must have a bold font weight, and be blue in color.
5. The point at which the text rotates must be at the center point (both horizontally and vertically) of the text.

To enter your solution, submit a comment to this blog post that contains the source code pasted into it.  To validate that the code meets the requirements, I will compile and run it with JavaFX SDK 1.1. It must run without any code editing, and must meet the above requirements.

I will feature the two winners and their solutions in an upcoming blog post.  Let the games begin!

Regards,
Jim Weaver
JavaFXpert.com

Comments

[FeiCheng]

this one is better

import javafx.ext.swing.SwingSlider;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.stage.Stage;
/**
* @author FeiCheng
*/
var slider = SwingSlider {
minimum: 0
maximum: 360
value: 0
}
var angle: Number = bind slider.value;
var text: Text = Text {
font: Font.font("Courier", FontWeight.BOLD, 24)
fill: Color.BLUE
translateX: 200,
translateY: 200
content: bind "Angle: {angle}"
rotate: bind angle
}
Stage {
title: "Application title"
width: 400
height: 400
scene: Scene {
content: [
slider, text
]
}
}

[FeiCheng]

import javafx.ext.swing.SwingSlider;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.*;
import javafx.stage.Stage;
import javafx.scene.transform.Rotate;

/**
* @author FeiCheng
*/

var slider = SwingSlider {
minimum: 0
maximum: 360
value: 0
}

var angle : Number = bind slider.value;

var text : Text = Text {
font: Font.font("Courier", FontWeight.BOLD, 24)
fill: Color.BLUE
translateX: 200,
translateY: 200
content: bind "Angle: {angle}"
transforms: Rotate {
pivotX: bind text.boundsInLocal.width / 2
pivotY: bind text.boundsInLocal.height / 2 - text.boundsInLocal.height / 8
angle: bind angle
}
}
Stage {
title: "Application title"
width: 400
height: 400
scene: Scene {

content: [

slider, text

]
}

}

[Paul Bakker]

Hi Jim,

This is my solution :-)
[code]

var slider : SwingSlider;

Stage {
title: "Application title"
width: 400
height: 400
scene: Scene {

content: [
slider = SwingSlider {
minimum: 0
maximum: 360
value: 0
vertical: false
foreground: Color.WHITE
}

Text {
font: Font.font("Courier", FontWeight.BOLD, 24)

fill: Color.BLUE
x: 130,
y: 200
content: bind "Angle: {slider.value}"
rotate: bind slider.value
}
]
}

}

[/code]

[César Amaya]

Hi mr. James:

This is my solution; maybe it's too late, but it's a good exercise.

Thanks a lot

// JavaFX with Passion! Puzzler #1

/*
* Main.fx
*
* Created on 23-mar-2009, 20:47:13
*/

package rotatepuzzler;

import javafx.ext.swing.SwingSlider;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;

/**
* @author Cesar Amaya [email protected]
*/

var w: Number = 310 on replace {
if (w < 310) then
w = 310 // Minimum width

};

var h: Number = 220 on replace {
if (h < 220) then
h = 220 // Minimun height

};

Stage {
var scene: Scene // Reference to scene

title: "Rotate Puzzler"
width: bind w with inverse
height: bind h with inverse
scene:
scene = Scene {
var slider: SwingSlider // Slider reference
var t: Text // Text reference

content: [
slider = SwingSlider {
maximum: 360
minimum: 0
value: 0
// Slider centered horizontally
translateX: bind (scene.width - slider.width) / 2
} // SwingSlider
t = Text {
font: Font.font(null, FontWeight.BOLD, 24);
stroke: Color.BLUE
fill: Color.BLUE
textOrigin: TextOrigin.TOP
// Translate text to scene's center
translateX: bind (scene.width - t.boundsInLocal.width) / 2
translateY: bind (scene.height - t.boundsInLocal.height) / 2
// Bound text content to current slider value
content: bind "Angle: {slider.value}"
// Rotate text node
transforms: bind Transform.rotate(slider.value,
t.boundsInLocal.width / 2,
t.boundsInLocal.height / 2)
} // Text
]
} // Scene

} // Stage