Building JavaFX applications with NetBeans is a top-notch experience. It is incredible to see how effortless coding with this tool actually is.
NetBeans JavaFX Composer provides a Palette with a wide range of readily-available components, making it possible to construct well-crafted and precise UIs with a simple drag-and-drop.
Along with the known windows, such as Navigator and Editor, the JavaFX Composer brings new windows: Design Area (similar to the one present when building Swing applications) and the States editor.
A JavaFX Desktop Business Application project must be created or imported. We will use the project created in the previous recipe.
If unsure how to proceed, take a look at our first recipe in this chapter; there you will find all the necessary information.
With all of the settings and projects in place, let's continue.
With the JavaFXApp open:
After adding all of those components, take some time to design the application like this:
To arrange the components in each place, drag-and-drop a component to the desired location. It is also possible to expand each window by placing the mouse cursor on the corner and then dragging it.
NetBeans does the hard work of creating, declaring, and designing all of the chosen components that were selected from the Palette.
To check how this is done, we need to take a look at the source code.
This is possible by toggling the Source button placed on top of the Editor. Once the button is pressed, the editor changes from Design mode into Source mode.
The Generated Code block is where all of the code that was built by NetBeans is placed. NetBeans creates this non-editable block so developers can be sure that no unintended consequence can come by modifying what was created by the IDE.
To see what was generated by the IDE, press the expand signal for the Generated Code:
Here is how to change the application title and better emphasize the content by changing the fonts in your application.
To name our application, we need to click on the Source button inside the code editor.
In Source mode, the editor shows the Main.fx code. Search for the line that contains:
Title: Main
Inside the function run(): Void.
Then replace Main with MyBook and run the application.
To change the font of some of our labels using NetBeans JavaFX Composer, we need to have the editor in the Design mode.
Click on the Design button.
Then on the Navigator window, expand the Design File and scene, and click on label.
With label selected, navigate to the Properties window and click on the green plus sign to add a new font.
After clicking on the green sign, change Size to 24. After changing the Size value, the label will be shown much bigger.
Now let's change the contents of each label:
- Simply select the desired label in the code editor in the Design mode.
- In the Properties window of that specific Label, change the Text property.
Our App should look like this now:
