Liferay is easy: Open/Close Dialog Box using AUI in Liferay

Today we will discuss how to Open and Close a Aui Dialog box in liferay.In this we create a button on click of button a form is opened in dialog box which contain two input fields name , password and two buttons one for Submit the form and second for cancel.On Submit form is Submitted and details are shown in the dialog box .On Cancel form is simply closed so lets start this step by step.

Step 1:-Create Liferay project and Change view.jsp
Create a liferay project and then create a Generic portlet in it.Open view.jsp and paste the content:-

view.jsp

	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
	<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>

	<portlet:renderURL var="loginURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
	<portlet:param name="path" value="loginPage" />
	</portlet:renderURL>

	<aui:button name="login" type="button" id="login" value="Click Here For Login" />

	<aui:script use="liferay-util-window">
	A.one('#<portlet:namespace/>login').on('click', function(event) {
	<!-- alert("open"); -->
	Liferay.Util.openWindow({
	dialog: {
	centered: true,
	height: 500,
	modal: true,
	width: 500
	},
	id: '<portlet:namespace/>dialog',
	title: 'Login',
	uri: '<%=loginURL %>'
	});
	});
	</aui:script>

view raw view.jsp hosted with ❤ by GitHub

Explanation

Here we create a renderUrl with param value loginPage. On click of button with id="login" Liferay.Util.openWindow function is called which send the render Request to our controller with a parameter loginPage.

Step 2:-Handle Render Request inside Controller
Just fetch the path attribute and if it equals to loginPage then include login.jsp ie

String path = ParamUtil.getString(renderRequest, "path");
if (path.equalsIgnoreCase("loginPage"))
{
include("/html/demo/login.jsp", renderRequest, renderResponse);
}

Step 3:-Create login.jsp
Inside login.jsp we just create a simple form with two text fields and two buttons one for cancel and one for submit and a actionUrl for submittion of form:-

login.jsp

	<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
	<portlet:defineObjects />

	<portlet:actionURL var="loginAction">

	</portlet:actionURL>

	<div id="fm">
	<form name="form" id="form" action="<%=loginAction %>" method="POST">
	<aui:input name="name" type="text" />
	<aui:input name="password" type="password"></aui:input>
	<aui:button name="submit" type="Submit" value="SUBMIT" />
	<aui:button name="cancel" type="button" value="CANCEL" />
	</form>
	</div>

view raw login.jsp hosted with ❤ by GitHub

Step 4:-Handle Action Request inside Controller
When Submit button is clicked processAction method of our Controller is called

Demo.java

	@Override
	public void processAction(ActionRequest request, ActionResponse response) throws PortletException, IOException {
	String name = ParamUtil.getString(request, "name");
	String password = ParamUtil.getString(request, "password");
	response.setRenderParameter("path", "details");
	response.setRenderParameter("name", name);
	response.setRenderParameter("password", password);

	}

view raw ProcessAction.java hosted with ❤ by GitHub

Explanation:-
Here we fetch the attributes that comes in Action request and set in response so that we can use in detail page.Here we also set a third attribute :-

response.setRenderParameter("path", "details");
This attribute help to determine the path in our doView() .

Step 5:-Send Controller to Details Page
The attribute set in as "path" inside processAction() is used in doView() because after processAction() doView() is called as:-

Demo.java

	if (path.equalsIgnoreCase("details"))
	{
	renderRequest.setAttribute("name", (ParamUtil.getString(renderRequest, "name")));
	renderRequest.setAttribute("password",(ParamUtil.getString(renderRequest, "password")));
	include("/html/demo/details.jsp", renderRequest, renderResponse);
	}

view raw Demo.java hosted with ❤ by GitHub

Explanation:-
Here we fetch the attributes that are set as Render Parameter in processAction and again set in render Request so that they are available in details.jsp.

Step 6:-Create details.jsp
The details.jsp is simple and self explanatory:
details.jsp

	<h3>SUCCESS</h3>
	Name: ${name}<br>
	Password:${password}

view raw details.jsp hosted with ❤ by GitHub

Thats it this will open a dialog box and show details inside this.But what about CLOSE BUTTON.For Closing a Dialog box these steps are necessary:-

Step 7:-Modify login.jsp and view.jsp
Paste this code inside login.jsp .Here this method internally call method closeYourPopUp which is inside view.jsp
login.jsp

	<!-- For Closing -->
	<aui:script use="aui-base">
	A.one('#<portlet:namespace/>cancel').on('click', function(event) {
	<!-- alert("first"); -->
	var data = '';
	Liferay.Util.getOpener().<portlet:namespace/>closeYourPopUp(data, '<portlet:namespace/>dialog');
	});
	</aui:script>

view raw login.jsp hosted with ❤ by GitHub

view.jsp

	<aui:script>
	Liferay.provide(window,'<portlet:namespace/>closeYourPopUp',
	function(data, dialogId) {
	<!-- alert("second"); -->
	var A = AUI();
	var dialog = Liferay.Util.Window.getById(dialogId);
	dialog.destroy();
	},
	['liferay-util-window']
	);
	</aui:script>

view raw view.jsp hosted with ❤ by GitHub

Thats it Complete code of view.jsp,login.jsp and Controller is:-

view.jsp

	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
	<%@ taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
	<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>

	<portlet:renderURL var="loginURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
	<portlet:param name="path" value="loginPage" />
	</portlet:renderURL>

	<aui:button name="login" type="button" id="login" value="Click Here For Login" />

	<aui:script use="liferay-util-window">
	A.one('#<portlet:namespace/>login').on('click', function(event) {
	<!-- alert("open"); -->
	Liferay.Util.openWindow({
	dialog: {
	centered: true,
	height: 500,
	modal: true,
	width: 500
	},
	id: '<portlet:namespace/>dialog',
	title: 'Login',
	uri: '<%=loginURL %>'
	});
	});
	</aui:script>



	<!-- For Closing -->
	<aui:script>
	Liferay.provide(window,'<portlet:namespace/>closeYourPopUp',
	function(data, dialogId) {
	<!-- alert("second"); -->
	var A = AUI();
	var dialog = Liferay.Util.Window.getById(dialogId);
	dialog.destroy();
	},
	['liferay-util-window']
	);
	</aui:script>

view raw view.jsp hosted with ❤ by GitHub

login.jsp

	<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
	<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
	<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
	<portlet:defineObjects />

	<portlet:actionURL var="loginAction">

	</portlet:actionURL>

	<div id="fm">
	<form name="form" id="form" action="<%=loginAction %>" method="POST">
	<aui:input name="name" type="text" />
	<aui:input name="password" type="password"></aui:input>
	<aui:button name="submit" type="Submit" value="SUBMIT" />
	<aui:button name="cancel" type="button" value="CANCEL" />
	</form>
	</div>

	<!-- For Closing -->
	<aui:script use="aui-base">
	A.one('#<portlet:namespace/>cancel').on('click', function(event) {
	<!-- alert("first"); -->
	var data = '';
	Liferay.Util.getOpener().<portlet:namespace/>closeYourPopUp(data, '<portlet:namespace/>dialog');
	});
	</aui:script>

view raw login.jsp hosted with ❤ by GitHub

Demo.java

	package com.demo;

	import java.io.IOException;

	import javax.portlet.ActionRequest;
	import javax.portlet.ActionResponse;
	import javax.portlet.GenericPortlet;
	import javax.portlet.PortletException;
	import javax.portlet.PortletRequestDispatcher;
	import javax.portlet.RenderRequest;
	import javax.portlet.RenderResponse;

	import com.liferay.portal.kernel.log.Log;
	import com.liferay.portal.kernel.log.LogFactoryUtil;
	import com.liferay.portal.kernel.util.ParamUtil;

	/**
	* Portlet implementation class Demo
	*/
	public class Demo extends GenericPortlet {

	public void init() {
	viewTemplate = getInitParameter("view-template");
	}

	public void doView(RenderRequest renderRequest, RenderResponse renderResponse) throws IOException, PortletException {


	String path = ParamUtil.getString(renderRequest, "path");

	if (path.equalsIgnoreCase("loginPage")) {
	include("/html/demo/login.jsp", renderRequest, renderResponse);

	}
	else if (path.equalsIgnoreCase("details")) {
	renderRequest.setAttribute("name", (ParamUtil.getString(renderRequest, "name")));
	renderRequest.setAttribute("password",(ParamUtil.getString(renderRequest, "password")));
	include("/html/demo/details.jsp", renderRequest, renderResponse);
	}
	else {
	include(viewTemplate, renderRequest, renderResponse);
	}


	}

	@Override
	public void processAction(ActionRequest request, ActionResponse response) throws PortletException, IOException {
	String name = ParamUtil.getString(request, "name");
	String password = ParamUtil.getString(request, "password");
	response.setRenderParameter("path", "details");
	response.setRenderParameter("name", name);
	response.setRenderParameter("password", password);
	System.out.println("Name=>"+name+" Password=>"+password);

	}

	protected void include(String path, RenderRequest renderRequest, RenderResponse renderResponse) throws IOException,
	PortletException {

	PortletRequestDispatcher portletRequestDispatcher = getPortletContext().getRequestDispatcher(path);

	if (portletRequestDispatcher == null) {
	_log.error(path + " is not a valid include");
	} else {
	portletRequestDispatcher.include(renderRequest, renderResponse);
	}
	}

	protected String viewTemplate;

	private static Log _log = LogFactoryUtil.getLog(Demo.class);

	}