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
I appreciated your work very thanks techniedges
ReplyDeleteFor any business considering an investment in high security doors and are unsure whether to opt for wood or steel doors the following real life story will help make that decision; A high-rise apartment building wished to offer residents the highest possible security. Double steel security doors were installed in every unit. One day whilst out & about, an elderly tenant had an accident and was taken to the hospital. Wrought cast iron security doors Melbourne
ReplyDeleteFor example, a fluted post that is painted shows up totally extraordinary if it's stained. window coverings toronto
ReplyDeleteMany people think that buying furniture online is too dangerous. This is simply not true as buying online is just as safe as in person. The key is to know what to look out for, and what steps to take to stay safe while shopping for furniture online. sliding glass doors
ReplyDeleteYou can wipe or spray down your windows yourself on a regular basis, but it's also a good idea to occasionally bring in professional window cleaners. Window cleaning improves your building's appearance and extends the life of your windows. Window washing robot
ReplyDeleteThis is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this.. Concrete cancer
ReplyDeleteWhen it comes down to it, a window that has not been furnished is simply not complete. Not only does it not look good, but will also fail to provide any functions like privacy, temperature control, sun filtration and simply looking good Window Treatments
ReplyDeleteTinting you vehicle window can be a gift and a revile, On one hand you maintain that your ride should look the best, yet then again there are state regulations that disallow particular shades of tint.
ReplyDeleteExpert Window Tinting