how to use Primefaces 4.0 in Liferay popup portlet

[samuel Moreno，修改在9 年前。]

Hi,

I've a problem with primefaces components in popup portlets. This portlet is developed with JSF 2.0 and if i open it in a normal page works fine but from popup doesn't get primefaces libs.

Any suggestion?

Thanks,
Samuel

[Juan Gonzalez，修改在9 年前。]

samuel Moreno:

Hi,

I've a problem with primefaces components in popup portlets. This portlet is developed with JSF 2.0 and if i open it in a normal page works fine but from popup doesn't get primefaces libs.

Any suggestion?

Thanks,
Samuel

Hola Samuel,

Please can you post some source snippets (xhtml part that opens that popup and file used for popup)?

What Liferay/Liferay Faces version are you using, (so we can try to reproduce)?

Thanks

[samuel Moreno，修改在9 年前。]

Hola Juan,

I open the popup with next code:

<script>
		function callPortletPopUp(w, h, tipoPopup) {

			AUI()
					.use(
							'aui-base',
							'aui-io-plugin-deprecated',
							'liferay-util-window',
							'liferay-portlet-url',
							'aui-dialog-iframe-deprecated',
							function(A) {
								var url = Liferay.PortletURL.createRenderURL();
								url
										.setPortletId("[PortletName]"); 
								url.setParameter("tipoPopup", tipoPopup);
								url.setWindowState('pop_up');
								var popUpWindow = Liferay.Util.Window
										.getWindow({
											dialog : {
												centered : true,
												constrain2view : true,
												cssClass : 'main.css',
												modal : true,
												resizable : false,
												width : w,
												height : h
											}
										}).plug(A.Plugin.DialogIframe, {
											autoLoad : false,
											iframeCssClass : 'dialog-iframe',
											uri : url.toString()
										}).render();
								popUpWindow.show();
								popUpWindow.io.start();
							});

		}

		
	</script>

This code opens a portlet in a popup but don't get maven libs. I suppose there is some way to force the popup which libraries have to use, no?
Versions:
Liferay 6.2
Primefaces 4.0

Thanks

[Neil Griffin，修改在9 年前。]

Hi Samuel,

When you get a chance, please provide more details about what you mean by "don't get maven libs".

When you wrote "code opens a portlet" do you see some of the PrimeFaces components rendering?

Thanks,

Neil

[samuel Moreno，修改在9 年前。]

Hi Neil,

The libs deployment in Maven are not important. The problems is, why potlet develops with primefaces work in a Liferay page but don't render these components in a popup.


Thanks.

[Juan Gonzalez，修改在9 年前。]

Hola Samuel,

I've just checked with your same environment and use your snippet to open in a popup, and I see the primefaces resources are loaded properly.

Do you see any error in javascript console or server log?

[samuel Moreno，修改在9 年前。]

Hola Juan,

There are not errors in js console. Would you send me, for compare, the snippets that you use (the code of the portlet opened in popup window).

Thanks

[Neil Griffin，修改在9 年前。]

[Moved to Liferay Faces forum]

Just a guess, but you might be specifying the wrong value for "[PortletName]" on the following lines:

13                                url
14                                        .setPortletId("[PortletName]"); 

What value are you providing?

[Juan Gonzalez，修改在9 年前。]

Hola Samuel,

here we go:

<h:outputscript>
        function callPortletPopUp(w, h, tipoPopup) {
            AUI()
                    .use(
                            'aui-base',
                            'aui-io-plugin-deprecated',
                            'liferay-util-window',
                            'liferay-portlet-url',
                            'aui-dialog-iframe-deprecated',
                            function(A) {
                               var url = Liferay.PortletURL.createRenderURL();
                               url.setPortletId("TestPrimefacesPopup_WAR_TestPrimefacesPopupportlet");
                               url.setParameter("tipoPopup", tipoPopup);
                               url.setParameter("_facesViewIdRender","/views/popup.xhtml");
                               
                               url.setWindowState('pop_up');
                                var popUpWindow = Liferay.Util.Window
                                        .getWindow({
                                            dialog : {
                                                centered : true,
                                                constrain2view : true,
                                                cssClass : 'main.css',
                                                modal : true,
                                                resizable : false,
                                                width : w,
                                                height : h
                                            }
                                        }).plug(A.Plugin.DialogIframe, {
                                            autoLoad : false,
                                            iframeCssClass : 'dialog-iframe',
                                            uri : url.toString()
                                        }).render();
                                popUpWindow.show();
                                //popUpWindow.io.start();
                            });
               }       
   </h:outputscript>

I only added _facesViewIdRender parameter in URL for opening another xhtml, removed popUpWindow.io.start(); and changed portlet Id with my specific portlet name.

[samuel Moreno，修改在9 年前。]

Hola Juan,

When i add _facesViewIdRender parameter in URL get the next error:

10:37:26,509 ERROR [http-bio-8080-exec-56][render_portlet_jsp:132] null
com.sun.faces.context.FacesFileNotFoundException: /views/popup.xhtml Not Found in ExternalContext as a Resource
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.resolveURL(DefaultFaceletFactory.java:231)
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.resolveURL(DefaultFaceletFactory.java:287)
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.getMetadataFacelet(DefaultFaceletFactory.java:208)
	at com.sun.faces.application.view.ViewMetadataImpl.createMetadataView(ViewMetadataImpl.java:113)
	at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:233)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
	at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:116)
	at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)
	at com.liferay.faces.bridge.BridgePhaseRenderImpl.execute(BridgePhaseRenderImpl.java:185)
	at com.liferay.faces.bridge.BridgePhaseRenderImpl.execute(BridgePhaseRenderImpl.java:85)
	at com.liferay.faces.bridge.BridgeImpl.doFacesRequest(BridgeImpl.java:112)
	at javax.portlet.faces.GenericFacesPortlet.doView(GenericFacesPortlet.java:255)
	at javax.portlet.GenericPortlet.doDispatch(GenericPortlet.java:328)
	at javax.portlet.faces.GenericFacesPortlet.doDispatch(GenericFacesPortlet.java:204)
	at javax.portlet.GenericPortlet.render(GenericPortlet.java:233)
	at com.liferay.portlet.FilterChainImpl.doFilter(FilterChainImpl.java:103)
	at com.liferay.portlet.ScriptDataPortletFilter.doFilter(ScriptDataPortletFilter.java:55)
	at com.liferay.portlet.FilterChainImpl.doFilter(FilterChainImpl.java:100)
	at com.liferay.portal.kernel.portlet.PortletFilterUtil.doFilter(PortletFilterUtil.java:64)
	at com.liferay.portal.kernel.servlet.PortletServlet.service(PortletServlet.java:112)

I don't know if i have to set more configurations to use _facesViewIdRender.

Thanks,
Samuel.

[Juan Gonzalez，修改在9 年前。]

You don't need that line.

Change the value in portletId too so it uses yours.

[samuel Moreno，修改在9 年前。]

Ok, I know i have to change the portletID, but the behavior is the same.

For example, if i want to use a radio component (primefaces) with ajax(faces), the popup portlet render the "radio" but it have not primefaces look&feel or behavior(ajax faces).

<p:selectoneradio id="radioFormaContacto" value="#{misDatosBean.formaContactoPreferida}" layout="lineDirection" styleclass="textoDato radios">
				<f:selectitem itemValue="#{'Correo electrónico'}" itemLabel="#{bnd['email']}" />
				<f:selectitem itemValue="#{'Teléfono móvil'}" itemLabel="#{bnd['telefono']}" />
				<f:ajax listener="#{misDatosAction.editarFormaContactoPreferida}" render="radioFormaContacto" />
</p:selectoneradio>

[Juan Gonzalez，修改在9 年前。]

Can you post the xhtml from the opened window content?

[samuel Moreno，修改在9 年前。]

Here we go:

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:portlet="http://java.sun.com/portlet_2_0" xmlns:p="http://primefaces.org/ui">

	<h:head>
		<link type="text/css" rel="stylesheet" href="/WebClientesLiferay-portlet/css/main.css">
	</h:head>

	<h:body>

	
		<h:form>

			<p:selectoneradio id="radioFormaContacto" value="#{misDatosBean.formaContactoPreferida}" layout="lineDirection" styleclass="textoDato radios">
				<f:selectitem itemValue="#{'Correo electrónico'}" itemLabel="#{bnd['email']}" />
				<f:selectitem itemValue="#{'Teléfono móvil'}" itemLabel="#{bnd['telefono']}" />
				<f:ajax listener="#{misDatosAction.editarFormaContactoPreferida}" render="radioFormaContacto" />
			</p:selectoneradio>

			


		</h:form>
	</h:body>

</f:view>

[Juan Gonzalez，修改在9 年前。]

About primefaces appearance, there are some problems due to Liferay theme css, so you have to override some of those css to show exactly the same as a plain webapp.

I could make AJAX work without any problem. See attached portlet and check if you have everything properly configured (web.xml, faces-config.xml, etc). A good practice is to create this portlets using maven archetypes or Liferay IDE, so you don't have to worry about this configurations.

[Neil Griffin，修改在9 年前。]

The reason why the PrimeFaces styling is not working is probably because the popup is a "runtime portlet" -- for more info, see the Dynamically adding JSF Portlets to Portal Pages wiki article.

[samuel Moreno，修改在9 年前。]

Hi Juan,

I found it, i think the problem is in the css.
If I deploy the portlet in a page without my custom theme, it will work fine, but if i do it in page under my theme we have the same problem.
I've tried it with your test portlet and it's the same.

Have you any idea about this? which css could produce the error?

thanks,
Samuel.