Including CSS file to JSP - java

Cannot find the correct path for css that must be included to .jsp file.
The css files are in css folder and jsp is in folder "views" as shown in
this picture.
Have tried different paths to include it, but without result.
<link href="<c:url value="..." />" rel="stylesheet">
<link href="..." rel="stylesheet"/>
Could someone give information or correct path from .jsp file ?

Since WEB-INF folder is protected by server, you should move css & js folder to upper level, means css & js folder should exists in WebContent folder directly.
The structure should be like this:
-WebContent
-META-INF
-WEB-INF
-css
-js

The relationship between where files physically exist in project structure and where they are in runtime context is a classic problem (in my experience) with Java.
You could try using:
System.out.println(System.getProperty("user.dir"));
to find out the directory at runtime and use this to build a correct reference to your stylesheet.

you can use ./css/yourfilename as the path
./ means one up the current directory but the best way to do it is using the absolute path there are many advantage of using the absolute paths for example href="http:www.example.com/css/main.css" .
as meantioned by simon the web-inf could also be the problem

Related

Servlets: can't link css from jsp: cannot resolve directory resources: ${pageContext.request.contextPath} links to root instead of src/main/webapp

I have this project structure (WEB-INF is inside src/main/webapp/):
I try to access a login.css from login.jsp using
<link rel='stylesheet' href="${pageContext.request.contextPath}/resources/css/login.css">
However Idea underlines it as cannot resolve directory:
I use servlets for this project, but however in the other project that uses Spring MVC, the same css link works perfectly. I suspect the ${pageContext.request.contextPath} links to a different folder in this case: to the project root (../src) instead of the root/src/main/webapp folder.
Is there a way to change where ${pageContext.request.contextPath} links to? Or some other way to fix it?
"resources" looks like a directory for maven or concept/grouping in your IDE. They are probably combined at the root of your WAR> My guess would be that your you should remove "resources" from the link as they really reside at the root of your web app.
${pageContext.request.contextPath}/css/login.css
Take a look at the WAR that is actually produced and where they would be in that.

Linking CSS File To JSP

I have a css file in my WEB-INF folder and in a jsp page i have given the location of the css file as :
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB-INF/Tabs.css"
But the problem is it doesn't link with the css file. If i take out the css file from the WEB-INF, it works perfectly.
This is my first time working with css.
What seems to be the problem here ?
Thank you for your time.
The problem here is just as you describe it, the location of the css-file.
All resources located within the WEB-INF-folder is not reachable directly from the web browser, but has to be accessed through a servlet.
And this is the reason of why the css isn't loaded when you are visiting your jsp.
Try instead to put them in a more common structure such as /webapp/resources/css/Tabs.css and change the href to ${pageContext.request.contextPath}/webapp/resources/css/Tabs.css
**Edit **
The folder I refer to as webapp might have any name, but the location of it would be the parent folder of the WEB-INF folder.

Accessing a web application's static resources

I've just built a very simple Java web application using the Wicked framework. The current layout of the project is:
src/
main/
java/
net/myapp/
Homepage.java
Homepage.html
reources/
scripts/
script.js
In the Homepage.html file I am trying to load the JavaScript file:
<script src="scripts/script.js"></script>
I deployed the application, but the browser doesn't find the JavaScript file.
The WAR file is being packaged using the maven-war-plugin. I looked into the WAR file, and I see the following layout:
WEB-INF/
classes/
net/myapp/
Homepage.class
Homepage.html
scripts/
script.js
What am I doing wrong? What am I missing?
The web-related resources should be placed in src/main/webapp
Your directory structure should be:
WEB-INF/
classes/
net/myapp/
Homepage.class
Homepage.html
net/myapp/scripts/
script.js
and your markup should be:
<wicket:link><script src="scripts/script.js"></script>&lt/wicket:link>
Resource sitting behind WEB-INF folder are not publicly available. If Homepage.class forwards to the Homepage.html, file you should be seeing that fine. But in the HTML page you have your reference to the javascript file, which is not publicly available. You need to move the scripts outside of the WEB-INF. The structure should look like
WEB-INF /
classes /
net/myapp/
Homepage.class
Homepage.html
scripts/
scripts.js
This way a refernce in the html file to
<script src="scripts/script.js"></script>
will work properly. When the HTML page is rendered on the user side, they will make the call back to get the JavaScript resource. At this point, the file needs to be visible.
An update of your build script, or app layout should take care of this for you.
Edit: See Bozho's answer, it will fix the build for Maven. see This link for Maven
While the other answers are correct in general, they don't quite take Wicket into account. With Wicket, you can have resources on the classpath, and in some cases they are better than a static file.
You can use Application.mountSharedResource() to assign a url to a shared resource, which can come from anywhere, your classpath included.
Spelling resources without the s?
reources/

Advanced GWT Components theme CSS not being loaded

I'm trying to use the AdvancedTabPanel of the Advanced GWT Components library. I've put the JAR file under war/WEB-INF/lib and added to my classpath in Eclipse, and added to my HTML file:
<link id="advancedTheme" type="text/css" rel="stylesheet" href="./advanced/themes/default/theme.css"/>
Although it finds the Java classes and loads the okay, it doesn't find the CSS. How do I point it to the CSS properly? I can see that the file exists under the JAR, as org/gwt/advanced/public/advanced/themes/default/theme.css...
Edit: I've also added the <inherits name="org.gwt.advanced.Grid"/> tag in my .gwt.xml as indicated in their Quick Start...
I had initially thought the resources for a module would be dumped into the root of the web server based on the Eclipse plugin's demo project placing some css/html files there - but they're actually located under a path named after the module. Once I changed it to reference <projectname>/advanced/themes/default/theme.css (or to reference it with a stylesheet tag in the .gwt.xml file) it worked.

Problem with moving JSPs under WEB-INF directory

I am facing a problem when I move my JSP files along with CSS and JS files under WEB-INF/web/ directory. The problem is that, when a JSP page loads, it does not load CSS and JS files. Please help if you have any idea about it.
Thanks
Umar
Unless you want to write controllers to serve the css/js files in the WEB-INF folder, you will need to move those files out of WEB-INF so that they can be served as static files by the app server.
WEB-INF is not web accessible, you need to put css/js into public_html(www) as browser loads them through http.
You can use the contextPath to retrieve any file from the foot folder,this way can work with files inside and outside WEB-INF folder.
You can make like this
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/fromStyle.css" type="text/css">
To access 'WEB-INF' use
getServletContext().getRealPath("/WEB-INF/...");

Categories