While developing a scene switch program in JavaFX, I encountered an error when attempting to switch scenes. Interestingly, the error disappears when CSS is not used – the program works perfectly without

Question

While developing a scene switch program in JavaFX, I encountered an error when attempting to switch scenes. Interestingly, the error disappears when CSS is not used – the program works perfectly without

Here is My Main.java File

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.*;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage stage) {
       try {
           Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
           Scene scene = new Scene(root);
           String css= this.getClass().getResource("application.css").toExternalForm();
           scene.getStylesheets().add(css);
           stage.setScene(scene);
           stage.show();
       } catch (Exception e) {
           e.printStackTrace();
      }
  }
   public static void main(String[] args) throws Exception {
       Application.launch(args);
  }
 }

This is my SwitchController.java file

import java.io.IOException;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class SceneSwitcher {

private Stage stage;
private Scene scene;
private Parent parent;

public void switchToMain(ActionEvent event) throws IOException {
    parent = FXMLLoader.load(getClass().getResource("Main.fxml"));
    stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
    String css = this.getClass().getResource("application.css").toExternalForm();
    scene.getStylesheets().add(css);
    scene = new Scene(parent);
    stage.setScene(scene);
    stage.show();
}

public void switchToAnotherApp(ActionEvent event) throws IOException {
    parent = FXMLLoader.load(getClass().getResource("AnotherApp.fxml"));
    stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
    String css = this.getClass().getResource("application.css").toExternalForm();
    scene.getStylesheets().add(css);
    scene = new Scene(parent);
    stage.setScene(scene);
    stage.show();
 }
}

this is my application.css file

.main{
    -fx-background-color: "red";
    
}
#sc1{
    -fx-alignment: center;
}
#sc2{
    -fx-alignment: center;
    -fx-text-fill: "GREEN";
    -fx-outline:none;
}

.label{
    -fx-font-size: 20;
    -fx-font-family: "Lucida Console";
    -fx-text-fill: "white";
    -fx-alignment: center;
}

#titleLabel{
    -fx-font-size: 60;
}

this is AnotherApp.fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="SceneSwitcher">
<children>
<Button fx:id="sc1" layoutX="197.0" layoutY="272.0" mnemonicParsing="false" onAction="#switchToMain" prefHeight="84.0" prefWidth="187.0" text="Switch to Main Scene" />
  <Label layoutX="1.0" layoutY="50.0" prefHeight="17.0" prefWidth="600.0" text="This is Scene 2" />
</children>
</AnchorPane>

This is my Main.fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="SceneSwitcher">
  <children>
  <Label fx:id="titleLabel" layoutX="1.0" layoutY="143.0" prefHeight="17.0" prefWidth="600.0" text="Level 1" />
  <Label fx:id="secondLevelLabel" layoutX="2.0" layoutY="242.0" prefHeight="17.0" prefWidth="600.0" text="this has some CSS styles" />
  <Button fx:id="sc2" layoutX="213.0" layoutY="292.0" mnemonicParsing="false" onAction="#switchToAnotherApp" prefHeight="78.0" prefWidth="177.0" text="Switch to Another App" />
</children>
</AnchorPane>

I am just starting to learn JavaFX and Java, inspired by [Bro code] https://www.youtube.com/watch?v=9XJicRt_FaI&ab_channel=BroCode. If you have any tips or suggestions for me, please comment below. Thank you!

java css javafx fxml

Answer 1

Answer №1

Following the advice of @n247s and @kleopatra, it is important to specify the error you are encountering and use clear naming conventions for better understanding by readers.

Upon closer inspection, one issue that stands out is the order in which the stylesheet is assigned. It seems that you are assigning the stylesheet to the scene before creating or initializing it, leading to either a NullPointerException or having no impact on the scene at all. To rectify this, the stylesheet should be assigned after the scene has been created.

You can modify the code as shown below:

public class SceneController {

    private Stage stage;
    private Scene scene;
    private Parent parent;

    public void switchToApp(ActionEvent event) throws IOException {
        parent = FXMLLoader.load(getClass().getResource("App.fxml"));
        addScene(event);
    }

    public void switchToApp2(ActionEvent event) throws IOException {
        parent = FXMLLoader.load(getClass().getResource("App2.fxml"));
        addScene(event);
    }
     
     private void addScene(ActionEvent event){
        stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
        scene = new Scene(parent);
        String css = this.getClass().getResource("application.css").toExternalForm();
        // Set the stylesheet after the scene creation
        scene.getStylesheets().add(css);
        stage.setScene(scene);
        stage.show();
     }
}

Answer 2

Following the advice of @n247s and @kleopatra, it is important to specify the error you are encountering and use clear naming conventions for better understanding by readers.

Upon closer inspection, one issue that stands out is the order in which the stylesheet is assigned. It seems that you are assigning the stylesheet to the scene before creating or initializing it, leading to either a NullPointerException or having no impact on the scene at all. To rectify this, the stylesheet should be assigned after the scene has been created.

You can modify the code as shown below:

public class SceneController {

    private Stage stage;
    private Scene scene;
    private Parent parent;

    public void switchToApp(ActionEvent event) throws IOException {
        parent = FXMLLoader.load(getClass().getResource("App.fxml"));
        addScene(event);
    }

    public void switchToApp2(ActionEvent event) throws IOException {
        parent = FXMLLoader.load(getClass().getResource("App2.fxml"));
        addScene(event);
    }
     
     private void addScene(ActionEvent event){
        stage = (Stage) ((Node) event.getSource()).getScene().getWindow();
        scene = new Scene(parent);
        String css = this.getClass().getResource("application.css").toExternalForm();
        // Set the stylesheet after the scene creation
        scene.getStylesheets().add(css);
        stage.setScene(scene);
        stage.show();
     }
}

While developing a scene switch program in JavaFX, I encountered an error when attempting to switch scenes. Interestingly, the error disappears when CSS is not used – the program works perfectly without

Answer №1

Similar questions

The issue with the Angular custom checkbox directive arises when using it within an ng-repeat

Sending special characters like umlauts from an Angular client to a Java server

What is the best way to eliminate unwanted white space at the top of the page?

Contrasting the process of generating DOM elements by using createElement, setting properties, etc., versus constructing a string of elements and then appending them

Getting a value from strings.xml within a retrofit interface - a simple guide

The div does not allow elements to be centered

Designing a personalized confirmation pop-up following the submission of an AJAX form

Creating a customizable Sass Mixin for animation keyframes that incorporates various stages and the transform property

The KeyboardAvoidingView disrupts the structure of the flexbox layout

How can you implement a one-time superuser access request in your Android app?

Preventing the background color from exceeding the text boundaries using CSS

Incorporating a scrollbar into a CSS content accordion for enhanced user experience

UPDATE: The catch block in my code is not functioning properly for exception handling

Retrieve information from the $http response utilizing AngularJS

Tips for maintaining a Java program continuously running all day and night

What is the best way to determine the identifier of an object in Java programming language?

Is there a way to simulate the screen resolution and size of a Windows laptop on a Macbook Retina screen in order to test frontend

Troubleshoot: Issue with Navbar Dropdown Expansion on Bootstrap Sass 3.3.6 with JavaScript

CSS tip: Keep the bottom of the screen always visible in an overflow window

Choosing a value in the second dropdown menu based on the selection made in the first dropdown menu can be achieved by retrieving both values from the database using a common list