Saturday, April 11, 2015

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:-


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:-


Step 4:-Handle Action Request inside Controller
When Submit button is clicked processAction method of our Controller is called
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:-
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:

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

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



Project Structure

That's it.

You can download source code from Aui Dialog Box in Liferay

Hope this will help......

 Related Post:-

Open/Close Dialog box using jQuery

Form Handling in Spring Portlet

Many To Many Relationship mapping in Liferay Services

Portlet Name space Parameter in liferay

Form Submittion using Ajax(AUI) in Liferay

Liferay Service Builder in Detail

How to install Maven

Creating Portlet/Services using Maven

No comments:

Post a Comment

Total Pageviews

Number Of Unique Visitor

Free counters!