Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Ravi Kiran
Unable to include css and JS files in Liferay Portlet JSP Page
April 20, 2012 1:59 PM
Answer

Ravi Kiran

Rank: Junior Member

Posts: 53

Join Date: April 7, 2012

Recent Posts

Hi ,


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
David H Nebinger
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 20, 2012 4:15 PM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6134

Join Date: September 1, 2006

Recent Posts

Hmm, lets see...

Could it be because you've hidden the files in the WEB-INF/view directory?

Could it be that you're trying to include them in the JSP file instead of using the liferay-portlet.xml file?

Could it be that you're just doing it wrong?

I vote yes for all three...
Olaf Kock
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 21, 2012 2:31 AM
Answer

Olaf Kock

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1643

Join Date: September 23, 2008

Recent Posts

Ravi Kiran
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 23, 2012 11:35 AM
Answer

Ravi Kiran

Rank: Junior Member

Posts: 53

Join Date: April 7, 2012

Recent Posts

David H Nebinger:
Hmm, lets see...

Could it be because you've hidden the files in the WEB-INF/view directory?

Could it be that you're trying to include them in the JSP file instead of using the liferay-portlet.xml file?

Could it be that you're just doing it wrong?

I vote yes for all three...


Yes David , you were right in 2 cases

I am using Struts2 with Liferay and i kept all my JSP's inside WEB-INF view directory
Yes i am directly using them inside JSP without mentioning it them in liferay-portlet.xml file

Anyway i solved tis by putting the external js and css files in webapps\ROOT\html\js , please let me now if this is wrong thing to do ??
And could you tell me or point me to a example where we can use liferay-portlet.xml file for these things . Thanks in advance .
David H Nebinger
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 23, 2012 12:11 PM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6134

Join Date: September 1, 2006

Recent Posts

Yes, that is certainly the wrong way to do it.

If the CSS and JS files are only used by the portlet, they should be specified in liferay-portlet.xml. Don't hide them within the WEB-INF directory, put them somewhere in the docroot folder where they can be accessed by the browser, and the path used should not be relative (i.e. if you have myscript.js in the docroot/js directory, your liferay-portlet.xml file would have
1<footer-portlet-javascript>/js/myscript.js</footer-portlet-javascript>
).

If the CSS and JS files will be used by multiple portlets, you should consider integrating them into a theme.
Ravi Kiran
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 23, 2012 1:01 PM
Answer

Ravi Kiran

Rank: Junior Member

Posts: 53

Join Date: April 7, 2012

Recent Posts

David H Nebinger:
Yes, that is certainly the wrong way to do it.

If the CSS and JS files are only used by the portlet, they should be specified in liferay-portlet.xml. Don't hide them within the WEB-INF directory, put them somewhere in the docroot folder where they can be accessed by the browser, and the path used should not be relative (i.e. if you have myscript.js in the docroot/js directory, your liferay-portlet.xml file would have
1<footer-portlet-javascript>/js/myscript.js</footer-portlet-javascript>
).

If the CSS and JS files will be used by multiple portlets, you should consider integrating them into a theme.


Thanks David , i still have some questions on this



I have 4 Portlets in the UI Page , and all of tem require Jquery.js and also light box.js files and other third party JS files for their UI Screens and i am alread using noir theme for the Application . how can i manage in this case ??



I saw that we can define js files and css files inside liferay-portlet.xml


2. I have all my view Pages under docroot , so how can i refer these js files in MY JSP pages which are defined inside liferay-portlet.xml file ??


<script type="text/javascript" src="">

</script>



3. what does this mean <footer-portlet-javascript>/js/myscript.js</footer-portlet-javascript> and <header-portlet-javascript>/js/myscript.js</header-portlet-javascript> ( Because we can have Multiple Portlets on a page ) not only header and footer Portlet (In my case it s 4 currently )
David H Nebinger
RE: Unable to include css and JS files in Liferay Portlet JSP Page
April 23, 2012 2:24 PM
Answer

David H Nebinger

Rank: Liferay Legend

Posts: 6134

Join Date: September 1, 2006

Recent Posts

Ravi Kiran:
I have 4 Portlets in the UI Page , and all of tem require Jquery.js and also light box.js files and other third party JS files for their UI Screens and i am alread using noir theme for the Application . how can i manage in this case ??


Create a theme plugin that uses noir as the parent theme. Make the changes in the diffs_ folder to use the jquery and css. Deploy the theme, then use your custom theme rather than noir on the page.

2. I have all my view Pages under docroot , so how can i refer these js files in MY JSP pages which are defined inside liferay-portlet.xml file ??


You do not have to do anything with imports on the jsp pages. The imports are already taken care of by the portal when creating the overall page. Your jsp pages should just assume the scripts/css have been loaded and go from there.

3. what does this mean <footer-portlet-javascript>/js/myscript.js</footer-portlet-javascript> and <header-portlet-javascript>/js/myscript.js</header-portlet-javascript> ( Because we can have Multiple Portlets on a page ) not only header and footer Portlet (In my case it s 4 currently )


You can either load JS as the header on a page or a footer on the page. Typically you'll load JS as part of the footer so the page renders w/o waiting for the JS to load. The tags just indicate where the scripts should be loaded as part of the overall page aggregation work done by the portal. Any scripts you put into <header-portlet-javascript /> will be put in the header portion of the whole page, while scripts you put in <footer-portlet-javascript /> will be loaded at the bottom of the overall page.

It does not mean if you view the page source you'll magically see script imports above/below your individual portlets, it means the portal will put them at the top/bottom of the whole aggregated page.
devaraj s
RE: Unable to include css and JS files in Liferay Portlet JSP Page
August 16, 2012 5:09 AM
Answer

devaraj s

Rank: Regular Member

Posts: 206

Join Date: May 21, 2012

Recent Posts

Olaf Kock:



by refering your link i can able to integrate my css file (< link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css"/>)

Can you please tell me, same like css how we will integrate JS files located in docroot folder.. please help as soon as possible its very essential for me.


Thanks in advance..
Olaf Kock
RE: Unable to include css and JS files in Liferay Portlet JSP Page
August 16, 2012 5:34 AM
Answer

Olaf Kock

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1643

Join Date: September 23, 2008

Recent Posts

How about <script src="<%=request.getContextPath()%>/js/myFile.js"/> ? Or did I understand the question wrong?
devaraj s
RE: Unable to include css and JS files in Liferay Portlet JSP Page
August 16, 2012 10:02 AM
Answer

devaraj s

Rank: Regular Member

Posts: 206

Join Date: May 21, 2012

Recent Posts

Olaf Kock:
How about <script src="<%=request.getContextPath()%>/js/myFile.js"/> ? Or did I understand the question wrong?



yes rite... I achieved by using above line of code to include JS also.. Thank You so muchemoticon