A css file can be used to easily change the design on a graphical user interface

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.

  1. Begin by using the following code in conjunction with your .css file: .root { -fx-background-color: black; }
  2. 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.

add style elements to your work in JavaFX by adding a style sheet to the root element of your gui

Figure 1

Link your css file to your root element in JavaFX to edit your style elements

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.

  1. 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.
  2. 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.
  3. 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.

Under the stylesheets tab, you will be able to access your css file

Figure 3

Under the tab stylesheets, click open to view your css file

Figure 4

You can manipulate the color of your anchor pane when you link a css file to it

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:

Use the following code to change all buttons

This code created a button that looks like this:

Create a unique button using the coding above

If more than one button is added, they will all appear the same as seen in figure 6.

If you add several buttons, they will all appear the same

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):

to change the color of your buttons, you only need to change the code in the .button selector of your CSS file

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.

Easily change your buttons to different colors by using a css

Figure 7

You can change the background color of your anchor pane by using a css file

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.

For simplicity, you can open your css file from your analyzer

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!

%d bloggers like this: