Button
The Button class available through the JavaFX API implements simple button functionality. It is an extension of the Labeled class and therefore can display text, an image, or both text and an image. The following code fragment shows the simplest usage of the Button class.
import javafx.scene.control.Button;
Button{
text: "Click me"
action: function(){
println("The button is clicked");
}
}
The text instance variable defines the text content of the button, while the action function defines the action, which is called whenever the button is clicked. However, the task of applying buttons is not limited to assigning a specific action on a mouse click. With the Button class of the javafx.scene.control package you can visually enhance your UI and use as many event-handling functions or instance variables as you need to set effects.
The following example shows several buttons with various effects applied.
The first button is a combination of text and graphics.
Button {
text: "Accept"
font: Font { name: "Tahoma" size: 24 }
action: function () {
buttonAction = "Accepted";
}
graphic: ImageView { image: imageAccept }
graphicVPos: VPos.CENTER
}
The graphical content is defined by the graphic instance variable. The graphicVPos specifies the vertical position of the image relative to the text. Note that the graphic variable is of the Node type, which means that you can use other extensions of the Node class, for example, shapes.
The default skin of the Button class distinguishes the following visual states of the button.
However, you can apply additional effects to buttons in your application. Consider the following code fragment.
Button {
text: "Accept"
strong: true
font: Font { name: "Tahoma" size: 12 }
onMouseClicked: function (event) {
buttonAction = "Accepted";
}
},
Button {
text: "Decline"
font: Font { name: "Tahoma" size: 12 }
action: function () {
buttonAction = "Declined";
}
effect: bind shadow
onMouseEntered: function (event) {
shadow = DropShadow { offsetX: 5 offsetY: 5 };
buttonAction = "Accepted";
}
onMouseExited: function (event) {
shadow = null;
}
}
The strong instance variable is used to indicate which button on the screen is assigned "enter" keypress events when no other input control on the screen is focused. Set this variable to true to distinguish the button from the other buttons in your application.
Because the Button class extends the Node class, you can apply any of the effects that reside in the javafx.scene.effect package to enhance the visual appearance of the button. In the previous code fragment, the DropShadow effect is applied to the button when the onMouseEntered event occurs.
You can also set the specific look for the cursor when it is on the button. The cursor variable is yet another instance variable inherited from the Node class. You can use one of the Cursor class constants.
Button {
graphic: ImageView { image: imageAccept }
action: function () {
buttonAction = "Accepted";
}
cursor: Cursor.HAND
}
When applied to the button, this cursor style produces the following effect.
The next step to enhance the visual appearance of a button is to apply CSS styles defined by the Skin class. For more information see Applying CSS to UI Controls.
Related Documents
- API Specification: Button
Samples That Use Buttons
