Unable to include css and JS files in Liferay Portlet JSP Page

Question

I have download a Jquery Image Slider source and want to integarte with my JSP File

This is my Folder Struture

This is the way i am including them

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link type="text/css" href="/css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="/css/jquery.ui.slider.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen"/>

I get this 404 in server console

20:50:04,625 WARN [404_jsp:109] /css/jquery.ui.theme.css
20:50:04,640 WARN [404_jsp:109] /css/jquery.ui.core.css
20:50:04,640 WARN [404_jsp:109] /css/jquery.ui.slider.css
20:50:04,656 WARN [404_jsp:109] /css/style.css
20:50:04,671 WARN [404_jsp:109] /js/cufon-yui.js
20:50:04,671 WARN [404_jsp:109] /js/GreyscaleBasic.font.js
20:50:04,687 WARN [404_jsp:109] /js/jquery.easing.1.3.js

Answer 1

Put the links in liferay-portlet.xml and let Liferay load the css and javascript. That is the better way (e.g. if user wants put two portlets to one page).

liferay-portlet.xml:

<header-portlet-css>/css/main.css</header-portlet-css>
<footer-portlet-javascript>/js/main.js</footer-portlet-javascript>

And Olaf is right, you must move the css- and js-folders (and images too) from WEB-INF to docroot folder

Answer 2

Several issues:

• If I see this correctly in that thumbnail image that you posted, you have your css and js folder in WEB-INF: Nothing that's in WEB-INF can be requested by any browser, so you'll never be able to get it.

• If you create docroot/css and docroot/js, you will still get 404, because you can't find the files on /css/style.css, but in /your-portlet/css/style.css - the generic way to address it in jsps is

  < link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css"/>
  

Late Edit: request on a portlet's JSP doesn't always work, because according to the JSP specification it's a HttpServletRequest. In the portal world, this is not often relative to the current path of your portlet. Thus, I'd recommend to go with Mark's answer rather than mine: liferay-portlet.xml contains files relative to the current portlet. Since Liferay 7.0, you may use an OSGi-Component's equivalent to liferay-portlet.xml.