Combination View Flat View Tree View
Threads [ Previous | Next ]
Gaurav Sharma
Liferay and Primefaces: Multiple Primefaces portlets on the same page cause
January 24, 2013 6:34 AM
Answer

Gaurav Sharma

Rank: Junior Member

Posts: 38

Join Date: November 1, 2012

Recent Posts

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?
Neil Griffin
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
January 24, 2013 2:49 PM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2097

Join Date: July 26, 2005

Recent Posts

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
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
January 24, 2013 3:03 PM
Answer

Gaurav Sharma

Rank: Junior Member

Posts: 38

Join Date: November 1, 2012

Recent Posts

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
Neil Griffin
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
January 24, 2013 3:12 PM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2097

Join Date: July 26, 2005

Recent Posts

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
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
January 25, 2013 7:34 AM
Answer

Gaurav Sharma

Rank: Junior Member

Posts: 38

Join Date: November 1, 2012

Recent Posts

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
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
January 25, 2013 7:44 AM
Answer

Gaurav Sharma

Rank: Junior Member

Posts: 38

Join Date: November 1, 2012

Recent Posts

Added an issue at FACES-1472
Chris Börgermann
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
March 24, 2014 6:11 AM
Answer

Chris Börgermann

Rank: New Member

Posts: 5

Join Date: September 3, 2013

Recent Posts

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?
Juan Gonzalez
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
March 24, 2014 6:43 AM
Answer

Juan Gonzalez

LIFERAY STAFF

Rank: Liferay Legend

Posts: 1933

Join Date: October 28, 2008

Recent Posts

Hi Chris,

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

Can you post here a sample xhtml?
Chris Börgermann
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
March 27, 2014 4:14 AM
Answer

Chris Börgermann

Rank: New Member

Posts: 5

Join Date: September 3, 2013

Recent Posts

Hi Juan,

Portlet 1: portletViewMode.xhtml

 1<?xml version='1.0' encoding='UTF-8' ?>
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3<f:view xmlns="http://www.w3.org/1999/xhtml"
 4        xmlns:h="http://java.sun.com/jsf/html"
 5        xmlns:f="http://java.sun.com/jsf/core"
 6        xmlns:ui="http://java.sun.com/jsf/facelets"
 7        xmlns:p="http://primefaces.org/ui">
 8    <h:head>
 9    </h:head>
10    <h:body>
11    <p:growl id="growl" autoUpdate="true"/>
12        <h:form id="gmapForm" styleClass="gmapForm">
13            <div id="gmapTextBackgroundBox">
14            </div>
15            <div class="inner-portlet-row">
16                <div id="gmapTextBox">
17                    <h1><h:outputText value="#{mapsViewBean.headLine}" /></h1>
18                    <div><h:outputText value="#{mapsViewBean.headText}"/></div>
19                </div>
20            </div>            
21            <p:gmap id="map" styleClass="map" center="#{mapsViewBean.center}" zoom="#{mapsViewBean.zoomLevel}" type="ROADMAP"   
22                    model="#{mapsViewBean.emptyModel}"   
23                    disableDefaultUI="true"
24                    widgetVar="audiGoogleMap">
25                <p:ajax event="overlaySelect" listener="#{mapsViewBean.overlaySelect}"/>
26                <p:gmapInfoWindow maxWidth="250">
27                    <h:panelGroup layout="block" styleClass="journal-content-article">
28                        <h4><h:outputText value="#{mapsViewBean.selectedMarker.title}"/></h4>
29                        <p:graphicImage cache="false" rendered="#{mapsViewBean.selectedMarker.image != null}" style="max-height:180px;max-width:180px;" value="#{mapsViewBean.selectedMarker.image}"/>
30                        <h:outputLink styleClass="overlay" style="position: absolute; right: 0px; bottom:0px;" value="#{mapsViewBean.selectedMarker.linkUrl}">#{mapsViewBean.selectedMarker.linkText}</h:outputLink>
31                    </h:panelGroup>
32                    <h:outputScript library="js/googleMaps" name="jquery.colorbox.js"/>
33                    <h:outputScript library="js/googleMaps" name="maps.js"/>
34                </p:gmapInfoWindow>
35            </p:gmap>
36        </h:form>
37    </h:body>
38</f:view>


portlet 2 - portletviewmode.xhtml
 1<?xml version='1.0' encoding='UTF-8' ?>
 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3<f:view xmlns="http://www.w3.org/1999/xhtml"
 4        xmlns:h="http://java.sun.com/jsf/html"
 5        xmlns:f="http://java.sun.com/jsf/core"
 6        xmlns:ui="http://java.sun.com/jsf/facelets"
 7        xmlns:p="http://primefaces.org/ui">
 8    <h:head>
 9    </h:head>
10    <h:body>
11        <p:growl autoUpdate="true"/>
12        <h:panelGroup layout="block" styleClass="userInfo journal-content-article">
13            <h:outputText value="#{userInfoBean.staticContent}" escape="false"/>
14            <p/>
15            <div class="dealerImage"><p:graphicImage library="images/userInfo" name="user.png"/></div>
16            <h:outputText value="#{userInfoBean.name}" styleClass="bold"/><p/>
17            <h:outputText value="#{userInfoBean.street}"/><br/>
18            <h:outputText value="#{userInfoBean.zip} #{dealerInfoBean.dealer.city}"/><p/>
19            <h:outputText value="#{userInfoBean.phone}"/><p/>
20            <h:outputLink value="mailto:#{userInfoBean.email}"><h:outputText value="#{i18n['email']}"/></h:outputLink><br/>
21            <h:outputLink value="#{userInfoBean.url}"><h:outputText value="#{i18n['more.details']}"/></h:outputLink>
22            <div style="clear:left"></div>
23        </h:panelGroup>
24    </h:body>
25</f:view>


all resources loaded twice
Chris Börgermann
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
March 27, 2014 4:13 AM
Answer

Chris Börgermann

Rank: New Member

Posts: 5

Join Date: September 3, 2013

Recent Posts

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.

 1
 2package your.package;
 3
 4import javax.faces.component.UIComponent;
 5import javax.faces.component.UIViewRoot;
 6import javax.faces.context.FacesContext;
 7import javax.faces.event.AbortProcessingException;
 8import javax.faces.event.SystemEvent;
 9import javax.faces.event.SystemEventListener;
10
11/**
12 *
13 * @author Chris Börgermann
14 */
15public class RemoveResourcesListener
16        implements SystemEventListener {
17
18    private static final String HEAD = "head";
19
20    @Override
21    public void processEvent(SystemEvent event)
22            throws AbortProcessingException {
23        FacesContext context = FacesContext.getCurrentInstance();
24
25        // Fetch included resources list size
26        int i = context.getViewRoot().getComponentResources(context, HEAD)
27                .size() - 1;
28
29        while (i >= 0) {
30
31            // Fetch current resource from included resources list
32            UIComponent resource = context.getViewRoot()
33                    .getComponentResources(context, HEAD).get(i);
34
35            // Fetch resource library and resource name
36            String resourceLibrary = (String) resource.getAttributes().get(
37                    "library");
38            String resourceName = (String) resource.getAttributes().get("name");
39
40            // Check if we should remove the current resource.
41            // Here we may check for any library and name combination.
42            // (JSF, Primefaces, Richfaces, etc)
43            if ("primefaces".equals(resourceLibrary)
44                    && "jquery/jquery-plugins.js".equals(resourceName)) {
45
46                context.getViewRoot().removeComponentResource(context,
47                        resource, HEAD);
48
49            }
50            if ("primefaces".equals(resourceLibrary)
51                    && "jquery/jquery.js".equals(resourceName)) {
52
53                    // Remove resource from view
54                    context.getViewRoot().removeComponentResource(context,
55                            resource, HEAD);
56            }
57            if ("primefaces".equals(resourceLibrary)
58                    && "primefaces.css".equals(resourceName)) {
59
60                    //context.getViewRoot().removeComponentResource(context,resource, HEAD);
61               
62            }
63            if ("primefaces".equals(resourceLibrary)
64                    && "primefaces.js".equals(resourceName)) {
65
66                    // Remove resource from view
67                    context.getViewRoot().removeComponentResource(context,
68                            resource, HEAD);
69            }
70
71            i--;
72
73        }
74
75    }
76
77    @Override
78    public boolean isListenerForSource(Object source) {
79        return (source instanceof UIViewRoot);
80    }
81
82}


add this listener to faces-config.xml

 1
 2<?xml version="1.0" encoding="UTF-8"?>
 3<faces-config
 4    xmlns="http://java.sun.com/xml/ns/javaee"
 5    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 6    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
 7    version="2.0">
 8    <application>
 9[... other stuff ...]
10        <system-event-listener>
11            <system-event-listener-class>
12                your.package.RemoveResourcesListener
13            </system-event-listener-class>
14            <system-event-class>
15                javax.faces.event.PreRenderViewEvent
16            </system-event-class>
17        </system-event-listener>       
18    </application>
19</faces-config>


You get
1primefaces.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
1 META-INF/resources/primefaces/

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


I commented primefaces.css out, because there are resource references like
1url("#{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.
Neil Griffin
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
March 27, 2014 11:15 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2097

Join Date: July 26, 2005

Recent Posts

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:

1layout.parallel.render.enable=false
Chris Börgermann
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
April 3, 2014 12:44 AM
Answer

Chris Börgermann

Rank: New Member

Posts: 5

Join Date: September 3, 2013

Recent Posts

Thanks a lot! That solved the Problem!
Neil Griffin
RE: Liferay and Primefaces: Multiple Primefaces portlets on the same page c
April 3, 2014 7:51 AM
Answer

Neil Griffin

LIFERAY STAFF

Rank: Liferay Legend

Posts: 2097

Join Date: July 26, 2005

Recent Posts

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.