Sunday, November 10, 2013

Working with Liferay Alloy UI Dialogs

Working with Liferay Alloy UI Dialogs


Liferay provides alloy ui dialog which is usefull in many scenarios.

Example:

Open some form in pop up
Show some images in pop up.
Show entire port let in pop up.

Download Liferay Alloy UI Dialog portlet from following location

You can find source and war file


Note:  Portlet developed in Liferay 6.1GA2 EE version

If you want deploy in CE version you just do changes in liferay-plugin-package.properties

Liferay 6.1 EE version

name=LiferayAlloyUIDialog
module-group-id=liferay-ee
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=EE
liferay-versions=6.1.20

Liferay 6.1 CE version

name = LiferayAlloyUIDialog
module-group-id=liferay
module-incremental-version=1
tags=
short-description=
change-log=
page-url=http://www.liferay.com
author=Liferay, Inc.
licenses=LGPL
liferay-versions=6.1.1

Alloy UI is providing dialog so that we can use in above scenarios

We have two types of Dialogs

Simple Alloy UI dialog
Iframe Dialog

Simple Alloy UI dialog:

In the simple alloy ui dialog we can show something like images and some content. In the dialog we can’t perform any action like render request action or action request action within dialog.
We can perform Ajax calls within dialog. So we can perform Ajax calls using AUI IO request or simple Jquery Ajax method.

Except Ajax cal we can’t perform any action if we perform dialog will be gone.
Means if the page is refreshing in side dialog then dialog will be disappeared. So make sure in simple dialog page should not be refresh means only Ajax call is way to perform some actions in dialog.

The following alloy ui module is required to make use of simple dialog

  aui-dialog
  aui-io

 The following is sample code to use 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_example.jsp"/>
</portlet:renderURL>
<div>
<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', function(A) {
A.one('#<portlet:namespace />simple-dialog-example').on('click', function(event){
AUI().use('aui-dialog', 'aui-io', function(A) {
    var dialog = new A.Dialog({
    title: 'Upload Details',
    centered: true,
    modal: true,
    width: 500,
    height: 400,
    }).plug(A.Plugin.IO, {uri: '<%=simpleDialogExample%>'}).render();

});
});
});
</aui:script>

Here we are using aui-dialog module and aui-io module.

Here we have some options
Title: title of dialog
Width: width of dialog
Height: high of dialog
Uri: Rrender URL or Action URL making sure window state should be pop_up or exclusive.
Here observe we have to plug the plug-in called IO plug-in.

Iframe Dialog:

Iframe dialog is something different from simple dialog. In this dialog we can perform any action like normal page. Means we can use action URL to render URL.
If page refresh also we can do its some thigh like normal page in browser.
To make Iframe dialog we need to add following alloy ui modules.

aui-dialog
aui-dialog-iframe
Need to plug DialogIframe  plug-in

The following is example code:

<%@ 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>
<div>
<h1>Iframe Dialog Plese 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', function(A) {
A.one('#<portlet:namespace />dialog-iframe-example').on('click', function(event){
AUI().use('aui-dialog','aui-dialog-iframe', function(A) {
    var dialog = new A.Dialog({
    title: 'Iframe Dialog',
    centered: true,
    modal: true,
    width: 500,
    height: 400,
    }).plug(A.Plugin.DialogIframe, {
    uri: '<%=simpleDialogIframeExample%>',
    iframeCssClass: 'dialog-iframe',
    }).render();

});
});
});
</aui:script>


Open port let in Iframe Dialog:

When we get requirement to open port let in dialog we can use ifrmae dialog.
We need create URL where we need to pass portlet id or portlet name in URL and window state should be pop_up or exclusive.

The following is url for sample

<liferay-portlet:renderURL portletName="20" var="openPortletURL" varImpl="openPortletURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
</liferay-portlet:renderURL>

In the URL port let name is 20 is documents and media portlet.

How to find portlet Id or p_p_id or portlet Name

When you drag and drop port let click on portlet maximize button which is in right side corner of every portlet.




Once it maximized the see url in browser address and find p_p_id this is called portlet id or portlet name.



The following is complete code snippet for open portlet in iframe 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"%>
<liferay-portlet:renderURL portletName="20" var="openPortletURL" varImpl="openPortletURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
</liferay-portlet:renderURL>
<div>
<h1>Iframe Dialog Plese click on button  and see Announcement portlet in dialog..</h1><br/>
<aui:button name="portlet-iframe-example"  id="portlet-iframe-example"  value="Open Portlet In Iframe Dailog"> </aui:button>
</div>
<aui:script>
AUI().use('aui-base', function(A) {
A.one('#<portlet:namespace />portlet-iframe-example').on('click', function(event){
AUI().use('aui-dialog','aui-dialog-iframe', function(A) {
    var dialog = new A.Dialog({
    title: 'Iframe Dialog',
    centered: true,
    modal: true,
    width: 500,
    height: 400,
    }).plug(A.Plugin.DialogIframe, {
    uri: '<%=openPortletURL%>',
    iframeCssClass: 'dialog-iframe',
    }).render();

});
});
});
</aui:script>


 Close Dialog


<input type="button" name="close PopUp window" onClick="javascript:closeAuiPopUp();"/>
<aui:script>
function closeAuiPopUp(){
        top.document.getElementById('closethick').click();
}
</aui:script>


Call Some Function when dialog Close

<aui:script>
AUI().use('aui-base', function(A) {
A.one('#<portlet:namespace />simple-dialog-example').on('click', function(event){
AUI().use('aui-dialog', 'aui-io', function(A) {
    var dialog = new A.Dialog({
    title: 'Simple Alloy UI Dailog',
    centered: true,
    modal: true,
    width: 500,
    height: 400,
    on: {
            close: function() {
               alert("Hi You are closing Dialog");
               //mytestfunction();
           }
        },
    }).plug(A.Plugin.IO, {uri: '<%=simpleDialogExample%>'}).render();

});
});
});
</aui:script>

Important Points


  •  We have two types of dialogs simple dialog and ifrmae dialog.
  • Simple dialog we can’t perform page refresh actions only we can perform ajax call. This Ajax call we can use jQuery Ajax or alloy ui io module.
  •  If we want create simple dialog we have to use aui-dailog ,aui-io module and we have to plug IO plug-in.
  • Iframe dialog we can do any actions inside dialog.
  • If we want create iframe dialog we have to use aui-dailog,aui-dailog-iframe modules and plug DialogIframe plugin.
  • We can open complete portlet in iframe dialog for this we have create URL we need to pass p_p_id means port let id .
  • For all above scenarios portlet state should be pop_up or exclusive.

Screen1:


Screen2



Screen3


Screen4



Working with Liferay 6.2

Liferay have util.js in portal there we can have function openWindow for dialog windows.

The following sample code


<portlet:renderURL var="simpleDialogExample" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/html/liferayauidialog/dialogpage.jsp"/>
</portlet:renderURL>


Liferay.Util.openWindow(
{
title: 'Example Dialog',
uri: '<%= simpleDialogExample.toString() %>',
width:500,
height:300,
});



Liferay 6.2 is using aui 2.0 so we have aui-model instead of dialog and have a look into following link

The following is sample code


<%@ include file="init.jsp" %>
<style>
#modal-content{
display:none;
}
</style>
<div>
<aui:button name="simple-dialog-example"  id="simple-dialog-example"  value="Click Here See Simple Allou UI Dialog"> </aui:button>
</div>
 <div id="modal"></div>
<div id="modal-content">This is test</div>
<aui:script>
AUI().use('aui-base','aui-modal', function(A) {
A.one('#<portlet:namespace />simple-dialog-example').on('click', function(event){
A.one('#modal-content').setStyle('display','block')
    var modal = new A.Modal(
      {
       srcNode : '#modal-content',  //contentBox:#modal-content
        centered: true,
        headerContent: '<h3>Modal header</h3>',
        modal: true,
        render: '#modal',
        width: 450
      }
    ).render();
});
});
</aui:script>


Liferay 6.2 AUI Model Portlet Download


AUI Model API Reference




Reference links:



Author: Meera Prince



Popular Posts

Recent Posts

Recent Posts Widget