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_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:
No comments:
Post a Comment