Showing posts with label aui. Show all posts
Showing posts with label aui. Show all posts

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

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

Demo.java
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
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

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
view.jsp


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

view.jsp
login.jsp
Demo.java

Output





Project Structure



That's it.

You can download source code from Aui Dialog Box in Liferay





Hope this will help......

 Related Post:-

Spring MVC portlet in Liferay

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







Form Submission Using AJAX(AUI) in Liferay

Form Submission Using AJAX(AUI)


Today we will discuss how to Submit a form using Ajax .For sending Ajax request we are using Alloy UI (aui) tags.Then finally Print the form data to Success page.The important thing is when we use Ajax the response is come back in Json(or Xml) form then how we redirect to Success page?
For achieving this we send another request from Ajax success part by using Java Script.So Lets start 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

Explanation:-
1) In line (32-36) we create a simple form in which on click of submit button submitForm() is called.
2)Inside submitForm() we send a Ajax call in which we are using id of form for sending data (Name,Password)of form to Controller.
3)On success  we parse the Json Data send by controller and then send another render Request by using java script (window.location.href) and appending the data in URL so that we can display on Success page.






Step 2:-Create Your controller
Inside your controller paste this content:-

Demo.java

Explanation:-
1)Ajax Call comes to serveResource() here we fetch the form data and put in Json object and send back the response.
2)On Success part of Ajax (line 23 of view.jsp) we send another render Request by using window.location.href and append parameters.This call comes to doView().
3)Inside doView() we check the parameter(path) that is passed in render Request:-

<portlet:renderURL var="succcessURL">
<portlet:param name="path" value="success"/>
</portlet:renderURL>

if path is success the we get the parameters and set in attributes so that they are available in success.jsp.After that we include success.jsp.(line 28-33) .

Step 3:-Create success.jsp
Just paste this content to success.jsp:-

success.jsp
Step 4:-Change Required name space
We are using simple form so we have to change required namespace parameter to false inside liferay-portlet.xml.For detail explanation on this you may refer my previous blog Portlet Name Space in liferay.

<requires-namespaced-parameters>
    false
</requires-namespaced-parameters>

That's it.

You can download source code from Form Submittion By Ajax






Hope this will help....

 Related Post:-

Spring MVC portlet in Liferay

Form Handling in Spring Portlet

Many To Many Relationship mapping in Liferay Services

Portlet Name space Parameter in liferay

Open/Close AUI Dialog Box in Liferay

Liferay Service Builder in Detail

How to install Maven

Creating Portlet/Services using Maven








Portlet Name Space Parameter in Liferay

Use Of Name Space Parameter in Liferay


Today we will discuss the use of Portlet Name Space parameter in Liferay.If you are using Liferay 6.1 then you can get the value of form input values easily but for Liferay 6.2 it is compulsory to use the namespaces.


Q) What is Portlet Name Space?
Ans:As you already know you can put many portlet on the same page in liferay.Let if there are 2 portlet on the same page and both have a input box with a same name like username what will happen answer is Name coflict. To avoid this name conflict we use portlet name space.

Portlet Name Space will give unique name to the elements in the page and these elements are associated to respective portlet. This will avoid name conflicts in the page.


How To Deal with Name Space?





Their are basically 3 ways:-

1)Use basic tags and provide entry in xml

 <form action="${namespace}" method="Post">
  Name :<input type="text" name="name" id="name"> 
<input type="Submit" name="Submit" value="Submit">
</form> 

and put requires-namespaced-parameters is false inside liferay-portlet.xml.

<requires-namespaced-parameters>
    false
</requires-namespaced-parameters>

2)Use <portlet:namespace/> tag with fields

<form action="${namespace}" method="Post">
Name :<input type="text" name="<portlet:namespace/>name" id="<portlet:namespace/>name">
<input type="Submit" name="Submit" value="Submit">
</form>

For using this you have to import taglib as:-

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

3)Use aui tags

<aui:form action="${namespace}" method="Post">
<aui:input name="name" id="name" />
<aui:button value="Submit" type="Submit"></aui:button>

</aui:form>

For using this you have to import taglib as:-

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

Note:- Aui tags automatically append name spaces








Hope this will help....

 Related Post:-

Spring MVC portlet in Liferay

Form Handling in Spring Portlet

Many To Many Relationship mapping in Liferay Services

How to Use Ajax in Spring Portlet

Liferay Service Builder in Detail

How to install Maven

Creating Portlet/Services using Maven








Subscribe to: Posts (Atom)