JavaFX Creating Button

Creating Buttons

In this section, we will demonstrate how to create simple buttons using JavaFX. After reading the section, you will know how to create a simple button and handling the events. Lets see a basic example on how to make a button appear on the window.

Example

/* * The program demonstrate how to create a simple button * The window will display a button that does nothing * * Created on Dec 13, 2009, 9:23:30 PM */ package creatingbutton; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; /** * @author J J */ /* Here we create the stage of the window We set the width and height of the window * */ Stage { title: "Simple Button" width: 250 height: 200 /* Inside the scene we create a horizontal box layout Inside the horizontal box layout we create a button The button does nothing if the user clicks on it * */ scene: Scene { content: [ HBox{ // Here we set the position of the button layoutX: 60 layoutY: 50 // Creating the button content:[ Button{ text: "Test Button" } ] } ] } }

Click here to download the example

The above example is pretty self explanatory. We import the scene layout, then using the HBox layout we are able to create buttons and place the buttons horizontally. We will see some more examples on HBox layout and VBox layout. The difference between the HBox and VBox layout, one organize the buttons horizontally and the other one organize the button vertically. It's easy to tell that HBox organize the buttons horizontally and VBox organize the buttons vertically. Now lets observe an example using HBox layout that organize three buttons.

Example

/* * The program demonstrate how to create more than one buttons * Then it organize the buttons horizontally with spacing * * Created on Dec 13, 2009, 10:13:48 PM */ package creatingmorebuttons; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.HBox; /** * @author J J */ Stage { // Creates the title of the window title: "Horizontal Buttons" // Create the width and height of the window width: 500 height: 200 // Inside here we will create three buttons scene: Scene { // Creates a horizontal layout content:[ // Create the position of the buttons and spacing of it HBox{ layoutX: 30 layoutY: 50 spacing: 30 // Creating the buttons content: [ // Creates the first button Button { text: "First Button" }, // Creates the second button Button { text: "Second Button" }, // Creates the third button Button { text: "Third Button" } ] } ] } }

Click here to download the example

The above example is very similar to the previous example. In this example, we specify the space between the buttons by assigning a value to the space. Now to create three buttons, we would create it one by one then separate the buttons by a comma.

Handling Button Events

We just learn how to create buttons, now lets observer how we are going to handle button events if the user clicks a button. The following example will create three buttons Red, Green, and Blue. A click on any of the buttons change the window background color.

Example

/* * The program demonstrate how to respond to button events * It will set the background color of the window * * Created on Dec 15, 2009, 11:05:44 PM */ package setbackgroundcolor; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.layout.HBox; import javafx.scene.control.Button; import javafx.scene.paint.Color; /** * @author JJ */ Stage { // Assign white color to the sceneColor var sceneColor: Color = Color.WHITE // Sets the title, width and height of the window title:"Set Background Color" width: 300 height: 250 // Creating the scene scene:Scene { // Fill the window background with the color white fill: bind sceneColor; // Creating three buttons using HBox layout content: [ HBox { // Setting the spacing and position of the buttons layoutX: 40 layoutY: 180 spacing: 30 content: [ // Creating a red button Button { text: "Red" action: function() { /* If the red button is click Assign the color yellow to sceneColor Thus, it will change the window background color * */ sceneColor = Color.RED } } , // Creating a green button Button{ text:"Green" action: function() { /* If the green button is click Assign the color blue to sceneColor Hence, it will change the background to blue * */ sceneColor = Color.GREEN } } , // Creating a blue button Button{ text: "Blue" action: function() { /* If the blue button is click Assign the color red to sceneColor Thus, it will change the background color to red * */ sceneColor = Color.BLUE } } ] } ] } }

Click here to download the example

To wrap up the button section, we will see another example on how to handle button events. In the following example, we will try to change the color of the text by a click of a button.

Example

/* The program demonstrate button handling It changes the color of the text * */ /** * @author JJ */ package changetextcolor; import javafx.stage.Stage; import javafx.scene.*; import javafx.scene.layout.VBox; import javafx.scene.paint.Color; import javafx.scene.text.*; import javafx.scene.control.Button; // Assign Text to txt, so txt can hold any text var txt: Text; // Set Color to pink then assign Color to txtColor var txtColor: Color = Color.PINK; Stage { // Sets the title, width and height of the window title: "Change Text Color" width: 250 height: 300 scene:Scene { content: [ // Group the text and button together Group { content: [ /* Inside here we set the position of the text Writes the text to the screen Then bind it to txtColor * */ txt = Text { layoutX: 40 layoutY: 60 content: "Hello World" fill: bind txtColor } /* Inside here we create three buttons A click of the button changes the text color We also set the position and spacing of the text * */ VBox { layoutX: 80 layoutY: 100 spacing: 20 content: [ Button { text:"Red" action: function() { txtColor = Color.RED } } , Button { text:"Green" action: function() { txtColor = Color.GREEN } } , Button { text:"Blue" action: function() { txtColor = Color.BLUE } } ] } ] } ] } }

Click here to download the example

This concludes our button section. Notice for both of the examples we used the keyword " bind ." If we didn't use the keyword bind, a click of the button will not update the text or the background, hence the text color or the background color will not be change.