Create Liferay Portlet

In this article we will see how to create Liferay Portlet with MVC framework. Liferay MVC is portlet framework define by Liferay to create JSR-168 / JSR-286 compatible portlets. Liferay IDE (eclipse with liferay plugin or Liferay developer studio) can be used to create Liferay MVC portlet. However we can create Liferay Portlet from command prompt also.  In this acticle we will see how to create Liferay MVC portlet by both these ways.

 
We will create ‘Hello Word’ portlet that simply show welcome message.

Create Liferay Portlet from command prompt

Start command prompt and go upto {plugin-SDK}/portlets folder (This is the location where all portlets reside).

Give following command to create Hello Word portlet. The project name will be hello-word and portlet title will be “Hello Word” (Make sure not to put any space in project name, however we can put space in title).
 
crate.bat hell-word “Hello Word” (For Window)
./crate.sh hello-word “Hello Word” (For linux).
Create Liferay portlet - Portlet Creation from Command Prompt

After giving this command, BUILD SUCCESSFUL message will be shown as above. Also if you observe under {plugin-SDK}/portlets folder, a new folder hello-word-portlet will be created as below

Create Liferay portlet - Portlet Folder Structure
Notice that Plugin SDK will append –portlet word after name of project.
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.

Create Liferay Portlet from Liferay IDE

Next we will see how to create Liferay portlet in Liferay IDE. (Which is more convenient and easy to learn). Liferay IDE means eclipse with liferay plugin or Liferay Developer Studio.

You need to make eclipse ready to work with liferay. For this you can either configure Liferay with Eclipse  or use Liferay developer studio.

Start eclipse and click on File->New->Project. Then select Liferay Project under Liferay category and click on Next button.

Create Liferay portlet - Create Liferay Project

 

On the next page, give the project name as hello-word.(you can notice that display name is given by wizard automatically.You can change it).


Now make sure that in the Plugin Type section, the default Portlet  is selected because we are going to create portlet project.

Create Liferay portlet - Choose Portlet Plugin Project

 

In Configuration section, you need to specify Plugin SDK and Portal Runtime (Liferay-Tomcat server). Without this, wizard will not allow to process further.

Now click on Next button. Now you can see the following screen.

Create Liferay portlet - Liferay Portlet of type Liferay MVC


As we can create portlet on different technologies, this wizard allow us to create three different type of portlets. 


Choose Liferay MVC (which is by default selected) and click on finish button. You will observe that project with name hello-word-portlet is created. Notice that, -portlet is appended to project name. The folder structure of this project will be looks like as below screenshot.

Create Liferay portlet - Liferay MVC In Eclipse


You can observe the following things

  • The Java source folder is created under docroot /WEB-INF/src folder. All java classes are kept at this place.
  • Configuration files are stored under docroot/WEB-INF folder. These configuration files are comprised of standard JSR-286 portlet configuration file portlet.xml and other three Liferay-specific configuration files as below
    • liferay-display.xml:- This file describes the category of the portlet, which will appear under Add menu. (from the top bar after login as Liferay Admin).
    • liferay-portlet.xml:- This file describes some additional Liferay-specific features on top of JSR-286. Ex. We can declare the portlet as instantiable from this file. Instantiable means we can place more than one portlet instance on the same page.
    • liferay-plugin-package.properties:- We can configure dependency Jars and TLDs through this file.
Now we will see the content of each file and understand each element.
 
First, we will see portlet.xml. The content of this file is as below.
 
<portlet-app version="2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd" xsi:schemalocation="http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd http://java.sun.com/xml/ns/portlet/portlet-app_2_0.xsd">
<portlet>
  <portlet-name>hello-word</portlet-name>
  <display-name>Hello Word</display-name>
  <portlet-class>com.liferay.util.bridges.mvc.MVCPortlet</portlet-class>
  <init-param>
   <name>view-jsp</name>
   <value>/view.jsp</value>
  </init-param>
  <expiration-cache>0</expiration-cache>
  <supports>
   <mime-type>text/html</mime-type>
  </supports>
  <portlet-info>
   <title>Hello Word</title>
   <short-title>Hello Word</short-title>
   <keywords>Hello Word</keywords>
  </portlet-info>
  <security-role-ref>
   <role-name>administrator</role-name>
  </security-role-ref>
  <security-role-ref>
   <role-name>guest</role-name>
  </security-role-ref>
  <security-role-ref>
   <role-name>power-user</role-name>
  </security-role-ref>
  <security-role-ref>
   <role-name>user</role-name>
  </security-role-ref>
 </portlet>
</portlet-app>
  1. portlet-name:- Unique name of portlet across. In the Liferay portal, it’s also referred to as portlet-id.
  2. display-name:- Short name of the portlet that will be used by the tool. It’s not required to be unique.
  3. portlet-class:- fully qualified portlet class name.
  4. init-param:- Just like servlet, we can pass init param for portlet.
  5. expiration-cache:- defines a time in second after which portlet output expires. -1 means never expire.
  6. supports:- support mime type.
  7. portlet-info:- define portlet information.
  8. security-role-ref:-will define which role can access this portlet.
 
Below is the content of liferay-portal.xml file
<liferay-portlet-app>
 <portlet>
  <portlet-name>hello-word</portlet-name>
  <icon>/icon.png</icon>
  <instanceable>true</instanceable>
  <header-portlet-css>/css/main.css</header--portlet-css>
  <footer-portlet-javascript>/js/main.js</footer-portlet-javascript>
  <css-class-wrapper>hello-word-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>
  • portlet-name:- unique name of the portlet (this should be the same as what we have defined in portal.xml file).
  • icon:- path to the image or icon.
  • instanceable:- defines whether multiple instances of this portlet can be placed on the same page or not.
  • header-portlet-css:- path of CSS files which will be included in the <head> section of final portlet output.
  • footer-portlet-javascript:- path of .js files for this portlet which will be included at the and of page before </body> tag.
Now it’s time to deploy this Liferay portlet and see how it works. Start the server and type http://localhost:8080 to the browser and sign in with the following credentials

username:-test@liferay.com
password:-test 

On the first-time login, it will ask for a password reminder. Pls give proper password and go further.


Now we will first build and deploy the Liferay portlet. 


Open Ant window if it’s not already opened from Window–>Show View–>Ant menu option. Find build.xml in the project and drag it to Ant window as mentioned below screenshot.

Create Liferay portlet - Build portlet in Liferay IDE

 

Click on + sign in hello-word-portlet entry in Ant window and double click on deploy target. The system will start deploying portlets on the server. Once it’s deployed successfully, it will show a success message as below.

Create Liferay portlet - portletDeploySuccessfully

A portlet is deployed on the server. Next, we will place the portlet on-page. Pls back to the browser where are already on the Welcome page after login. We will create a new page called ‘test’ and will place hello-word-portlet on it.

To create the page, click on Add from the top horizontal bar and click on Page. You will see text box just next to the Welcome page asking for the page name. Type test and click on the right tick mark just beside it.


Now click on the test page and then again click on Add from the top horizontal bar and click on More… You will observe that our portlet name will be just under the Sample category (which is defined in liferay-display.xml file.


Now click on Add link against the Hello Word name. You will notice that our Hello Word portlet has been placed on the page. 


Here there are two Hello Word portlets you can see. One which is coming with Liferay (out of the box) and the second which we defined. 


The one which comes with Liferay is not instantiable (with purple color icon) and the one which we have created is instantiable(with green color icon).


You can try putting multiple Hello Word portlet which we have created, but you won’t able to place multiple instances of the one which comes with Liferay.


The portlet which we have developed is just displayed one line This is the Hello Word portlet. This is because in the view.jsp file if you observe then you will find the same line.


Now you can change the content in view.jsp and re-deploy the portlet and refresh the test page and see your changes.

Summing up

  • We created Liferay portlet with the Liferay MVC framework.
  • com.liferay.util.bridges.mvc.MVCPortlet will work as the main portlet class.
  • Path of JSP (view.jsp in our case) which is responsible for generating portlet content can be defined in portlet.xml file
  • In real life, we need more customization. 
  • It’s possible to extend Liferay MVC and provide custom functionality, refer to a blog on how to write a custom Liferay MVC portlet.
I would recommend looking at the index page ‘A Complete Liferay Guide‘ to browse all topics about Liferay.

Download Source

Download Source

Recommended For You

About the Author: Nilang

Nilang Patel is a technology evangelist who loves to spread knowledge and helping people in all possible ways. He is an author of two technical books - Java 9 Dependency and Spring 5.0 Projects.

38 Comments to “Create Liferay Portlet”

    1. Hi Pooja,

      You can create more than one module under single workspace. Also it is possible to have multiple service builder modules within single workspace and its quite possible as I have used it in one of my project which is live successfully now.

      Regards
      Nilang

    1. Hey Prabin,

      Welcome to Tech blog. Actually till 6.1, liferay out of the box provided Ant support. In case if you want to use Maven, you have to setup your own. Starting from 6.2, liferay start providing Maven and ANT both as out of the box. I am going to write blog on how to write Liferay and Spring MVC portlet with Maven on Liferay so stay tuned.

      Regards
      Nilang

  1. Hi,
    I am getting below error. Please help.
    [Console output redirected to file:D:\LR6.2\workspace\.metadata\.plugins\com.liferay.ide.eclipse.sdk\sdk.log]

    Buildfile: D:\LR6.2\liferay-plugins-sdk-6.2\portlets\build.xml

    create:
    [exec] Downloading https://services.gradle.org/distributions/gradle-2.5-bin.zip
    [exec] Exception in thread “main” java.net.ConnectException: Connection timed out: connect
    [exec] at java.net.DualStackPlainSocketImpl.connect0(Native Method)
    [exec] at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:69)
    [exec] at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:339)
    [exec] at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:200)
    [exec] at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:182)
    [exec] at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:157)
    [exec] at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:391)
    [exec] at java.net.Socket.connect(Socket.java:579)
    [exec] at sun.security.ssl.SSLSocketImpl.connect(SSLSocketImpl.java:618)
    [exec] at sun.security.ssl.BaseSSLSocketImpl.connect(BaseSSLSocketImpl.java:160)
    [exec] at sun.net.NetworkClient.doConnect(NetworkClient.java:180)
    [exec] at sun.net.www.http.HttpClient.openServer(HttpClient.java:378)
    [exec] at sun.net.www.http.HttpClient.openServer(HttpClient.java:473)
    [exec] at sun.net.www.protocol.https.HttpsClient.(HttpsClient.java:270)
    [exec] at sun.net.www.protocol.https.HttpsClient.New(HttpsClient.java:327)
    [exec] at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.getNewHttpClient(AbstractDelegateHttpsURLConnection.java:191)
    [exec] at sun.net.www.protocol.http.HttpURLConnection.plainConnect(HttpURLConnection.java:931)
    [exec] at sun.net.www.protocol.https.AbstractDelegateHttpsURLConnection.connect(AbstractDelegateHttpsURLConnection.java:177)
    [exec] at sun.net.www.protocol.http.HttpURLConnection.getInputStream(HttpURLConnection.java:1299)
    [exec] at sun.net.www.protocol.https.HttpsURLConnectionImpl.getInputStream(HttpsURLConnectionImpl.java:254)
    [exec] at org.gradle.wrapper.Download.downloadInternal(Download.java:58)
    [exec] at org.gradle.wrapper.Download.download(Download.java:44)
    [exec] at org.gradle.wrapper.Install$1.call(Install.java:59)
    [exec] at org.gradle.wrapper.Install$1.call(Install.java:46)
    [exec] at org.gradle.wrapper.ExclusiveFileAccessManager.access(ExclusiveFileAccessManager.java:65)
    [exec] at org.gradle.wrapper.Install.createDist(Install.java:46)
    [exec] at org.gradle.wrapper.WrapperExecutor.execute(WrapperExecutor.java:126)
    [exec] at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)

    BUILD FAILED
    D:\LR6.2\liferay-plugins-sdk-6.2\portlets\build.xml:12: The following error occurred while executing this line:
    D:\LR6.2\liferay-plugins-sdk-6.2\build-common.xml:1768: exec returned: 1

  2. Hi Nilang,

    this post is very much helpful for beginner in learning liferay , I followed all the steps that are summarized above but when I deploy the portlet , I am getting the below error:

    Buildfile: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\portlets\hello-word-portlet\build.xml
    deploy:

    BUILD FAILED
    C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\build-common.xml:2880: The following error occurred while executing this line:
    : The following error occurred while executing this line:
    C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\build-common.xml:1363: The following error occurred while executing this line:
    : The following error occurred while executing this line:
    C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\build-common.xml:2596: The following error occurred while executing this line:
    : The following error occurred while executing this line:
    C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\build-common.xml:591: The following error occurred while executing this line:
    C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\build-common.xml:927: C:\softwares\LifeRaySDK\bundles\tomcat-7.0.42\webapps\ROOT\WEB-INF\lib does not exist.

    Total time: 3 seconds

    Any help in solving this issue is very helpful.

    I am using eclipse-luna.

    Thanks in advance for the help and support,

    Regards
    Satish

    1. Hi Satish,

      Welcome to Tech blog and thanks for appreciation. this is most probably, the server path is not properly set in your plugin SDK. If you configure the plugin SDK and server in Liferay IDE, the this error will not occur most probably. Correct the server path in your plugin sdk or configure sdk and server in eclipse. Let me know if this still not works.

      Feel free to ask questions / give suggestions.

      1. Hi Nilang,
        Thanks for the quick reply . I modified the path accordingly and I don’t see the above error but now I see a success message but there is no portlet on the UI.
        below is the log console log:
        —————————————-
        Buildfile: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\portlets\hello-word-portlet\build.xml
        deploy:
        [copy] Copying 5 files to C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\portlets\hello-word-portlet\docroot\WEB-INF\lib
        [echo] Loading jar:file:/C:/softwares/LifeRaySDK/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/system.properties
        [echo] Loading jar:file:/C:/softwares/LifeRaySDK/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/portal.properties
        [delete] Deleting: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\dist\hello-word-portlet-6.2.0.1.war
        [zip] Building zip: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\dist\hello-word-portlet-6.2.0.1.war
        [copy] Copying 1 file to C:\softwares\LifeRaySDK\liferay-portal-6.2-ce-ga4\deploy
        BUILD SUCCESSFUL
        Total time: 14 seconds
        Please suggest me in correct the issue.
        Thanks and regards
        Satish

        1. Hi Satish,

          Good to hear that you are able to build your portlet. to place your portlet on page, you must have to add it manually. Click on + icon from left side bar and you will be landing on one small screen in left side bar only with search text box. Slowly type your portlet name and it will start appearing to list. Once it’s available, click on add button just beside it to add it on screen.

          In case if you are not able to see anything on your portlet means, there is no content in your JSP. Try to add some content and build it again. This time you no need to place the portlet on page again. Just refresh the page.

          Hope this steps help you to see your portlet on screen. Feel free to ask questions / give suggestions.

          Regards
          Nilang

  3. Thanks Very Informative. I tried the steps given but i can’t see my portlet in Liferay UI.
    Below is the deploy log:
    Buildfile: C:\Liferay\liferay-plugins-sdk-6.2\portlets\hello-world-portlet\build.xml
    [ivy:resolve] :: Apache Ivy 2.4.0 – 20141213170938 :: http://ant.apache.org/ivy/ ::
    [ivy:resolve] :: loading settings :: file = C:\Liferay\liferay-plugins-sdk-6.2\ivy-settings.xml
    [ivy:retrieve] :: retrieving :: com.liferay#hello-world-portlet
    [ivy:retrieve] confs: [default, internal]
    [ivy:retrieve] 0 artifacts copied, 0 already retrieved (0kB/20ms)
    [ivy:retrieve] :: retrieving :: com.liferay#hello-world-portlet
    [ivy:retrieve] confs: [default, internal]
    [ivy:retrieve] 0 artifacts copied, 0 already retrieved (0kB/0ms)
    [touch] Creating C:\Liferay\liferay-plugins-sdk-6.2\portlets\hello-world-portlet\build.gradle
    deploy:
    [copy] Copying 5 files to C:\Liferay\liferay-plugins-sdk-6.2\portlets\hello-world-portlet\docroot\WEB-INF\lib
    [echo] Loading jar:file:/C:/Liferay/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/system.properties
    [echo] Loading jar:file:/C:/Liferay/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/portal.properties
    [echo] Loading file:/C:/Liferay/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/classes/portal-setup-wizard.properties
    [echo] Parsed C:/Liferay/liferay-plugins-sdk-6.2/portlets/hello-world-portlet/docroot/css/main.css in 5438 ms
    [zip] Building zip: C:\Liferay\liferay-plugins-sdk-6.2\dist\hello-world-portlet-6.2.0.1.war
    [copy] Copying 1 file to C:\Liferay\liferay-portal-6.2-ce-ga4\deploy
    BUILD SUCCESSFUL
    Total time: 13 seconds

    And even i m not seeing 1 portlet ready to use message after deployment.

    Please help me to resolve this issue

    1. Hi Deepika,

      Welcome to Techblog. From the logs, It seems this logs are generated when portlet is build and deployed. Can you pls share the logs when it get deployed on server. Also After you deploy the portlet, you have to manually place that portlet on liferay page. It won’t start visible automatically.
      Let me know if this resolve your issue.

      Regards
      Nilang

      1. Hi Nilang,

        Thanks for the quick reply . I modified the path accordingly and I don’t see the above error but now I see a success message but there is no portlet on the UI.

        below is the log console log:
        —————————————-
        Buildfile: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\portlets\hello-word-portlet\build.xml
        deploy:
        [copy] Copying 5 files to C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\portlets\hello-word-portlet\docroot\WEB-INF\lib
        [echo] Loading jar:file:/C:/softwares/LifeRaySDK/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/system.properties
        [echo] Loading jar:file:/C:/softwares/LifeRaySDK/liferay-portal-6.2-ce-ga4/tomcat-7.0.42/webapps/ROOT/WEB-INF/lib/portal-impl.jar!/portal.properties
        [delete] Deleting: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\dist\hello-word-portlet-6.2.0.1.war
        [zip] Building zip: C:\softwares\LifeRaySDK\liferay-plugins-sdk-6.2\dist\hello-word-portlet-6.2.0.1.war
        [copy] Copying 1 file to C:\softwares\LifeRaySDK\liferay-portal-6.2-ce-ga4\deploy
        BUILD SUCCESSFUL
        Total time: 14 seconds

        Please suggest me in correct the issue.

        Thanks and regards
        Satish

  4. Hi Nilang,
    I want to thank u for all your useful tutorial.
    The problem that i face, is when i open my Ant I have this message:
    BUILD FAILED
    …/docroot/WEB-INF/xsd does not exist.

    1. Hi Nilang,
      I thank you for ur help.
      Well, I’m using liferay-ide-eclipse-windows-x32-2.0.1-ga2 (Kepler).
      If it doen’t work, can I integrate a module of J2EE application, developped with NetBeans Or eclipse in my Liferay environnement ?

    1. Hi Ashish,

      Welcome to Tech blog and thanks for appreciation. You can do it by either front end (JSP) or through Java code (with URL object). There are some libraries available which you can also use. You have to put dependencies jars to lib folder of your portlet and then write code in either portlet class or you can create separate class called Util and write code there and then call this Util class’s method to your portlet.

      Let me know if you need any further help
      Regards
      Nilang

  5. The article guides the user in a good way and despite of following all this, i ended up getting the following error which really annoys a newbie to Liferay like me, so thought of posting it here so that it could be of help to others.

    Task cannot continue because ECJ is not installed.
    ECJ was automatically installed. Please rerun your task.

    Solution:
    Refer: http://www.liferay.com/community/wiki/-/wiki/Main/ECJ

    You simply need to put the ecj.jar file into the lib directory of the Ant plugin directory in your Eclipse install
    1. Go to Window> Preferences> Ant> Runtime > Classpath
    2. Add External jar (ex : E:liferayliferay-plugins-sdk-6.1.0-ce-ga1-20120106155615760libecj.jar) , i.e. ecj.jar located under your plugin sdk folder.
    3. Now Re-run the build script

  6. Great post! Thanks a lot.
    Maybe you can fix the small mistake, i think you meant portlet.xml right at his point “this should be same as what we have defined in portal.xml file”

  7. Hi.. Nilang..

    Thank You Very Much.. !! Very Nice Article, Clear and Easy to Understand Follow.. Keep it Up..!!!

    1. Hello

      I have build and deploye the hello-word portlet but it doesn’t come under Sample folder.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.