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 comprises 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 portlet, which will be appear under Add menu. (from top bar after login as Liferay Admin).
    • liferay-portlet.xml:- This file describes some additional liferay specific feature 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 same page.
    • liferay-plugin-package.properties:- We can configure dependency Jars and TLDs through this file.
Now we will see content of each file and understand each elements.
 
First we will see portlet.xml. The content of this file is as below.
 

 

  1. portlet-name:- Unique name of portlet across.In liferay portal its also refered as portlet-id.
  2. display-name:- Short name of portlet that will be used by tool. Its 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 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

 

  • portlet-name:- unique name of portlet (this should be same as what we have defined in portal.xml file).
  • icon:- path to the image of icon.
  • instanceable:- defines whether multiple instance of this portlet can be placed on same page or not.
  • header-portlet-css:- path of css files which will be included in <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 its time to deploy this Liferay portlet and see how it works. Start the server and type http://localhost:8080 to brower and sign in with following credentials

username:-[email protected]
password:-test 

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


Now we will first build and deploy the Liferay portlet. 


Open Ant window if its not already opened from Window–>Show View–>Ant menu option. Find build.xml in project and drag it to Ant window as mentioned in 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. System will start deploying portlet on server. Once its deployed successfully, it will show success message as below.

Create Liferay portlet - portletDeploySuccessfully

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

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


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


Now click on Add link against 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 second which we defined. 


The one which is 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 instance of the one which comes with liferay.


The portlet which we have developed is just display 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 test page and see your changes.

Summing up

  • We created Liferay portlet with Liferay MVC framework.
  • com.liferay.util.bridges.mvc.MVCPortlet will work as 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 a blog on how to write custom Liferay MVC portlet.
I would recommend looking at index page ‘A Complete Liferay Guide‘ to browse all topics about liferay.

Download Source

Download Source

Share This Post

36 Comments - Write a Comment

    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

      Reply
  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

    Reply
  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

    Reply
    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.

      Reply
      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

        Reply
        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

          Reply
  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

    Reply
    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

      Reply
      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

        Reply
    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 ?

      Reply
    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

      Reply
  4. 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

    Reply
  5. 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”

    Reply

Post Comment