Fórumok

Liferay and Primefaces: Multiple Primefaces portlets on the same page cause

Gaurav Sharma, módosítva 11 év-val korábban

Liferay and Primefaces: Multiple Primefaces portlets on the same page cause

Junior Member Bejegyzések: 39 Csatlakozás dátuma: 2012.11.01. Legújabb bejegyzések
I asked a question on StackOverflow. Instead of repeating it, I'm linking to it. SO Link. I have not received an answer yet and have been trying to get it to work for the past few days now without any luck.

Can someone suggest what I might be doing wrong?
thumbnail
Neil Griffin, módosítva 11 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Liferay Legend Bejegyzések: 2655 Csatlakozás dátuma: 2005.07.27. Legújabb bejegyzések
The StackOverflow issue indicated that jQuery is being loaded multiple times. When you get a chance, please look at the <head>...</head> section of the rendered HTML of your portal page and let me know if you see jquery.js in there more than once. This shouldn't be a problem with the latest versions of Liferay Faces. Thanks.
Gaurav Sharma, módosítva 11 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Junior Member Bejegyzések: 39 Csatlakozás dátuma: 2012.11.01. Legújabb bejegyzések
Neil, you are right. I just upgraded to the latest vesion (3.1.1-ga2) and jQuery is only loaded once. I'm still trying to debug the issue. I'm mainly having problems with the file upload component of PrimeFaces and the tab component.

Thanks.
Gaurav
thumbnail
Neil Griffin, módosítva 11 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Liferay Legend Bejegyzések: 2655 Csatlakozás dátuma: 2005.07.27. Legújabb bejegyzések
Hi Gaurav,

The file upload problem is a known issue: FACES-1384

But we didn't know about the tab component. When you get a chance, could you create a new bug issue in the Liferay Issue Tracker for the FACES project?

Thanks,

Neil
Gaurav Sharma, módosítva 11 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Junior Member Bejegyzések: 39 Csatlakozás dátuma: 2012.11.01. Legújabb bejegyzések
It seems that the tab problem was because I was using dynamic="true" for the tabs. Using the simple tab view solved the problem.

But the file upload issue as you pointed out, is a known issue. What would be the best workaround in this case. I noticed that he bridge itself has a file upload implementation though I've not tried it out yet. Would that be the way to go?
Gaurav Sharma, módosítva 11 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Junior Member Bejegyzések: 39 Csatlakozás dátuma: 2012.11.01. Legújabb bejegyzések
Added an issue at FACES-1472
thumbnail
Chris Börgermann, módosítva 10 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

New Member Bejegyzések: 8 Csatlakozás dátuma: 2013.09.03. Legújabb bejegyzések
It's an old thread but as I am facing the same problem with the new version I'm posting it here.

My configuration:
Liferay 6.2 - Tomcat Bundle
Faces Bridge 3.2.4-ga5
Primefaces 4.0.9

For each JSF portlet on the page all Primefaces CSS and JS files are loaded again.
jquery.js
jquery-plugins.js
primefaces.js
...

That makes a document size of 1,5 MB... even for quite a small page.

Any suggestions?
thumbnail
Juan Gonzalez, módosítva 10 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Liferay Legend Bejegyzések: 3089 Csatlakozás dátuma: 2008.10.28. Legújabb bejegyzések
Hi Chris,

are you using <h:head> and <h:body> properly?

Can you post here a sample xhtml?
thumbnail
Chris Börgermann, módosítva 10 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

New Member Bejegyzések: 8 Csatlakozás dátuma: 2013.09.03. Legújabb bejegyzések
Hi Juan,

Portlet 1: portletViewMode.xhtml

<!--?xml version='1.0' encoding='UTF-8' ?-->

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<h:head>
    </h:head>
    <h:body>
	<p:growl id="growl" autoUpdate="true" />
		<h:form id="gmapForm" styleclass="gmapForm">
			<div id="gmapTextBackgroundBox">
			</div>
			<div class="inner-portlet-row">
				<div id="gmapTextBox">
					<h1><h:outputtext value="#{mapsViewBean.headLine}" /></h1>
					<div><h:outputtext value="#{mapsViewBean.headText}" /></div>
				</div>
			</div>			
			<p:gmap id="map" styleclass="map" center="#{mapsViewBean.center}" zoom="#{mapsViewBean.zoomLevel}" type="ROADMAP" model="#{mapsViewBean.emptyModel}" disabledefaultui="true" widgetvar="audiGoogleMap">
				<p:ajax event="overlaySelect" listener="#{mapsViewBean.overlaySelect}" />
				<p:gmapinfowindow maxwidth="250">
					<h:panelgroup layout="block" styleclass="journal-content-article">
						<h4><h:outputtext value="#{mapsViewBean.selectedMarker.title}" /></h4>
						<p:graphicimage cache="false" rendered="#{mapsViewBean.selectedMarker.image != null}" style="max-height:180px;max-width:180px;" value="#{mapsViewBean.selectedMarker.image}" />
						<h:outputlink styleclass="overlay" style="position: absolute; right: 0px; bottom:0px;" value="#{mapsViewBean.selectedMarker.linkUrl}">#{mapsViewBean.selectedMarker.linkText}</h:outputlink>
					</h:panelgroup>
					<h:outputscript library="js/googleMaps" name="jquery.colorbox.js" />
					<h:outputscript library="js/googleMaps" name="maps.js" />
				</p:gmapinfowindow>
			</p:gmap>
		</h:form>
    </h:body>
</f:view>


portlet 2 - portletviewmode.xhtml
<!--?xml version='1.0' encoding='UTF-8' ?-->

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>
    <h:body>
		<p:growl autoUpdate="true" />
        <h:panelgroup layout="block" styleclass="userInfo journal-content-article">
            <h:outputtext value="#{userInfoBean.staticContent}" escape="false" />
            <p></p>
            <div class="dealerImage"><p:graphicimage library="images/userInfo" name="user.png" /></div>
            <h:outputtext value="#{userInfoBean.name}" styleClass="bold" /><p></p>
            <h:outputtext value="#{userInfoBean.street}" /><br>
            <h:outputtext value="#{userInfoBean.zip} #{dealerInfoBean.dealer.city}" /><p></p>
            <h:outputtext value="#{userInfoBean.phone}" /><p></p>
            <h:outputlink value="mailto:#{userInfoBean.email}"><h:outputtext value="#{i18n['email']}" /></h:outputlink><br>
            <h:outputlink value="#{userInfoBean.url}"><h:outputtext value="#{i18n['more.details']}" /></h:outputlink>
            <div style="clear:left"></div>
        </h:panelgroup>
    </h:body>
</f:view>


all resources loaded twice
thumbnail
Chris Börgermann, módosítva 10 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

New Member Bejegyzések: 8 Csatlakozás dátuma: 2013.09.03. Legújabb bejegyzések
As there seems to be no "easy" answer, here is my current workaround based on answers for similar problems I found here and by asking google.

I remove the resources during the prerenderEvent in my portlets and added them into my liferay theme.


package your.package;

import javax.faces.component.UIComponent;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.SystemEvent;
import javax.faces.event.SystemEventListener;

/**
 *
 * @author Chris Börgermann
 */
public class RemoveResourcesListener
		implements SystemEventListener {

	private static final String HEAD = "head";

	@Override
	public void processEvent(SystemEvent event)
			throws AbortProcessingException {
		FacesContext context = FacesContext.getCurrentInstance();

		// Fetch included resources list size
		int i = context.getViewRoot().getComponentResources(context, HEAD)
				.size() - 1;

		while (i &gt;= 0) {

			// Fetch current resource from included resources list
			UIComponent resource = context.getViewRoot()
					.getComponentResources(context, HEAD).get(i);

			// Fetch resource library and resource name
			String resourceLibrary = (String) resource.getAttributes().get(
					"library");
			String resourceName = (String) resource.getAttributes().get("name");

			// Check if we should remove the current resource.
			// Here we may check for any library and name combination.
			// (JSF, Primefaces, Richfaces, etc)
			if ("primefaces".equals(resourceLibrary)
					&amp;&amp; "jquery/jquery-plugins.js".equals(resourceName)) {

				context.getViewRoot().removeComponentResource(context,
						resource, HEAD);

			}
			if ("primefaces".equals(resourceLibrary)
					&amp;&amp; "jquery/jquery.js".equals(resourceName)) {

					// Remove resource from view
					context.getViewRoot().removeComponentResource(context,
							resource, HEAD);
			}
			if ("primefaces".equals(resourceLibrary)
					&amp;&amp; "primefaces.css".equals(resourceName)) {

					//context.getViewRoot().removeComponentResource(context,resource, HEAD);
				
			}
			if ("primefaces".equals(resourceLibrary)
					&amp;&amp; "primefaces.js".equals(resourceName)) {

					// Remove resource from view
					context.getViewRoot().removeComponentResource(context,
							resource, HEAD);
			}

			i--;

		}

	}

	@Override
	public boolean isListenerForSource(Object source) {
		return (source instanceof UIViewRoot);
	}

}


add this listener to faces-config.xml


<!--?xml version="1.0" encoding="UTF-8"?-->
<faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0">
	<application>
[... other stuff ...]
		<system-event-listener>
			<system-event-listener-class>
				your.package.RemoveResourcesListener
			</system-event-listener-class>
			<system-event-class>
				javax.faces.event.PreRenderViewEvent
			</system-event-class>
		</system-event-listener>		
	</application>
</faces-config>


You get
primefaces.js, jquery.js and jquery-plugins.js and primefaces.css 
by opening your primefaces with 7zip (or equivalent) and copying
primefaces.js and primefaces.css from
 META-INF/resources/primefaces/

and all jquery files from
META-INF/resources/primefaces/jquery/


I commented primefaces.css out, because there are resource references like
url("#{resource['primefaces:rating/rating.png']}")
and I don't know how to solve them without copying all primefaces resources to my theme.

I would be glad if someone's got an idea for that because that css still takes 53kb for each jsf/primefaces portlet.
thumbnail
Neil Griffin, módosítva 10 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Liferay Legend Bejegyzések: 2655 Csatlakozás dátuma: 2005.07.27. Legújabb bejegyzések
The feature in Liferay Faces Bridge that detects duplicate versions of JSF resources in the <head>...<head> section of the portal page does not work with the out-of-the-box Liferay+Tomcat bundle. The reason why is because Liferay Portal 6.2 has a revamped "parallel rendering" engine that attempts to render portlets in parallel (rather than in serial) by default. Try adding p_p_parallel=0 to the initial HTTP GET portal page URL and see if the problem goes away. If it does, then you can set the value of the following property in your portal-ext.properties file to globally disable the parallel rendering feature:

layout.parallel.render.enable=false
thumbnail
Chris Börgermann, módosítva 9 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

New Member Bejegyzések: 8 Csatlakozás dátuma: 2013.09.03. Legújabb bejegyzések
Thanks a lot! That solved the Problem!
thumbnail
Neil Griffin, módosítva 9 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Liferay Legend Bejegyzések: 2655 Csatlakozás dátuma: 2005.07.27. Legújabb bejegyzések
Glad to hear that it worked :-) Thanks for letting us know. I just updated the release announcement to include this information about disabling the parallel rendering engine on Tomcat.
thumbnail
Peter Mesotten, módosítva 8 év-val korábban

RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c

Junior Member Bejegyzések: 45 Csatlakozás dátuma: 2009.02.04. Legújabb bejegyzések
Neil Griffin:
The feature in Liferay Faces Bridge that detects duplicate versions of JSF resources in the <head>...<head> section of the portal page does not work with the out-of-the-box Liferay+Tomcat bundle. The reason why is because Liferay Portal 6.2 has a revamped "parallel rendering" engine that attempts to render portlets in parallel (rather than in serial) by default. Try adding p_p_parallel=0 to the initial HTTP GET portal page URL and see if the problem goes away. If it does, then you can set the value of the following property in your portal-ext.properties file to globally disable the parallel rendering feature:

layout.parallel.render.enable=false


Hi Neil,

This just saved my day. I got a problem where the Javascripts included from 6 PF portlets on the page were conflicting with each other (even for the same PF version). I noticed that all JS and CSS resources were included 6 times and some of the scripts could not cope with that. E.g. in my case it was the <p:orderList/> component causing the havoc. Because of the parallel rendering, sometimes it was broken and sometimes it wasn't (if the portlet in question was loaded first).

It all got fixed one I added the mentioned portal property.

Thanks again!