Thursday, June 12, 2014

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


Read below article for AUI Dialogs in Liferay 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/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 />">&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





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

8 comments :

  1. I appreciated your work very thanks techniedges

    ReplyDelete
  2. For 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

    ReplyDelete
  3. For example, a fluted post that is painted shows up totally extraordinary if it's stained. window coverings toronto

    ReplyDelete
  4. Many 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

    ReplyDelete
  5. You 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

    ReplyDelete
  6. This 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

    ReplyDelete
  7. When 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

    ReplyDelete
  8. Tinting 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.
    Expert Window Tinting

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts