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