Subscribe YouTube For Latest Update Click Here
Technologies Utilized: Oracle NetBeans IDE 8.2, Java SE 8.0, JavaFX Scene Builder 2.0
Description: This is a simple program written in Java, which calculates the net percentage of a number as well as the sum of the initial number plus the percentage number. Its UI has been implemented with JavaFX Scene Builder and one of the program's features worth mentioning is how it interacts according to user events.
For example, when the program executes for the first time, the only component enabled is the 'Enter initial number:' text box. All the other are initially disabled. When the user types at least one number, then the 'Enter percentage' text box and the 'Clear' command button are enabled.
Next, if a percentage number is entered in the appropriate text box, then the 'Calculate' component is activated which allows the user, if pressed, to calculate the results.
Java developers love their IDE, and we want to allow Java developers to use their IDE and create JavaFX Mobile applications. Therefore, we are happy to announce that we have a plugin for NetBeans that allows you to create a JavaFX Application and deploy it to Android and iOS devices. The NetBeans Plugin is called. JavaFX Scene Builder (64-Bit) is a layout tool which lets users quickly design JavaFX application user interfaces, without coding. Java developers love their IDE, and we want to allow Java developers to use their IDE and create JavaFX Mobile applications. Therefore, we are happy to announce that we have a plugin for NetBeans that allows you to create a JavaFX Application and deploy it to Android and iOS devices. The NetBeans Plugin is called.
Finally, if for some reason, the user decides to clear all the contents from one text box component, then the program's behavior will be changed accordingly, e.g.: one or more components will be deactivated while some others will be available.
At IDR Solutions I spend some of my time working with JPedal (our PDF Viewer which uses both Swing and JavaFX to provide some sophisticated viewing modes). Using my expertise and knowledge I decided that I will show you how to use a Scene Builder in conjunction with the NetBeans IDE to create a JavaFX GUI.
Scene Builder by default does not come with the NetBeans IDE. You can get Scene Builder from here. You can also get the NetBeans IDE from here if you do not already have it.
Download Scene Builder For Netbeans
Objective: We are going to design a simple calculator to look like the figure below.
Linking Scene Builder to NetBeans.
Since Scene Builder does not come bundled with NetBeans, we need to link it to NetBeans in order for it to work.
To do this,
- On Windows go to Tools -> Options -> Java -> JavaFX
- On MAC go to NetBeans -> Preferences -> Java -> JavaFX
See fig BelowSelect the path to where Scene Builder is installed then click Apply.
Now open NetBeans and create a new JavaFX FXML Application.Give you project a name and click FinishAt this stage your project should be looking like this.Now right click on the FXMLDocument.fxml and click Open. This should open the Scene Builder. The FXMLDocument.fxml file is a representation of the Scene Builder. This Scene builder is like the Swing Matisse. When we drag and drop items on the Scene Builder and hit save, the FXMLDocument.fxml file automatically gets Updated just like using the Swing Matisse.
At this stage you should see the Scene Builder open.We do not want the Label and Button generated so lets delete them. We can do this by deleting them in the Scene Builder or deleting them in the FXMLDocument file. To show how the FXMLDocument and Scene Builder works together we will delete if from the FXMLDocument and save. This will update the Scene Builder.
Double click on the FXMLDocument file and edit it as below.
This is how the document should look.
Edit it so it looks like this
Now save the document. Your Scene Builder should be looking like this.Now lets give our AnchorPane a nice rectangular shape. This can be done by dragging to bottom right corner of the AnchorPane.Now lets add four horizontal boxes to our AnchorPane so we can lay out buttons horizontally. To do this drag the HBox from the Containers at the top left of the Scene Builder.It is very difficult to see where you have positioned you HBoxes as they are the same colour with the AnchorPane. Lets temporary change the background colour of the VBoxes.Click on HBox below the AnchorPane at the bottom right of the Scene Builder then on the left side of the Scene Builder, you will see a Style TextArea. Paste the code in the TextArea
See the JavaFX CSS Reference guide for details.
Time to add the buttons to the Calculator.
As we added the the the HBoxes to the AnchorPane, same will we add the buttons to the HBoxes.Drag One Button from the Control Panel to the HBox.Size it to your preferred size by dragging the button left corner of the button. Once done right click on the button and select duplicate. Do this to all four HBoxes.We now have the buttons stack to each other. Lets add some spacing between the buttons. Click on one of the HBoxes below the AnchorPane then on the left side of the Scene Builder, change the spacing.Now let’s change the text, colours and font size of our buttons.
Click on the button you want to edit, on the left side of the Scene Builder, select properties and edit the button properties as preferred.Once done, we are in the position to style our AnchorPane. Click on the AnchorPane and add this code to the style TextArea.
Let’s now style out our Zero and Add buttons. Click on the Zero button and add the code to the style textArea
-fx-background-radius: 0 0 0 25;. Add this to the Add button
Javafx Scene Builder Netbeans 8.2 Download For Windows 10
-fx-background-radius: 0 0 25 0;
Your calculator should be looking like this
Now we are in a position run our program. Save your design in Scene Builder and lets dive into NetBeans.
In your FXMLDocument.fxml you can see the generated code from the Scene Builder. Clean and Build your project and run it. you should see something like this.Now we want to get rid of the background and Frame.To do this , open the FXCalculator.java and add this line of code
stage.initStyle(StageStyle.TRANSPARENT);and also change the scene code to
Scene scene = new Scene(root,Color.TRANSPARENT);so your class look like thisNow that we’ve made our Stage transparent, we cannot close our application. In order to resolve this, let’s add a close button.We will also add a text field to display our numbers. Let’s drag and drop a VBox to the top part of the calculator. In the properties of the VBox, set alignment to TOP_RIGHTWe can now drag and drop an button and text field to the VBox respectively and style it to preferred style and save.Now lets code our button to close the calculator when it is being clicked. In our FXMLDocumentController class, we will create new method called
exitCalculator()this method will be called every time the close button is clicked. we will link this method to the button in the scene builder.
In our scene builder, we will reference this method to the close button. To do this, click on the close button. On the code section on the right side of the scene builder select exitCalculator in the On Action drop down and save.