Create a Quick-and-Dirty Reload Button
- Skill Level Beginner
- Product JavaFX
- Key Features Event Handling, Reload Functionality
- Last Updated April 2009
This bit of code enables you to create a button that the viewer can click to run an animated application again. The Reload button consists of a rectangle with a gradient and the text. The mouseover effect from lighter to darker is achieved by increasing the opacity of the gradient. Because the button's opacity is less than 1.0, the green of the circle can be seen moving into the button in this example.
The onMouseClicked event that reloads the application depends on the playFromStart() function. This function is available to the following classes, all of which are used for animation:
javafx.animation.transition.FadeTransitionjavafx.animation.transition.ParallelTransitionjavafx.animation.transition.PathTransitionjavafx.animation.transition.PauseTransitionjavafx.animation.transition.RotateTransitionjavafx.animation.transition.ScaleTransitionjavafx.animation.transition.SequentialTransitionjavafx.animation.transition.Transitionjavafx.animation.transition.TranslateTransitionjavafx.animation.Timeline
Here is how you create the Reload button.
Step One: Declare Variables
Declare a script variable to set the initial opacity:
var op_button = 0.4; //default opacity of Reload button
Assign a variable to the timeline or transition:
var r1 =
Timeline {
repeatCount: 1
keyFrames: [
KeyFrame {
time: 5s
canSkip: true
values: [
slider1 => 100 tween Interpolator.LINEAR
] //close values
} // close KeyFrame
] //close keyFrames
};
r1.play();
Step Two: Create the Rectangle and Text for the Button
Define the Rectangle and Text object instances in the scene.
Stage {
title: "Reload Button"
width: 240
height: 240
scene: Scene {
content: [
Circle { //Green circle
centerX: 120
centerY: 110
radius: bind slider1
fill: Color.GREEN
}
/* Reload button */
Rectangle {
x: 80,
y: 185
arcHeight: 20.0
arcWidth: 20.0
width: 80,
height: 20
fill: LinearGradient {
startX: 0.0
startY: 0.0
endX: 0.0
endY: 1.0
stops: [
Stop {
color: Color.MIDNIGHTBLUE
offset: 0.0
},
Stop {
color: Color.BLUE
offset: 1.0
},
]
}
stroke: Color.WHITE
opacity: bind op_button
cursor: Cursor.HAND
onMouseClicked: function( e: MouseEvent ):Void {
r1.playFromStart();
}
onMouseEntered: function( e: MouseEvent ):Void {
op_button = 1.0;
}
onMouseExited: function( e: MouseEvent ):Void {
op_button = 0.7;
}
} //close Rectangle for Reload button
Text {
fill: Color.WHITE
font: Font {
size: 12
name: "Arial Bold"
}
x: 102,
y: 200
content: "Reload"
} //close Text for Reload button
] //close content
} //close Scene
} //close Stage
As part of the Rectangle class instance, event handlers are added for the Entered, Exited, and Clicked states of the mouse. The onMouseEntered event increases the opacity of the rectangle, and the onMouseExited event decreases the opacity.
The onMouseClicked event invokes the playFromStart() function of the variable to which the timeline or transition was assigned.
Step Three: Define the Circle
To have something to reload, create a simple green circle in the scene, and make the circle expand in radius, as defined by the Timeline. The Circle instance should be ordered before the Rectangle instance and Text instance. At runtime, the Circle is drawn first, and the Reload button overlays it.
/* Create the circle inside the scene content */
Circle { //Green circle
centerX: 120
centerY: 110
radius: bind slider1
fill: Color.GREEN
}
/* Put the rectangle and text for the Reload button here */
For more information about basic animation, see Animation Basics for JavaFX Beginners.
Nancy Hildebrandt
Technical Writer, Oracle Corporation
Vaibhav Choudhary
Member of Technical Staff, Sun Microsystems
