When organizing or formatting a graphical user interface (GUI), a CSS (Cascading Style Sheet) file is often utilized by webpages to help clearly display design elements like the format, font, color, borders, and spacing. CSS files are commonly used with software like JavaFX, Scene Builder, and Eclipse. Though incorporating CSS files with this software may seem like a complex process, we at Leading Edge Industrial have compiled tricks and tactics to add CSS styles to your JavaFX elements. With these simple tips, formatting graphical user interfaces can become a simplified process.
How do I Add CSS Styles to My Work in JavaFX?
In order to add style elements to your work in JavaFX, a style sheet must be added to the root element of your window or GUI. When opening your .css file, it will most likely appear as a blank page, as seen in figure 1.
To provide an example of how CSS files can be used with JavaFX, we will demonstrate the steps necessary to change the background color of a root element to black.
- Begin by using the following code in conjunction with your .css file: .root { -fx-background-color: black; }
- In order for the .css file to apply to your root element, you must link the .css file to your application. This can be achieved by typing the line of code into your .java file. This step is displayed in figure 2, which highlights the specific portion of code that is being applied.
These steps will effectively change the background color of your root element to black.
Figure 1
Figure 2
Can I Change the Background of My Root Element Using Scene Builder?
Simply stated, yes.
The built-in feature of Scene Builder can be applied to the .css file in your application, which is demonstrated below.
- Begin by selecting your root element found in Scene Builder, normally the first item listed in the hierarchy section on the left side of Scene Builder.
- Next, open the “Properties” tab located on the right side of Scene Builder. If you scroll about two-thirds down the screen in this new section, you will see a “Stylesheets” label, as shown in figure 3. Click on the plus (+) symbol found on the right-hand side of the “Stylesheets” label, and you will be able to access your .css file. Select the “Open” button to view your .css file, as shown in figure 4.
- With your .css file open, a line of code will automatically be added to the .fxml file, discussed in our previous article. The background to your application is now black. Your anchor pane in Scene Builder will also appear as black when you link your .css file to your anchor pane, as seen in figure 5.
Figure 3
Figure 4
Figure 5
Make Changes to Buttons Using Scene Builder
Now that the .css file is successfully linked to your application, you can easily manipulate any element on your anchor pane. For example, with CSS, one or all buttons on an anchor pane can be quickly changed.
To implement a change to all buttons, we used the following selector “.button,” and added this following code:
This code created a button that looks like this:
If more than one button is added, they will all appear the same as seen in figure 6.
Figure 6
Can My Buttons Have a Different Color?
Absolutely!
In order to change the color of your buttons, you only need to change the code in the “.button” selector of your CSS file. We changed the background color of our buttons by utilizing the following code (the outcome can be viewed in figure 7):
In addition to changing the button color, we also changed the background color of our anchor pane to white, so that the gray buttons could be better seen (as shown in figure 8). For more source code and button help, visit fx experience.
Easily changing the entire look of your application is just one of the numerous benefits that comes by using CSS with a JavaFX application. Utilizing CSS can also make your application more presentable and easier to update and maintain. With Scene Builder, you will see the effects of your code in real time, without the need to compile your application in the Eclipse IDE.
Figure 7
Figure 8
What Other Tools Can I Utilize in Scene Builder?
Scene Builder contains a useful tool called the CSS Analyzer, which helps you view how potential CSS actions can affect a selected part of your GUI. To use this tool, click on the menu option labeled “View,” and then select “Show CSS Analyzer” (displayed in figure 8). By selecting this feature, the CSS Analyzer will appear on the bottom section of Scene Builder.
A small change you may have noticed is the small letters that CSS has attached to your mouse pointer when in the center section of Scene Builder. This feature enables you to know exactly what styles are being applied to your selected element, where the style is defined, and what styles can be manipulated for that element. The boxes highlighted in light blue in figure 8 show you what styles are applied to the button in the middle (the selected element), while using the CSS Analyzer.
This analyzer tool is very valuable because you can see why a specific style is or is not being applied to your element. This analyzer can also show you in-line styles from your code, as well as styles applied from your .css file; the default styles applied to your JavaFX elements can be viewed as well.
Additionally, your CSS file can be opened from the analyzer. To open the file, locate a style applied from your CSS file under the “Stylesheets” column, and click on the small circle in the upper-right corner of the green box, as shown in figure 9. Select “Open application.css.” This action will allow you to create changes to your CSS file while using Scene Builder.
Figure 9
The Benefits of CSS and Scene Builder
By using a CSS file with the software Scene Builder, you can have better control of stylistic elements and the ability to see how different styles will affect your selected element. Scene Builder is also helpful when performing tasks like editing buttons. For questions regarding CSS and JavaFX, contact Leading Edge Industrial!