Css is not working after deployment of a JavaFX app in Eclipse - css

Question

If I deploy a JavaFX app from Eclipse then it won't load the CSS file for some reason, though the app works as expected inside Eclipse.
Main class:
public class Main extends Application {
Stage primaryStage;
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
showMain();
}
public void showMain(){
try {
FXMLLoader loader = new FXMLLoader();
loader.setLocation(Main.class.getResource("Mainwindow.fxml"));
AnchorPane ap = loader.load();
ap.getStylesheets().add(Main.class.getResource("style.css").toExternalForm());
Scene scene = new Scene(ap);
primaryStage.setScene(scene);
primaryStage.show();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
The css is:
#CHARSET "UTF-8";
.button{
-fx-background-color: blue;
}
The fxml:
<AnchorPane prefHeight="381.0" prefWidth="446.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
<children>
<Button layoutX="14.0" layoutY="14.0" mnemonicParsing="false" text="Button" AnchorPane.leftAnchor="14.0" AnchorPane.topAnchor="14.0" />
</children>
</AnchorPane>
In the build.xml I just set the obligatory things. I don't convert the css into bss. I sign it and that's all.
The build.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project name="JavaFXTester6_Web" default="do-deploy" basedir="." xmlns:fx="javafx:com.sun.javafx.tools.ant">
<target name="init-fx-tasks">
<path id="fxant">
<filelist>
<file name="${java.home}\..\lib\ant-javafx.jar"/>
<file name="${java.home}\lib\jfxrt.jar"/>
</filelist>
</path>
<taskdef resource="com/sun/javafx/tools/ant/antlib.xml"
uri="javafx:com.sun.javafx.tools.ant"
classpathref="fxant"/>
</target>
<target name="setup-staging-area">
<delete dir="externalLibs" />
<delete dir="project" />
<delete dir="projectRefs" />
<mkdir dir="externalLibs" />
<mkdir dir="project" />
<copy todir="project">
<fileset dir="/home/zooey/LinuxEclipse/linuxWorkspace/JavaFXTester6_Web">
<include name="src/**" />
</fileset>
</copy>
<mkdir dir="projectRefs" />
</target>
<target name='do-compile'>
<delete dir="build" />
<mkdir dir="build/src" />
<mkdir dir="build/libs" />
<mkdir dir="build/classes" />
<!-- Copy project-libs references -->
<copy todir="build/libs">
<fileset dir="externalLibs">
</fileset>
</copy>
<!-- Copy project references -->
<!-- Copy project sources itself -->
<copy todir="build/src">
<fileset dir="project/src">
<include name="**/*"/>
</fileset>
</copy>
<javac includeantruntime="false" source="1.8" target="1.8" srcdir="build/src" destdir="build/classes" encoding="UTF-8">
<classpath>
<fileset dir="build/libs">
<include name="*"/>
</fileset>
</classpath>
</javac>
<!-- Copy over none Java-Files -->
<copy todir="build/classes">
<fileset dir="project/src">
<exclude name="**/*.java"/>
</fileset>
</copy>
</target>
<target name="do-deploy" depends="setup-staging-area, do-compile, init-fx-tasks">
<delete file="dist"/>
<delete file="deploy" />
<mkdir dir="dist" />
<mkdir dir="dist/libs" />
<copy todir="dist/libs">
<fileset dir="externalLibs">
<include name="*" />
</fileset>
</copy>
<fx:resources id="appRes">
<fx:fileset dir="dist" includes="JavaFXTester6_Web.jar"/>
<fx:fileset dir="dist" includes="libs/*"/>
</fx:resources>
<fx:application id="fxApplication"
name="Test"
mainClass="application.Main"
/>
<mkdir dir="build/classes/META-INF" />
<fx:jar destfile="dist/JavaFXTester6_Web.jar">
<fx:application refid="fxApplication"/>
<fileset dir="build/classes">
</fileset>
<fx:resources refid="appRes"/>
<manifest>
<attribute name="Implementation-Vendor" value="ZA"/>
<attribute name="Implementation-Title" value="Test"/>
<attribute name="Implementation-Version" value="1.0"/>
<attribute name="JavaFX-Feature-Proxy" value="None"/>
</manifest>
</fx:jar>
<fx:signjar //intentionally removed >
<fileset dir='dist'>
<include name='**/*.jar' />
</fileset>
</fx:signjar>
<mkdir dir="deploy" />
<!-- Need to use ${basedir} because somehow the ant task is calculating the directory differently -->
<fx:deploy
embedJNLP="false"
extension="false"
width="400" height="400"
includeDT="false"
offlineAllowed="true"
outdir="${basedir}/deploy"
outfile="JavaFXTester6_Web"
placeholderref="webtest"
placeholderid="webtest"
updatemode="background" >
<fx:info title="JavaFXTester6_Web" vendor="ZA"/>
<fx:application refId="fxApplication"/>
<fx:resources refid="appRes"/>
<fx:permissions elevated="true"/>
</fx:deploy>
</target>
The file system I get after running the build.xml:
The same in my file browser:
I couldn't fin any solutions, everybody mentions the conversion from css to bss, but I tried both (so with Main.class.getResource(style.bss)... too) and no solution. I have unfortunately no more ideas. Can you help? Thank you!

Answer 1

The problem is because of the #CHARSET "UTF-8"; in your css file.
JavaFX cannot parse it and will throw a parse exception.
Remove the CHARSET declaration from the css and try again.

Answer 2

I have the same problem. It all works fine in Eclipse but when I compile and run the jar, the CSS is ignored. Extracting the complied jar shows the CSS file and images in the same folder as the Java class files.
FXML
<stylesheets>
<URL value="#Style.css" />
</stylesheets>
CSS
-fx-background-image: url("background.jpg");
Okay, I figured it out. The CSS file and the image file need to be in the root directory of the jar. In Eclipse the CSS file and image files are in the package with the Java files, but when you compile they need to go in the src folder outside of the package.
You do not need the line;
Java
ap.getStylesheets().add(Main.class.getResource("style.css").toExternalForm());
The FXML file should tell the program where to find the CSS file, and the CSS file tells the program where to find images.