Help : Create a new Liferay Plug-in Project

Click on the option “New Liferay Plug-in Project” as shown.

The dialog will open,

1. give the project name as “library” (all small letters)

2. make sure the plug-ins SDK and Liferay Portal Runtime are configured properly

3. check “Create custom portlet class”

4. click “Next”

1. change the portlet class to “LibraryPortlet”

2. java package as “com.library”

3. select superclass of this portlet as “com.liferay.util.bridges.mvc.MVCPortlet”

4. click “Next”

1. modify Display name and Title to have a space between the words Library and Portlet

2. check “Edit” portlet mode

3. modify JSP folder to “/html/library”

4. check the option “Create resource bundle file”

5. click “Next”

1. uncheck “Allow multiple instances” to make this portlet “non-instansable”

2. specify a new Category - “Library Management”

3. click “Finish”

Now you see a new eclipse project with name “library-portlet”.

Deploying “library-portlet” to the server

1. right click on the server “Liferay v6.0”

2. you will see the options

3. click “Add and Remove...”

In the next dialoy, move “library-portlet” from left to right and click “Finish” as shown below.

Observe the server console and confirm that you get the message - “1 portlet for library-portlet is available for use”.

Adding the portlet to a page

1. open the browser and go to http://localhost:8080

2. login as omni admin – test@liferay.com / test

3. click on Add → Page to add a new page “Our Library”

4. go to the page and add our new portlet by clicking Add → More

5. place the porltet in such a way that it is on the right-hand side as shown in the image below.

Some code clean-up before we start

Keeping your code base clean is an extremely important exercise. Through-out this book, we will practically demonstrate this. As a first step we will remove from “tld” files from the file system and list them in the file “liferay-plugin-package.properties” as portal-dependency-tlds. So whatever tld that we specify in this list, will be copied from the portal and used while building the WAR file for this portlet.

1. Open “liferay-plugin-package.properties” file from the path “library-portlet/docroot/WEB- INF”

2. Add the six tld files as shown in the following figure

3. delete all the tld files from WEB-INF/tld

4. Save the project, re-deploy and check our library portlet is working fine as before.

We will more about this file in the subsequent chapters.

4. Creating a Form

Establishing a basic page flow

In this chapter, we will see how to create some basic page flows for the library portlet we have just created.

Create a new page

Add one new JSP file called “update.jsp” inside “docroot/html/library” and put some dummy contents and Save this file.

Modify view.jsp

1. Open view.jsp

2. remove the line -

“This is the <b>Library Portlet</b> portlet in View mode.”

3. enter the code to link to “update.jsp”

4. check the portlet and you should see a link to “update.jsp”.

<portlet:renderURL var="updateBookURL">

<portlet:param name="jspPage" value="/html/library/update.jsp"/>

</portlet:renderURL>

create init.jsp

create a new file init.jsp where all common stuff will be put. This file in turn will be included in all other JSP's of this portlet. This way, we need not have to repeat the same code again and again in all JSP files.

Remove these lines from view.jsp and paste into init.jsp

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

<portlet:defineObjects />

insert this line at the top of all other JSP files we have so far.

<%@ include file="/html/library/init.jsp" %>

Create a link to come back.

1. re-open update.jsp and give a link back to the main page.

2. <a href="<portlet:renderURL/>">« Go Back</a>

Creating a form to add book

In this step we will further modify our update.jsp to define a simple form to add a book. Before the

“Go Back” link, let us have this code,

PortletURL updateBookURL = renderResponse.createActionURL();

updateBookURL.setParameter( ActionRequest.ACTION_NAME, "updateBook");

<form name="<portlet:namespace/>fm" method="POST" action="<%=

updateBookURL.toString() %>">

Book Title: <input type="text" name="<portlet:namespace/>bookTitle" />

<br/>Author: <input type="text" name="<portlet:namespace/>author" />

</form>

The interfaces “PortletURL” and “ActionRequest” will report problem. To get rid of them just add the following imports in your “init.jsp”.

<%@page import="javax.portlet.PortletURL"%>

<%@page import="javax.portlet.ActionRequest"%>

Inside the JSP scriplet we have programmatically declared a variable “updateBookURL” which is of type “actionURL”. We have also set one attribute for this object, the ACTION_NAME.

Once you save all files and the portlet gets deployed, check the “Add Book” page and you will see something like this,

It is clear from the message that the portal server is unable to find a method “updateBook” In the next step let us see how and where to add this method.

Modify LibraryPortlet.java

Open the portlet class and add a new method – “updateBook”,

public void updateBook(ActionRequest actionRequest, ActionResponse actionResponse)

throws IOException, PortletException {

String bookTitle = ParamUtil.getString(actionRequest, "bookTitle"); String author = ParamUtil.getString(actionRequest, "author");

System.out.println("Your inputs ==> " + bookTitle + ", " + author);

}

Now re-deploy the portlet and check the code in our “updateBook” method is being called properly. Once you enter the details of a book and submit the form you should get the message on the

console,

Your inputs ==> Liferay In Action, Richard Sezov

Learnings from this chapter

1. RenderRequest and ActionRequest - difference

2. URL formation – declarative using tags and programmatic

3. <portlet:namespace/>

4. Did you notice the “ParamUtil” class. List down all other api's of this class.

Converting Simple HTML form to AUI form

In this section we will see how to convert simple HTML form we have just created to an AUI form and use the AUI elements.

Insert the AUI taglib definition in init.jsp,

<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

Replace our HTML form with the AUI form,

<aui:form name="fm" method="POST" action="<%= updateBookURL.toString() %>">

<aui:input name="bookTitle" label="Book Title"/>

<aui:input name="author"/>

<aui:button type="submit" value="Save"/>

</aui:form>

1. when you use AUI, you need not have to explicitly give <portlet:namespace/>

2. ensure that you have explicitly specified the method attribute for <aui:form> tag.

3. See we have specified the “label” attribute only for bookTitle and not for author. Why? Once our changes are deployed, you will see a more cleaner / better form,

We will see more applications of Alloy UI (AUI) in subsequent chapters.

For a detailed discussion on AUI, please refer to the below Liferay Wiki article, http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Alloy+UI+Forms+(aui)

Form Validation using jQuery

In this section, we are going to show you how to use jQuery in our portlet. Though we will see more applications of jQuery and various jQuery plugins in the later chapters, here we will see how to add some validation to our “Update Book” form using jQuery validation plugin.

1. refer to the javascript that you need in your portlet.

1. header-portal-javascript

2. footer-portal-javascript

3. header-portlet-javascript

4. footer-portlet-javascript