/ / / / / / / / / / Liferay 6.2 AUI Dialog / Liferay Popup Window

Liferay 6.2 AUI Dialog / Liferay Popup Window

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

AlloyUI2.0 / Bootstrap Migration

Read below article for AUI Dialogs in Liferay 6.1

Liferay6.1 AUI Dialogs

OpenPortlet in AUI Dialog 6.1

We have two types of AUI Dialogs
  1. Simple AUI Dialog
  2. 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/exclusivestate.

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 />">&laquo;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 />">&laquo;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 />">&laquo;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

https://sourceforge.net/projects/meeralferay/files/Liferay6.2AUIDialogPopUP/




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

https://github.com/liferay/liferay-plugins/blob/master/portlets/microblogs-portlet/docroot/microblogs/js/main.js

https://www.liferay.com/documentation/liferay-portal/6.2/development/-/ai/alloyui-2-0-bootstrap-migration-liferay-portal-6-2-dev-guide-02-en



Author
Meera Prince
Liferay Top Contributor Award Winner
http://www.liferaysavvy.com
Share on Google Plus

About Meera Prince

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )