Including JS and CSS files in view.jsp in OSGI module project

[Balu Bollam，修改在7 年前。]

Hi Everyone


Iam trying to inculude js and css files in my jsp file.....

-Created js and css folders in path /src/main/resources/META-INF/resources
and given below lines in view.jsp


<script src="<%=request.getContextPath()%>/src/main/resources/META-INF/resources/js/jquery-ui.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/src/main/resources/META-INF/resources/css/jquery-ui.css">
<script>

Also tried this

<script src="<%=request.getContextPath()%>/META-INF/resources/js/jquery-ui.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/META-INF/resources/css/jquery-ui.css">
<script>

For both the cases getting 404 Exception..


Please anyone Help me out....

[David H Nebinger，修改在7 年前。]

Balu Bollam:

Iam trying to inculude js and css files in my jsp file.....

You should never do this.

Portlets are responsible for generating HTML fragments. The portal, when aggregating the page, does not parse these fragments, it just injects the fragments into the page where they need to go.

If you put these kinds of includes into your HTML fragment, they become scattered throughout the final HTML page. You'll get rendering issues (since the CSS is not loaded until the fragment starts), you can get duplicated includes (multiple portlet instances pulling in the same resources), etc.

Instead you should use your portlet class annotations to declare necessary CSS and JS resources. When you do things the right way, Liferay will aggregate all CSS and JS, removing duplicates, but putting them at the top or bottom of the rendered page where they belong.

[Balu Bollam，修改在7 年前。]

Thanks a lot for Your quick reply...Okay Got you...But can You please give me more information or any document link.. about "How to add It in mvcportelt class of OSGI Module project"...
Thanks
Balu

[David H Nebinger，修改在7 年前。]

The best example of how to do something is always the Liferay source:

https://github.com/liferay/liferay-portal/blob/master/modules/apps/foundation/contacts/contacts-web/src/main/java/com/liferay/contacts/web/internal/portlet/ContactsCenterPortlet.java#L130-L131

[Balu Bollam，修改在7 年前。]

Hi David ,

Thanks For the Link .

But i am getting 403 Error...Please correct me if i am going wrong anywhere,,,..


*I have created html folder under the (/META-INF/resources) And inside the html i have created js and css folders.

Now i have given below lines in annotation of my mvc action classs..

"com.liferay.portlet.header-portlet-css=/META-INF/resources/html/css/jquery-ui.css",
"com.liferay.portlet.header-portlet-javascript=/META-INF/resources/html/js/jquery-ui.js",


Also Tried with

"com.liferay.portlet.header-portlet-css=/src/main/resources/META-INF/resources/html/css/jquery-ui.css",
"com.liferay.portlet.header-portlet-javascript=/src/main/resources/META-INF/resources/html/js/jquery-ui.js",


Getting Error:
"NetworkError: 403 Forbidden - http://localhost:8080/o/samplemodule/META-INF/resources/html/js/jquery-1.10.2.js?browserId=firefox&languageId=en_US&b=7002&t=1479878554000"




Please help me out

Thanaks
Balu

[David H Nebinger，修改在7 年前。]

The paths in the properties are relative to the html root. So assuming your files are in src/main/resources/META-INF/resources/html/css/jquery-ui.css, then the value that you use for the property would be /html/css/jquery-ui.css.

[Balu Bollam，修改在7 年前。]

Yes You are Correct....Thanks A lot for Your help.

[Balu Bollam，修改在7 年前。]

Hi David,


I have created liferay 7 osgi module project and added the dependencies form the lib by giving the following...
in build.gradle: compile fileTree(dir:"lib",include: "*.jar")
in bnd.bnd i have given Import-Package: and incuderesources...

1st time when i deploy it is working fine........But most of the times after deployment Getting below ERROR

Exception : "Disabling paths for portlet com_sample_portlet_testPortlet because root path is configured to have access to all portal paths
15:10:20,663 ERROR [http-nio-8080-exec-26][MVCPortlet:551] null is not a valid include
15:10:55,078 ERROR [http-nio-8080-exec-9][MVCPortlet:551] null is"


I don't know whether this is effecting due to dependencies.... please help me out Regarding this David


Thanks and Regards
Balu

[Jitendra Rajput，修改在7 年前。]

You can need to add web context path in module's bnd file and using web context path you can include static resources like css , js and images in your module.

Web-ContextPath: /my-custom-portlet

<link href="/o/my-custom-portlet/my-custom.css" rel="stylesheet" type="text/css">

Please check this link for more information.

Thanks !
Jitendra

[David H Nebinger，修改在5 年前。]

Jitendra Rajput:

You can need to add web context path in module's bnd file and using web context path you can include static resources like css , js and images in your module.

Web-ContextPath: /my-custom-portlet

<link href="/o/my-custom-portlet/my-custom.css" rel="stylesheet" type="text/css">

Actually it is bad practice to embed a <link /> tag inside of your JSP. Anyone suggesting such a thing doesn't realize that this can result in inefficient processing and aggregation of the portal content.

[Adnan Yaqoob，修改在5 年前。]

David H Nebinger:

The paths in the properties are relative to the html root. So assuming your files are in src/main/resources/META-INF/resources/html/css/jquery-ui.css, then the value that you use for the property would be /html/css/jquery-ui.css.

How to add more than one CSS and or JS files using the approach you mentioned above?