All posts by Maurício Leite Dau

Graduated at Federal University of Rio Grande do Sul and passionate about software development. Currently working with JavaFX and Web technologies to build software solutions in geology field.

Benefits of CSS Styling in JavaFX Projects

One of the great features brought by JavaFX is the support to Cascading Style Sheets (CSS) to style the application and its graphic components.

The JavaFX supports version 2.1 of the CSS specification and adds a few own extensions with the prefix -fx. In web pages the CSS interacts with the Document Object Model (DOM) of HTML and allows the style applied in a parent element to be available to all children elements. In this way, if a font size of 14 points is applied in a parent list element all list-items elements will have a font size of 14 points. The CSS behavior in JavaFX is very similar but using the Node hierarchy. If a style is defined in a parent Node all children Node will have the same style.

The CSS code responsible for styling a graphic component is saved in a style file (with .css suffix) detached from the code responsible for component structure. Therefore, the Java classes will be smaller and simpler, and the style changing will be directly in the style file. To exemplify the benefits of CSS styling in JavaFX graphic components we will build and style a simple component using Java and CSS code.

Our component has two vertically stacked buttons and we want both to have the same style. In the first case we only use Java code to define the style of the buttons. In the second case we create a CSS class and apply it to both buttons.

The visual result of both codes is the same, but the difference in size and complexity of the code is huge. Thereby, the systems developed by Endeeper with JavaFX technology use CSS to style the graphic components. A single Endeeper software may have different visual according to the individual requirements of each client.

Button button = new Button("Geology Rocks!");
button.setBackground(new Background(new BackgroundFill(Color.web("CC7722"), new CornerRadii(127), Insets.EMPTY)));
button.setBorder(new Border(new BorderStroke(Color.TRANSPARENT, BorderStrokeStyle.NONE, new CornerRadii(127), BorderWidths.EMPTY)));
button.setEffect(new InnerShadow(BlurType.THREE_PASS_BOX, Color.web("27496d"), 2, 0, 0, 0));
button.setFont(Font.font("Trebuchet MS", 18.0));
button.setTextFill(Color.WHITE);
 
Button button2 = new Button("Geology Rocks even more!");
button2.setBackground(new Background(new BackgroundFill(Color.web("CC7722"), new CornerRadii(127), Insets.EMPTY)));
button2.setBorder(new Border(new BorderStroke(Color.TRANSPARENT, BorderStrokeStyle.NONE, new CornerRadii(127), BorderWidths.EMPTY)));
button2.setEffect(new InnerShadow(BlurType.THREE_PASS_BOX, Color.web("27496d"), 2, 0, 0, 0));
button2.setFont(Font.font("Trebuchet MS", 18.0));
button2.setTextFill(Color.WHITE);
Button button1 = new Button("Geology Rocks!");
button1.getStyleClass().add("geology-btn");
Button button2 = new Button("Geology Rocks even more!");
button2.getStyleClass().add("geology-btn");
.geology-btn {
    -fx-font: 18px "Trebuchet MS";
    -fx-text-fill: white;
    -fx-background-color: #CC7722;
    -fx-effect: innershadow( three-pass-box , #27496d , 2, 0, 0, 0);
    -fx-border-radius: 15px;
    -fx-background-radius: 15px;
}
JavaFX with CSS

 

References