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.
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_idthis 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
0 comments:
Post a Comment