JavaFX step by step Part 2— UI design with Scene Builder
Hi! Welcome again to JavaFX Tutorial series. Go through this tutorial, You’ll learn about how to develop a UI with JavaFX.
JavaFX uses XML to build interfaces.There are two methods available to design UIs.
- Hard Coding — Hard coding is taking too much time. (I’m not going to use this method in tutorial series.)
2. Drag & Drop — Usually I’m using this method because it’s easy for me and I don’t want to think about coding.
To open FXML file double click on it. When you open an FXML file in the editor, there are two tabs underneath the editing area:
— Text. This tab is for developing the markup.
— Scene Builder. This tab is for editing the file in Scene Builder (You should download scene builder according to the your OS).
Note : If you haven’t specified the path to Scene Builder yet, there is the text Please configure JavaFX Scene Builder path.
Let’s develop a simple application. This application will display number increment on the text when you click the increment button.
In Scene builder window you can see UI components on left side. (It’s like Netbeans palette.) And components properties and other controlling stuffs are on right side.
Let’s begin with a new FXML file.
To create a new FXML file right click on sample package and New > FXML File and name it asIncrementUI .
Then the FXML file automatically open. But it’s showing an error. That’s because we should create a controller class for this FXML file. So you need to create Java class. (As a good practice name controller class as IncrementUIControllerand make sure to change the FXML fx:controller attribute value according to your given controller class name).
now Implement IncrementUIController class by the Initializable interface.
Now move to the IncrementUI.fxml and switch to the Scene builder view.
First of all, Select the Anchor Pane in your Hierarchy and adjust the size under Layout (right side).
After that, In Component section (Left side) select Controls and drag button into the Anchor Pane.
Then change button text to “Increment”.
After that button text will change.
In component section and under shapes take Text component drag to the anchor pane (Actually Text’s like Java swing label. It’s richer than label ). Then set Text component text as 0.
Then move to code section to set variable name to Text Component and set variable name as txtOutput.
Then go back to FXML controller file and declare the Text component because we’re going to change the text value with a button click.
The @FXML annotation enables an inject values defined in an FXML file into references in the controller class. In other words, if you annotate your txtOutput with @FXML
After that you should write method for the button click event and make sure to put @FXML annotation. Below is an example.
Then move to the Scene builder and select Increment button and go to the Code section and put icrementValue method name in On Action .
Now everything will be fine.
To run this FXML file go the Main.javaand change FXMLLoader value to IcrementUI.fxml
After that click on Click ▶ on the toolbar.
This is the output of the application. Click on the Increment button, then you can see the increment of Text.
I hope now you have an idea about Scene Builder JavaFX UI componets and and it’s features. Don’t forget to comment with your ideas. See you soon…
Follow me on
📝 Read this story later in Journal.
🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >
