Linking CSS File To JSP - java

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.

Related

Including CSS file to JSP

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

I can't import a CSS File in a JSP

I try to add a CSS file to an JSP which is running on tomcat 8. The CSS just changes the appearance of tables. The CSS file is in the same folder as the JSP. I tried using:
<link href="table.css" rel="stylesheet" type="text/css">
but it didn't show any changes. So I tried:
<style type="text/css">
<%# include file="./table.css" %>
</style>
But this gives me a weird error, when I try to reach the page in my browser on the first try I get 404 - Resource not found but when I try again it works. What can cause this and is there an easier way to import my CSS file in the JSP? I use a servlet to reach the JSP if that matters.
Edit:// I just checked the WAR File i exported and the WEB-INF Folder only contains my classes the Folders of the HTML and JSP Sites are on the root directory of the WAR file.
I'd put all your .css files in a folder named /css right under the root of your WAR. The path would be css/table.css.
Same for JavaScript: create a folder named /js right under the root of your WAR. The path to JavaScript is js/foo.js

Custom JSP Tag which include another JSP

I want to create a custom JSP tag as follows.
<ng:template src="../js/Rule/templates/rule-list.jsp" />
Which will actually include the file "../js/Rule/templates/rule-list.jsp" inside a scripts tag and generate HTML as follows.
<script type="text/ng-template" id="../js/Rule/templates/rule-list.jsp">
Content of ../js/Rule/templates/rule-list.jsp file
</script>
So far I have creates following tagfile.
<%# attribute name="src" required="true" rtexprvalue="true" %>
<script type="text/ng-template" id="${src}">
<%# include file="${src}" %>
</script>
Which is giving this error
File "${src}" not found
Means its trying to include the ${src} instated of its value. Can any one suggest how to include file in tag file from specified attribute value?
Note: I am using angularjs. I want to load angularjs templates without ajax call. Because my browser is not able to load ng-template with AJAX call for cross domain call problem.
Got it. I need to use dynamic include as
<jsp:include page="${src}" />
This is working fine.
WEB-INF directory is a special directory that is not part of the public directory tree of your web (Servlet) application.
The Servlet Specification states (page 70 or so):
A special directory exists within the application hierarchy named
“WEB-INF”. This directory contains all things related to the
application that aren’t in the document root of the application. The
WEB-INF node is not part of the public document tree of the
application. No file contained in the WEB-INF directory may be served
directly to a client by the container. However, the contents of the
WEB-INF directory are visible to servlet code using the getResource and
getResourceAsStream method calls on the ServletContext, and may be
exposed using the RequestDispatcher calls.
AngularJS cannot see any folder inside your web application WEB-INF folder since it has no "connection" to it.
You will have to add those template files in a public folder, view-able by your Angular template files.

Java/Play - Proper way to link to CSS/JS?

I'm creating a Play! 2.1.1 application which I have packaged into a war file using Play2War. This required me to add a context, application.context=/theApp/, in the application.conf file.
I deployed the WAR file to a tomcat7 server which resulted in the url localhost:8080/theApp/.
CSS/JS files load when the url is for example http://localhost:8080/theApp/thisseemstowork, but once the url is http://localhost:8080/theApp/thisoughttowork/180 none of the CSS/JS files are loaded. I simply get
GET http://localhost:8080/theApp/thisoughttowork/public/javascripts/vendor/bootstrap.min.js 404 (Not Found)
This is how I link to the js file in the views:
<script src="public/javascripts/vendor/bootstrap.min.js"></script>
This is in my routes file
GET /public/*file controllers.Assets.at(path="/public", file)
Anyone have an idea what I'm doing wrong? Let me know if you need any more info.
You need to use the Assets controller and reverse-routing.
<script src="#routes.Assets.at("javascripts/vendor/bootstrap.min.js")"></script>
This will generate the correct path no matter where you are in the app. As you can see from the routes file snippet you posted the path is relative to the /public folder, so this will work for any stylesheets, images, etc you put in there.
<link rel="stylesheet" href="#Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" href="#Assets.at("other/folder/styles.css")">
Here's Play's documentation:
http://www.playframework.com/documentation/2.1.1/Assets

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