How to include CSS, JS and Image in Liferay Portlet JSP




In Init.jsp,  add the following plug-ins to enable CSS and JS to be loaded inside a portlet.

<%-- CSS, JS --%>
<link href="/o/contact-us-portlet/css/portlet-main.css" rel="stylesheet" />
<script src="/o/contact-us-portlet/js/portlet-main.js"></script>


The path starting with /o/(portlet-name)/  is automatically appended to main url (ex. localhost:8080/o/..)

/o/(portlet-name)/  represents resources/META-INF/resources

One thing to keep in mind is that the above initialization should be done after

<liferay-theme:defineObjects />
<portlet:defineObjects />

I DO NOT KNOW WHY ...


In view.jsp. can get path through request

src="<%=request.getContextPath()%>/images/form-icon.png"





Prerequisite:

In bnd.bnd
Web-ContextPath: /contact-us-portlet 
should be set .



-------------------------------------------------------------------------

Today's trouble shooting

1. main.css and main.js stored in portlet were not loaded due to overridden result by theme-level main.css and main.js. so I had to change the name more like portlet-specific (portlet-main.css) and it worked!


2. Even the same thing happened to a image. "message-icon.png" was not found whereas "success-icon.png" was showing up, and after changing the image file name, it is loaded. My assumption is Liferay has their own image which has the same file name. so It was kinda overridden or not found.

Lesson learned : Naming matters when you develop on the top of existing platform and there are lots of layers but how do I know all the ways Liferay cofigures its path? Just face and fix



Comments

Post a Comment

Popular posts from this blog

Portlet Edit Mode (Portlet preference) to replace Portlet configuration

Within the  EDIT  portlet mode, a portlet should provide content and logic that lets a user customize the behavior of the portlet Typically, portlets in  EDIT  portlet mode will set or update portlet preferences. Add the following properties to the MVCPortlet component annotation. "javax.portlet.portlet-mode=text/html;edit" "javax.portlet.init-param.edit-template=/edit.jsp" And then If you go into the grid button on the portlet, 'Preference' option will appear which redirects you to edit.jsp
Read more

GoGo Shell & What can be deleted in Liferay Instance

In Liferay Instance, remove 'state' in osgi & 'work' in tomcat to remove all histories. GoGoShell is for checking the current state of each jar files in modules. pen cmd as admin and type 'telnet localhost 11311' lb : list all the jar files with state stop 70 (jar file numner) / start 70 (uninstall 70 but for deletion, it would be better to delete jar file from module folder physically) )
Read more