How to Load javascript and css within Custom Portlet

[6年前 に gopi s によって更新されました。]

Hello Team,

I m trying to migrate the old portlet which contains custom css and javascript within the portlet and when i deploy the portlet on Liferay 7 by just making it compatible iwth liferay 7. I see in UI the custom javascfript and css is not loaded.

<script src='<%= PortalUtil.getStaticResourceURL(request, request.getContextPath()+"/js/jquery.dataTables.min.js") %>' language="javascript"></script>


<link href='<%= PortalUtil.getStaticResourceURL(request, request.getContextPath()+"/css/jquery.dataTables.min.css") %>' rel="stylesheet" type="text/css"/>

Can any one please do let meknow the way i m importing the javascript and css is proper?
The portlet is based on the Spring MVC Portlet.

Thanks
Gopi

[6年前 に David H Nebinger によって更新されました。]

gopi s:

<script src='<%= PortalUtil.getStaticResourceURL(request, request.getContextPath()+"/js/jquery.dataTables.min.js") %>' language="javascript"></script>


<link href='<%= PortalUtil.getStaticResourceURL(request, request.getContextPath()+"/css/jquery.dataTables.min.css") %>' rel="stylesheet" type="text/css"/>

Can any one please do let meknow the way i m importing the javascript and css is proper?

This was never an approved way to include css and js in a portlet, regardless of Liferay version.

In liferay-portlet.xml there are tags for including css and js resources, relative to the portlet, in the portal's aggregated page. That is still how you do it in portlet wars in Liferay 7. For OSGi modules, those are now property keys for the @Component annotation on the portlet class.

[6年前 に gopi s によって更新されました。]

Hi,

Thanks David, can i use the same liferay-portlet.XML tags to import CSS or JavaScript for Liferay 7



thanks,
Gopi

[6年前 に David H Nebinger によって更新されました。]

for portlet wars, they are the same.

[6年前 に Julian Vijiga Jupiter によって更新されました。]

I have the same probem. I created custom login porlet (hook). I don't understand why the @Component can't include css and js like a regular module. For the remedy, I put js below my JSP and for the css I included it with the theme which I would want to move it out coz it affects the background of every other page. I added background image to html tag and this is limited only the login page. Any help? Thank you.

May I also add? How do I rewrite the login form to normal HTML without using AUI? I find it difficult to customize the login form coz AUI has a lot of magic happens behind. It would be overkill if I just use jquery to insert other tags just to conform it with Bootstrap form. I tried to apply my own form but it didn't work coz it doesn't have things like those hidden input fields and the dynamically generated id for login button. I manually copied the generated IDs for login and email and the two (2) hidden input fields. I also used the aui button for login button so that I could have the button with dynamic ID. I don't know what more magic happens. Upon checking the generated HTML (Inspect element) of the original AUI form, there is another hidden input fields generated right before the two hidden fields. When submitted, it never gets to my custom ActionCommand but it does when I using the original AUI form.

I also created my own form validation based on our requirements using JS.

Thank you.

[6年前 に Julian Vijiga Jupiter によって更新されました。]

Update: I'm now able to login using my custom form - id of login/email and password and two hidden inputs button were copied from generated HTML AUI form of overridden JSP while AUI submit button was also copied to still be able generate dynamic id. I'm just afraid, aside from two hidden inputs, there is another one I saw in the generated HTML form of AUI even though AUI form does not include it.