How to Switch Between Two JavaFX Stylesheets

01
of 01

JavaFX CSS Example Program

This example code of a JavaFX application shows how to style the graphical user interface using JavaFX CSS. There are two JavaFX stylesheets - StyleForm.css and StyleForm2.css.

The JavaFX application will switch between the two styles when the "Change Style" button is pressed. It also shows how to use inline styling to put a border around VBox layout pane.

StyleForm.css

.root { 
 display: block;
 -fx-background-color: olivedrab;
}

.fontStyle{
 -fx-font-size: 16;
 -fx-font-family: "Comic Sans MS";
}
.button{
 
}

.label{
 -fx-text-fill: blue;
}
 
.hbox {
 -fx-padding: 15;
 -fx-spacing: 10;
}

.borders{
 -fx-border-color: black;
 -fx-border-style: dashed;
 -fx-border-width: 2;
}

StyleForm2.css

.root { 
 display: block;
 -fx-background-color: lightsteelblue;
}
 
.fontStyle{
 -fx-font-size: 25;
 -fx-font-family: "Times New Roman";
}
.label{
 -fx-text-fill: Black;
}
 
.hbox {
 -fx-padding: 15;
 -fx-spacing: 10;
}

.borders{
 -fx-border-color: yellow;
 -fx-border-style: solid;
 -fx-border-width: 4;
 -fx-border-insets: -5;
}

Java Application

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.CheckBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import javafx.geometry.Insets;


/**
 *
 * @author writing
 */
public class StyleForm extends Application {
 final String style1 = "/javafxcsscontrols/StyleForm.css";
 final String style2 = "/javafxcsscontrols/StyleForm2.css";
 final String feedbackLabelText = "StyleSheet Loaded:";
 final String borderStyle = "borders";
 final String borderStyle2 = "borders";
 
 @Override
 public void start(final Stage primaryStage) {
 final BorderPane pane = new BorderPane();
 final VBox controlBox = new VBox(10);
 HBox buttonBox = new HBox(10);
 HBox randomControlBox = new HBox(10);
 HBox feedbackBox = new HBox(10);
 
 final Scene scene = new Scene(pane, 700, 500);

 //Sets the scene to use the first stylesheet
 scene.getStylesheets().add(style1);
 
 //Sets the VBox to use the fontstyle from the stylesheet
 controlBox.getStyleClass().add("fontStyle");
 
 final Label feedbackLabel = new Label(feedbackLabelText + style1);
 
 Label borderLabel = new Label("Here's some random text");
 
 //When the checkbox is checked or unchecked an inline style is set for 
 //the controlBox VBox layout pane around whether to show a border or not
 CheckBox borders = new CheckBox("Use Borders");
 borders.setOnAction(new EventHandler() {
 @Override public void handle(ActionEvent e) {
 if (!controlBox.getStyle().contains("black"))
 {
 controlBox.setStyle("-fx-border-color: black;-fx-border-style: dashed;-fx-border-width: 2;");
 
 
 }
 else
 {
 controlBox.setStyle("-fx-border-width: 0;");
 }
 
 }
 }); 
 
 //When the Button is clicked the current stylesheet is cleared from the scene.
 //It is replaced by the other stylesheet to change the look of the application.
 //The label tracks which stylesheet is being used
 Button changeStyleSheet = new Button("Change Style");
 changeStyleSheet.setOnAction(new EventHandler() {
 @Override public void handle(ActionEvent e) {
 if (scene.getStylesheets().contains(style1))
 {
 scene.getStylesheets().clear();
 scene.getStylesheets().add(style2); 
 feedbackLabel.setText(feedbackLabelText + style2);
 }
 else
 {
 scene.getStylesheets().clear();
 scene.getStylesheets().add(style1); 
 feedbackLabel.setText(feedbackLabelText + style1);
 }
 
 
 }
 });
 buttonBox.setPadding(new Insets(10));
 buttonBox.getChildren().add(changeStyleSheet);
 buttonBox.setAlignment(Pos.CENTER);
 
 randomControlBox.getChildren().add(borderLabel);
 randomControlBox.getChildren().add(borders);
 
 feedbackBox.setPadding(new Insets(10,10,1,0));
 feedbackBox.getChildren().add(feedbackLabel);
 
 
 controlBox.getChildren().add(randomControlBox);
 pane.setPadding(new Insets(10,10,1,10));
 
 pane.setTop(buttonBox);
 pane.setCenter(controlBox);
 pane.setBottom(feedbackBox);
 
 
 primaryStage.setTitle("Styling JavaFX Controls");
 primaryStage.setScene(scene);
 primaryStage.show();
 }

 /**
 * The main() method is ignored in correctly deployed JavaFX application.
 * main() serves only as fallback in case the application can not be
 * launched through deployment artifacts, e.g., in IDEs with limited FX
 * support. NetBeans ignores main().
 *
 * @param args the command line arguments
 */
 public static void main(String[] args) {
 launch(args);
 }
}
Format
mla apa chicago
Your Citation
Leahy, Paul. "How to Switch Between Two JavaFX Stylesheets." ThoughtCo, Aug. 2, 2017, thoughtco.com/javafx-css-example-program-2034193. Leahy, Paul. (2017, August 2). How to Switch Between Two JavaFX Stylesheets. Retrieved from https://www.thoughtco.com/javafx-css-example-program-2034193 Leahy, Paul. "How to Switch Between Two JavaFX Stylesheets." ThoughtCo. https://www.thoughtco.com/javafx-css-example-program-2034193 (accessed January 22, 2018).