Styling JavaFX applications with CSS

As a JavaFX developer, you know that creating stunning desktop applications requires much more than writing code. Even with top-notch coding skills, an application can still be unimpressive if it lacks an appealing user interface. That’s where CSS comes in.

CSS (Cascading Style Sheets) is a type of language used to describe the presentation of HTML and XML documents or pages. In JavaFX, you can use CSS to specify the styles to apply to an application’s visual elements such as buttons, text fields, and layouts. This separation of presentation and content maximizes flexibility and reusability and simplifies your code.

In this article, you’ll learn how to style your JavaFX applications with CSS to make them more appealing and user-friendly.

Setting up the CSS in JavaFX

Before diving into how to style a JavaFX application with CSS, let’s first understand how to set up CSS in JavaFX.

In a typical JavaFX application, the CSS stylesheet is attached to the scene graph. A scene graph is a tree-like structure that represents the visual elements in a graphical user interface (GUI). It’s created with a root node called the Scene, which contains other nodes such as layouts, panes, and controls.

To add CSS to a JavaFX application,

1. Create a CSS file with the .css extension.
2. Save the file in the src folder of your JavaFX project.
3. In the code, create a Scene object and associate it with a CSS stylesheet.

Here’s an example of how to set up the CSS in JavaFX:

// Creating a scene
Scene scene = new Scene(rootNode);

// Setting the CSS stylesheet
scene.getStylesheets().add("style.css");

In this code snippet, the rootNode is the root of the scene graph, and style.css is the name of the CSS file.

Once you’ve set up the CSS, you can start styling the visual elements of your JavaFX application.

Styling JavaFX controls

Styling JavaFX controls is perhaps the most common use of CSS in JavaFX applications. Controls are the building blocks of a GUI, and you can apply CSS styles to them to change their look and feel.

Styling buttons

JavaFX provides several types of buttons, including regular buttons, toggle buttons, and radio buttons. Here’s an example of how to style a regular button with CSS:

/* Styling a regular button */
.button {
   -fx-background-color: #336699;
   -fx-text-fill: #ffffff;
   -fx-font-size: 12pt;
}

In this CSS code, the -fx-background-color property changes the color of the button’s background, -fx-text-fill changes the color of the text on the button, and -fx-font-size changes the size of the font used for the text.

Toggle buttons and radio buttons can be styled in the same way, with slight differences in their CSS selectors. For example, to style a toggle button, use the .toggle-button selector instead of .button, while for radio buttons, use the .radio-button selector.

Styling text fields

JavaFX text fields are used for taking input from the user. You can customize their appearance using CSS. Here’s an example:

/* Styling a text field */
.text-field {
   -fx-background-color: #ebebeb;
   -fx-text-inner-color: #000000;
   -fx-font-size: 12pt;
   -fx-prompt-text-fill: #9c9c9c;
}

In this CSS code, the -fx-background-color property changes the background color of the text field, -fx-text-inner-color changes the color of the text within the text field, -fx-font-size changes the size of the font, and -fx-prompt-text-fill changes the color of the prompt text, which appears inside the text field when it’s empty.

Styling labels

Labels are used to display text in JavaFX applications. You can style labels with CSS to change their appearance. Here’s an example:

/* Styling a label */
.label {
   -fx-background-color: #ffffff;
   -fx-text-fill: #336699;
   -fx-font-size: 14pt;
   -fx-font-family: "Arial";
}

In this CSS code, the -fx-background-color property changes the background color of the label, -fx-text-fill changes the color of the label’s text, -fx-font-size changes the size of the font, and -fx-font-family changes the font family.

Styling layouts

JavaFX layouts are used to arrange the elements in the scene graph. You can style layouts with CSS to change their look and feel. Here’s an example:

/* Styling a VBox layout */
.vbox {
   -fx-background-color: #ffffff;
   -fx-padding: 20;
   -fx-spacing: 10;
}

In this CSS code, the -fx-background-color property changes the background color of the VBox layout, -fx-padding adds a padding of 20 pixels around the layout, and -fx-spacing adds a spacing of 10 pixels between the nodes in the layout.

Styling charts

JavaFX provides several charting components such as bar charts, line charts, and pie charts. You can style these charts with CSS to change their appearance. Here’s an example:

/* Styling a pie chart */
.chart {
   -fx-text-fill: white;
   -fx-label-line-length: 20;
   -fx-pie-label-visible: true;
}

In this CSS code, the -fx-text-fill property changes the color of the chart’s text, -fx-label-line-length sets the length of the chart’s labels, and -fx-pie-label-visible displays the labels of the pie slices.

Using CSS selectors

CSS selectors are used to apply styles to specific elements in the scene graph. You can use them to target multiple elements that share a common attribute, such as all buttons in your application. CSS selectors are written in the form of a tag, class, or ID selector.

Here are some examples of using CSS selectors in JavaFX:

Targeting all buttons

/* Targeting all buttons */
.button {
   /* Styles */
}

In this CSS code, the .button selector applies the styles to all buttons in the scene graph.

Targeting a specific button

/* Targeting a specific button */
#login-button {
   /* Styles */
}

In this CSS code, the #login-button selector applies the styles to the button with the ID “login-button”.

Targeting a group of buttons

/* Targeting a group of buttons */
.toggle-button, .radio-button {
   /* Styles */
}

In this CSS code, the .toggle-button and .radio-button selectors apply the styles to all toggle buttons and radio buttons in the scene graph.

Targeting child nodes

/* Targeting a child node */
.vbox > .button {
   /* Styles */
}

In this CSS code, the > symbol selects only the direct child nodes of the VBox layout that are buttons.

Using CSS as a scene graph stylesheet

In addition to using CSS to style individual nodes of the scene graph, you can also use CSS as a scene graph stylesheet. A scene graph stylesheet applies the styles to all nodes in the scene graph without having to specify each one individually.

Here’s an example of how to use CSS as a scene graph stylesheet:

/* Scene graph stylesheet */
* {
   /* Styles */
}

In this CSS code, the * selector applies the styles to all nodes in the scene graph.

Conclusion

In this article, you’ve learned how to style your JavaFX applications with CSS. Styling JavaFX controls such as buttons, text fields, and charts using CSS selectors makes your GUI more attractive and user-friendly. Additionally, you learned how to use CSS as a scene graph stylesheet, which applies styles to all nodes at once.

Now you can apply these tips and techniques to your JavaFX application and make it more visually appealing and user-friendly for your customers. No more plain-looking applications! Comment below and share your results.

Editor Recommended Sites