Introduction:
Liferay 6.2 uses the AUI 2.0 version before liferay
version used AUI 1.x.
When come to Liferay 6.2 some of AUI modules was
deprecated and new modules was developed.
Liferay 6.1
version we have different way to create AUI dialog windows and close the windows.
The same code might not work in Liferay 6.2 because AUI was upgraded to AUI 2.x
in liferay 6.2
Liferay have created another Util java scrip module
that is liferay-util-window to create dialog windows or pop up in liferay.
Read
following article know more about AUI migration to 2.x version
Read
below article for AUI Dialogs in Liferay 6.1
We
have two types of AUI Dialogs
- Simple AUI Dialog
- IFRAME AUI Dialog
Simple
AUI Dialog
Simple AUI Dialog cannot accommodate any actions
after render the window means we cannot perform any action in the dialog/popup.
We need to use only AJAX calls in the dialog/popup.
The
following is sample code for AUI Dialog
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 475
}
}
).plug(
A.Plugin.IO,
{
autoLoad: false
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Dialog Window");
popUpWindow.io.set('uri','<%=simpleDialogExample%>');
popUpWindow.io.start();
|
Note:
When we work with Dialogs/Popup window state should
be pop_up/exclusive
state.
When we work with simple dialog use AJAX calls to perform
any action.
IFRAME
AUI Dialog
Iframe dialog render content in Iframe so we can
perform any action in the window. We can perform action URL and Render URL calls.
The
following is sample code for Iframe AUI Dialog
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 500
}
}
).plug(
A.Plugin.DialogIframe,
{
autoLoad: true,
iframeCssClass:
'dialog-iframe',
uri:'<%=simpleDialogIframeExample.toString()%>'
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Iframe Dialog Window");
popUpWindow.io.start();
|
Open
Portlet in AUI Dialog
We can open portlet in AUI dialog. If the portlet
have any action then use Iframe dialog.
If the portlet have all AJAX calls inside then use
Simple AUI Dialog.
When we open portlet in AUI Dialog we need to create
render URL with pop_up/exclusive window state. In the URL creation we need to
portlet ID so that URL pointing to respective portlet.
Open
Portlet in AUI Dialog/ Window Pop Up
var url
=Liferay.PortletURL.createRenderURL();
url.setPortletId("58") //58 is sign in portlet ID
url.setWindowState('pop_up');
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 500
}
}
).plug(
A.Plugin.DialogIframe,
{
autoLoad: false,
iframeCssClass:
'dialog-iframe',
uri:url.toString()
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Open Portlet in Iframe Dialog Window");
popUpWindow.io.start();
|
The
following are complete code in JSP Pages
Simple
AUI Dialog
<%@ 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="simpleDialogExample"
windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>">
<portlet:param name="mvcPath"
value="/html/alloyuidialog/simple_alloyui_dialog-content.jsp"/>
<portlet:param name="message"
value="Hello welcome"/>
</portlet:renderURL>
<a href="<portlet:renderURL
/>">«Home</a>
<div class="separator"></div>
<div>
<h1>Simple AUI Dialog
Please click on button and see </h1><br/>
<aui:button name="simple-dialog-example" id="simple-dialog-example"
value="Click Here
See Simple Allou UI Dialog"> </aui:button>
</div>
<aui:script>
AUI().use('aui-base',
'aui-io-plugin-deprecated',
'liferay-util-window',
function(A) {
A.one('#<portlet:namespace />simple-dialog-example').on('click', function(event){
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 475
}
}
).plug(
A.Plugin.IO,
{
autoLoad: false
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Dialog Window");
popUpWindow.io.set('uri','<%=simpleDialogExample%>');
popUpWindow.io.start();
});
});
</aui:script>
|
Iframe
AUI Dialog
<%@ 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="simpleDialogIframeExample"
windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath"
value="/html/alloyuidialog/iframe_alloyui_dialog_example.jsp"/>
</portlet:renderURL>
<a href="<portlet:renderURL
/>">«Home</a>
<div class="separator"></div>
<div>
<h1>Iframe AUI Dialog
Please click on button and see </h1><br/>
<aui:button name="dialog-iframe-example" id="dialog-iframe-example"
value="Click Here
See Ifame Allou UI Dialog"> </aui:button>
</div>
<aui:script>
AUI().use('aui-base',
'aui-io-plugin-deprecated',
'liferay-util-window',
'aui-dialog-iframe-deprecated',
function(A) {
A.one('#<portlet:namespace />dialog-iframe-example').on('click', function(event){
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 500
}
}
).plug(
A.Plugin.DialogIframe,
{
autoLoad: true,
iframeCssClass:
'dialog-iframe',
uri:'<%=simpleDialogIframeExample.toString()%>'
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Iframe Dialog Window");
popUpWindow.io.start();
});
});
</aui:script>
|
Open
Portlet in AUI Dialog
<%@ 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/security" prefix="liferay-security" %>
<%@ taglib
uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib
uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib
uri="http://liferay.com/tld/util" prefix="liferay-util" %>
<%@ taglib
uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<portlet:defineObjects />
<liferay-theme:defineObjects />
<a href="<portlet:renderURL
/>">«Home</a>
<div class="separator"></div>
<div>
<h1>Iframe Dialog
Please click on button and see </h1><br/>
<aui:button name="open-portlet-dialog-iframe-example"
id="open-portlet-dialog-iframe-example"
value="Click Here
See Ifame Allou UI Dialog">
</aui:button>
</div>
<aui:script>
AUI().use('aui-base',
'aui-io-plugin-deprecated',
'liferay-util-window',
'liferay-portlet-url',
'aui-dialog-iframe-deprecated',
function(A) {
A.one('#<portlet:namespace />open-portlet-dialog-iframe-example').on('click',
function(event){
var url
=Liferay.PortletURL.createRenderURL();
url.setPortletId("58") //58 is sign in portlet ID
url.setWindowState('pop_up');
var
popUpWindow=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view:
true,
//cssClass:
'yourCSSclassName',
modal: true,
resizable: false,
width: 500
}
}
).plug(
A.Plugin.DialogIframe,
{
autoLoad: false,
iframeCssClass:
'dialog-iframe',
uri:url.toString()
}).render();
popUpWindow.show();
popUpWindow.titleNode.html("Liferay
6.2 Open Portlet in Iframe Dialog Window");
popUpWindow.io.start();
});
});
</aui:script>
|
Some More Information About Liferay Dialogue Window
view.jsp
<h1> This is sample liferay Dailog Window Content</h1>
<portlet:renderURL var="simpleDialogExample"
windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/html/alloyuidialog/sample_alloyui_dialog_example.jsp"/>
</portlet:renderURL>
<button type="button" id="<portlet:namespace/>OpenPopUP">Open Liferay PopUp</button>
<script>
window.<portlet:namespace/>LiferayDialogWindowPopUP = null;
AUI().use('aui-base','aui-io-plugin-deprecated','liferay-util-window',function(A) {
A.one('#<portlet:namespace/>OpenPopUP').on('click',function(){
<portlet:namespace />LiferayDialogWindowPopUP=Liferay.Util.Window.getWindow(
{
dialog: {
centered: true,
constrain2view: true,
cssClass: 'my-liferay-popup',
modal: true,
resizable: false,
//destroyOnClose:true,
destroyOnHide:true,
width:700,
height:400,
after: {
destroy: function(event) {
console.log("function which will call after close the dialog");
},
},
}
}
).plug(
A.Plugin.IO,
{
autoLoad: false
}).render();
window.<portlet:namespace />LiferayDialogWindowPopUP.show();
window.<portlet:namespace />LiferayDialogWindowPopUP.titleNode.html("My Dialogue");
window.<portlet:namespace />LiferayDialogWindowPopUP.io.set('uri','<%=simpleDialogExample%>');
window.<portlet:namespace />LiferayDialogWindowPopUP.io.start();
});
});
</script>
|
Closing Pop-up
Closing Pop-up with some Button this button will be in pop jsp page(sample_alloyui_dialog_example.jsp)
sample_alloyui_dialog_example.jsp
<h1> This is sample liferay Dailog Window Content</h1>
<button type="button" onclick='<portlet:namespace />closeLiferayPopUP()'></button> <script> function <portlet:namespace />closeLiferayPopUP(){ if(window.<portlet:namespace/>LiferayDialogWindowPopUP) { window.<portlet:namespace/>LiferayDialogWindowPopUP.hide(); } } </script> |
To execute some task after close pop up then use following code
<portlet:namespace />LiferayDialogWindowPopUP=Liferay.Util.Window.getWindow(
{ dialog: { centered: true, constrain2view: true, cssClass: 'my-liferay-popup', modal: true, resizable: false, //destroyOnClose:true, destroyOnHide:true, width:700, height:400, after: { destroy: function(event) { console.log("function which will call after close the dialog"); }, }, } } ).plug( A.Plugin.IO, { autoLoad: false }).render(); |
Download
Liferay 6.2 AUI Dialog/PopUP Portlet
Environment:
Liferay
IDE 2.x+Eclipse (Kepler) +Liferay Plugins SDK 6.2+Tomcat 7.x Liferay Portal
Bundle
Deployment
and its Working.
Download portlet you can source or war file to
deploy into liferay portal as your convenient.
Once portlet successfully deployed drag the portlet
in any desired page. Portlet is available in sample category name as Liferay6.2PopUP.
Portlet
Screens:
Default
Page
Liferay
AUI Dialog
Reference Links
Author
Posts
