Search code examples
javajqueryportletwebsphere-portal

java IBM portlet project - Where to put my css and jquery

I have a simple Portlet that I have created with the following project structure.

enter image description here

At the moment all of the java script and the css is inline. I would like to add jquery and some css to this project. Can someone please tell me the correct folders to put a css and js folder in this project structure. It's tough to find examples on the net. I don't want to use themes etc I just want to try and keep it all within this project.

Also is there any problem with me adding jquery to the project? Should it just work?

thanks

--attemped suggested solution--

Hi,

So as per your suggestion I tried to add some javascript from jquery into my portlet .war module. However the link to the javascript does not seem to be correct. In my jsp I have..

<script type="text/javascript" 
    src='<%= 
        renderResponse.encodeURL(
            renderRequest.getContextPath() 
            + "/js/jquery.dataTables.min.js") %>'>
</script> 
<script type="text/javascript" 
    src='<%= 
        renderResponse.encodeURL(
            renderRequest.getContextPath() 
            + "/js/jquery-1.7.1.min.js") %>'>

When I view the source of the link after deployment I can see...

<script type="text/javascript" 
    src='/wps/PA_3m0jpe4o/js/jquery.dataTables.min.js'>
</script> 
<script type="text/javascript"

And that link is incorrect. src='/wps/PA_3m0jpe4o/js/jquery-1.7.1.min.js'>

Here is the project structure with the js and css folder showing... enter image description here

Solution

  • No there should be no problem using JQuery in your own project, so then what third party libraries are intended to be used in.

    I'm not quite familiar with websphere-portal thus not sure if it has some mechanism for resource injection, but I can tell you that the common location your static skin files and scripts should be in is under the webapp forlder of your project which should be WebContent as far as I know for Eclipse IDE. So the structure then can be:

    +- StockOnHandPortlet
|  +- ... // Other project artifacts
|  +- Webontent
|  |  +- javascript
|  |  |  \- your-js-file-1.js
|  |  |  \- your-js-file-2.js
|  |  |  \- ...
|  |  +- css
|  |  |  \- your-stylesheet-1.css
|  |  |  \- your-stylesheet-2.css
|  |  |  \- ...