I have this servlet based web application project in eclipse and want to append some html tags like <script src="Chart.js">.
The folder structure is:
C:/apache-tomcat-7.0.53/
my workspace is in D:/../../workplace/CpdApplication/src/cpd/MyServlet.java
cpd contains: MyServlet.java, Chart.js and other files.
CpdApplication/WebContent/META-INF/web.xml
I have some path problems, and I can't resolve them, I searched over and over again and still not working, I get
a 404 (Not Found) for http://localhost:8080/CpdApplication/Chart.js.
The problem is when I want to append <script src='Chart.js'></script>, Tomcat cannot resolve the Chart.js static file.
I have some path problems, and I can't resolve them, I searched over
and over again and still not working, I get a 404 (Not Found) for
.../CpdApplication/Chart.js
Indeed, when writing <script src="/Chart.js"/> you are telling the browser to make its own, separate HTTP request to get the JavaScript file. For this to work:
The servlet container needs to be able to serve static files
To this end, you need to have a servlet-mapping inside your web.xml to serve static files (ie. the default servlet).
This should do:
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/js/*</url-pattern>
</servlet-mapping>
Then place your Chart.js in the following folder: WebContent/js/ and it should work.
EDIT: Of course, you'll need to update the <script> tag in your HTML. Also, make sure that you redeploy your web app to update web.xml on your servlet container (Tomcat I presume).
This is works for me. Thanks 沖原ハーベスト
welcome.jsp
<head>
<script src="resources/js/jsx/browser.min.js"></script>
<script src="resources/js/react/react.min.js"></script>
<script src="resources/js/react/react-dom.min.js"></script>
<script src="resources/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
File hierarchy tree
Web.xml
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/resources/*</url-pattern>
</servlet-mapping>
It seems to me like Chart.js is stored in the same folder with your servlet source.
Usually you should have a structure like this one (I have simplified it):
/css/your-css.css
/js/your-script.js
/src/your-package/YourServlet.java
Whenever you run your application, your compiler creates a set of files that will be copied to your web container. The copied files do not include your src folder, but instead a copy of your built (compiled) classes. All other files (with some exceptions that we should not care about right now) must be outside your src folder in order to get copied.
Try moving your JS inside a js directory outside your src directory. Then, link it like this:
<script src='/Your-Context-Path/js/Chart.js'>
There must be a function to get your context path automatically, I think it is
ServletContext.getContextPath()
You can read about it here.
That should make the trick.
As #Andy replied, you need to set all your resource (JS, CSS, images, etc.) in a folder in your application, then access to them using <context_path>/folder/to/your/resource/<resource_name>.<ext>. Here's a sample of how to do it:
Create a folder inside the root folder (usually named web or WebContent) of your web application with name res.
Inside res, create a folder called js to put all the JavaScript files there. You may create a css folder to handle all your CSS stylesheets, img for images, and on.
In your view, this mean, your JSP, you should access to your resources via context path.
This is how your application folders should look:
- WebContent
- res
- js
Chart.js
In your JSP:
<script src="${request.contextPath}/res/js/Chart.js"></script>
Since you're creating the view content from your Servlet (a shoot on the foot, by the way), use request#getContextPath() to attach it:
"script src=\"" + request#getContextPath() + "/res/js/Chart.js\"></script>";
Rightly said by #VH-NZZ but in case you are using Spring 4x or above, you need to add static resources into ResourceHandlerRegistry. You can do this into your "AppConfig"(your application configuration file), like this :
#Configuration
#EnableWebMvc
#EnableScheduling
#ComponentScan(basePackages = "com.packagename")
public class AppConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/build/**").addResourceLocations("/build/");
registry.addResourceHandler("/dist/**").addResourceLocations("/dist/");
registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
registry.addResourceHandler("/assets/**").addResourceLocations("/assets/");
registry.addResourceHandler("/images/**").addResourceLocations("/images/");
}
Again as rightly said above, you should not keep your java files and static content together at the same location. These should always be available at a separate location. You can put your static content directly under your webapp folder.
Related
I am trying to use some images to decorate my website. But I cannot access those images that placed in WEB-INF folder. My code looks like this:
<img id="welcomeGIF" src="/MyCourses/WebContent/WEB-INF/css/welcome.gif " class="ribbon"/>
I have no problems accessing these images if I simply put them outside the WEB-INF folder under WebContent directory. I am wondering what I am doing wrong? I am new to web-app development so I am not sure if all the css files should be put in WEB-INF. If so, how do I access them?
Here is the structure of my program:
the cause:
There is a rule that the resource in the WEB-INF directory can not be accessed by url (the client)
So when the html is loading, the html tag will send a request to the server (to the url MyCourses/WebContent/WEB-INF/css/welcome.gif) while the resource is in the WEB-INF directory so you can not access it;
how to solve
the java programmer can access the web-inf directory,so you can use the Dispatch request api
web:
<img id="welcomeGIF" src="/MyCourses/getWelcome" class="ribbon"/>
java programmer (FileAccess.class)
request.getRequestDispatcher("/WEB-INF/css/welcome.gif").forward(request,response);
web.xml
<servlet>
<servlet-name>getGif</servlet-name>
<servlet-class>FileAccess</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>getGif</servlet-name>
<url-pattern>/getWelcome</url-pattern>
place the static file out of the Web-inf directory,(it is ok to do this althought the security is not better than before)
if you using the springMvc framework,you can use the mvc:resources configuration to set access the static file directly
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.
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
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></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/
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/...");