<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

<portlet:actionURL name="showStudenDetailPage" var="studentDetailUrl">
 <portlet:param name="pageName" value="studentDetail-jsp"></portlet:param>
</portlet:actionURL>

This is student list JSP.

<a href="${studentDetailUrl}">Go To Student Detail JSP</a>

• We have created action url and passing one parameter called pageName, which we will access it in action method in portlet class.

• You can observe that we have added two init param and defined the respective jsp path.
• These init param we can access in portlet class to get the jsp path.

• When we place the portlet on page, its render method (defined in portlet class in STEP-2 ) will be called.
• In this(render) method, we are getting request parameter by calling get method of Liferay util class ParamUtil.
• get method of ParamUtil will take 3 parameters. First is the PortletRequest from where we will get the parameter, second is the parameter name(renderPage) and third is the default value in case if the parameter will not found in request.
• First time we will not get renderPage parameter. So it will return studentList-jsp.
• Then we are calling getInitParameter method and passing the value of renderPage parameter. So first time it will search for init parameter studentList-jsp.
• We have defined init parameter called studentList-jsp and its value is path of studentList.jsp in portlet.xml file. So first time, it will give path of studentList.jsp
• The next is, calling method include method and passing the path of studentList.jsp,request and response objects.
• include method simply include the output of studentList.jsp file into view.jsp file.
• Since we kept view.jsp as blank, we will get the final output as studentList.jsp file.
• In studentList.jsp , we created one link and passing action url with one parameter called pageName. Value of this parameter is studentDetail-jsp(which is nothing but the init parameter name which we have defined in portlet.xml file.
• When we click the link, the process action method will be called. We have defined the name attribute in action url with matching name value of @processAction  annotation in portlet, so it will call process action method called showStudenDetailPage .
• In this action method, we are getting the request parameter pageName, which we have passed in action url in studentList.jsp file.
• soon after we are calling actionResponse.setRenderParameter and passing the value of pageName in it.
• In Portlet, soon after the action method call, portlet container will call render method.That is the reason, we make void return type of process action method.
• actionResponse.setRenderParameter method will set the parameter in request object, so that it will be available in render method. Note that this is not equivalent of request.setAttribute. In render method we can access this request parameter.
• When control goes to render method, we will get this render parameter (pageName which is nothing but the init parameter of studentDetail.jsp file) and passing it to getInitParameter method will give the path of studentDetail.jsp file.
• On clicking include method, the output of studentDetail.jsp will be included in view.jsp file.
• Since view.jsp is blank, the output will be of studentDetail.jsp file.

• jquery1.8.js (Java script :- JQuery library. Flow player required JQuery library)
• flowplayer-3.2.6.min.js (java script:- JQuery plugin for Flow player)
• flowplayer-3.2.15.swf (Flash file:- Main/Base flash file of Flow player)
• flowplayer.audio-3.2.10.swf (Flash file:- Audio plugin of Flow player, required to play audio file)
• flowplayer.controls-3.2.14.swf (Flash file:- Control plugin of Flow player. This requires to load all controls like play / pause button, slider, volume control etc)

<script language="JavaScript" type="text/JavaScript" src="/abc.js">
<link rel="stylesheet" href="/xyz.css" type="text/css">

• First line, we are including javascript file (abc.js)
• second line, we are including css file (xyz.css)
• Both of these file (.js and .css) are located within web application context.

<?xml version="1.0"?>
<!DOCTYPE liferay-portlet-app PUBLIC "-//Liferay//DTD Portlet Application 6.0.0//EN" "http://www.liferay.com/dtd/liferay-portlet-app_6_0_0.dtd">

<liferay-portlet-app>
 <portlet>
  <portlet-name>show-video</portlet-name>
  <icon>/icon.png</icon>
  <instanceable>true</instanceable>
  <header-portlet-css>/css/main.css</header-portlet-css>
  <header-portlet-javascript>/js/jquery1.8.js</header-portlet-javascript>
  <header-portlet-javascript>/js/flowplayer-3.2.6.min.js</header-portlet-javascript>
  <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
  <css-class-wrapper>show-video-portlet</css-class-wrapper>
 </portlet>
 <role-mapper>
  <role-name>administrator</role-name>
  <role-link>Administrator</role-link>
 </role-mapper>
 <role-mapper>
  <role-name>guest</role-name>
  <role-link>Guest</role-link>
 </role-mapper>
 <role-mapper>
  <role-name>power-user</role-name>
  <role-link>Power User</role-link>
 </role-mapper>
 <role-mapper>
  <role-name>user</role-name>
  <role-link>User</role-link>
 </role-mapper>
</liferay-portlet-app>

• Observe the <header-portlet-javascript> entry I made under <portlet> element.
• I have defined two such entry. One is for JQuery library and second is for JQuery plugin of Flow player.
• Note that the path is relevant to root. So if I put these js file under /js folder, then it path should be /js/XXX.js
• Similarly we can define the required css in <header-portlet-css> element. Since we don't need any css for now, I haven't define any one.

Next, place all the artifacts I mentioned above in the same folder (/js).The only thing, we need to make sure that above 3 swf files should be in same folder. 

Also we need to play mp3 file. So let us create folder audio under docroot and place the mp3 file in it.Till now the project structure will be look like below screenshot.

Our setup is done. So let us see how to place the Flow player in jsp. Add the code to view.jsp file so that it should look like below snippet.

<a id="audio" style="display:block;width:648px;height:30px;" href="/show-video-portlet/audio/track06.mp3"></a>

<script type="text/javascript">
    jQuery(document).ready(function(){
    flowplayer("audio","/show-video-portlet/js/flowplayer-3.2.15.swf",
  {
     plugins: {
         controls: {
             fullscreen: false,
             autoHide: false
         },
         audio: {
             url: '/show-video-portlet/js/flowplayer.audio-3.2.10.swf'
         }
     }, 
  clip:  {
    autoPlay: true,
    autoBuffering: true,
    provider:"audio"
      }
  }
 );
  });
</script>

Explanation:-

• First, we have defined link with id as audio and href is the location where we have kept our mp3 file.
• Next is the flow player configuration in javascript. flowplayer function has been called. The first parameter will be the id of the anchor where we want to place the flow player. So in this case, the first parameter is "audio" (which is the id of anchor link just defined above). Second parameter is the location where we placed the main swf file.
• We have defined controls and audio elements under plugin to inform to Flow player that these are the plugin we have used.
• In audio plugin, we have to give the path of the audio plugin's swf file.
• And at the end we have define various attribute of clip (audio or video) like auto play,auto-buffer and the last option is the provider, which is the same as audio plugin name we defined.

And its done. let us see how it will play it. build the portlet and deploy it over liferay page. It will be look like below screenshot.

• I have created portlet class ShowFactroailPortlet in package com.techblog.opensource.portlet and added following code in it.

package com.techblog.opensource.portlet;

import java.io.IOException;

import javax.portlet.ActionRequest;
import javax.portlet.ActionResponse;
import javax.portlet.PortletException;
import javax.portlet.ProcessAction;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

import com.liferay.portal.kernel.exception.PortalException;
import com.liferay.portal.kernel.exception.SystemException;
import com.liferay.portal.kernel.log.Log;
import com.liferay.portal.kernel.log.LogFactoryUtil;
import com.liferay.portal.kernel.util.ParamUtil;
import com.liferay.util.bridges.mvc.MVCPortlet;

public class ShowMultiplicationPortlet extends MVCPortlet {

 private static Log log = LogFactoryUtil.getLog(ShowMultiplicationPortlet.class);
 
 //Default Render Method.
  public void doView(RenderRequest renderRequest,
    RenderResponse renderResponse) throws IOException, PortletException {
   String multiplication = ParamUtil.get(renderRequest, "multiplication", "0");
   renderRequest.setAttribute("multiplication", multiplication);
   super.doView(renderRequest, renderResponse);
  }

  @ProcessAction(name="getMultiplication")
  public void multiply(ActionRequest actionRequest,
    ActionResponse actionResponse) throws IOException, PortletException, PortalException, SystemException{
   String firstInput = ParamUtil.get(actionRequest, "firstInput", "0");
   String secondInput = ParamUtil.get(actionRequest, "secondInput", "0");
   
   log.info("firstInput"+firstInput+" secondInput"+secondInput);
   
   int firstNumber = Integer.parseInt(firstInput);
   int secondNumber = Integer.parseInt(secondInput);
   
   int multiplication = firstNumber * secondNumber;
   
   actionResponse.setRenderParameter("multiplication", String.valueOf(multiplication));
  }

}

Note:- I have pasted code here for explanation. You can download it from the link at the end of this post.

• First I take logger with the help of LogFactoryUtil (Liferay utility class).
• multiply is the processAction method. It will be called when we submit two numbers for multiplication from JSP. It has key (name) and its value is "getMultiplication"
• In this processAction method, I am taking two parameters and converting it into numbers. After that I am multiplying it and setting it in render parameter so that it will be available in render method (This is one of the way to send value from Action method to render method). Note:- setRenderParameter method is available only for object of type ActionResponse.
• doView method is associate with portlet's view mode and will be called whenever portlet get render.
• In this method I am fetching the parameter(multiplication) which I have sent in Action method and storing it to request scope so that it can be available in JSP (via EL)
• Note:- I have used ParamUtil.get method of Liferay utility class ParamUtil  to get request parameter. Third argument is the default value which will be send in case the parameter is not exist.

I have added the following code in view.jsp file

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:actionURL name="getMultiplication" var="getMultiplicationUrl"></portlet:actionURL>
<portlet:defineObjects />

Multiplication is <b>${multiplication}</b>

<form action="${getMultiplicationUrl}" method="post">
fisrt I/p<input type="text" name="firstInput"><br>
Second I/p<input type="text" name="secondInput"><br>
<input type="submit">
</form>

Explanation:-

• The firs line is the Taglib declaration.
• In second line, we have created portlet ActionURL. We gave name ="getMultiplication" which is the same as key value of processAction method in portlet class. So this ActionURL will call portlet's processAction method (multiply).
• This ActionURL will be used in JSP by defining var value. We gave value of var  as getMultiplicationUrl so it can be accessed as ${getMultiplicationUrl} (as EL).
• Next to it, I have created form which having two text box, taking two inputs and one submit button which will submit the form.
• action of this form is the ActionURL which we have created. We have set it through ${getMultiplicationUrl} 

Give two numbers and click on Submit button and you will get multiplication of these two number. You can also observe the log that we have put in render and action method.

• Very similar way I have create show-factorial-portlet.
• This portlet having class name ShowFactroailPortlet which resides under package com.techblog.opensource.portlet
• In this portlet, we are taking only single number and counting its factorial and showing it to JSP.

• Page-1 
• Page-2

place multiplication portlet on Page-1 and factorial portlet on Page-2. You can observe that these two portlets are now working independently. Use can click on Page-1 and able to see multiplication portlet and if clicks on Page-2, factorial portlet will be seen.

I would like to recommend to download the source code from the link at the bottom of this blog and refer it side by side to get complete idea

We have to follow certain rules while forwarding control from one portlet to another portlet. Following are the prerequisites.

• The portlet to which we are forwarding control should be non-instanceable. in our example we will forward control from multiplication portlet to factorial portlet. So factorial portlet should be non-instanceable.
• The portlet to which we are forwarding control should set authentication token false. Lifeary generate token for each request (POST). So we need to insure that the factorial portlet should not generate this token.

To fulfill these prerequisite, we need to make following changes to factorial portlet (Since we have to forward from multiplication portlet to factorial portlet)

• Make it non-instanceable

For this, open liferay-portlet.xml file for show-factorial-portlet and set <instanceable>false</instanceable> just after <icon> element.

• Turn authentication token off.

For this, open portlet.xml file for show-factorial-portlet and add following init parameters just below <portlet-class> element.

<init-param>
 <name>check-auth-token</name>
 <value>false</value>
</init-param>

You might have observed that even after setting auth token false, liferay does generate the token. But don't worry, if we set this flag as false then even though liferay generate the auth token in url, it will not take it in consideration.

Next, we have to write certain code to fetch the url of factorial portlet inside multiplication portlet. So I have created util class MultiplicationUtil (in package com.techblog.opensource.util) and create methods that will do all this stuff.

I have added following two methods in this class (MultiplicationUtil)
1) getLayout :- 

• This method will take PortletRequest, friendly url of page and community name and will return the Layout.
• Layout in liferay represent the structure of Liferay page. Any portlet's url will be decided by layout.
• In this method we are making call LayoutLocalServiceUtil.getFriendlyURLLayout and passing parameter like groupId, boolean isPrivateLayout and friendly url of page.
• first we set the isPrivateLayout to false. So it will search for public pages and if not found (if layout is null) then we do the same thing but just passing isPrivateLayout as true).
• We are getting groupId by calling GroupLocalServiceUtil.getGroup(companyId,communityName).getGroupId().
• pageFriendlyUrl is nothing but the friendly url of liferay page. In our case we are forwarding control to page-2 on which the factorial portlet is placed.

2) getFullPortletURL:-

• This method takes input as PortletRequest, friendly url of liferay page (on which we wanted to go), portlet name, parameters, portlet phase and community name.
• portlet name and phase will be the name and phase of the portlet to which we want to forward control. (factorial portlet in our case)
• Next to it we are tacking HttpRequest from PortletRequest.
• Then we are calling PortletURLFactoryUtil.create(), passing these parameters it is returning final url of the portlet where we wanted to go.

Now open the ShowMultiplicationPortlet.java of multiplication portlet, you will observe the following private method 

getFactorail

• This method takes PortletRequest and multiplication Number as input.
• This multiplication Number is nothing but the multiplication of num1 and num2 that we will pass to multiplication portlet.
• Since our goal is to create Link which forward us to Factorial portlet from multiplication portlet. Also it will do the factorial of multiplication number (num1 * num2)
• In this method we took few variable as below
• pageFriendlyUrl:- is the page friendly url. Since factorial porltlet reside on page-2 page, its value will be friendly url of that page (which is "page-2")
• portletName:- which is portlet name of factorial porltet. Don't confuse this porltet name with the one defined in portlet.xml file. This portlet name will be refer in urls. Here is the trick how to get it.
• Go to the page where the portlet is deployed (in our case page-2)
• Click on Configuraiton (Tool like) icon from the portlet header and click on Look and Feel.
• Go to tab Advanced Style. In this tab at very top you will observe something like Portlet ID: #portlet_showfactorial_WAR_showfactorialportlet
• so in this case the portletName will be showfactorial_WAR_showfactorialportlet (Just remove #porltet_ from beginning).
• CommunityName:- will be the name of the community in which the factorial protlet reside. We can forward the porltet which is on different community
• parameters:- These are the parameters which will be added in url. 
• Its map taking string as key and string array as value.
• we are passing "number" with the multiplication of num1 and num2.
• The reason we take the parameter name as number because if you observe the action method of factorial portlet's processAction method then its taking value of "numebr" request parameter. Since our goal is to directly call factorial porltet process action method and that is the reason we add one more parameter javax.portlet.action to "getFactorial". Because its matching with the key of that process action method.
• We also added p_p_state parameter to tell liferay that, open the factorial portlet in normal mode.
• And at the end I am calling util's method MultiplicationUtil.getFullPortletURL() and passing all these values. which will return the final url.

Then I made call of getFactorial method in doView() method and storing the return value in request attribute of multiplication portlet so that it will be available in view.jsp.

In view.jsp file (of multiplication portlet), at the end I am showing the link (which is return value of getFactorial method we stored in request attribute in doView method) which will forward me to factorial portlet.

Eventually it will look like this.

We are on page-1 and it showing multiplication portlet. we will give value 3 and 4 

On clicking submit button it will calculate the multiplication and at the bottom of the page, the link will forward me to page-2.

If I click on the link at the bottom, it will forward me to page-2 and will show factorial of 12 (3*4) as below

And its done. You may put some complex logic to forward to other portlet. Also you can place the second portlet in different community and forward the control to it.

Feel free to ask questions. I will try my best to get the answer.

I would recommend looking at index page 'A Complete Liferay Guide' to browse all topics about liferay.

• If we choose Portlet then it will create Liferay plugin project with by portlet (which have same name as project we gave in this wizard).
• If we choose different plugin type then it will create Liferay plugin project by that selected component.
• In short, When we create Liferay plugin project, it will create the component of selected plugin type with same name as plugin project.
• So you can consider Liferay plugin project as container where all liferay components resides as per below screenshot.

• Liferay Plugin project (for plugin type portlet ) will only accommodate plugins of type Portlets, Hooks or Layouts. Theme and ext can't be mix with portlets and Hooks in same plugin project. 
• if you want to create Theme or ext plugin, you need to create separate plugin project.

• This time, it will first ask in which plugin project do we want to add new portlet ?
• Its showing drop down and we choose it multiple-plugin-portlet 
• Give the appropriate value for Portlet class, Java Package ans super Class. 
• I gave the value as shown in above screenshot.
• Now click on Finish button