Background Image of CSS is not showing - java

I have written a Java WebApp with Vaadin 14.8.0 and SpringBoot.
When I put the application in production mode and create a war file with the command "mvn clean package -Pproduction" and deploy it on my Wildfly, everything works normally. My CSS files are read and also activated.
However, the path I use in the css file for the background image is not found.
"background-image: url("/META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");"
If I enter the path directly as url:
"http://localhost:8080/planyoureplaylist-1.0-SNAPSHOT/META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg"
I also get a 404 Not Found.
My css files are located in the root directory under ./frontend/styles.
My image files can be found in src/main/resources/META-INF/resources/img/.
I also looked at my WAR file with WINRAR. Since I notice that I find the image files in the directory WEB-INF\classes\META-INF\resources\img, but in the whole folder structure not my css files.
To my surprise the background image was displayed normally when I started the application not yet via an external wildfly.
In reference to the following link https://github.com/vaadin/flow/issues/11015 I understand that it is a bug of vaadin. However, since I am on Vaadin 14.8.0 and the bug should be fixed with 14.6.2 I do not understand the problem.
Gladly point out if something else is needed to solve the problem.
About help I would be very happy.
Thanks in advance

The files in META-INF/resources are published in the server root so your META-INF/resources/img/zac-bromell-QwrTnOlWAmI-unsplash.jpg file is available at img/zac-bromell-QwrTnOlWAmI-unsplash.jpg inside your context root. Your background image CSS should thus be "background-image: url("img/zac-bromell-QwrTnOlWAmI-unsplash.jpg");"

Related

JavaFX loading images from CSS in Webstart

I currently have a major problem with loading of CSS and images in JavaFX.
The goal is to make JavaFX load the images that are defined in the CSS file. I get this to work easily in the IDE and in the standalone execution. But once I try the the application as a applet and run it inside a browser context everything fails.
The CSS file is still load properly, but the image files remain blank. Sadly I can't find a way to make JavaFX log why the image loading is failing. All the images are located in subdirectories from the location of the CSS file and are accessed for example like this:
.button-gray {
-fx-border-image-source: url("button/buttongray.png");
}
The CSS file is located in the same package as the class that handles loading it and is load like this:
final URL css = Util.class.getResource("sheet.css");
if (css != null) {
parent.getStylesheets().add(css.toExternalForm());
}
I tried already placing the resources in the root directory and load it with Util.class.getClassLoader.getResource(...) and Thread.currentThread().getContextClassLoader.getResource(...). Both worked fine in case the application was executed as stand alone. Neither worked in case the application is launched from a webstart applet context.
But as I said. In all cases there is no indication that the CSS is not load. The styles defined in the stylesheet are applied properly with exception of the images.
I am running out of idea what the reason for this is. I package and publish the application using the gradle javafx plugin by shemnon.
Building environment:
Oracle Java 1.7b45 x64
Gradle 1.9
Anyone know how to fix this problem or has any idea how to debug it.
Sadly the logging facilities of JavaFX (even the CSS Logger) and the applet trace console give no indication what the problem is.
New Information!
The JNLP file is located here:
JNLP-File
How ever, this file is not the problem. The problems seems to be the generation of the binary css file that is part of the deployment process of JavaFX for webstart. In this binary file, for some yet unknown reason there is a reference to the CSS file inside by building environment. This causes the CSS loader to load the image files from the location on my building server. Something that does not work in my local computer. Builds I did on my local computer on the other hand work because the files are still at the location its looking for.
So now the problem seems to be limited to the binary css generation that stores a entirely wrong file reference.
1) Can you post the .jnlp file that you're using to deploy the app? An incorrect .jnlp can cause resource loading issues like this.
2) Give us the exact invocation of Thread.currentThread().getContextCLassLoader.getResource("") that you're using.
3) Report the contents of the .jar file, with the exact folder/path structure of the file(s) in the jar that you need to load. For example, 'My code is looking for example.png, it should be in the pics.jar file inside the folder com/mycompany/myimages', something like that.
WebStart takes some doing to get working, but I'd suspect the answer lies in there somewhere. If all else fails, I've found JaNeLa to be helpful in debugging web start deployment problems. http://pscode.org/janela/
Have you tried loading the css file with:
final String css = getClass.getResource("sheet.css").toExternalForm();
parent.getStylesheets.add(css); // taken that parent is the name for the Scene.
For the css:
-fx-border-image-source: url("../button/buttongray.png");
Using URL and Util.class is not something that is common to use for loading stylesheets afaik.
Maybe try NetBeans IDE 7.4. Personally i don't know Gradle.

Eclipse unable to find the css file for GWT binder

I am using UI binder for my GWT UI file and I am providing the relative path to load the css file which present in other directory but eclipse is showing the file is missing. Could you please help me how to fix that issue.
<ui:style src="../../../../public/css/sample.css"/>
Location of Ui file
project/src/main/java/com/sample/gwt/client/a/b/c/d/view/e/f.ui.xml
Location of css file
project/src/main/java/com/sample/gwt/client/a/b/public/css/sample.css
I can see the css file at that location but eclipse is unable to find the file.
We often have caching problems with eclipse. The usual workaround is:
Double-click on the generated .java file to open it and press F5 if the file is out of sync.
If it doesn't work clear the gwtUnitCache folder.
And if it doesn't work clear the rest of the target folder.

Loading static resources from inside one-jar

I have a web page hosted on jetty server. The page displays some static images, the images directory are kept inside a jar, say application.jar. This application.jar is packaged inside a one-jar. I am facing problem in accessing the images directory as they are inside a jar which is inside another jar.
I have tried almost all the ways to get URL of the images directory: class.getClassLoader().getResource(), Thread.currenctThread.getContextClassLoader().getResource(), ClassLoader.getSystemClassLoader().getResource(), etc. None of them is of any help. I wrote all these statements, i.e. tried to get access to the images directory, from a class that is inside the application.jar. This jar contains the images directory too.
If anybody has ever faced this before, please reply to this thread. I am open to any other ideas also that may help me achieve the objective.
You can use
InputStream input = getClass().getResourceAsStream("/classpath/to/my/file");
You can find more here:
How to read a file from jar in Java?
How to access resources in JAR file?

jquery.js doesn't get loaded in Tomcat

OK, so I found out so far, that despite me having the jquery.js file in the same folder as the jsp file I have, the Ecipse-Tomcat configuration is executing the files in a different location and it takes all the files except for jquery.js How is this possible and how I can make it automatically load the file in it execution folder?
In my case jquery refuses to work unless I specifically put it in the folder where tomcat is executing the files... Any ideas? Thanks.
Alright, after a few hours of struggling, I finally found a solution to this problem. Seems Eclipse Tomcat probably isn't refreshing and checking the files in the path well if you're using any other perspective than Java EE. In my case I was using and working all the time in the normal Java perspective and this way it never reloaded even when I would click refresh. Now however I switched to Java EE view and clicked refresh. The file finally appeared and jquery finally started working!
All JS/CSS/HTML files are static resources and would be served from Tomcat through DefaultServlet. You would need to configure the default servlet in your web.xml with appropriate location to the folder where these are present. This has nothing to do with the location of JSP, though the JSPs can also go under the same folder.

Java applet error

I am doing a project on applets. I designed the applet using netbeans. After building the project in netbeans, I took the directory "classes" and a .html file from the "build" directory and moved it to another new directory. This .html file includes the applet. The .html file displays the applet correctly, when it is viewed from my desktop.
I uploaded the "classes" folder and the .html file to my free server (host4ufree.com) using FileZilla. If I try to view the webpage online, I get the following error instead of the applet getting displayed:
java.lang.ClassFormatError: Extra bytes at the end of class file
I am using JDk 1.6.0 update 18, and uploaded the file using FileZilla both ASCII and binary format manner. Yet, I am not able to solve the error problem. Does anybody know the solution to this? Is there something wrong in the manner in which I'm trying to add the applet to my webpage?
The question is quite unclear :S Anyway...
I uploaded the "classes" folder and the .html file to my free server
(host4ufree.com) using FileZilla.
If your applet contains more that one class I do not recommend upload the project classes folder itself but wrap your applet classes to jar file before delpoying it.
Report if that helped

Categories