Monday, November 11, 2013

Working with Liferay URLs

Working with Liferay URLs


In liferay development we have many options to create liferay URLs i.e.
Render URL, Action URL and Resource URL.
We have many ways to create liferay URL in development the following are the ways to create URLs

  1. Using tag library
  2. Using complete java classes and java objects
  3. Using Java script


Using Tag Library:

Liferay provide build in tag library from that we can create liferay URLs.
We have two tag libraries from which we can create URLs

  • Portlet tag library
  • Liferay Portlet tag library.


Portlet Tag Library :

Portlet tag library is stand tag library for every portal means it’s just JSR 168 and JSR 286 standard tag library.

To make use of this tag library in jsp page we need to use following tag.


<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>


Render URL creation:



<portlet:renderURL var="simpleDialogIframeExample" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/html/alloyuidialog/iframe_alloyui_dialog_example.jsp"/>
</portlet:renderURL>


The following are important attribute for tag:

var : This is variable name so that we can reference URL by this name
Window state: This is liferay window state like normal. Maximized ,minimized and pop_up.
portlet mode : this is mode of portlet view or edit
copyCurrentRenderParameters: This is whether you want copy all render parameters
If you want add more addition parameters we should use another tag called <portlet:param/>
This is used to add more parameters or custom parameters

Finally this tag converted and the URL like following

For example my portlet Name:  LiferayAlloyUIDialogportlet
I am creating Render URL in view.jsp page for this portlet
Then finally URL look like this in browser address bar its simple query string




p_p_id: current portlet id
p_p_state: window sate
p_p_mode: portlet mode either view/edit
p_p_lifecycle: this is life cycle of portlet  0/1/2
0: render phase or render URL
1: action phase or action URL
2: server resource URL
mvcPath: this is another parameter which we passed from <portlet:param/>  tag

Note:

Similarly all URL have same parameters like above when we create URL from portlet tag library

Examples for URLs created from portlet tag library:

Render URL:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:renderURL var="simpleDialog" windowState="normal">
<portlet:param name="mvcPath" value="/html/alloyuidialog/simple_alloyui_dialog.jsp"/>
</portlet:renderURL>

Action URL:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:actionURL var="iFrmedilogActionURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="<%=ActionRequest.ACTION_NAME%>" value="getActionMessageForSimpleDialog"/>
</portlet:actionURL>

Resource URL:

<portlet:resourceURL var="feedBackResourceURL" id="view.jsp" escapeXml="false" />

Note:

With this tag library we can create URL for only current portlet .means where jsp page is located in portlet for that particular portlet only we can create.

Liferay Portlet Tag library:

This is another tag library which is from liferay by this we can create URLs but the difference between standard tab library and liferay tag library is  we can create URL for other portlet also.
Means if you work with PortletA in portletA JSP page we can create URL for PortletB. This is using in some scenarios where you want pass some parameters form portletA to portletB.
To make use of this library we need to add following tag library in jsp page


<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>


Example for create Liferay URLs from Liferay Portlet Tag Library:

For example I want create RenderURL for portlet 47 means this is document library portlet

The following is example

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

Important Attributes:

portletName: the name of portlet  for which you going to  create URL.
plid :  In which page your portllet is reside. Means its layout id
var : This is variable name so that we can reference URL by this name
Window state: This is liferay window state like normal. maximized, minimized and pop_up.
Portlet Mode: this is mode of portlet view or edit
copyCurrentRenderParameters: This is whether you want copy all render parameters or not means if you make this tru parameter will available in complete request cycle.

Finally URL likes this:




p_p_id: current portlet id
p_p_state: windiow sate
p_p_mode: portlet mode either view/edit
p_p_lifecycle: this is life cycle of portlet
0: render phase or render URL
1: action phase or action URL
2: server resource URL
To pass custom parameters to this URL we need to use <liferay-portlet:param/> tag

Note:

If we not pass portletName and plid then URL will be created for current portlet.

Examples for create Liferay URLs from Liferay Portlet Tag Library:

Render URL:


<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<liferay-portlet:renderURL portletName="47"   var="openPortletURL" plid="<%=themeDisplay.getPlid()%>"  varImpl="openPortletURL" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<liferay-portlet:param name="name" value="meera"/>
</liferay-portlet:renderURL>

Action URL:

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<liferay-portlet:actionURL portletName="47"   var="actionURL" plid="<%=themeDisplay.getPlid()%>"  varImpl="openPortletURL" windowState="<%=LiferayWindowState.MAXIMIZED.toString()%>">
<liferay-portlet:param name="name" value="meera"/>
</liferay-portlet:actionURL>

Resource URL:

<%@ taglib uri="http://liferay.com/tld/portlet" prefix="liferay-portlet" %>
<liferay-portlet:resourceURL   var="resourceURL" plid="<%=themeDisplay.getPlid()%>"  varImpl="openPortletURL" windowState="<%=LiferayWindowState.MAXIMIZED.toString()%>">
<liferay-portlet:param name="name" value="meera"/>
</liferay-portlet:resourceURL>

Using complete java classes and java objects

  • Create From renderResponse object
  • PortletURLFactoryUtil Class


Create From renderResponse object:

We can create URLs from render response object this is implicit variable we can directly us this. To make it available we need add following tag in jsp page then we can use renderResponse object in jsp page


<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />


The following is sample code:

Render URL:


<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />
<%@page import="javax.portlet.PortletURL"%>
<%
PortletURL myRenderURL=renderResponse.createRenderURL();
myRenderURL.setWindowState(LiferayWindowState.MINIMIZED);
myRenderURL.setParameter("name", "meera");
%>


Action URL:


<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />
<%@page import="javax.portlet.PortletURL"%>

<%

PortletURL myActionURL=renderResponse.createActionURL();
myActionURL.setWindowState(LiferayWindowState.MAXIMIZED);
myActionURL.setParameter("name", "meera");

%>


Resource URL:


<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<portlet:defineObjects />
<%@page import="javax.portlet.ResourceURL"%>

<%

ResourceURL myReourceURL=renderResponse.createResourceURL();
myReourceURL.setResourceID("myResource");
myReourceURL.setParameter("name", "meera");

%>


Note: from renderResponse we can create URLs for only current portlet.

PortletURLFactoryUtil Class:

PortletURLFactoryUtil is util class from which we can create liferay URLs. Here we can create URL to other portlet also. Means from portletA we can create URL for portletB.

The following is examples:

Render URL:


<%@page import="com.liferay.portal.kernel.portlet.LiferayPortletURL"%>
<%@page import="com.liferay.portlet.PortletURLFactoryUtil"%>
<%
LiferayPortletURL myRenderURL=PortletURLFactoryUtil.create(renderRequest, "47", themeDisplay.getPlid(), "0");
myRenderURL.setWindowState(LiferayWindowState.MINIMIZED);
myRenderURL.setParameter("name", "meera");
%>


Action URL:


<%@page import="com.liferay.portal.kernel.portlet.LiferayPortletURL"%>
<%@page import="com.liferay.portlet.PortletURLFactoryUtil"%>
<%
LiferayPortletURL myActionURL=PortletURLFactoryUtil.create(renderRequest, "47", themeDisplay.getPlid(), "1");
myActionURL.setWindowState(LiferayWindowState.MAXIMIZED);
myActionURL.setParameter("name", "meera");
%>


Resource URL:


<%@page import="com.liferay.portal.kernel.portlet.LiferayPortletURL"%>
<%@page import="com.liferay.portlet.PortletURLFactoryUtil"%>
<%
LiferayPortletURL myReourceURL=PortletURLFactoryUtil.create(renderRequest, "47", themeDisplay.getPlid(), "2");
myReourceURL.setParameter("name", "meera");
%>


Finding portlet name or p_p_id:

Go through following link and find How to find portlet Id or p_p_id or portlet Name
section.


Using Java script:

We can also create liferay URL from java script in liferay. Liferay provides java script module called liferay-portlet-url from this we can create URLs in java script
First we need to use AUI tag library then we have to use AUI use method to load liferay-portlet-url   module


<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<aui:script>
AUI().use('aui-base','liferay-portlet-url','aui-node', function(A) {

});

</aui:script>

Examples:

Render URL:



<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<aui:script>
AUI().use('aui-base','liferay-portlet-url','aui-node', function(A) {
var myRenderURL =Liferay.PortletURL.createRenderURL();
myRenderURL.setPortletId('47') 
myRenderURL.setWindowState('pop_up');

});
</aui:script>


Action URL:



<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<aui:script>
AUI().use('aui-base','liferay-portlet-url','aui-node', function(A) {
var myActionURL =Liferay.PortletURL.createActionURL();
myActionURL.setPortletId('47') 
myActionURL.setWindowState('MAXIMIZED');  
myActionURL.setParameter("name","meera");
});
</aui:script>



Resource URL:


 
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<aui:script>
AUI().use('aui-base','liferay-portlet-url','aui-node', function(A) {
var myResourceURL =Liferay.PortletURL.createResourceURL();
 myResourceURL.setResourceId('someid');
 myResourceURL.setParameter("name","meera");});
</aui:script>




Note: all these code snippets use in jsp pages only.

Important points:

  • We can create Liferay URLs in different ways  from tag library java classes and java script.
  • From render response and portlet tag library we can create URL for only current portlet.
  • From PortletURLFactoryUtil class and liferay-portlet tag library we can create URLs to other portlets means from one portlet to other portlet we can create .Here main attributes are portletName and plid. Plid is page layout id.
  • When we create any URL finally url converted into normal URL query string which we can see in browser address bar.
  • Liferay portlet have different lifecycles action render and resource each phase we represend as p_p_lifecycle attribute.  1 for action phase, 0 for render phase and 2 for recourse phase.
  • Liferay portlet have edit and view mode.
  • When create URL using java script we have to liferay-portlet-url    module this module can be loaded by aui use method.


Author:
Meera Prince









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



Recent Posts

Recent Posts Widget

Popular Posts